mirror of
https://github.com/offen/website.git
synced 2024-11-22 09:00:28 +01:00
details
This commit is contained in:
parent
321d2424a8
commit
cd6ee2ef1f
@ -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.
|
||||
|
||||
---
|
||||
|
||||
@ -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']
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -7,3 +7,4 @@
|
||||
{% set no_stats = article.no_stats %}
|
||||
{% set template = article.template %}
|
||||
{% set content = article.content %}
|
||||
{% set is_article = 'true' %}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user