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 19:02:00 +01:00
parent a09795a787
commit f8242cdbad
5 changed files with 162 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
homepage/pelicanconf.py
View File

@ -48,6 +48,11 @@ 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'],
'h3': ['pa0', 'ma0'],
'h4': ['pa0', 'ma0'],
'h5': ['pa0', 'ma0'],
'h6': ['pa0', 'ma0'],
'p': ['pa0', 'ma0'] 'p': ['pa0', 'ma0']
} }

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

@ -16,6 +16,9 @@ CUSTOM COLORS
.fnt-cclr-mid-black { /* font color */ .fnt-cclr-mid-black { /* font color */
color: #39352A; color: #39352A;
} }
.brd-cclr-mid-black { /* button border color */
border-color: #39352A;
}
.cclr-mid-grey { .cclr-mid-grey {
background-color: #898989; background-color: #898989;
} }
@ -41,8 +44,25 @@ LAYOUT
position: static; position: static;
} }
} }
.w55 {
width: 18rem;
}
/* ---------------------------------------------------
TYPO
----------------------------------------------------*/
.f25 {
font-size: 1.9rem;
}
span {
display: table;
}
em {
background: linear-gradient(transparent 66%, #fde28c 66%);
font-style: normal;
}
/* --------------------------------------------------- /* ---------------------------------------------------
@ -200,3 +220,27 @@ nav ul li ul li a {
#nav-toggle.active span:after { #nav-toggle.active span:after {
transform: rotate(-45deg); transform: rotate(-45deg);
} }
/* ---------------------------------------------------
GRAPHICS
----------------------------------------------------*/
#bg-intro {
background: url(/theme/images/gfx-intro.svg) no-repeat center;
}
#bg-feature {
background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
}
/*
#bg-cta-top {
background: url(/theme/images/gfx-object-white.svg) center;
}
#bg-outro {
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
}
#bg-cta-bottom {
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
}
*/

57
homepage/theme/static/images/gfx-intro.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 85 KiB

After

Width:  |  Height:  |  Size: 116 KiB

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

@ -32,9 +32,9 @@
{% endif %} {% endif %}
</head> </head>
{% endblock %} {% endblock %}
<body class="{{ template }} f5 sans-serif fnt-cclr-mid-black"> <body class="{{ template }} f5 sans-serif lh-copy fnt-cclr-mid-black">
<!-- Menu ######################################################### --> <!-- Menu ######################################################### -->
<div class="menu w100 cclr-mid-yellow"> <!--menu--> <div class="menu w-100 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,7 +68,7 @@
</div> </div>
<!-- Content ######################################################### --> <!-- Content ######################################################### -->
{% block content %} {% block content %}
<div class="w100 bg-white mid-grey"> <div class="w-100 mt5 bg-white mid-grey">
<div class="mw6 center"> <div class="mw6 center">
{{ content }} {{ content }}
</div> </div>
@ -76,11 +76,11 @@
{% endblock %} {% endblock %}
{% block outro %} {% block outro %}
<div class="w100 cclr-mid-yellow"> <!--cta-bottom--> <div class="w-100 cclr-mid-yellow"> <!--cta-bottom-->
<div class="w100" id="bg-cta-bottom"> <div class="w-100" id="bg-cta-bottom">
<div class="mw8 center"> <div class="mw8 center">
<div class="card-deck"> <div class="flex flex-wrap justify-around">
<div class="card"> <div class="w5">
<h2 class="pa0 ma0"> <h2 class="pa0 ma0">
Participate Participate
</h2> </h2>
@ -91,7 +91,7 @@
<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="w5">
<h2 class="pa0 ma0"> <h2 class="pa0 ma0">
In the making In the making
</h2> </h2>
@ -102,7 +102,7 @@
<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="w5">
<h2 class="pa0 ma0"> <h2 class="pa0 ma0">
Ethical internet Ethical internet
</h2> </h2>
@ -119,14 +119,14 @@
</div> </div>
{% endblock %} {% endblock %}
<!-- Footer ######################################################### --> <!-- Footer ######################################################### -->
<div class="w100 cclr-mid-black gray"> <!--footer--> <div class="w-100 cclr-mid-black gray"> <!--footer-->
<div class="footer-card-deck"> <div class="flex justify-between">
<div class="footer-card"> <div class="w-20">
<h3 class="pa0 ma0">Offen</h3> <h3 class="pa0 ma0">Offen</h3>
<h4 class="pa0 ma0">Transparent web analytics</h4> <h4 class="pa0 ma0">Transparent web analytics</h4>
<h4 class="pa0 ma0">for everyone</h4> <h4 class="pa0 ma0">for everyone</h4>
</div> </div>
<div class="footer-card"> <div class="w-15">
<p class="pa0 ma0"> <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>
@ -138,7 +138,7 @@
<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="w-15">
<p class="pa0 ma0"> <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>
@ -149,7 +149,7 @@
<a href="/legal-notice/">Legal Notice</a> <a href="/legal-notice/">Legal Notice</a>
</p> </p>
</div> </div>
<div class="footer-card"> <div class="w-50 tr">
{{ BUILD_DATE }} {{ BUILD_DATE }}
</div> </div>
</div> </div>

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

@ -1,50 +1,52 @@
{% extends "base.html" %} {% extends "page.html" %}
{% block content %} {% block content %}
<div class="w100 cclr-mid-yellow mt5 mb0 pa0"> <!--intro--> <div class="w-100 cclr-mid-yellow"> <!--intro-->
<div class="w100" id="bg-intro"> <div class="w-100 mt5 mb0" id="bg-intro">
<div class="mw6 center"> <div class="flex justify-center pt6">
<div class="pa0 ma0"> <div class="mw5 tr pr4">
<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="146" height="90">
</div> </div>
<h1 class="pa0 ma0"> <div class="mw6">
<em>Transparent web analytics for operators and users</em> <h1 class="f1 lh-solid ma0 mb3">
Transparent <span>web analytics</span>
</h1> </h1>
<p class="pa0 ma0"> <p class="ma0 mb4">
Offen is a free and open source analytics software for websites and web applications that allows respectful handling of data. Offen is an open source analytics software for websites <span>and web applications. It allows respectful handling of data </span> <span>for operators and users.</span>
</p> </p>
<div class="pa0 ma0"> <div class="pb6">
<a class="btn btn-color-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a> <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>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="w100 cclr-mid-mint"> <!--feature--> <div class="w-100 cclr-mid-mint"> <!--feature-->
<div class="w100" id="bg-feature"> <div class="w-100 pt3 pb6" id="bg-feature">
<div class="mw8 center"> <div class="mw8 center">
<div class="card-deck"> <div class="flex flex-wrap justify-around">
<div class="card"> <div class="w55 mh3 mt5">
<h2 class="pa0 ma0"> <h2 class="f25 ma0 mb3">
<em>Free & Open</em> <em>Free & Open</em>
</h2> </h2>
<p class="pa0 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="card"> <div class="w55 mh3 mt5">
<h2 class="pa0 ma0"> <h2 class="f25 ma0 mb3">
<em>Fair & Secure</em> <em>Fair & Secure</em>
</h2> </h2>
<p class="pa0 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="card"> <div class="w55 mh3 mt5">
<h2 class="pa0 ma0"> <h2 class="f25 ma0 mb3">
<em>Easy to use</em> <em>Easy to use</em>
</h2> </h2>
<p class="pa0 ma0"> <p class="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>
@ -54,24 +56,24 @@
</div> </div>
<div class="w100 cclr-mid-black white"> <!--cta-top--> <div class="w-100 cclr-mid-black white"> <!--cta-top-->
<div class="w100" id="bg-cta-top"> <div class="w-100" id="bg-cta-top">
<div class="mw8 center"> <div class="mw8 center">
<div class="mw6 center tr"> <div class="mw6 center tr">
<h2 class="pa0 ma0"> <h2 class="ma0">
In the making In the making
</h2> </h2>
<p class="pa0 ma0"> <p class="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="pa0 ma0"> <div class="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="w100 bg-white mid-grey"> <!--content-index--> <div class="w-100 bg-white mid-grey"> <!--content-index-->
<div class="mw6 center"> <div class="mw6 center">
{{ page.content }} {{ page.content }}
</div> </div>
@ -79,17 +81,17 @@
{% endblock %} {% endblock %}
{% block outro %} {% block outro %}
<div class="w100 cclr-mid-yellow"> <!--outro--> <div class="w-100 cclr-mid-yellow"> <!--outro-->
<div class="w100" id="bg-outro"> <div class="w-100" id="bg-outro">
<div class="mw8 center"> <div class="mw8 center">
<div class="mw6"> <div class="mw6 center tr">
<h2 class="pa0 ma0"> <h2 class="ma0">
Ethical internet Ethical internet
</h2> </h2>
<p class="pa0 ma0"> <p class="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="pa0 ma0"> <div class="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>