mirror of
https://github.com/offen/website.git
synced 2024-12-23 13:30:20 +01:00
layout
This commit is contained in:
parent
a09795a787
commit
f8242cdbad
@ -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']
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
*/
|
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 116 KiB |
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user