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

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
DECORATE_CONTENT = {
'h2': ['pa0', 'ma0'],
'h3': ['pa0', 'ma0'],
'h4': ['pa0', 'ma0'],
'h5': ['pa0', 'ma0'],
'h6': ['pa0', 'ma0'],
'p': ['pa0', 'ma0']
}

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

@ -16,6 +16,9 @@ CUSTOM COLORS
.fnt-cclr-mid-black { /* font color */
color: #39352A;
}
.brd-cclr-mid-black { /* button border color */
border-color: #39352A;
}
.cclr-mid-grey {
background-color: #898989;
}
@ -41,7 +44,24 @@ LAYOUT
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;
}
@ -199,4 +219,28 @@ nav ul li ul li a {
}
#nav-toggle.active span:after {
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 %}
</head>
{% endblock %}
<body class="{{ template }} f5 sans-serif fnt-cclr-mid-black">
<body class="{{ template }} f5 sans-serif lh-copy fnt-cclr-mid-black">
<!-- Menu ######################################################### -->
<div class="menu w100 cclr-mid-yellow"> <!--menu-->
<div class="menu w-100 cclr-mid-yellow"> <!--menu-->
<section class="nav-bar">
<div class="nav-container">
<div class="icon">
@ -68,7 +68,7 @@
</div>
<!-- Content ######################################################### -->
{% block content %}
<div class="w100 bg-white mid-grey">
<div class="w-100 mt5 bg-white mid-grey">
<div class="mw6 center">
{{ content }}
</div>
@ -76,11 +76,11 @@
{% endblock %}
{% block outro %}
<div class="w100 cclr-mid-yellow"> <!--cta-bottom-->
<div class="w100" id="bg-cta-bottom">
<div class="w-100 cclr-mid-yellow"> <!--cta-bottom-->
<div class="w-100" id="bg-cta-bottom">
<div class="mw8 center">
<div class="card-deck">
<div class="card">
<div class="flex flex-wrap justify-around">
<div class="w5">
<h2 class="pa0 ma0">
Participate
</h2>
@ -91,7 +91,7 @@
<a class="btn btn-color-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
</div>
</div>
<div class="card">
<div class="w5">
<h2 class="pa0 ma0">
In the making
</h2>
@ -102,7 +102,7 @@
<a class="btn btn-color-black" href="/blog/">Project status</a>
</div>
</div>
<div class="card">
<div class="w5">
<h2 class="pa0 ma0">
Ethical internet
</h2>
@ -119,14 +119,14 @@
</div>
{% endblock %}
<!-- Footer ######################################################### -->
<div class="w100 cclr-mid-black gray"> <!--footer-->
<div class="footer-card-deck">
<div class="footer-card">
<div class="w-100 cclr-mid-black gray"> <!--footer-->
<div class="flex justify-between">
<div class="w-20">
<h3 class="pa0 ma0">Offen</h3>
<h4 class="pa0 ma0">Transparent web analytics</h4>
<h4 class="pa0 ma0">for everyone</h4>
</div>
<div class="footer-card">
<div class="w-15">
<p class="pa0 ma0">
<a href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</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>
</p>
</div>
<div class="footer-card">
<div class="w-15">
<p class="pa0 ma0">
<a href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
</p>
@ -149,7 +149,7 @@
<a href="/legal-notice/">Legal Notice</a>
</p>
</div>
<div class="footer-card">
<div class="w-50 tr">
{{ BUILD_DATE }}
</div>
</div>

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

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