offen/website
2
0
Fork 0
mirror of https://github.com/offen/website.git synced 2024-11-22 09:00:28 +01:00
Code Issues Projects Releases Wiki Activity

content

Browse Source
This commit is contained in:
Hendrik Niefeld 2019-12-23 15:16:20 +01:00
parent f198fb29f4
commit 566364449b
7 changed files with 78 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
homepage/content/articles/milestone-1.md
View File

@ -5,25 +5,27 @@ slug: laying-foundation-for-fair-web-analytics
sitemap_priority: 0.7 sitemap_priority: 0.7
sm_image_url: /theme/images/offen-blog-0010-milestone1.jpg sm_image_url: /theme/images/offen-blog-0010-milestone1.jpg
![Milestone 1 - Laying the foundation for fair web analytics](/theme/images/offen-blog-0010-milestone1.jpg){:class="image-text-600-322"} <img alt="Milestone 1 - Laying the foundation for fair web analytics" class="mb5" src="/theme/images/offen-blog-0010-milestone1.jpg"/>
12 Dec 2019, Hendrik Niefeld ###### 12 Dec 2019, Hendrik Niefeld
## Episode One — Laying the foundation for fair web analytics ## Episode One — Laying the foundation for fair web analytics
Milestone 1 is completed. This is what we've achieved in the last six weeks. Milestone 1 is completed. This is what we've achieved in the last six weeks.
---
### Extension through middleware ### Extension through middleware
We have further refined the existing application architecture to make it more robust and accessible to both contributors and people who want to build upon Offen. As a developer, you can transparently control additional behavior by adding or removing middleware. We have further refined the existing application architecture to make it more robust and accessible to both contributors and people who want to build upon Offen. As a developer, you can transparently control additional behavior by adding or removing middleware.
### Easy to test drive ### Easy to test drive
Download a single binary file and run it on your local computer to get an Offen instance up and running immediately. At the moment this setup only supports Linux. Windows and MacOS will follow soon. Download a single binary file and run it on your local computer to get an Offen instance up and running immediately. At the moment this setup only supports Linux. Windows and MacOS will follow soon.
<div class="btn-wrapper-article"> <div class="mb5">
<a class="btn btn-color-yellow" target="_blank" href="https://8342-180605180-gh.circle-artifacts.com/0/tmp/artifacts/offen-stable.tar.gz">Download binary</a> <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" target="_blank" href="https://8342-180605180-gh.circle-artifacts.com/0/tmp/artifacts/offen-stable.tar.gz">Download binary</a>
</div> </div>
### Develop without complex setup ### Develop without complex setup
Docker and Docker-Compose are the only hard requirement for you to develop Offen. We have successfully tested this setup under Linux, Windows and MacOS. Head over to our wiki for instructions how to get the setup up and running. Docker and Docker-Compose are the only hard requirement for you to develop Offen. We have successfully tested this setup under Linux, Windows and MacOS. Head over to our wiki for instructions how to get the setup up and running.
<div class="btn-wrapper-article"> <div class="mb5">
<a class="btn btn-color-yellow" target="_blank" href="https://github.com/offen/offen/wiki/Developing-offen#setup">Open wiki</a> <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" target="_blank" href="https://github.com/offen/offen/wiki/Developing-offen#setup">Open wiki</a>
</div> </div>
### Lightweight and accessible interfaces ### Lightweight and accessible interfaces
@ -31,8 +33,8 @@ The *Auditorium* is ready for a dry run. It's a functional prototype for accessi
### Ready to localize ### Ready to localize
You can now localize all user-related content in server- and client-side applications. At the moment English is the only supported locale, but we would be happy to add more locales soon. Contributors wanted after milestone 3 is completed. You can now localize all user-related content in server- and client-side applications. At the moment English is the only supported locale, but we would be happy to add more locales soon. Contributors wanted after milestone 3 is completed.
<div class="btn-wrapper-article"> <div class="mb5">
<a class="btn btn-color-yellow" href="mailto:hioffen@posteo.de">Get in touch</a> <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" href="mailto:hioffen@posteo.de">Get in touch</a>
</div> </div>
### Read the docs ### Read the docs
@ -48,6 +50,6 @@ We have further hardened and improved the HTTP server that Offen exposes. If you
### Deep dive ### Deep dive
Interested in the details? Want to get your hands dirty? Head over to our GitHub repo. Interested in the details? Want to get your hands dirty? Head over to our GitHub repo.
<div class="btn-wrapper-article"> <div class="mb5">
<a class="btn btn-color-black" target="_blank" href="https://github.com/offen/offen/pull/192">Open milestone 1 pull</a> <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" target="_blank" href="https://github.com/offen/offen/pull/192">Open milestone 1 pull</a>
</div> </div>

7
homepage/content/pages/about.md
View File

@ -12,15 +12,18 @@ Offen is created by [Frederik Ring][frederik-ring]{: target="_blank"} and [Hendr
[hendrik-niefeld]: http://niefeld.com/ [hendrik-niefeld]: http://niefeld.com/
[frederik-ring]: https://www.frederikring.com/ [frederik-ring]: https://www.frederikring.com/
[![NLnet Foundation](/theme/images/nlnet-logo.svg){:width="160px" height="60px" class="image-text-custom"}](https://nlnet.nl/){: target="_blank"} [![NLnet Foundation](/theme/images/nlnet-logo.svg){:width="160px" height="60px" class="mt4"}](https://nlnet.nl/){: target="_blank"}
We are happy to work with [NLnet Foundation][nlnet-foundation]{: target="_blank"} who complement our activities within their [Next Generation Internet][next-generation-internet]{: target="_blank"} initiative. We are happy to work with [NLnet Foundation][nlnet-foundation]{: target="_blank"} who complement our activities within their [Next Generation Internet][next-generation-internet]{: target="_blank"} initiative.
[nlnet-foundation]: https://nlnet.nl/ [nlnet-foundation]: https://nlnet.nl/
[next-generation-internet]: https://nlnet.nl/NGI/ [next-generation-internet]: https://nlnet.nl/NGI/
---
### Contact ### Contact
*Feel free to contact us with any kind of feedback.* From criticism and praise to contributions or support, everything is welcome. Get in touch. *Feel free to contact us with any kind of feedback.* From criticism and praise to contributions or support, everything is welcome. Get in touch.
[hioffen@posteo.de](mailto:hioffen@posteo.de) [[GPG Key]](/theme/74B041E23DB29D552644CEB1B18C633D6967FE3F.asc){: target="_blank"} [hioffen@posteo.de](mailto:hioffen@posteo.de)
[Email GPG Key](/theme/74B041E23DB29D552644CEB1B18C633D6967FE3F.asc){: target="_blank"}

15
homepage/content/pages/index.md
View File

@ -6,25 +6,26 @@ sitemap_priority: 1.0
<div class="mw6 ph3"> <div class="mw6 ph3">
<h2 class="f25 lh-solid ma0">Summary</h2> <h2>Summary</h2>
<p class="ma0 mb2"> <p>
Offen is a web analytics software that gives users access to the data they are generating. Not only operators running sites or applications are given able to use the analytics tools, but also <em>the users themselves are granted access to and ownership of their data.</em> Offen is a web analytics software that gives users access to the data they are generating. Not only operators running sites or applications are given able to use the analytics tools, but also <em>the users themselves are granted access to and ownership of their data.</em>
</p> </p>
<p class="ma0 mb2"> <p>
Usage metrics come with explanations about their meaning, relevance, usage and possible privacy implications. Offen also details <em>which kind of data is not collected.</em> All data can be deleted selectively or in its entirety by the users, or the collection can be disabled altogether. Usage metrics come with explanations about their meaning, relevance, usage and possible privacy implications. Offen also details <em>which kind of data is not collected.</em> All data can be deleted selectively or in its entirety by the users, or the collection can be disabled altogether.
</p> </p>
</div> </div>
<div class="mw6 ph3 mrgn-t"> <div class="mw6 ph3 mrgn-t">
<p class="ma0 mb2"> <p>
Offen treats both users and operators as parties of equal importance. Users can expect full transparency and are encouraged to make <em>autonomous and informed decisions regarding the use of their data.</em> Operators are enabled to gain insights while respecting their users' privacy and data. Offen treats both users and operators as parties of equal importance. Users can expect full transparency and are encouraged to make <em>autonomous and informed decisions regarding the use of their data.</em> Operators are enabled to gain insights while respecting their users' privacy and data.
</p> </p>
<p class="ma0 mb4"> <p>
Offen is currently in the early stages of development and is applying for funds to sustain its development. An early alpha version is running on this site: you can <em>visit the [auditorium](/auditorium/)</em> to access your data. Offen is currently in the early stages of development and is applying for funds to sustain its development. An early alpha version is running on this site: you can <em>visit the [auditorium](/auditorium/)</em> to access your data.
</p> </p>
<div class="mt3">
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" href="/deep-dive/">Deep dive</a> <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" href="/deep-dive/">Deep dive</a>
</div>
</div> </div>

13
homepage/pelicanconf.py
View File

@ -48,12 +48,15 @@ PLUGINS = ['decorate_content', 'assets']
# maps any CSS selector to a list of classes to be added # maps any CSS selector to a list of classes to be added
DECORATE_CONTENT = { DECORATE_CONTENT = {
'h2': ['f25', 'ma0', 'mb3'], 'h2': ['f25', 'ma0', 'mb3', 'light-silver'],
'h3': ['ma0'], 'h3': ['f5', 'normal', 'mt4', 'ma0', 'mb3', 'fnt-cclr-mid-black'],
'h4': ['ma0'], 'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb3'],
'h5': ['ma0'], 'h5': ['ma0'],
'h6': ['ma0'], 'h6': ['f5', 'lh-solid', 'normal', 'i', 'ma0', 'mb3', 'light-silver'],
'p': ['ma0', 'mb2'] 'p': ['ma0', 'pb3'],
'a': ['link', 'b', 'dim', 'gray'],
'blockquote': ['f5', 'i', 'ma0', 'ml4'],
'hr': ['m0a', 'mt5', 'mb3', 'b--black-05']
} }
GITHUB_ORG = 'https://github.com/offen' GITHUB_ORG = 'https://github.com/offen'

43
homepage/theme/static/css/fix.css
View File

@ -3,35 +3,38 @@ COLORS
----------------------------------------------------*/ ----------------------------------------------------*/
/* Custom Tachyons classes */ /* Custom Tachyons classes */
.cclr-mid-yellow { .cclr-mid-yellow {
background-color: #F7BF08; background-color: #F7BF08;
} }
.fnt-cclr-mid-yellow { /* font color */ .fnt-cclr-mid-yellow {
color: #F7BF08; color: #F7BF08;
} }
.brd-cclr-mid-yellow { /* button border color */ .brd-cclr-mid-yellow {
border-color: #F7BF08; border-color: #F7BF08;
} }
.cclr-bright-yellow { .cclr-bright-yellow {
background-color: #fde28c; background-color: #fde28c;
} }
.cclr-mid-mint { .cclr-mid-mint {
background-color: #BBD9D3; background-color: #BBD9D3;
} }
.cclr-mid-black { .cclr-mid-black {
background-color: #39352A; background-color: #39352A;
} }
.fnt-cclr-mid-black { /* font color */ .fnt-cclr-mid-black {
color: #39352A; color: #39352A;
} }
.brd-cclr-mid-black { /* button border color */ .brd-cclr-mid-black {
border-color: #39352A; border-color: #39352A;
} }
.cclr-mid-grey { .cclr-mid-grey {
background-color: #898989; background-color: #898989;
} }
.cclr-bright-grey { .cclr-bright-grey {
background-color: #D5D5D5; background-color: #D5D5D5;
} }
.cclr-dark-white {
background-color: #f9f7f2;
}
/* --------------------------------------------------- /* ---------------------------------------------------
@ -55,11 +58,17 @@ LAYOUT
.w55 { .w55 {
width: 18rem; width: 18rem;
} }
/* Custom media query - extra small */
@media only screen and (max-width: 30em) {
.w55 {
width: 100%;
}
}
/* Custom media query - extra large */ /* Custom media query - extra large */
@media only screen and (min-width: 68em) { @media only screen and (min-width: 68em) {
/* Custom Tachyons class - margin for two-row text */ /* Custom Tachyons class - margin for two-row text */
.mrgn-t { .mrgn-t {
margin-top: 2.8rem; margin-top: 3.8rem;
} }
} }
@ -260,8 +269,6 @@ GRAPHICS
#bg-outro { #bg-outro {
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center; background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
} }
/*
#bg-cta-bottom { #bg-cta-bottom {
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center; background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
} }
*/

42
homepage/theme/templates/base.html
View File

@ -32,7 +32,7 @@
{% endif %} {% endif %}
</head> </head>
{% endblock %} {% endblock %}
<body class="{{ template }} f5 sans-serif lh-copy fnt-cclr-mid-black"> <body class="{{ template }} f5 sans-serif lh-copy fnt-cclr-mid-black cclr-dark-white">
<!-- Menu ######################################################### --> <!-- Menu ######################################################### -->
<div class="menu w-100 cclr-mid-yellow"> <!-- menu --> <div class="menu w-100 cclr-mid-yellow"> <!-- menu -->
<section class="nav-bar"> <section class="nav-bar">
@ -68,8 +68,8 @@
</div> </div>
<!-- Content ######################################################### --> <!-- Content ######################################################### -->
{% block content %} {% block content %}
<div class="w-100 mt5-ns bg-white mid-grey"> <!-- content --> <div class="w-100 mt5-ns gray"> <!-- content -->
<div class="mw6 center"> <div class="mw7 center pt5 pb6 ph3 ph5-ns bg-white">
{{ content }} {{ content }}
</div> </div>
</div> </div>
@ -77,41 +77,35 @@
{% block outro %} {% block outro %}
<div class="w-100 cclr-mid-yellow"> <!--cta-bottom--> <div class="w-100 cclr-mid-yellow"> <!--cta-bottom-->
<div class="w-100" id="bg-cta-bottom"> <div class="pt3 pb6 ph3" id="bg-cta-bottom">
<div class="mw8 center"> <div class="mw8 center">
<div class="flex flex-wrap justify-around"> <div class="flex flex-wrap justify-around">
<div class="w5"> <div class="w55 mh3 pt5">
<h2 class="pa0 ma0"> <h2 class="f25 lh-solid ma0 mb3">
Participate Participate
</h2> </h2>
<p class="pa0 ma0"> <p class="ma0 mb4">
Development of Offen has just started. Do not hesitate to make a contribution and help us handle data with respect. Development of Offen has just started. Do not hesitate to make a contribution and help us handle data with respect.
</p> </p>
<div class="pa0 ma0"> <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
<a class="btn btn-color-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
</div>
</div> </div>
<div class="w5"> <div class="w55 mh3 pt5">
<h2 class="pa0 ma0"> <h2 class="f25 lh-solid ma0 mb3">
In the making In the making
</h2> </h2>
<p class="pa0 ma0"> <p class="ma0 mb4">
Offen is still in alpha. Discover what is already up and running and where we want to go in the coming months. Offen is still in alpha. Discover what is already up and running and where we want to go in the coming months.
</p> </p>
<div class="pa0 ma0"> <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="/blog/">Project status</a>
<a class="btn btn-color-black" href="/blog/">Project status</a>
</div>
</div> </div>
<div class="w5"> <div class="w55 mh3 pt5">
<h2 class="pa0 ma0"> <h2 class="f25 lh-solid ma0 mb3">
Ethical internet Ethical internet
</h2> </h2>
<p class="pa0 ma0"> <p class="ma0 mb4">
We're working hard to ensure that Offen is independent, cutting-edge and can be sustained for years to come. We're working hard to ensure that Offen is independent, cutting-edge and can be sustained for years to come.
</p> </p>
<div class="pa0 ma0"> <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Support us</a>
<a class="btn btn-color-black" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Support us</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -119,8 +113,8 @@
</div> </div>
{% endblock %} {% endblock %}
<!-- Footer ######################################################### --> <!-- Footer ######################################################### -->
<div class="w-100 cclr-mid-black gray"> <!--footer--> <div class="w-100 cclr-mid-black gray ph4"> <!--footer-->
<div class="flex flex-row-l flex-column w-100-l w-80 center pt4 pb6 ph4"> <div class="flex flex-row-l flex-column w-100-l mw6-m center-m pt4 pb6">
<div class="w-25-l mt3 mr3 fnt-cclr-mid-yellow"> <div class="w-25-l mt3 mr3 fnt-cclr-mid-yellow">
<p class="ma0">Offen</h3> <p class="ma0">Offen</h3>
<p class="ma0">Transparent web analytics</h4> <p class="ma0">Transparent web analytics</h4>

4
homepage/theme/templates/index.html
View File

@ -4,7 +4,7 @@
<div class="w-100 mt5-ns cclr-mid-yellow"> <!-- menu --> <div class="w-100 mt5-ns cclr-mid-yellow"> <!-- menu -->
<div class="mw8 center" id="bg-intro"> <div class="mw8 center" id="bg-intro">
<div class="flex flex-wrap pt6-ns pt-3 ph4"> <div class="flex flex-wrap pt6-ns pt-3 ph4">
<div class="mw5 pr4"> <div class="mw5 pr4 pb3">
<img src="/theme/images/offen-logo-white.svg" alt="Offen logo" width="146" height="90"> <img src="/theme/images/offen-logo-white.svg" alt="Offen logo" width="146" height="90">
</div> </div>
<div class="mw6"> <div class="mw6">
@ -73,7 +73,7 @@
</div> </div>
<div class="w-100 bg-white gray"> <!--content-index--> <div class="w-100 bg-white gray"> <!--content-index-->
<div class="flex flex-wrap justify-center pt5 pb6 ph3"> <div class="flex flex-wrap justify-center pt5 pb6">
{{ page.content }} {{ page.content }}
</div> </div>
</div> </div>