2
0
mirror of https://github.com/offen/website.git synced 2024-10-18 12:10:25 +02:00

update index and headline styling

This commit is contained in:
Hendrik Niefeld 2021-03-16 10:22:16 +01:00
parent 349883302c
commit 2ee0b2019c
7 changed files with 35 additions and 48 deletions

View File

@ -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

View File

@ -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;
}

View File

@ -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 %}

View File

@ -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">

View File

@ -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">

View File

@ -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>

View File

@ -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">