mirror of
https://github.com/offen/website.git
synced 2024-11-22 17:10:29 +01:00
update index and headline styling
This commit is contained in:
parent
349883302c
commit
2ee0b2019c
@ -75,7 +75,7 @@ DECORATE_CONTENT = {
|
||||
'li a': ['link', 'b', 'dim'],
|
||||
'a:not([data-button])': ['gray'],
|
||||
'h1': ['f2', 'normal', 'lh-title', 'mt3', 'ma0', 'mb3'],
|
||||
'h2': ['f25', 'normal', 'lh-title', 'mt4', 'ma0', 'mb3'],
|
||||
'h2': ['f2', 'normal', 'lh-title', 'mt4', 'ma0', 'mb3'],
|
||||
'h3': ['f4', 'normal', 'mt5', 'ma0', 'mb3'],
|
||||
'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb3'],
|
||||
'h5': ['f5', 'normal', 'mt5', 'ma0', 'mb1'], # text over button
|
||||
|
@ -288,22 +288,9 @@ body {
|
||||
}
|
||||
}
|
||||
/* Custom Tachyons class */
|
||||
.f25 {
|
||||
.fLogo {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
.f26 {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
@media only screen and (min-width: 30em) {
|
||||
.f26 {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 60em) {
|
||||
.f26 {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
}
|
||||
span {
|
||||
display: table;
|
||||
}
|
||||
|
@ -10,7 +10,7 @@
|
||||
{% block content %}
|
||||
<div class="mw8 center cclr-bg-white-responsive mt5-ns">
|
||||
<div class="dib gray bg-white ph3 ph5-ns pt5">
|
||||
<h2 class="f25 normal lh-title ma0 mt4 mb3">
|
||||
<h2 class="f2 normal lh-title ma0 mt4 mb3">
|
||||
Fair Analytics Blog
|
||||
</h2>
|
||||
<div class="w-75-l">
|
||||
@ -33,7 +33,7 @@
|
||||
<h6 class="f5 lh-solid normal ma0 light-silver">
|
||||
{{ article.date | strftime('%d %b %Y') }}{% if article.modified %}(article.updated {{ article.modified | strftime('%d %b %Y') }}){% endif %}, {{ article.author }}
|
||||
</h6>
|
||||
<h1 class="f26 normal lh-title mt3 ma0 mb3 light-silver">
|
||||
<h1 class="f3 normal lh-title mt3 ma0 mb3 light-silver">
|
||||
{% if not article.must_read %}
|
||||
<a href="/blog/{{ article.slug }}/" class="link b dim gray">{{ article.title }}</a>
|
||||
{% else %}
|
||||
|
@ -43,7 +43,7 @@
|
||||
<div class="nav-container">
|
||||
<div class="icon flex">
|
||||
<a class="link dim" href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
|
||||
<a class="link dim" href="/"><p class="f25 normal ma0 ml2 white">Offen</p></a>
|
||||
<a class="link dim" href="/"><p class="fLogo normal ma0 ml2 white">Offen</p></a>
|
||||
</div>
|
||||
{% if not funnel %}
|
||||
<nav>
|
||||
@ -111,7 +111,7 @@
|
||||
{% if bottom_cta == 'index' %}
|
||||
<div class="flex flex-wrap justify-center tc ph3 pv5">
|
||||
<div class="ph4-ns cclr-bg-yellow-mid">
|
||||
<h2 class="f26 ma0 mb3 lh-title">
|
||||
<h2 class="f3 ma0 mb3 lh-title">
|
||||
<a class="b link dim cclr-fnt-black-mid" href="/">How do fair web analytics work?</a>
|
||||
</h2>
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/" rel="noopener">Open summary</a>
|
||||
@ -122,7 +122,7 @@
|
||||
{% if bottom_cta == 'blog' %}
|
||||
<div class="flex flex-wrap justify-center tc ph3 pv5">
|
||||
<div class="ph4-ns cclr-bg-yellow-mid">
|
||||
<h2 class="f26 ma0 mb3 lh-title">
|
||||
<h2 class="f3 ma0 mb3 lh-title">
|
||||
<a class="b link dim cclr-fnt-black-mid" href="/blog/">Continue reading</a>
|
||||
</h2>
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/blog/" rel="noopener">See all blog posts</a>
|
||||
@ -132,7 +132,7 @@
|
||||
|
||||
{% if bottom_cta == 'cookie' %}
|
||||
<div class="ph3 ph0-m pv5">
|
||||
<h2 class="f26 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
||||
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
||||
Also on our blog
|
||||
</h2>
|
||||
<div class="mw7 center flex flex-wrap ph5-ns">
|
||||
@ -159,7 +159,7 @@
|
||||
|
||||
{% if bottom_cta == 'quality' %}
|
||||
<div class="ph3 ph0-m pv5">
|
||||
<h2 class="f26 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
||||
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
||||
Also on our blog
|
||||
</h2>
|
||||
<div class="mw7 center flex flex-wrap ph5-ns">
|
||||
@ -186,7 +186,7 @@
|
||||
|
||||
{% if bottom_cta == 'matomo' %}
|
||||
<div class="ph3 ph0-m pv5">
|
||||
<h2 class="f26 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
||||
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
||||
Also on our blog
|
||||
</h2>
|
||||
<div class="mw7 center flex flex-wrap ph5-ns">
|
||||
@ -213,7 +213,7 @@
|
||||
|
||||
{% if bottom_cta == 'fair' %}
|
||||
<div class="ph3 ph0-m pv5">
|
||||
<h2 class="f26 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
||||
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
||||
Also on our blog
|
||||
</h2>
|
||||
<div class="mw7 center flex flex-wrap ph5-ns">
|
||||
@ -240,7 +240,7 @@
|
||||
|
||||
{% if bottom_cta == 'budget' %}
|
||||
<div class="ph3 ph0-m pv5">
|
||||
<h2 class="f26 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
||||
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
|
||||
Also on our blog
|
||||
</h2>
|
||||
<div class="mw7 center flex flex-wrap ph5-ns">
|
||||
|
@ -44,7 +44,7 @@
|
||||
|
||||
<hr class="ma0 mb5 b--black-05">
|
||||
|
||||
<h3 class="f25 normal ma0 mb5">
|
||||
<h3 class="f3 normal ma0 mb5">
|
||||
Read the docs
|
||||
</h3>
|
||||
<div class="flex flex-column items-center">
|
||||
|
@ -20,8 +20,8 @@
|
||||
<h1 class="f1-ns f2 normal lh-solid ma0 mb3">
|
||||
Fair web analytics
|
||||
</h1>
|
||||
<p class="ma0 mb4">
|
||||
Offen is an open alternative to common web analytics tools. <span>Gain insights while your users have full access to their data. </span>Lightweight, self hosted and free.
|
||||
<p class="f3 ma0 mb4">
|
||||
Let your users access their data. <span>Gain valuable insights at the same time. </span>Open, lightweight, self hosted and free.
|
||||
</p>
|
||||
<div class="pb5 mb2">
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="#bg-explainer" rel="noopener">Learn more</a>
|
||||
@ -48,11 +48,11 @@
|
||||
|
||||
<h2 class="f2 normal lh-solid ma0 mb3 pt5">
|
||||
<em class="em-mint-1">
|
||||
Open & free
|
||||
Secure & free
|
||||
</em>
|
||||
</h2>
|
||||
<p class="wx18 center ma0">
|
||||
<i>Our</i> lightweight <i>and</i> open source code <i>can be fully audited by the community. Offen will always be</i> available for free.
|
||||
<i>Our code is </i>open source.<i> All user data is </i>encrypted end-to-end.<i> Offen will always be available for </i>free.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
@ -67,7 +67,7 @@
|
||||
</em>
|
||||
</h2>
|
||||
<p class="wx18 center ma0">
|
||||
Comply with GDPR <i>guidelines. Don't share data with third parties. Your</i> users have full access <i>to their data.</i>
|
||||
Comply with GDPR<i> guidelines. </i>No ads, no third parties<i> involved. Offen uses </i>first-party cookies only.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -85,11 +85,11 @@
|
||||
<div>
|
||||
<h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-3">
|
||||
<em class="em-mint-1">
|
||||
Fair & secure
|
||||
Fair & by choice
|
||||
</em>
|
||||
</h2>
|
||||
<p class="wx18 center ma0">
|
||||
Opt-in only. <i>Users must actively give their consent to data collection. All data is</i> encrypted end-to-end.
|
||||
Opt-in only.<i> Users must actively give their </i>consent<i> to data collection. They have full </i>access to<i> their </i>data.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -125,7 +125,7 @@
|
||||
<div class="w-100 dib bg-white">
|
||||
<div class="tc mh4">
|
||||
<p class="f1-ns f2 lh-solid ma0 mt6">
|
||||
Gain insights in an ethical way
|
||||
Insights in an ethical way
|
||||
</p>
|
||||
<div class="mw7 center">
|
||||
<p class="f5 ma0 mt3 mb6 mh0 mh3-m mh5-l">
|
||||
@ -151,7 +151,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="f25 lh-solid ma0 mt6 mb3">
|
||||
<p class="f3 lh-solid ma0 mt6 mb3">
|
||||
Your job
|
||||
</p>
|
||||
</div>
|
||||
@ -193,7 +193,7 @@
|
||||
|
||||
<div class="w-100 dib cclr-bg-mint-mid">
|
||||
<div class="wx24 center">
|
||||
<p class="f25 lh-solid ma0 mt5 mb3">
|
||||
<p class="f3 lh-solid ma0 mt5 mb3">
|
||||
Benefits for your users
|
||||
</p>
|
||||
</div>
|
||||
@ -240,7 +240,7 @@
|
||||
|
||||
|
||||
<div class="wx24 center">
|
||||
<p class="f25 lh-solid ma0 mt5 mb4">
|
||||
<p class="f3 lh-solid ma0 mt5 mb4">
|
||||
<em>
|
||||
What you see
|
||||
</em>
|
||||
@ -261,13 +261,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="f25 lh-solid ma0 mb2">
|
||||
<p class="f3 lh-solid ma0 mb2">
|
||||
859
|
||||
</p>
|
||||
<p class="f7 lh-solid ma0 mb4">
|
||||
Unique users
|
||||
</p>
|
||||
<p class="f25 lh-solid ma0 mb2">
|
||||
<p class="f3 lh-solid ma0 mb2">
|
||||
3.372
|
||||
</p>
|
||||
<p class="f7 lh-solid ma0 mb4">
|
||||
@ -311,7 +311,7 @@
|
||||
<div class="h-100 bg-pattern">
|
||||
|
||||
<div class="wx24 center">
|
||||
<p class="f25 lh-solid ma0 mt5 mb4">
|
||||
<p class="f3 lh-solid ma0 mt5 mb4">
|
||||
<em class="em-mint-2">
|
||||
What your users see
|
||||
</em>
|
||||
@ -325,13 +325,13 @@
|
||||
|
||||
<!-- BOX -->
|
||||
<div class="w-100 dib br2 mb5 mb0-l pa4 shadow-4 cclr-fnt-black-mid bg-white">
|
||||
<p class="f25 lh-solid ma0 mb2">
|
||||
<p class="f3 lh-solid ma0 mb2">
|
||||
1
|
||||
</p>
|
||||
<p class="f7 lh-solid ma0 mb4">
|
||||
Unique website
|
||||
</p>
|
||||
<p class="f25 lh-solid ma0 mb2">
|
||||
<p class="f3 lh-solid ma0 mb2">
|
||||
5
|
||||
</p>
|
||||
<p class="f7 lh-solid ma0 mb4">
|
||||
@ -368,7 +368,7 @@
|
||||
<div class="w-100 hx-more dib cclr-bg-yellow-mid">
|
||||
<div class="wx24 center">
|
||||
|
||||
<p class="f25 lh-solid ma0 mt5">
|
||||
<p class="f3 lh-solid ma0 mt5">
|
||||
More features
|
||||
</p>
|
||||
|
||||
@ -402,7 +402,7 @@
|
||||
|
||||
<div class="w-100 hx-try-user dib cclr-bg-mint-mid">
|
||||
<div class="wx24 center">
|
||||
<p class="f25 lh-solid ma0 mt5">
|
||||
<p class="f3 lh-solid ma0 mt5">
|
||||
Try as user
|
||||
</p>
|
||||
<p class="ma0 mt4 mr0 mr4-ns">
|
||||
@ -431,7 +431,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
|
||||
<p class="f3 lh-solid ma0 ml0 ml5-l mt5 mb4">
|
||||
<em>
|
||||
Essential metrics
|
||||
</em>
|
||||
@ -518,7 +518,7 @@
|
||||
|
||||
<div class="wx24-metrics center">
|
||||
|
||||
<p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
|
||||
<p class="f3 lh-solid ma0 ml0 ml5-l mt5 mb4">
|
||||
<em>
|
||||
Localize
|
||||
</em>
|
||||
@ -543,7 +543,7 @@
|
||||
<div class="h-100 bg-pattern">
|
||||
|
||||
<div class="wx24-metrics center">
|
||||
<p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
|
||||
<p class="f3 lh-solid ma0 ml0 ml5-l mt5 mb4">
|
||||
<em>
|
||||
Make a difference
|
||||
</em>
|
||||
|
@ -40,7 +40,7 @@
|
||||
|
||||
<hr class="ma0 mb5 b--black-05">
|
||||
|
||||
<h3 class="f25 normal tc ma0 mb5">
|
||||
<h3 class="f3 normal tc ma0 mb5">
|
||||
Learn more
|
||||
</h3>
|
||||
<div class="flex flex-column items-center">
|
||||
|
Loading…
Reference in New Issue
Block a user