mirror of
https://github.com/offen/website.git
synced 2024-11-22 17:10:29 +01:00
layout
This commit is contained in:
parent
f8242cdbad
commit
f6c6e75a41
@ -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>
|
||||||
@ -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'
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
<div class="w-15">
|
<div class="w5 mr4">
|
||||||
<p class="pa0 ma0">
|
<p class="ma0">
|
||||||
<a href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
|
<a class="link b dim gray" href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
|
||||||
<a target="_blank" href="/theme/{{ GPG_KEY_FILE }}">[GPG Key]</a>
|
<a class="link b dim gray" target="_blank" href="/theme/{{ GPG_KEY_FILE }}">[GPG Key]</a>
|
||||||
</p>
|
</p>
|
||||||
<p class="pa0 ma0">
|
<p class="ma0">
|
||||||
<a href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
|
<a class="link b dim gray" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
|
||||||
</p>
|
</p>
|
||||||
<p class="pa0 ma0">
|
<p class="ma0">
|
||||||
<a href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
|
<a class="link b dim gray" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-15">
|
<div class="w5">
|
||||||
<p class="pa0 ma0">
|
<p class="ma0">
|
||||||
<a href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
|
<a class="link b dim gray" href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
|
||||||
</p>
|
</p>
|
||||||
<p class="pa0 ma0">
|
<p class="ma0">
|
||||||
<a href="{{ TWITTER_URL }}" rel="noopener" target="_blank">Twitter</a>
|
<a class="link b dim gray" href="{{ TWITTER_URL }}" rel="noopener" target="_blank">Twitter</a>
|
||||||
</p>
|
</p>
|
||||||
<p class="pa0 ma0">
|
<p class="ma0">
|
||||||
<a href="/legal-notice/">Legal Notice</a>
|
<a class="link b dim gray" href="/legal-notice/">Legal Notice</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-50 tr">
|
</div>
|
||||||
|
|
||||||
|
<div class="tr">
|
||||||
{{ BUILD_DATE }}
|
{{ BUILD_DATE }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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="w-100 bg-white gray"> <!--content-index-->
|
||||||
<div class="mw6 center">
|
<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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user