offen/website
2
0
Fork 0
mirror of https://github.com/offen/website.git synced 2024-11-22 17:10:29 +01:00
Code Issues Projects Releases Wiki Activity

update index and headline styling

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
homepage/pelicanconf.py
View File

@ -75,7 +75,7 @@ DECORATE_CONTENT = {
'li a': ['link', 'b', 'dim'], 'li a': ['link', 'b', 'dim'],
'a:not([data-button])': ['gray'], 'a:not([data-button])': ['gray'],
'h1': ['f2', 'normal', 'lh-title', 'mt3', 'ma0', 'mb3'], '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'], 'h3': ['f4', 'normal', 'mt5', 'ma0', 'mb3'],
'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb3'], 'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb3'],
'h5': ['f5', 'normal', 'mt5', 'ma0', 'mb1'], # text over button 'h5': ['f5', 'normal', 'mt5', 'ma0', 'mb1'], # text over button

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

@ -288,22 +288,9 @@ body {
} }
} }
/* Custom Tachyons class */ /* Custom Tachyons class */
.f25 { .fLogo {
font-size: 1.9rem; 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 { span {
display: table; display: table;
} }

4
homepage/theme/templates/archives.html
View File

@ -10,7 +10,7 @@
{% block content %} {% block content %}
<div class="mw8 center cclr-bg-white-responsive mt5-ns"> <div class="mw8 center cclr-bg-white-responsive mt5-ns">
<div class="dib gray bg-white ph3 ph5-ns pt5"> <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 Fair Analytics Blog
</h2> </h2>
<div class="w-75-l"> <div class="w-75-l">
@ -33,7 +33,7 @@
<h6 class="f5 lh-solid normal ma0 light-silver"> <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 }} {{ article.date | strftime('%d %b %Y') }}{% if article.modified %}(article.updated {{ article.modified | strftime('%d %b %Y') }}){% endif %}, {{ article.author }}
</h6> </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 %} {% if not article.must_read %}
<a href="/blog/{{ article.slug }}/" class="link b dim gray">{{ article.title }}</a> <a href="/blog/{{ article.slug }}/" class="link b dim gray">{{ article.title }}</a>
{% else %} {% else %}

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

@ -43,7 +43,7 @@
<div class="nav-container"> <div class="nav-container">
<div class="icon flex"> <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="/"><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> </div>
{% if not funnel %} {% if not funnel %}
<nav> <nav>
@ -111,7 +111,7 @@
{% if bottom_cta == 'index' %} {% if bottom_cta == 'index' %}
<div class="flex flex-wrap justify-center tc ph3 pv5"> <div class="flex flex-wrap justify-center tc ph3 pv5">
<div class="ph4-ns cclr-bg-yellow-mid"> <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> <a class="b link dim cclr-fnt-black-mid" href="/">How do fair web analytics work?</a>
</h2> </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> <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' %} {% if bottom_cta == 'blog' %}
<div class="flex flex-wrap justify-center tc ph3 pv5"> <div class="flex flex-wrap justify-center tc ph3 pv5">
<div class="ph4-ns cclr-bg-yellow-mid"> <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> <a class="b link dim cclr-fnt-black-mid" href="/blog/">Continue reading</a>
</h2> </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> <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' %} {% if bottom_cta == 'cookie' %}
<div class="ph3 ph0-m pv5"> <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 Also on our blog
</h2> </h2>
<div class="mw7 center flex flex-wrap ph5-ns"> <div class="mw7 center flex flex-wrap ph5-ns">
@ -159,7 +159,7 @@
{% if bottom_cta == 'quality' %} {% if bottom_cta == 'quality' %}
<div class="ph3 ph0-m pv5"> <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 Also on our blog
</h2> </h2>
<div class="mw7 center flex flex-wrap ph5-ns"> <div class="mw7 center flex flex-wrap ph5-ns">
@ -186,7 +186,7 @@
{% if bottom_cta == 'matomo' %} {% if bottom_cta == 'matomo' %}
<div class="ph3 ph0-m pv5"> <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 Also on our blog
</h2> </h2>
<div class="mw7 center flex flex-wrap ph5-ns"> <div class="mw7 center flex flex-wrap ph5-ns">
@ -213,7 +213,7 @@
{% if bottom_cta == 'fair' %} {% if bottom_cta == 'fair' %}
<div class="ph3 ph0-m pv5"> <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 Also on our blog
</h2> </h2>
<div class="mw7 center flex flex-wrap ph5-ns"> <div class="mw7 center flex flex-wrap ph5-ns">
@ -240,7 +240,7 @@
{% if bottom_cta == 'budget' %} {% if bottom_cta == 'budget' %}
<div class="ph3 ph0-m pv5"> <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 Also on our blog
</h2> </h2>
<div class="mw7 center flex flex-wrap ph5-ns"> <div class="mw7 center flex flex-wrap ph5-ns">

2
homepage/theme/templates/getstarted.html
View File

@ -44,7 +44,7 @@
<hr class="ma0 mb5 b--black-05"> <hr class="ma0 mb5 b--black-05">
<h3 class="f25 normal ma0 mb5"> <h3 class="f3 normal ma0 mb5">
Read the docs Read the docs
</h3> </h3>
<div class="flex flex-column items-center"> <div class="flex flex-column items-center">

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

@ -20,8 +20,8 @@
<h1 class="f1-ns f2 normal lh-solid ma0 mb3"> <h1 class="f1-ns f2 normal lh-solid ma0 mb3">
Fair web analytics Fair web analytics
</h1> </h1>
<p class="ma0 mb4"> <p class="f3 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. Let your users access their data. <span>Gain valuable insights at the same time. </span>Open, lightweight, self hosted and free.
</p> </p>
<div class="pb5 mb2"> <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> <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"> <h2 class="f2 normal lh-solid ma0 mb3 pt5">
<em class="em-mint-1"> <em class="em-mint-1">
Open & free Secure & free
</em> </em>
</h2> </h2>
<p class="wx18 center ma0"> <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> </p>
</div> </div>
@ -67,7 +67,7 @@
</em> </em>
</h2> </h2>
<p class="wx18 center ma0"> <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> </p>
</div> </div>
@ -85,11 +85,11 @@
<div> <div>
<h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-3"> <h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-3">
<em class="em-mint-1"> <em class="em-mint-1">
Fair & secure Fair & by choice
</em> </em>
</h2> </h2>
<p class="wx18 center ma0"> <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> </p>
</div> </div>
@ -125,7 +125,7 @@
<div class="w-100 dib bg-white"> <div class="w-100 dib bg-white">
<div class="tc mh4"> <div class="tc mh4">
<p class="f1-ns f2 lh-solid ma0 mt6"> <p class="f1-ns f2 lh-solid ma0 mt6">
Gain insights in an ethical way Insights in an ethical way
</p> </p>
<div class="mw7 center"> <div class="mw7 center">
<p class="f5 ma0 mt3 mb6 mh0 mh3-m mh5-l"> <p class="f5 ma0 mt3 mb6 mh0 mh3-m mh5-l">
@ -151,7 +151,7 @@
</div> </div>
</div> </div>
<p class="f25 lh-solid ma0 mt6 mb3"> <p class="f3 lh-solid ma0 mt6 mb3">
Your job Your job
</p> </p>
</div> </div>
@ -193,7 +193,7 @@
<div class="w-100 dib cclr-bg-mint-mid"> <div class="w-100 dib cclr-bg-mint-mid">
<div class="wx24 center"> <div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb3"> <p class="f3 lh-solid ma0 mt5 mb3">
Benefits for your users Benefits for your users
</p> </p>
</div> </div>
@ -240,7 +240,7 @@
<div class="wx24 center"> <div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb4"> <p class="f3 lh-solid ma0 mt5 mb4">
<em> <em>
What you see What you see
</em> </em>
@ -261,13 +261,13 @@
</div> </div>
</div> </div>
<p class="f25 lh-solid ma0 mb2"> <p class="f3 lh-solid ma0 mb2">
859 859
</p> </p>
<p class="f7 lh-solid ma0 mb4"> <p class="f7 lh-solid ma0 mb4">
Unique users Unique users
</p> </p>
<p class="f25 lh-solid ma0 mb2"> <p class="f3 lh-solid ma0 mb2">
3.372 3.372
</p> </p>
<p class="f7 lh-solid ma0 mb4"> <p class="f7 lh-solid ma0 mb4">
@ -311,7 +311,7 @@
<div class="h-100 bg-pattern"> <div class="h-100 bg-pattern">
<div class="wx24 center"> <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"> <em class="em-mint-2">
What your users see What your users see
</em> </em>
@ -325,13 +325,13 @@
<!-- BOX --> <!-- BOX -->
<div class="w-100 dib br2 mb5 mb0-l pa4 shadow-4 cclr-fnt-black-mid bg-white"> <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 1
</p> </p>
<p class="f7 lh-solid ma0 mb4"> <p class="f7 lh-solid ma0 mb4">
Unique website Unique website
</p> </p>
<p class="f25 lh-solid ma0 mb2"> <p class="f3 lh-solid ma0 mb2">
5 5
</p> </p>
<p class="f7 lh-solid ma0 mb4"> <p class="f7 lh-solid ma0 mb4">
@ -368,7 +368,7 @@
<div class="w-100 hx-more dib cclr-bg-yellow-mid"> <div class="w-100 hx-more dib cclr-bg-yellow-mid">
<div class="wx24 center"> <div class="wx24 center">
<p class="f25 lh-solid ma0 mt5"> <p class="f3 lh-solid ma0 mt5">
More features More features
</p> </p>
@ -402,7 +402,7 @@
<div class="w-100 hx-try-user dib cclr-bg-mint-mid"> <div class="w-100 hx-try-user dib cclr-bg-mint-mid">
<div class="wx24 center"> <div class="wx24 center">
<p class="f25 lh-solid ma0 mt5"> <p class="f3 lh-solid ma0 mt5">
Try as user Try as user
</p> </p>
<p class="ma0 mt4 mr0 mr4-ns"> <p class="ma0 mt4 mr0 mr4-ns">
@ -431,7 +431,7 @@
</div> </div>
</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> <em>
Essential metrics Essential metrics
</em> </em>
@ -518,7 +518,7 @@
<div class="wx24-metrics center"> <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> <em>
Localize Localize
</em> </em>
@ -543,7 +543,7 @@
<div class="h-100 bg-pattern"> <div class="h-100 bg-pattern">
<div class="wx24-metrics center"> <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> <em>
Make a difference Make a difference
</em> </em>

2
homepage/theme/templates/trydemo.html
View File

@ -40,7 +40,7 @@
<hr class="ma0 mb5 b--black-05"> <hr class="ma0 mb5 b--black-05">
<h3 class="f25 normal tc ma0 mb5"> <h3 class="f3 normal tc ma0 mb5">
Learn more Learn more
</h3> </h3>
<div class="flex flex-column items-center"> <div class="flex flex-column items-center">