2
0
mirror of https://github.com/offen/website.git synced 2024-12-23 13:30:20 +01:00
This commit is contained in:
Hendrik Niefeld 2019-12-23 19:44:46 +01:00
parent 321d2424a8
commit cd6ee2ef1f
7 changed files with 50 additions and 40 deletions

View File

@ -9,8 +9,9 @@ sm_image_url: /theme/images/offen-blog-0010-milestone1.jpg
<img alt="Milestone 1 - Laying the foundation for fair web analytics" class="mb5" src="/theme/images/offen-blog-0010-milestone1.jpg"/>
</div>
###### 12 Dec 2019, Hendrik Niefeld
## Episode One — Laying the foundation for fair web analytics
## [Episode One — Laying the foundation for fair web analytics](/blog/laying-foundation-for-fair-web-analytics)
Milestone 1 is completed. This is what we've achieved in the last six weeks.
---

View File

@ -48,14 +48,14 @@ PLUGINS = ['decorate_content', 'assets']
# maps any CSS selector to a list of classes to be added
DECORATE_CONTENT = {
'a': ['link', 'b', 'dim', 'gray'],
'h2': ['f25', 'ma0', 'mb3', 'light-silver'],
'h3': ['f5', 'normal', 'mt4', 'ma0', 'mb3', 'fnt-cclr-mid-black'],
'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb3'],
'h5': ['ma0'],
'h6': ['f5', 'lh-solid', 'normal', 'i', 'ma0', 'mb3', 'light-silver'],
'p': ['ma0', 'pb3'],
'a': ['link', 'b', 'dim', 'gray'],
'blockquote': ['f5', 'i', 'ma0', 'ml4'],
'blockquote': ['f5', 'i', 'ma0', 'ml4-ns', 'ml3'],
'hr': ['mt5', 'mb3', 'b--black-05']
}

View File

@ -76,6 +76,10 @@ LAYOUT
/* ---------------------------------------------------
TYPO AND LAYOUT ELEMENTS
----------------------------------------------------*/
/* Break long word on mobile */
body {
overflow-wrap: break-word;
}
/* Custom Tachyons class */
.f25 {
font-size: 1.9rem;
@ -103,14 +107,14 @@ hr {
MENU
----------------------------------------------------*/
.nav-list {
margin: 0 10px 40px 0;
margin: 0 0.7rem 0 0;
}
.nav-bar {
height: 4rem;
}
.icon {
position: absolute;
padding: 12px 0 0 20px;
padding: 0.7rem 0 0 1.2rem;
float: left;
}
body.index .icon {
@ -134,7 +138,7 @@ nav ul li {
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
padding: 0 1.4rem;
line-height: 4rem;
text-decoration: none;
font-weight: 700;
@ -147,15 +151,15 @@ nav ul li a:visited:hover {
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
padding-left: 0.4rem;
content: ' ▾';
}
nav ul li ul li {
min-width: 150px;
min-width: 10rem;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
padding: 1rem;
line-height: 1.5rem;
}
.nav-dropdown {
position: absolute;
@ -172,9 +176,9 @@ nav ul li ul li a {
width: 4rem;
}
/* Mobile Styles */
@media only screen and (max-width: 960px) {
@media only screen and (max-width: 60rem) {
.nav-list {
margin: 0 0 40px 0;
margin: 0;
}
.nav-mobile {
display: block;
@ -191,15 +195,15 @@ nav ul li ul li a {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
padding-left: 25%;
padding: 1rem;
line-height: 1;
padding-left: 20%;
}
nav ul li ul li a {
padding-left: 30%;
}
nav ul li:last-child a {
padding-bottom: 60px;
padding-bottom: 4rem;
}
nav ul li:last-child a {
box-shadow: 0px 7px 15px -6px rgba(57,53,42,0.2);
@ -209,25 +213,24 @@ nav ul li ul li a {
}
}
/* Desktop Styles */
@media screen and (min-width: 961px) {
@media screen and (min-width: 60.1rem) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
left: 1rem;
top: 1rem;
cursor: pointer;
padding: 12px 35px 16px 0px;
padding: 1rem 2rem 1rem 0;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 2px;
width: 25px;
height: 0.1rem;
width: 1.6rem;
background: #39352A;
position: absolute;
display: block;
@ -237,10 +240,10 @@ nav ul li ul li a {
*/
}
#nav-toggle span:before {
top: -8px;
top: -0.5rem;
}
#nav-toggle span:after {
bottom: -8px;
bottom: -0.5rem;
}
#nav-toggle.active span {
background-color: transparent;

View File

@ -1,18 +1,19 @@
{% extends "base.html" %}
{% set title = 'Feed' %}
{% set description = 'Description' %}
{% set title = 'Fair analytics blog | Offen' %}
{% set description = 'Developing Offen. A free and open source analytics software for websites and web applications that allows respectful handling of data.' %}
{% set href = 'blog/' %}
{% set no_stats = False %}
{% set template = 'archives' %}
{% set is_article = 'true' %}
{% block content %}
{% for article in articles %}
{% if loop.index != 1 %}
<hr>
<hr class="mb5 b--none">
{% endif %}
<div class="content bg-red">
<div class="container-reader">
<div class="w-100 mt5-ns gray">
<div class="mw7 center pt5 pb5 ph3 ph5-ns bg-white">
{{ article.content }}
</div>
</div>

View File

@ -7,3 +7,4 @@
{% set no_stats = article.no_stats %}
{% set template = article.template %}
{% set content = article.content %}
{% set is_article = 'true' %}

View File

@ -18,7 +18,9 @@
<meta property="og:image" content="{{ SITEURL }}{{ sm_image_url or '/theme/images/offen-logo-social-media.jpg' }}">
<meta name="twitter:image:alt" content="Offen logo">
<meta name="twitter:card" content="summary_large_image">
{% if template != 'archives' %}
<link rel="canonical" href="{{ SITEURL }}/{{ href }}">
{% endif %}
<link rel="shortcut icon" type="image/x-icon" href="/theme/images/favicon.ico">
<link rel="stylesheet" href="/theme/css/tachyons.min.css">
<link rel="stylesheet" href="/theme/css/fix.css">
@ -69,7 +71,7 @@
<!-- Content ######################################################### -->
{% block content %}
<div class="w-100 mt5-ns gray"> <!-- content -->
<div class="mw7 center pt5 pb6 ph3 ph5-ns bg-white">
<div class="mw7 center pt5 pb5 ph3 ph5-ns bg-white">
{{ content }}
</div>
</div>
@ -80,29 +82,31 @@
<div class="pt3 pb6 ph3" id="bg-cta-bottom">
<div class="mw8 center">
<div class="flex flex-wrap justify-around">
<div class="w55 mh3 pt5">
<div class="w55 mh3 pt5 tc">
<h2 class="f25 lh-solid ma0 mb3">
Participate
</h2>
<p class="ma0 mb4">
<p class="ma0 mb3">
Development of Offen has just started. Do not hesitate to make a contribution and help us handle data with respect.
</p>
<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 class="w55 mh3 pt5">
{% if is_article != 'true' %}
<div class="w55 mh3 pt5 tc">
<h2 class="f25 lh-solid ma0 mb3">
In the making
</h2>
<p class="ma0 mb4">
<p class="ma0 mb3">
Offen is still in alpha. Discover what is already up and running and where we want to go in the coming months.
</p>
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="/blog/">Project status</a>
</div>
<div class="w55 mh3 pt5">
{% endif %}
<div class="w55 mh3 pt5 tc">
<h2 class="f25 lh-solid ma0 mb3">
Ethical internet
</h2>
<p class="ma0 mb4">
<p class="ma0 mb3">
We're working hard to ensure that Offen is independent, cutting-edge and can be sustained for years to come.
</p>
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Support us</a>

View File

@ -26,7 +26,7 @@
<div class="pt3 pb6 ph3" id="bg-feature">
<div class="mw8 center">
<div class="flex flex-wrap justify-around">
<div class="w55 mh3 pt5">
<div class="w55 mh3 pt5 tc">
<h2 class="f25 lh-solid ma0 mb3">
<em>Free & Open</em>
</h2>
@ -34,7 +34,7 @@
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="w55 mh3 pt5">
<div class="w55 mh3 pt5 tc">
<h2 class="f25 lh-solid ma0 mb3">
<em>Fair & Secure</em>
</h2>
@ -42,7 +42,7 @@
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="w55 mh3 pt5">
<div class="w55 mh3 pt5 tc">
<h2 class="f25 lh-solid ma0 mb3">
<em>Easy to use</em>
</h2>