2
0
mirror of https://github.com/offen/website.git synced 2024-11-22 09:00:28 +01:00

updates and cleanup

This commit is contained in:
Hendrik Niefeld 2020-04-27 21:51:46 +02:00
parent 6671e3b6ee
commit 73a6603de9
14 changed files with 282 additions and 379 deletions

View File

@ -20,18 +20,18 @@ We have further refined the existing application architecture to make it more ro
### Easy to test drive
Download a single binary file and run it on your local computer to get an Offen instance up and running immediately. At the moment this setup only supports Linux. Windows and MacOS will follow soon.
[Download binary](https://8342-180605180-gh.circle-artifacts.com/0/tmp/artifacts/offen-stable.tar.gz){: target="_blank" data-button="yellow"}
[Download binary](https://8342-180605180-gh.circle-artifacts.com/0/tmp/artifacts/offen-stable.tar.gz){: target="_blank" data-button="outline"}
### Develop without complex setup
Docker and Docker-Compose are the only hard requirement for you to develop Offen. We have successfully tested this setup under Linux, Windows and MacOS. Head over to our wiki for instructions how to get the setup up and running.
[Open wiki](https://github.com/offen/offen/wiki/Developing-offen#setup){: target="_blank" data-button="yellow"}
[Open wiki](https://github.com/offen/offen/wiki/Developing-offen#setup){: target="_blank" data-button="outline"}
### Lightweight and accessible interfaces
The *Auditorium* is ready for a dry run. It's a functional prototype for accessing and managing user data. We opted for [Choo](https://choo.io/){: target="_blank"} as the application framework and [Tachyons](https://tachyons.io/){: target="_blank"} as the CSS framework.
### Ready to localize
You can now localize all user-related content in server- and client-side applications. At the moment English is the only supported locale, but we would be happy to add more locales soon. Contributors wanted after milestone 3 is completed.
[Get in touch](mailto:hioffen@posteo.de){: data-button="yellow"}
[Get in touch](mailto:hioffen@posteo.de){: data-button="outline"}
### Read the docs
The work on our wiki has started. Including documentation for [developers](https://github.com/offen/offen/wiki/Developing-offen){: target="_blank"} as well as for [website operators](https://github.com/offen/offen/wiki/Running-offen){: target="_blank"} who want to deploy and run Offen.
@ -46,4 +46,4 @@ We have further hardened and improved the HTTP server that Offen exposes. If you
### Deep dive
Interested in the details? Want to get your hands dirty? Head over to our GitHub repo.
[Open milestone 1 Pull Request](https://github.com/offen/offen/pull/192){: target="_blank" data-button="black"}
[Open milestone 1 Pull Request](https://github.com/offen/offen/pull/192){: target="_blank" data-button="full"}

View File

@ -17,7 +17,7 @@ We finished milestone 2. Here is what we' ve been doing for the last 8 weeks.
### Collecting data only with consent
A first approach to one of our major features is implemented. Websites that embed the Offen script now display a user consent banner. In case of user's deny, no other requests than loading the script are made from then on.
[Learn more](https://analytics.offen.dev/){: target="_blank" data-button="yellow"}
[Learn more](https://analytics.offen.dev/){: target="_blank" data-button="outline"}
### Accidental leaks don't expose data
We encrypt all event data before it leaves the browser. [Two types](https://github.com/offen/offen/pull/270){: target="_blank"} of crypto implementations are used for this. This allows us to handle user data from both https and http-only sites securely.
@ -29,11 +29,11 @@ The insight into user behavior has been improved. Still, no sensitive user infor
The current state of *Offen runs on this domain.* You should have noticed our conset banner by now. Opted in? Head to the [Auditorium](https://analytics.offen.dev/auditorium/){: target="_blank"} to manage your data. If not, please have a look at our [Explainer.](https://analytics.offen.dev/){: target="_blank"}
*We welcome any feedback* on this key subject. Did our banner text inform you sufficiently? Which issues have been left open? How can we do better? Thanks in advance.
[Send feedback](mailto:hioffen@posteo.de){: target="_blank" data-button="yellow"}
[Send feedback](mailto:hioffen@posteo.de){: target="_blank" data-button="outline"}
### Testdrive on your system
Whether you are a developer that want to contribute or a website operator that wants to test Offen. Have a demo up and running in no time on your local machine. Download and install a single binary file on Linux, Windows or MacOS.
[Download demo](https://github.com/offen/offen/releases/download/v0.1.0-alpha.2/offen-v0.1.0-alpha.2.tar.gz){: data-button="yellow"}
[Download demo](https://github.com/offen/offen/releases/download/v0.1.0-alpha.2/offen-v0.1.0-alpha.2.tar.gz){: data-button="outline"}
### Feeling adventurous?
Offen is under active development but with the introduction of the user consent banner has become usable for the general public. If you are brave enough you can use our [latest alpha release](https://github.com/offen/offen/releases/latest/){: target="_blank"} in a production environment.
@ -48,4 +48,4 @@ Currently, the way we store encryption keys securely on the client side does not
### Deep dive
Interested in the details? Want to get your hands dirty? Head over to our GitHub repo.
[Open milestone 2 Pull Request](https://github.com/offen/offen/pull/270){: target="_blank" data-button="black"}
[Open milestone 2 Pull Request](https://github.com/offen/offen/pull/270){: target="_blank" data-button="full"}

View File

@ -26,10 +26,10 @@ Although we have dug very deep, things may still contain issues. Therefore, we r
## Offen v0.1.0-alpha.3
##### Single binary file for Linux, Windows or MacOS
[Download](https://get.offen.dev/){: data-button="black"}
[Download](https://get.offen.dev/){: data-button="full"}
##### Your own Offen instance
[Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/master){: target="_blank" data-button-mb5="black"}
[Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/master){: target="_blank" data-button-mb5="full"}
Download or deploy Offen today and give it a spin. *[Check our Docs](https://docs.offen.dev/){: target="_blank"} for detailed instructions.*
@ -37,4 +37,4 @@ We appreciate any feedback. No matter if you have difficulties with the installa
We look forward to hearing from you. Happy testing!
[Give feedback](mailto:hioffen@posteo.de){: data-button="yellow"}
[Give feedback](mailto:hioffen@posteo.de){: data-button="outline"}

View File

@ -19,7 +19,7 @@ Milestone 3 has been completed. This is what we have achieved in the last ten we
The Auditorium for users is now annotated with explanations of all metrics as well as analytics-specific terms. It also contains an FAQ section. In general, new metrics were added and the UX was refined for users and operators.
<img class="screencast mt3 mb2" alt="browser setup" src="/theme/images/offen-blog-0050-explainer.gif"/>
These updates are already *up and running in our own instance* for users. Opt in and open the Auditorium.
[Check it out](https://analytics.offen.dev/){: target="_blank" data-button="yellow"}
[Check it out](https://analytics.offen.dev/){: target="_blank" data-button="outline"}
### Working in teams
If you want to improve your services with transparent and fair web analytics, it is very likely that you collaborate in groups. Therefore, in a first draft we have added basic utilities for managing user logins and accounts. These tools will be further refined during milestone 4.
@ -33,7 +33,7 @@ Using the command line can be a bit intimidating. This is why we have added an i
### Verifying download integrity
Our binaries are now signed with a GPG key. After downloading Offen, you can now check if the binary you want to use is the one we intend to distribute.
[Learn more](https://docs.offen.dev/running-offen/downloads-distributions/#verifying-the-binaries-signatures){: target="_blank" data-button="yellow"}
[Learn more](https://docs.offen.dev/running-offen/downloads-distributions/#verifying-the-binaries-signatures){: target="_blank" data-button="outline"}
### Safari now fully supported
At the end of milestone 2 we noticed problems with the way the Safari browser stores keys. We fixed this by adding a dedicated fallback mechanism. [Give it a try.](https://analytics.offen.dev/){: target="_blank"}
@ -42,7 +42,7 @@ At the end of milestone 2 we noticed problems with the way the Safari browser st
Self-hosting is ideal for privacy focused software. Based on free resources, you can now deploy a production ready Offen instance to Heroku in a jiffy.
<img class="screencast mt3 mb2" alt="browser setup" src="/theme/images/offen-blog-0050_oneClickDeploy.gif"/>
We are currently working on further 1-click options for platforms such as [DigitalOcean](https://github.com/offen/digitalocean){: target="_blank"} and YunoHost.
[Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/maste){: target="_blank" data-button="yellow"}
[Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/maste){: target="_blank" data-button="outline"}
### Happy Birthday to us
Offen is now [one year old.](https://github.com/offen/offen/commit/3a50763bbd93c9c655fad002e94c340a623ee613){: target="_blank"} We made some progress on our way to develop a self hosted and transparent alternative to established web analytics tools.
@ -56,4 +56,4 @@ But it is not yet the time for standing ovations. There is still a lot to be don
### Deep dive
Interested in the details? Want to get your hands dirty? Take a look at our code.
[Open GitHub repo](https://github.com/offen/offen){: target="_blank" data-button="black"}
[Open GitHub repo](https://github.com/offen/offen){: target="_blank" data-button="full"}

View File

@ -50,14 +50,14 @@ PLUGINS = ['decorate_content', 'assets']
DECORATE_CONTENT = {
'[data-button]': ['w-100', 'w-auto-ns', 'tc', 'tl-ns', 'dib', 'mt3', 'ph4', 'pv2', 'b--solid', 'bw2'],
'[data-button-mb5]': ['w-100', 'w-auto-ns', 'tc', 'tl-ns', 'dib', 'mt3', 'mb5', 'ph4', 'pv2', 'b--solid', 'bw2'],
'[data-button="yellow"]': ['brd-cclr-mid-yellow', 'fnt-cclr-mid-yellow'],
'[data-button="black"]': ['brd-cclr-mid-black', 'fnt-cclr-mid-black'],
'[data-button-mb5="black"]': ['brd-cclr-mid-black', 'fnt-cclr-mid-black'],
'[data-button="outline"]': ['b--gray', 'gray'],
'[data-button="full"]': ['cclr-brd-black-mid', 'white', 'cclr-bg-black-mid'],
'[data-button-mb5="full"]': ['cclr-brd-black-mid', 'white', 'cclr-bg-black-mid'],
'a': ['link', 'b', 'dim'],
'a:not([data-button])': ['gray'],
'h1': ['f2', 'normal', 'lh-title', 'mt4', 'ma0', 'mb3', 'light-silver'],
'h2': ['f25', 'normal', 'lh-title', 'mt4', 'ma0', 'mb3', 'light-silver'],
'h3': ['f5', 'normal', 'mt5', 'ma0', 'mb3', 'fnt-cclr-mid-black'],
'h3': ['f5', 'normal', 'mt5', 'ma0', 'mb3', '.cclr-fnt-black-mid'],
'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb3'],
'h5': ['f5', 'b', 'mt4', 'ma0', 'mb1'], # text over button
'h6': ['f5', 'lh-solid', 'normal', 'ma0', 'mb3', 'light-silver'], # date
@ -75,7 +75,8 @@ PATREON_URL = 'https://www.patreon.com/offen'
LINKEDIN_URL = 'https://www.linkedin.com/company/hioffen'
TWITTER_URL = 'https://twitter.com/hioffen'
RELEASE_DIRECT_URL = 'https://get.offen.dev'
DOCKER_DIRECT_URL = '#'
DOCKER_DIRECT_URL = 'https://hub.docker.com/r/offen/offen'
HEROKU_DIRECT_URL = 'https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/master'
OFFEN_AUDITORIUM_URL = 'https://analytics.offen.dev/'
OFFEN_ACCOUNT_ID = os.environ.get('OFFEN_ACCOUNT_ID', None)

View File

@ -1,10 +1,13 @@
/* ---------------------------------------------------
COLORS NEW
COLORS
----------------------------------------------------*/
/* Yellows */
.cclr-bg-yellow-mid {
background-color: #F7BF08;
}
.cclr-fnt-yellow-mid {
color: #F7BF08;
}
.cclr-bg-yellow-bright {
background-color: #FDE28C;
}
@ -41,11 +44,6 @@ COLORS NEW
border-color: #39352A;
}
/* White */
.cclr-bg-white-dark {
background-color: #f9f7f2;
@ -58,62 +56,10 @@ COLORS NEW
}
/* ---------------------------------------------------
COLORS OLD
----------------------------------------------------*/
/* Custom Tachyons classes */
.cclr-mid-yellow {
background-color: #F7BF08;
}
.fnt-cclr-mid-yellow {
color: #F7BF08;
}
.brd-cclr-mid-yellow {
border-color: #F7BF08;
}
.cclr-yellow-bright {
background-color: #fde28c;
}
.fnt-cclr-yellow-bright {
color: #fde28c;
}
.cclr-mid-mint {
background-color: #BBD9D3;
}
.fnt-cclr-mint-bright {
color: #E2F6F2;
}
.cclr-mid-black {
background-color: #39352A;
}
.fnt-cclr-mid-black {
color: #39352A;
}
.brd-cclr-mid-black {
border-color: #39352A;
}
.cclr-dark-white {
background-color: #f9f7f2;
}
/* ---------------------------------------------------
LAYOUT
----------------------------------------------------*/
/* Menu - UPDATE!!!! */
/* Menu */
.menu {
width: 100%;
height: 4rem; /* Tachyons mt5 */
@ -122,9 +68,6 @@ LAYOUT
top: 0;
right: 0;
}
.columns {
column-count: 1;
}
/* Custom media query */
@media only screen and (min-width: 60rem) {
.columns {
@ -140,17 +83,6 @@ LAYOUT
}
}
/* OLD */
.w55 {
width: 20rem;
}
/* NEW */
/* HWidths and heights */
.wx18 {
width: 18rem;
@ -159,7 +91,6 @@ LAYOUT
.wx24-metrics {
width: 86%;
}
.hx24 {
height: 24rem;
}
@ -176,13 +107,11 @@ LAYOUT
.hx-metrics {
height: 100%;
}
@media only screen and (min-width: 30em) {
.wx24,
.wx24-metrics {
width: 24rem;
}
.hx-try-user {
height: 24rem;
}
@ -190,12 +119,10 @@ LAYOUT
height: 128rem;
}
}
@media only screen and (min-width: 60em) {
.wx24-metrics {
width: 100%;
}
.hx-compare-c,
.hx-compare-d {
height: 50rem;
@ -205,7 +132,6 @@ LAYOUT
}
}
/* Margins an paddings */
.ptx-feature-2 {
padding-top: 9rem;
@ -214,7 +140,6 @@ LAYOUT
padding-top: 18rem;
}
/* Stacking boxes */
.stackbox-10 img,
.stackbox-20 img,
@ -301,11 +226,25 @@ TYPO AND LAYOUT ELEMENTS
.link:focus {
outline: none;
}
/* index logo */
.intro-margin-a {
margin-top: 0.3rem;
}
.intro-margin-b {
margin-top: 0.7rem;
}
/* Break long word on mobile */
body {
overflow-wrap: break-word;
overscroll-behavior: none;
}
/* font size iPhone 5 etc */
@media only screen and (max-width: 20em) {
.f5 {
font-size: 0.95rem;
}
}
/* Custom Tachyons class */
.f25 {
font-size: 1.9rem;
@ -356,18 +295,133 @@ i {
}
/* ?????? */
.tracked-min {
letter-spacing: .03em;
/* ---------------------------------------------------
IMAGES
----------------------------------------------------*/
/* Put article image outside of container margins */
.larger-image {
margin-top: -4rem;
margin-left: -1rem;
margin-right: -1rem;
}
.intro-margin-a {
margin-top: 0.3rem;
.smaller-image {
width: 200px;
height: 109px;
margin-bottom: -2rem;
}
.intro-margin-b {
margin-top: 0.7rem;
.screencast {
border: 1px solid #DDDDDD;
}
@media only screen and (min-width: 30em) {
.larger-image {
margin-top: -4rem;
margin-left: -4rem;
margin-right: -4rem;
}
.smaller-image {
width: 350px;
height: 190px;
}
}
/* ---------------------------------------------------
STACKING IMAGES
----------------------------------------------------*/
.bg-feature-1 img,
.bg-feature-3 img {
max-width: none;
}
.bg-feature-1 {
top: 0;
left: -25%;
z-index : 400;
}
.bg-feature-3 {
top: 0;
left: -35%;
z-index : 410;
}
.bg-compare-a-pfeil {
top: -10rem;
left: 0;
z-index : 510;
}
.bg-compare-b-smile {
top: 17rem;
left: 6rem;
z-index : 520;
}
.bg-compare-c-pfeil {
top: -5rem;
left: 7rem;
z-index : 530;
}
.bg-metrics-bulb {
top: 8.5rem;
left: calc(100% - 10rem);
z-index : 550;
}
.bg-cta-pfeil {
top: -11rem;
left: 66%;
z-index : 570;
}
@media only screen and (min-width: 30em) {
.bg-feature-1 {
left: calc(50% - 21rem);
}
.bg-feature-3 {
left: calc(50% - 18rem);
}
.bg-compare-c-pfeil {
top: -5rem;
left: 10rem;
}
.bg-metrics-bulb {
top: 11rem;
left: calc(100% - 30rem);
z-index : 550;
}
.bg-cta-pfeil {
top: -12rem;
left: 72%;
}
}
@media only screen and (min-width: 60em) {
.bg-feature-1 {
left: -50%;
}
.bg-feature-3 {
left: -50%;
}
.bg-metrics-bulb {
top: -3rem;
left: calc(100% - 20rem);
}
.bg-cta-pfeil {
top: -12rem;
left: 66%;
}
}
/* ---------------------------------------------------
BACKROUND IMAGES
----------------------------------------------------*/
#bg-feature-2 {
background: url(/theme/images/gfx-feature-2.png) center;
background-repeat: no-repeat;
background-size: 640px 480px;
transform: rotate(180deg);
}
#bg-pattern {
background: url(/theme/images/gfx-bg-pattern.svg) 8rem 2rem;
}
#bg-explainer {
background:
url(/theme/images/gfx-bg-explainer.svg) top center repeat-x,
url(/theme/images/gfx-bg-explainer.svg) bottom center repeat-x;
}
@ -533,139 +587,3 @@ nav ul li ul li a {
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
/* ---------------------------------------------------
IMAGES
----------------------------------------------------*/
/* Put article image outside of container margins */
.larger-image {
margin-top: -4rem;
margin-left: -1rem;
margin-right: -1rem;
}
.smaller-image {
width: 200px;
height: 109px;
margin-bottom: -2rem;
}
.screencast {
border: 1px solid #DDDDDD;
}
/* Custom media query - extra small */
@media only screen and (min-width: 30em) {
.larger-image {
margin-top: -4rem;
margin-left: -4rem;
margin-right: -4rem;
}
.smaller-image {
width: 350px;
height: 190px;
}
}
/* ---------------------------------------------------
STACKING IMAGES
----------------------------------------------------*/
.bg-feature-1 img,
.bg-feature-3 img {
max-width: none;
}
.bg-feature-1 {
top: 0;
left: -25%;
z-index : 400;
}
.bg-feature-3 {
top: 0;
left: -35%;
z-index : 410;
}
.bg-compare-a-pfeil {
top: -10rem;
left: 0;
z-index : 510;
}
.bg-compare-b-smile {
top: 17rem;
left: 6rem;
z-index : 520;
}
.bg-compare-c-pfeil {
top: -5rem;
left: 7rem;
z-index : 530;
}
.bg-metrics-bulb {
top: 8.5rem;
left: calc(100% - 10rem);
z-index : 550;
}
.bg-cta-pfeil {
top: -11rem;
left: 66%;
z-index : 570;
}
@media only screen and (min-width: 30em) {
.bg-feature-1 {
left: calc(50% - 21rem);
}
.bg-feature-3 {
left: calc(50% - 18rem);
}
.bg-compare-c-pfeil {
top: -5rem;
left: 10rem;
}
.bg-metrics-bulb {
top: 11rem;
left: calc(100% - 30rem);
z-index : 550;
}
.bg-cta-pfeil {
top: -12rem;
left: 72%;
}
}
@media only screen and (min-width: 60em) {
.bg-feature-1 {
left: -50%;
}
.bg-feature-3 {
left: -50%;
}
.bg-metrics-bulb {
top: -3rem;
left: calc(100% - 20rem);
}
.bg-cta-pfeil {
top: -12rem;
left: 66%;
}
}
/* ---------------------------------------------------
BACKROUND IMAGES
----------------------------------------------------*/
#bg-feature-2 {
background: url(/theme/images/gfx-feature-2.png) center;
background-repeat: no-repeat;
background-size: 640px 480px;
transform: rotate(180deg);
}
#bg-pattern {
background: url(/theme/images/gfx-bg-pattern.svg) 8rem 2rem;
}
#bg-explainer {
background:
url(/theme/images/gfx-bg-explainer.svg) top center repeat-x,
url(/theme/images/gfx-bg-explainer.svg) bottom center repeat-x;
}

View File

@ -1,3 +0,0 @@
<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="22.5" cy="22.5" r="22.5" fill="#C4C4C4"/>
</svg>

Before

Width:  |  Height:  |  Size: 157 B

View File

@ -5,7 +5,7 @@
{% set href = 'blog/' %}
{% set no_stats = False %}
{% set template = 'archives' %}
{% set is_article = 'true' %}
{% set cta_1 = 'true' %}
{% block content %}
{% for article in articles %}

View File

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

View File

@ -32,36 +32,36 @@
{% endif %}
</head>
{% endblock %}
<body class="{{ template }} f5 rubik lh-copy fnt-cclr-mid-black cclr-mid-black">
<div class="cclr-dark-white">
<div class="menu w-100 cclr-mid-yellow">
<body class="{{ template }} f5 rubik lh-copy cclr-fnt-black-mid cclr-bg-black-mid">
<div class="cclr-bg-white-dark">
<div class="menu w-100 cclr-bg-yellow-mid">
<section class="nav-bar">
<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>
</div>
{% if is_getstarted != 'true' %}
{% if funnel != 'true' %}
<nav>
<div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
<ul class="nav-list">
<li>
<a class="b link dim fnt-cclr-mid-black" href="/">Summary</a>
<a class="b link dim cclr-fnt-black-mid" href="/">Summary</a>
</li>
<li>
<a class="b link dim fnt-cclr-mid-black" href="/deep-dive/">Deep dive</a>
<a class="b link dim cclr-fnt-black-mid" href="/deep-dive/">Deep dive</a>
</li>
<li>
<a class="b link dim fnt-cclr-mid-black" href="/blog/">Status</a>
<a class="b link dim cclr-fnt-black-mid" href="/blog/">Blog</a>
</li>
<li>
<a class="b link dim fnt-cclr-mid-black" href="/about/">About</a>
<a class="b link dim cclr-fnt-black-mid" href="/about/">About</a>
</li>
<li>
<a class="b link dim fnt-cclr-mid-black" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
<a class="b link dim cclr-fnt-black-mid" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
</li>
<li>
<a class="b link dim fnt-cclr-mid-black" href="{{ DOCS_URL }}" rel="noopener" target="_blank">Docs</a>
<a class="b link dim cclr-fnt-black-mid" href="{{ DOCS_URL }}" rel="noopener" target="_blank">Docs</a>
</li>
<li>
<a class="b link dim" href="/get-started/">Get started</a>
@ -82,39 +82,45 @@
{% if funnel != 'true' %}
{% block outro %}
<div class="w-100 cclr-mid-yellow">
<div class="pt3 pb4 ph3" id="bg-cta-bottom">
<div class="w-100 cclr-bg-yellow-mid">
<div class="pt3 pb4 ph3" id="bg-pattern">
<div class="mw8 center">
<div class="flex flex-wrap justify-center pt3">
<div class="w55 ph3 pt4 pb5 tc cclr-mid-yellow">
<div class="flex flex-wrap justify-center tc pt3">
{% if cta_2 != 'true' %}
<div class="wx24 ph4-ns pt4 pb5 cclr-bg-yellow-mid">
<h2 class="f25 normal lh-solid ma0 mb3">
Participate
</h2>
<p class="ma0 mb3">
Development of Offen has just started. Do not hesitate to make a contribution and help us handle data with respect.
Audit our open source code and feel free to make a contribution.
</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>
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
</div>
{% if is_article != 'true' %}
<div class="w55 ph3 pt4 pb5 tc cclr-mid-yellow">
{% endif %}
{% if cta_1 != 'true' %}
<div class="wx24 ph4-ns pt4 pb5 cclr-bg-yellow-mid">
<h2 class="f25 normal lh-solid ma0 mb3">
In the making
</h2>
<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.
Discover what is already up and running and where we want to go.
</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>
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/blog/">Open blog</a>
</div>
{% endif %}
<div class="w55 ph3 pt4 pb5 tc cclr-mid-yellow">
<div class="wx24 ph4-ns pt4 pb5 cclr-bg-yellow-mid">
<h2 class="f25 normal lh-solid ma0 mb3">
Ethical internet
</h2>
<p class="ma0 mb3">
We're working hard to ensure that Offen is independent and can be sustained for years to come.
Help to ensure that Offen is independent and can be sustained.
</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>
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Support us</a>
</div>
</div>
</div>
</div>
@ -122,11 +128,11 @@
{% endblock %}
{% endif %}
{% if funnel != 'true' %}
<div class="w-100 cclr-mid-black gray ph4 pb4">
<div class="w-100 cclr-bg-black-mid gray ph4 pb4">
<div class="flex flex-row-l flex-column w-100-l mw6-m center-m pt4 pb6">
<div class="w-25-l mt3 mr3 fnt-cclr-mid-yellow">
<div class="w-25-l mt3 mr3 cclr-fnt-yellow-mid">
<p class="ma0">
<a class="b link dim fnt-cclr-mid-yellow" href="/">Offen</a>
<a class="b link dim cclr-fnt-yellow-mid" href="/">Offen</a>
</p>
<p class="ma0">Transparent web analytics</p>
<p class="ma0">for everyone</p>
@ -139,6 +145,9 @@
<a class="link b dim gray" target="_blank" href="/theme/{{ GPG_KEY_FILE }}">GPG Key</a>
</p>
<p class="ma0 mt2">
<a class="link b dim gray" href="/blog/">Blog</a>
</p>
<p class="ma0">
<a class="link b dim gray" href="{{ DOCS_URL }}" rel="noopener" target="_blank">Docs</a>
</p>
<p class="ma0">
@ -165,14 +174,13 @@
</div>
</div>
{% else %}
<div class="w-100 cclr-mid-mint ph4 pb4">
<div class="w-100 cclr-bg-mint-mid ph4 pb4">
<div id="bg-pattern">
<div class="flex flex-row-l flex-column w-100-l mw6-m center-m pt4 pb6">
<div class="w-25-l mt3 mr3 fnt-cclr-mid-black">
<div class="w-25-l mt3 mr3 cclr-fnt-black-mid">
<p class="ma0">
<a class="b link dim fnt-cclr-mid-black" href="/">Offen</a>
<a class="b link dim cclr-fnt-black-mid" href="/">Offen</a>
</p>
<p class="ma0">Transparent web analytics</p>
<p class="ma0">for everyone</p>
@ -186,8 +194,6 @@
</div>
</div>
</div>
</div>
{% endif %}

View File

@ -1,5 +1,4 @@
{% extends "page.html" %}
{% set funnel = 'true' %}
{% block content %}
@ -12,7 +11,7 @@
Get started
</h2>
<h3 class="f25 f2-ns normal ma0 mb5 mh6-ns">
Choose your favorite way to self host Offen.
Choose your favorite way to self host Offen
</h3>
<div class="flex flex-column items-center">
@ -22,17 +21,16 @@
<a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 white cclr-bg-black-mid" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
<p class="lh-title ma0 mb2 gray">
Your own instance in Docker <br>development environment
Offen as a lightweight<br> Docker image
</p>
<a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 white cclr-bg-black-mid" href="{{ DOCKER_DIRECT_URL }}" rel="noopener">Deploy with Docker</a>
<a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 white cclr-bg-black-mid" href="{{ DOCKER_DIRECT_URL }}" target="_blank" rel="noopener">Deploy with Docker</a>
<p class="lh-title ma0 mb2 gray">
Your own instance on Heroku
</p>
<a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb6 white cclr-bg-black-mid" href="{{ HEROKU_DIRECT_URL }}" rel="noopener">Deploy to Heroku</a>
<a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb6 white cclr-bg-black-mid" href="{{ HEROKU_DIRECT_URL }}" target="_blank" rel="noopener">Deploy to Heroku</a>
</div>
<p class="tc ma0 mb4 mh5-ns gray">
Be aware that things can still contain issues and that the upgrade path may be broken with upcoming releases.
</p>
@ -40,17 +38,18 @@
<hr class="ma0 mb5 b--black-05">
<h3 class="f25 normal ma0 mb5">
Read the docs.
Read the docs
</h3>
<div class="flex flex-column items-center">
<p class="lh-title ma0 mb2 gray">
Details on how to<br> install and run Offen
</p>
<a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 cclr-fnt-black-mid" href="https://docs.offen.dev/" rel="noopener" target="_blank">Open Docs</a>
<a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 cclr-fnt-black-mid" href="https://docs.offen.dev/" target="_blank" rel="noopener">Open Docs</a>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@ -23,13 +23,14 @@
Offen is a fair alternative to common web analytics tools. <span>Pay respect to your users while gaining insight into their behavior. </span>Self hosted, open source and free.
</p>
<div class="pb5 mb2">
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" 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>
</div>
</div>
</div>
</div>
</div>
<!-- FEATURE -->
<div class="w-100 overflow-hidden cclr-bg-mint-mid">
<div id="bg-pattern">
@ -99,9 +100,6 @@
</div>
</div>
<!-- INSIGHTS -->
<div class="w-100 dib bg-white">
<div class="tc mh4">
@ -123,8 +121,6 @@
<!-- COMPARE A -->
<div class="w-50-l w-100 cclr-bg-yellow-mid">
<div class="w-100 dib">
<div class="wx24 center">
@ -166,7 +162,6 @@
</div>
</div>
</div>
<!-- COMPARE B -->
@ -294,8 +289,6 @@
<div class="w-100 hx-compare-d dib cclr-bg-white-fade">
<div class="h-100" id="bg-pattern">
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb4">
<em class="em-mint-2">
@ -343,7 +336,6 @@
</div>
</div>
</div>
@ -396,7 +388,7 @@
<i>Offen is installed on this website. Access</i> your actual usage data <i>now.</i>
</p>
<div class="mt4">
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/deep-dive/" rel="noopener">Open Auditorium</a>
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="{{ OFFEN_AUDITORIUM_URL }}" target="_blank" rel="noopener">Open Auditorium</a>
<img src="/theme/images/gfx-compare-f-scribble.png" alt="smile" width="300px" height="100px">
</div>
</div>
@ -418,7 +410,6 @@
</div>
</div>
<p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
<em>
Essential metrics
@ -492,7 +483,6 @@
</div>
</div>
</div>
</div>
@ -513,29 +503,20 @@
<div class="flex flex flex-wrap justify-center">
<div class="mw5 mb5 mh0 mh4-ns">
<p class="tc f5 ma0 mb3 gray mh4">
Test drive Offen on your system today.
Test drive Offen on your system today
</p>
<a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="/try-demo/" rel="noopener">Try demo</a>
<a class="w-100 b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/try-demo/" rel="noopener">Try demo</a>
</div>
<div class="mw5 mb7 mh0 mh4-ns">
<p class="tc f5 ma0 mb3 mh4">
All you need to use Offen in production.
All you need to use Offen in production
</p>
<a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black white cclr-bg-black-mid" href="/get-started/" rel="noopener">Get started</a>
<a class="w-100 b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid white cclr-bg-black-mid" href="/get-started/" rel="noopener">Get started</a>
</div>
</div>
</div>
</div>
{% endblock %}
{% block outro %}

View File

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

View File

@ -1,5 +1,4 @@
{% extends "page.html" %}
{% set funnel = 'true' %}
{% block content %}
@ -12,11 +11,11 @@
Try demo
</h2>
<h3 class="f25 f2-ns normal tc ma0 mb5">
Test drive Offen on your system.
Test drive Offen on your system
</h3>
<p class="lh-title ma0 mb3 gray">
Open your terminal and type:
Open your terminal and type
</p>
<div class="flex flex-column items-center">
<div class="w-100 ph4 pv2 mb5 inner-shaddow bg-gray">
@ -27,7 +26,7 @@
</div>
<p class="lh-title ma0 mb3 gray">
With Docker use:
With Docker use
</p>
<div class="flex flex-column items-center">
<div class="w-100 ph4 pv2 mb5 inner-shaddow bg-gray">
@ -40,7 +39,7 @@
<hr class="ma0 mb5 b--black-05">
<h3 class="f25 normal tc ma0 mb5">
Read the docs.
Read the docs
</h3>
<div class="flex flex-column items-center">
<p class="lh-title tc ma0 mb2 gray">
@ -53,4 +52,5 @@
</div>
</div>
{% endblock %}