offen/website
2
0
Fork 0
mirror of https://github.com/offen/website.git synced 2024-10-18 20:20:24 +02:00
Code Issues Projects Releases Wiki Activity

layout

Browse Source
This commit is contained in:
Hendrik Niefeld 2019-12-22 15:22:13 +01:00
parent 940c011d6f
commit a09795a787
4 changed files with 74 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
homepage/pelicanconf.py
View File

@ -46,9 +46,9 @@ ARTICLE_SAVE_AS = 'blog/{slug}/index.html'
PLUGIN_PATHS = ['./plugins'] PLUGIN_PATHS = ['./plugins']
PLUGINS = ['decorate_content', 'assets'] PLUGINS = ['decorate_content', 'assets']
DECORATE_CONTENT = {
# maps any CSS selector to a list of classes to be added # maps any CSS selector to a list of classes to be added
# 'p': ['pv0', 'dim'] DECORATE_CONTENT = {
'p': ['pa0', 'ma0']
} }
GITHUB_ORG = 'https://github.com/offen' GITHUB_ORG = 'https://github.com/offen'

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

@ -1,22 +1,25 @@
/* --------------------------------------------------- /* ---------------------------------------------------
CUSTOM COLORS CUSTOM COLORS
----------------------------------------------------*/ ----------------------------------------------------*/
.cclr-yellow-mid { .cclr-mid-yellow {
background-color: #F7BF08; background-color: #F7BF08;
} }
.cclr-yellow-bright { .cclr-bright-yellow {
background-color: #fde28c; background-color: #fde28c;
} }
.cclr-mint-mid { .cclr-mid-mint {
background-color: #BBD9D3; background-color: #BBD9D3;
} }
.cclr-black-mid { .cclr-mid-black {
background-color: #39352A; background-color: #39352A;
} }
.cclr-grey-mid { .fnt-cclr-mid-black { /* font color */
color: #39352A;
}
.cclr-mid-grey {
background-color: #898989; background-color: #898989;
} }
.cclr-grey-bright { .cclr-bright-grey {
background-color: #D5D5D5; background-color: #D5D5D5;
} }
@ -26,7 +29,7 @@ LAYOUT
----------------------------------------------------*/ ----------------------------------------------------*/
.menu { .menu {
width: 100%; width: 100%;
height: 70px; height: 64px; /* mt5 */
position: fixed; position: fixed;
z-index: 1; z-index: 1;
top: 0; top: 0;

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

@ -32,9 +32,9 @@
{% endif %} {% endif %}
</head> </head>
{% endblock %} {% endblock %}
<body class="{{ template }} f5 sans-serif dark-gray"> <body class="{{ template }} f5 sans-serif fnt-cclr-mid-black">
<!-- Menu ######################################################### --> <!-- Menu ######################################################### -->
<div class="menu cclr-yellow-mid"> <!--menu--> <div class="menu w100 cclr-mid-yellow"> <!--menu-->
<section class="nav-bar"> <section class="nav-bar">
<div class="nav-container"> <div class="nav-container">
<div class="icon"> <div class="icon">
@ -68,48 +68,48 @@
</div> </div>
<!-- Content ######################################################### --> <!-- Content ######################################################### -->
{% block content %} {% block content %}
<div class="content"> <div class="w100 bg-white mid-grey">
<div class="container-reader"> <div class="mw6 center">
{{ content }} {{ content }}
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
{% block outro %} {% block outro %}
<div class="cta-bottom"> <div class="w100 cclr-mid-yellow"> <!--cta-bottom-->
<div class="bg" id="bg-cta-bottom"> <div class="w100" id="bg-cta-bottom">
<div class="container-full"> <div class="mw8 center">
<div class="card-deck"> <div class="card-deck">
<div class="card"> <div class="card">
<h2> <h2 class="pa0 ma0">
Participate Participate
</h2> </h2>
<p> <p class="pa0 ma0">
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="btn-wrapper"> <div class="pa0 ma0">
<a class="btn btn-color-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>
<div class="card"> <div class="card">
<h2> <h2 class="pa0 ma0">
In the making In the making
</h2> </h2>
<p> <p class="pa0 ma0">
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="btn-wrapper"> <div class="pa0 ma0">
<a class="btn btn-color-black" href="/blog/">Project status</a> <a class="btn btn-color-black" href="/blog/">Project status</a>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<h2> <h2 class="pa0 ma0">
Ethical internet Ethical internet
</h2> </h2>
<p> <p class="pa0 ma0">
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="btn-wrapper"> <div class="pa0 ma0">
<a class="btn btn-color-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>
@ -119,33 +119,33 @@
</div> </div>
{% endblock %} {% endblock %}
<!-- Footer ######################################################### --> <!-- Footer ######################################################### -->
<div class="footer"> <div class="w100 cclr-mid-black gray"> <!--footer-->
<div class="footer-card-deck"> <div class="footer-card-deck">
<div class="footer-card"> <div class="footer-card">
<h3>Offen</h3> <h3 class="pa0 ma0">Offen</h3>
<h4>Transparent web analytics</h4> <h4 class="pa0 ma0">Transparent web analytics</h4>
<h4>for everyone</h4> <h4 class="pa0 ma0">for everyone</h4>
</div> </div>
<div class="footer-card"> <div class="footer-card">
<p> <p class="pa0 ma0">
<a href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a> <a href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
<a target="_blank" href="/theme/{{ GPG_KEY_FILE }}">[GPG Key]</a> <a target="_blank" href="/theme/{{ GPG_KEY_FILE }}">[GPG Key]</a>
</p> </p>
<p> <p class="pa0 ma0">
<a href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a> <a href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
</p> </p>
<p> <p class="pa0 ma0">
<a href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a> <a href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
</p> </p>
</div> </div>
<div class="footer-card"> <div class="footer-card">
<p> <p class="pa0 ma0">
<a href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a> <a href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
</p> </p>
<p> <p class="pa0 ma0">
<a href="{{ TWITTER_URL }}" rel="noopener" target="_blank">Twitter</a> <a href="{{ TWITTER_URL }}" rel="noopener" target="_blank">Twitter</a>
</p> </p>
<p> <p class="pa0 ma0">
<a href="/legal-notice/">Legal Notice</a> <a href="/legal-notice/">Legal Notice</a>
</p> </p>
</div> </div>

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

@ -1,52 +1,50 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div class="w100 cclr-yellow-mid"> <!--intro--> <div class="w100 cclr-mid-yellow mt5 mb0 pa0"> <!--intro-->
<div class="w100" id="bg-intro"> <div class="w100" id="bg-intro">
<div class="mw8 center"> <div class="mw6 center">
<div class="mw6"> <div class="pa0 ma0">
<div class="sign">
<img src="/theme/images/offen-logo-white.svg" alt="Offen logo" width="152" height="94"> <img src="/theme/images/offen-logo-white.svg" alt="Offen logo" width="152" height="94">
</div> </div>
<h1> <h1 class="pa0 ma0">
<em>Transparent web analytics for operators and users</em> <em>Transparent web analytics for operators and users</em>
</h1> </h1>
<p> <p class="pa0 ma0">
Offen is a free and open source analytics software for websites and web applications that allows respectful handling of data. Offen is a free and open source analytics software for websites and web applications that allows respectful handling of data.
</p> </p>
<div class="btn-wrapper"> <div class="pa0 ma0">
<a class="btn btn-color-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>
</div> </div>
</div> </div>
</div>
<div class="w100 cclr-mint-mid"> <!--feature--> <div class="w100 cclr-mid-mint"> <!--feature-->
<div class="w100" id="bg-feature"> <div class="w100" id="bg-feature">
<div class="mw8 center"> <div class="mw8 center">
<div class="card-deck"> <div class="card-deck">
<div class="card"> <div class="card">
<h2> <h2 class="pa0 ma0">
<em>Free & Open</em> <em>Free & Open</em>
</h2> </h2>
<p> <p class="pa0 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="card"> <div class="card">
<h2> <h2 class="pa0 ma0">
<em>Fair & Secure</em> <em>Fair & Secure</em>
</h2> </h2>
<p> <p class="pa0 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="card"> <div class="card">
<h2> <h2 class="pa0 ma0">
<em>Easy to use</em> <em>Easy to use</em>
</h2> </h2>
<p> <p class="pa0 ma0">
Simply paste our code into the source of your website. Users can visit the auditorium to access their data. Simply paste our code into the source of your website. Users can visit the auditorium to access their data.
</p> </p>
</div> </div>
@ -56,42 +54,42 @@
</div> </div>
<div class="cta-top"> <div class="w100 cclr-mid-black white"> <!--cta-top-->
<div class="bg" id="bg-cta-top"> <div class="w100" id="bg-cta-top">
<div class="container-reader"> <div class="mw8 center">
<div class="spacer-right"> <div class="mw6 center tr">
<h2> <h2 class="pa0 ma0">
In the making In the making
</h2> </h2>
<p> <p class="pa0 ma0">
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="btn-wrapper"> <div class="pa0 ma0">
<a class="btn btn-color-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>
<div class="content-index"> <div class="w100 bg-white mid-grey"> <!--content-index-->
<div class="container-reader"> <div class="mw6 center">
{{ page.content }} {{ page.content }}
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
{% block outro %} {% block outro %}
<div class="outro"> <div class="w100 cclr-mid-yellow"> <!--outro-->
<div class="bg" id="bg-outro"> <div class="w100" id="bg-outro">
<div class="container-reader"> <div class="mw8 center">
<div class="spacer-right"> <div class="mw6">
<h2> <h2 class="pa0 ma0">
Ethical internet Ethical internet
</h2> </h2>
<p> <p class="pa0 ma0">
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="btn-wrapper"> <div class="pa0 ma0">
<a class="btn btn-color-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>