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

layout

Browse Source
This commit is contained in:
Hendrik Niefeld 2019-12-22 21:38:12 +01:00
parent f8242cdbad
commit f6c6e75a41
5 changed files with 97 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,16 +4,27 @@ save_as: index.html
template: index template: index
sitemap_priority: 1.0 sitemap_priority: 1.0
## Summary
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 *the users themselves are granted access to and ownership of their data*. <div class="mw6 ph3">
<h2 class="f25 lh-solid ma0">Summary</h2>
Usage metrics come with explanations about their meaning, relevance, usage and possible privacy implications. Offen also details *which kind of data is not collected*. All data can be deleted selectively or in its entirety by the users, or the collection can be disabled altogether. <p class="ma0 mb2">
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>
Offen treats both users and operators as parties of equal importance. Users can expect full transparency and are encouraged to make *autonomous and informed decisions regarding the use of their data*. Operators are enabled to gain insights while respecting their users' privacy and data. <p class="ma0 mb2">
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.
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 *visit the [auditorium](/auditorium/)* to access your data. </p>
</div>
<div class="btn-wrapper">
<a class="btn btn-color-yellow" href="/deep-dive/">Deep dive</a> <div class="mw6 ph3 mrgn-t">
<p class="ma0 mb2">
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 class="ma0 mb4">
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>
<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>

12
homepage/pelicanconf.py
View File

@ -48,12 +48,12 @@ 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': ['pa0', 'ma0'], 'h2': ['f25', 'ma0', 'mb3'],
'h3': ['pa0', 'ma0'], 'h3': ['ma0'],
'h4': ['pa0', 'ma0'], 'h4': ['ma0'],
'h5': ['pa0', 'ma0'], 'h5': ['ma0'],
'h6': ['pa0', 'ma0'], 'h6': ['ma0'],
'p': ['pa0', 'ma0'] 'p': ['ma0', 'mb2']
} }
GITHUB_ORG = 'https://github.com/offen' GITHUB_ORG = 'https://github.com/offen'

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

@ -4,6 +4,12 @@ CUSTOM COLORS
.cclr-mid-yellow { .cclr-mid-yellow {
background-color: #F7BF08; background-color: #F7BF08;
} }
.fnt-cclr-mid-yellow { /* font color */
color: #F7BF08;
}
.brd-cclr-mid-yellow { /* button border color */
border-color: #F7BF08;
}
.cclr-bright-yellow { .cclr-bright-yellow {
background-color: #fde28c; background-color: #fde28c;
} }
@ -47,6 +53,12 @@ LAYOUT
.w55 { .w55 {
width: 18rem; width: 18rem;
} }
/* custom margin for two-row text */
@media only screen and (min-width: 1088px) {
.mrgn-t {
margin-top: 2.8rem;
}
}
/* --------------------------------------------------- /* ---------------------------------------------------
@ -231,15 +243,13 @@ GRAPHICS
#bg-feature { #bg-feature {
background: url(/theme/images/gfx-pattern-mint-bright.svg) center; background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
} }
/*
#bg-cta-top { #bg-cta-top {
background: url(/theme/images/gfx-object-white.svg) center; background: url(/theme/images/gfx-object-white.svg) center;
} }
#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;
} }

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

@ -120,36 +120,40 @@
{% endblock %} {% endblock %}
<!-- Footer ######################################################### --> <!-- Footer ######################################################### -->
<div class="w-100 cclr-mid-black gray"> <!--footer--> <div class="w-100 cclr-mid-black gray"> <!--footer-->
<div class="flex justify-between"> <div class="flex-l justify-between pt4 pb6 ph4">
<div class="w-20">
<h3 class="pa0 ma0">Offen</h3> <div class="flex w-auto">
<h4 class="pa0 ma0">Transparent web analytics</h4> <div class="w5 mr3 fnt-cclr-mid-yellow">
<h4 class="pa0 ma0">for everyone</h4> <p class="ma0">Offen</h3>
<p class="ma0">Transparent web analytics</h4>
<p class="ma0">for everyone</h4>
</div>
<div class="w5 mr4">
<p class="ma0">
<a class="link b dim gray" href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
<a class="link b dim gray" target="_blank" href="/theme/{{ GPG_KEY_FILE }}">[GPG Key]</a>
</p>
<p class="ma0">
<a class="link b dim gray" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
</p>
<p class="ma0">
<a class="link b dim gray" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
</p>
</div>
<div class="w5">
<p class="ma0">
<a class="link b dim gray" href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
</p>
<p class="ma0">
<a class="link b dim gray" href="{{ TWITTER_URL }}" rel="noopener" target="_blank">Twitter</a>
</p>
<p class="ma0">
<a class="link b dim gray" href="/legal-notice/">Legal Notice</a>
</p>
</div>
</div> </div>
<div class="w-15">
<p class="pa0 ma0"> <div class="tr">
<a href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
<a target="_blank" href="/theme/{{ GPG_KEY_FILE }}">[GPG Key]</a>
</p>
<p class="pa0 ma0">
<a href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
</p>
<p class="pa0 ma0">
<a href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
</p>
</div>
<div class="w-15">
<p class="pa0 ma0">
<a href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
</p>
<p class="pa0 ma0">
<a href="{{ TWITTER_URL }}" rel="noopener" target="_blank">Twitter</a>
</p>
<p class="pa0 ma0">
<a href="/legal-notice/">Legal Notice</a>
</p>
</div>
<div class="w-50 tr">
{{ BUILD_DATE }} {{ BUILD_DATE }}
</div> </div>
</div> </div>

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

@ -2,8 +2,8 @@
{% block content %} {% block content %}
<div class="w-100 cclr-mid-yellow"> <!--intro--> <div class="w-100 cclr-mid-yellow"> <!--intro-->
<div class="w-100 mt5 mb0" id="bg-intro"> <div class="w-100 mt5 mb0 ph4" id="bg-intro">
<div class="flex justify-center pt6"> <div class="flex justify-center pt6 ph4">
<div class="mw5 tr pr4"> <div class="mw5 tr pr4">
<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>
@ -23,27 +23,27 @@
</div> </div>
<div class="w-100 cclr-mid-mint"> <!--feature--> <div class="w-100 cclr-mid-mint"> <!--feature-->
<div class="w-100 pt3 pb6" id="bg-feature"> <div class="pt3 pb6 ph3" id="bg-feature">
<div class="mw8 center"> <div class="mw8 center">
<div class="flex flex-wrap justify-around"> <div class="flex flex-wrap justify-around">
<div class="w55 mh3 mt5"> <div class="w55 mh3 pt5">
<h2 class="f25 ma0 mb3"> <h2 class="f25 lh-solid ma0 mb3">
<em>Free & Open</em> <em>Free & Open</em>
</h2> </h2>
<p class="ma0"> <p class="ma0">
Anyone can audit our open source code to verify it works as intended. Offen will always be available free of charge. Anyone can audit our open source code to verify it works as intended. Offen will always be available free of charge.
</p> </p>
</div> </div>
<div class="w55 mh3 mt5"> <div class="w55 mh3 pt5">
<h2 class="f25 ma0 mb3"> <h2 class="f25 lh-solid ma0 mb3">
<em>Fair & Secure</em> <em>Fair & Secure</em>
</h2> </h2>
<p class="ma0"> <p class="ma0">
Pay respect to your website visitors and gain insights as a user at the same time. All data is encrypted end-to-end. Pay respect to your website visitors and gain insights as a user at the same time. All data is encrypted end-to-end.
</p> </p>
</div> </div>
<div class="w55 mh3 mt5"> <div class="w55 mh3 pt5">
<h2 class="f25 ma0 mb3"> <h2 class="f25 lh-solid ma0 mb3">
<em>Easy to use</em> <em>Easy to use</em>
</h2> </h2>
<p class="ma0"> <p class="ma0">
@ -57,43 +57,41 @@
<div class="w-100 cclr-mid-black white"> <!--cta-top--> <div class="w-100 cclr-mid-black white"> <!--cta-top-->
<div class="w-100" id="bg-cta-top"> <div class="pt3 pb6 ph4" id="bg-cta-top">
<div class="mw8 center"> <div class="flex justify-end mw6 center pt5">
<div class="mw6 center tr"> <div class="w55 tr">
<h2 class="ma0"> <h2 class="f25 lh-solid ma0 mb3">
In the making In the making
</h2> </h2>
<p class="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="ma0"> <a class="b link dim ph4 pv2 dib b--solid bw2 b--white white" href="/blog/">Project status</a>
<a class="btn btn-color-white" href="/blog/">Project status</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="w-100 bg-white mid-grey"> <!--content-index-->
<div class="mw6 center"> <div class="w-100 bg-white gray"> <!--content-index-->
<div class="flex flex-wrap justify-center pt5 pb6 ph3">
{{ page.content }} {{ page.content }}
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
{% block outro %} {% block outro %}
<div class="w-100 cclr-mid-yellow"> <!--outro--> <div class="w-100 cclr-mid-yellow"> <!--outro-->
<div class="w-100" id="bg-outro"> <div class="pt3 pb6 ph4" id="bg-outro">
<div class="mw8 center"> <div class="flex justify-end mw6 center pt5">
<div class="mw6 center tr"> <div class="w55 tr">
<h2 class="ma0"> <h2 class="f25 lh-solid ma0 mb3">
Ethical internet Ethical internet
</h2> </h2>
<p class="ma0"> <p class="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="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>