offen/website
2
0
Fork 0
mirror of https://github.com/offen/website.git synced 2024-11-26 02:40:26 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #66 from offen/update-april-22

Browse Source 
Update april 22
This commit is contained in:
Hendrik Niefeld 2020-04-28 15:53:22 +02:00 committed by GitHub
commit 86221cdf01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
40 changed files with 1124 additions and 387 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
homepage/content/articles/0010-milestone-1.md
View File

@ -20,18 +20,18 @@ We have further refined the existing application architecture to make it more ro
### Easy to test drive ### 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 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 ### 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. 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 ### 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. 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 ### 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. 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 ### 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. 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 ### Deep dive
Interested in the details? Want to get your hands dirty? Head over to our GitHub repo. 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"}

8
homepage/content/articles/0030-milestone-2.md
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 ### 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. 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 ### 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. 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"} 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. *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 ### 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. 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? ### 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. 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 ### Deep dive
Interested in the details? Want to get your hands dirty? Head over to our GitHub repo. 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"}

6
homepage/content/articles/0040-test-offen-today.md
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 ## Offen v0.1.0-alpha.3
##### Single binary file for Linux, Windows or MacOS ##### 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 ##### 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.* 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! 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"}

8
homepage/content/articles/0050-milestone-3.md
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. 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"/> <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. 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 ### 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. 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 ### 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. 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 ### 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"} 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. 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"/> <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. 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 ### 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. 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 ### Deep dive
Interested in the details? Want to get your hands dirty? Take a look at our code. 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"}

2
homepage/content/pages/get-started.md
View File

@ -1,5 +1,5 @@
title: Get started | Offen title: Get started | Offen
description: Want to collect usage statistics transparently? Like to contribute as a developer? Download our latest release and learn how to run, use and develop Open. description: Want to collect usage statistics transparently? Like to contribute as a developer? Download our latest release and learn how to run, use and develop Offen.
slug: get-started slug: get-started
template: getstarted template: getstarted
sitemap_priority: 0.8 sitemap_priority: 0.8

8
homepage/content/pages/index.md
View File

@ -3,11 +3,3 @@ description: Offen is a fair alternative to common web analytics tools. Respect
save_as: index.html save_as: index.html
template: index template: index
sitemap_priority: 1.0 sitemap_priority: 1.0
Offen is a web analytics software that gives users access to the data they are generating. Not only operators running sites or applications are able to use the analytics tools, but also _the users themselves are granted access to their data._
Usage metrics come with explanations about their meaning, relevance, usage and possible privacy implications. Offen also details _which kind of data is not collected._ All data can be deleted by the users or the collection can be disabled altogether.
Offen treats both users and operators as parties of equal importance. Users can expect full transparency and are encouraged to make _autonomous and informed decisions regarding the use of their data._ Operators are enabled to gain insights while respecting their users' privacy and data.
Offen is currently in the early stages of development and is applying for funds to sustain its development.

5
homepage/content/pages/try-demo.md Normal file
View File

@ -0,0 +1,5 @@
title: Try demo | Offen
description: Test drive Offen on your system today.
slug: try-demo
template: trydemo
sitemap_priority: 0.1

10
homepage/pelicanconf.py
View File

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

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

@ -1,56 +1,73 @@
/* --------------------------------------------------- /* ---------------------------------------------------
COLORS COLORS
----------------------------------------------------*/ ----------------------------------------------------*/
/* Custom Tachyons classes */ /* Yellows */
.cclr-mid-yellow { .cclr-bg-yellow-mid {
background-color: #F7BF08; background-color: #F7BF08;
} }
.fnt-cclr-mid-yellow { .cclr-fnt-yellow-mid {
color: #F7BF08; color: #F7BF08;
} }
.brd-cclr-mid-yellow { .cclr-bg-yellow-bright {
border-color: #F7BF08; background-color: #FDE28C;
} }
.cclr-yellow-bright { .cclr-bg-yellow-bright-very {
background-color: #fde28c; background-color: #F9F7F2;
} }
.fnt-cclr-yellow-bright {
color: #fde28c; /* Mint */
.cclr-bg-mint-dark {
background-color: #9BC5BC;
} }
.cclr-mid-mint { .cclr-bg-mint-mid {
background-color: #BBD9D3; background-color: #BBD9D3;
} }
.fnt-cclr-mint-bright { .cclr-bg-mint-bright {
color: #E2F6F2; background-color: #DEF0ED;
} }
.cclr-mid-black { .cclr-bg-mint-fade-a {
background: linear-gradient(207.34deg, rgba(222, 240, 237, 0.6) 11.24%, rgba(255, 255, 255, 0) 102.6%), #BBD9D3;
}
.cclr-bg-mint-fade-b {
background: linear-gradient(207.34deg, rgba(222, 240, 237, 0.6) 11.24%, rgba(255, 255, 255, 0) 102.6%), #BBD9D3;
transform: rotate(-180deg);
}
/* Black */
.cclr-bg-black-mid {
background-color: #39352A; background-color: #39352A;
} }
.fnt-cclr-mid-black { .cclr-fnt-black-mid {
color: #39352A; color: #39352A;
} }
.brd-cclr-mid-black { .cclr-brd-black-mid {
border-color: #39352A; border-color: #39352A;
} }
.cclr-dark-white {
/* White */
.cclr-bg-white-dark {
background-color: #f9f7f2; background-color: #f9f7f2;
} }
.cclr-bg-white-fade {
background: linear-gradient(218.39deg, #FFFFFF 1.47%, rgba(255, 255, 255, 0) 98.24%), #F3F0E7;
}
.cclr-bg-white-fade-metrics {
background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), #F3F0E7;
}
/* --------------------------------------------------- /* ---------------------------------------------------
LAYOUT LAYOUT
----------------------------------------------------*/ ----------------------------------------------------*/
/* Menu */
.menu { .menu {
width: 100%; width: 100%;
height: 4rem; /* Tachyons mt5 */ height: 4rem; /* Tachyons mt5 */
position: fixed; position: fixed;
z-index: 1; z-index: 999;
top: 0; top: 0;
right: 0; right: 0;
} }
.columns {
column-count: 1;
}
/* Custom media query */ /* Custom media query */
@media only screen and (min-width: 60rem) { @media only screen and (min-width: 60rem) {
.columns { .columns {
@ -65,21 +82,143 @@ LAYOUT
position: static; position: static;
} }
} }
/* Custom Tachyons class */
.w55-container, /* HWidths and heights */
.w55 { .wx18 {
width: 20rem; width: 18rem;
} }
.w56 { .wx24,
width: 20rem; .wx24-metrics {
height: 480px; width: 86%;
} }
/* Custom media query - extra small */ .hx24 {
@media only screen and (max-width: 40em) { height: 24rem;
.w55-container { }
width: 100%; .hx-feature {
height: 30rem;
}
.hx-more {
height: 30rem;
}
.hx-compare-c,
.hx-compare-d {
height: 100%;
}
.hx-metrics {
height: 100%;
}
@media only screen and (min-width: 30em) {
.wx24,
.wx24-metrics {
width: 24rem;
}
.hx-try-user {
height: 24rem;
}
.hx-metrics {
height: 128rem;
} }
} }
@media only screen and (min-width: 60em) {
.wx24-metrics {
width: 100%;
}
.hx-compare-c,
.hx-compare-d {
height: 50rem;
}
.hx-metrics {
height: 132rem;
}
}
/* Margins an paddings */
.ptx-feature-2 {
padding-top: 9rem;
}
.ptx-feature-3 {
padding-top: 18rem;
}
/* Stacking boxes */
.stackbox-10 img,
.stackbox-20 img,
.stackbox-30 img,
.stackbox-40 img,
.stackbox-50 img {
max-width: 100%;
}
.stackbox-10,
.stackbox-20,
.stackbox-30,
.stackbox-40,
.stackbox-50 {
width: 86%;
}
@media only screen and (min-width: 30em) {
.stackbox-10 img,
.stackbox-20 img,
.stackbox-30 img,
.stackbox-40 img,
.stackbox-50 img {
max-width: none;
}
.stackbox-10,
.stackbox-20,
.stackbox-30,
.stackbox-40,
.stackbox-50 {
width: 24rem;
}
.stackbox-10 {
z-index : 110;
top: 2rem;
left: calc(100% - 27rem)
}
.stackbox-20 {
z-index : 120;
top: 12rem;
left: 3rem;
}
.stackbox-30 {
z-index : 140;
top: 33rem;
left: calc(100% - 27rem)
}
.stackbox-40 {
z-index : 130;
top: 52rem;
left: 3rem;
}
.stackbox-50 {
z-index : 148;
top: 74rem;
left: calc(100% - 27rem)
}
}
@media only screen and (min-width: 60em) {
.stackbox-10 {
top: -6rem;
left: 34rem;
}
.stackbox-20 {
top: 10rem;
left: 6rem;
}
.stackbox-30 {
top: 28rem;
left: 29rem;
}
.stackbox-40 {
top: 55rem;
left: 10rem;
}
.stackbox-50 {
top: 74rem;
left: 31rem;
}
}
/* --------------------------------------------------- /* ---------------------------------------------------
TYPO AND LAYOUT ELEMENTS TYPO AND LAYOUT ELEMENTS
@ -87,11 +226,25 @@ TYPO AND LAYOUT ELEMENTS
.link:focus { .link:focus {
outline: none; outline: none;
} }
/* index logo */
.intro-margin-a {
margin-top: 0.3rem;
}
.intro-margin-b {
margin-top: 0.7rem;
}
/* Break long word on mobile */ /* Break long word on mobile */
body { body {
overflow-wrap: break-word; overflow-wrap: break-word;
overscroll-behavior: none; overscroll-behavior: none;
} }
/* font size iPhone 5 etc */
@media only screen and (max-width: 20em) {
.f5 {
font-size: 0.95rem;
}
}
/* Custom Tachyons class */ /* Custom Tachyons class */
.f25 { .f25 {
font-size: 1.9rem; font-size: 1.9rem;
@ -109,10 +262,14 @@ em {
background: linear-gradient(transparent 66%, #fde28c 66%); background: linear-gradient(transparent 66%, #fde28c 66%);
font-style: normal; font-style: normal;
} }
.em-mint { .em-mint-1 {
background: linear-gradient(transparent 66%, #E5FDF8 66%); background: linear-gradient(transparent 66%, #E5FDF8 66%);
font-style: normal; font-style: normal;
} }
.em-mint-2 {
background: linear-gradient(transparent 66%, #BBD9D3 66%);
font-style: normal;
}
hr { hr {
margin-left: -1rem; margin-left: -1rem;
margin-right: -1rem; margin-right: -1rem;
@ -129,14 +286,145 @@ ul {
padding-inline-start: 1rem; padding-inline-start: 1rem;
} }
} }
.tracked-min { i {
letter-spacing: .03em; font-style: normal;
color: #777777;
} }
.intro-margin-a { .i-on-yellow {
margin-top: 0.3rem; color: #8c7839;
} }
.intro-margin-b { .inner-shaddow {
margin-top: 0.7rem; box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.75);
}
/* ---------------------------------------------------
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;
}
@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;
} }
@ -302,84 +590,3 @@ nav ul li ul li a {
#nav-toggle.active span:after { #nav-toggle.active span:after {
transform: rotate(-45deg); 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;
}
}
/* ---------------------------------------------------
GRAPHICS
----------------------------------------------------*/
#bg-intro {
background: url(/theme/images/gfx-intro.svg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 200px 80px;
}
@media only screen and (min-width: 30.1em) and (max-width: 60em) {
#bg-intro {
background-position: calc(20% + 120px) 80px;
}
}
@media only screen and (max-width: 30em) {
#bg-intro {
background-position: 10px 60px;
}
}
/* --------------------------------------------- */
#bg-feature-1 {
background: url(/theme/images/gfx-feature-1.png) center;
background-repeat: no-repeat;
background-size: 640px 480px;
}
#bg-feature-2 {
background: url(/theme/images/gfx-feature-2.png) center;
background-repeat: no-repeat;
background-size: 640px 480px;
}
#bg-feature-3 {
background: url(/theme/images/gfx-feature-3.png) center;
background-repeat: no-repeat;
background-size: 640px 480px;
}
/* --------------------------------------------- */
#bg-feature {
background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
}
#bg-cta-top {
background: url(/theme/images/gfx-object-white.svg) center;
}
#bg-outro {
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
}
#bg-cta-bottom {
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
}

3
homepage/theme/static/images/gfx-bg-explainer.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="1440" height="121" viewBox="0 0 1440 121" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="-1" width="1441" height="121" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 163 B

3
homepage/theme/static/images/gfx-bg-pattern.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
homepage/theme/static/images/gfx-compare-a-pfeil.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
homepage/theme/static/images/gfx-compare-a.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
homepage/theme/static/images/gfx-compare-b-smile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
homepage/theme/static/images/gfx-compare-b.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
homepage/theme/static/images/gfx-compare-c-pfeil.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
homepage/theme/static/images/gfx-compare-e.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
homepage/theme/static/images/gfx-compare-f-scribble.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
homepage/theme/static/images/gfx-cta-pfeil.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
homepage/theme/static/images/gfx-feature-1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
homepage/theme/static/images/gfx-feature-2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
homepage/theme/static/images/gfx-feature-3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 86 KiB

After

Width:  |  Height:  |  Size: 24 KiB

56
homepage/theme/static/images/gfx-intro.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 116 KiB

29
homepage/theme/static/images/gfx-metrics-bars.svg Normal file
View File

@ -0,0 +1,29 @@
<svg width="320" height="443" viewBox="0 0 320 443" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="31" y1="419.5" x2="320" y2="419.5" stroke="#777777"/>
<line x1="31" y1="258.5" x2="320" y2="258.5" stroke="#CCCCCC"/>
<line x1="31" y1="98.5" x2="320" y2="98.5" stroke="#CCCCCC"/>
<path d="M35.3179 437C35.2539 437 35.1979 436.976 35.1499 436.928C35.1019 436.88 35.0779 436.824 35.0779 436.76L35.1019 436.628L38.0779 428.864C38.1419 428.688 38.2699 428.6 38.4619 428.6H39.2299C39.4219 428.6 39.5499 428.688 39.6139 428.864L42.5899 436.628L42.6139 436.76C42.6139 436.824 42.5859 436.88 42.5299 436.928C42.4819 436.976 42.4259 437 42.3619 437H41.7979C41.7179 437 41.6499 436.98 41.5939 436.94C41.5459 436.892 41.5139 436.844 41.4979 436.796L40.8259 435.068H36.8539L36.1939 436.796C36.1299 436.932 36.0299 437 35.8939 437H35.3179ZM37.2019 434.072H40.4899L38.8459 429.764L37.2019 434.072ZM45.9995 437.12C45.2395 437.12 44.6515 436.876 44.2355 436.388C43.8195 435.892 43.6115 435.236 43.6115 434.42V431.036C43.6115 430.956 43.6355 430.892 43.6835 430.844C43.7395 430.788 43.8075 430.76 43.8875 430.76H44.4395C44.5195 430.76 44.5835 430.788 44.6315 430.844C44.6875 430.892 44.7155 430.956 44.7155 431.036V434.36C44.7155 435.576 45.2435 436.184 46.2995 436.184C46.8115 436.184 47.2155 436.024 47.5115 435.704C47.8155 435.376 47.9675 434.928 47.9675 434.36V431.036C47.9675 430.956 47.9915 430.892 48.0395 430.844C48.0955 430.788 48.1635 430.76 48.2435 430.76H48.7955C48.8755 430.76 48.9395 430.788 48.9875 430.844C49.0435 430.892 49.0715 430.956 49.0715 431.036V436.724C49.0715 436.804 49.0435 436.872 48.9875 436.928C48.9395 436.976 48.8755 437 48.7955 437H48.2795C48.1995 437 48.1315 436.976 48.0755 436.928C48.0275 436.872 48.0035 436.804 48.0035 436.724V436.184C47.7715 436.496 47.4995 436.732 47.1875 436.892C46.8755 437.044 46.4795 437.12 45.9995 437.12ZM53.3988 439.64C52.7348 439.64 52.2028 439.528 51.8028 439.304C51.4028 439.08 51.1188 438.824 50.9508 438.536C50.7908 438.248 50.7108 438 50.7108 437.792C50.7108 437.72 50.7388 437.656 50.7948 437.6C50.8508 437.552 50.9148 437.528 50.9868 437.528H51.5148C51.5868 437.528 51.6468 437.544 51.6948 437.576C51.7428 437.616 51.7828 437.684 51.8148 437.78C52.0388 438.42 52.5468 438.74 53.3388 438.74C53.9388 438.74 54.3828 438.612 54.6708 438.356C54.9588 438.1 55.1028 437.648 55.1028 437V436.172C54.6388 436.764 53.9908 437.06 53.1588 437.06C52.3108 437.06 51.6748 436.788 51.2508 436.244C50.8348 435.7 50.6148 435.012 50.5908 434.18L50.5788 433.844L50.5908 433.52C50.6148 432.696 50.8348 432.012 51.2508 431.468C51.6748 430.916 52.3108 430.64 53.1588 430.64C53.9988 430.64 54.6548 430.948 55.1268 431.564V431.048C55.1268 430.968 55.1508 430.9 55.1988 430.844C55.2548 430.788 55.3228 430.76 55.4028 430.76H55.9188C55.9988 430.76 56.0628 430.788 56.1108 430.844C56.1668 430.9 56.1948 430.968 56.1948 431.048V436.868C56.1948 438.716 55.2628 439.64 53.3988 439.64ZM53.3748 436.124C53.9348 436.124 54.3548 435.944 54.6348 435.584C54.9228 435.216 55.0788 434.776 55.1028 434.264C55.1108 434.192 55.1148 434.052 55.1148 433.844C55.1148 433.644 55.1108 433.508 55.1028 433.436C55.0788 432.924 54.9228 432.488 54.6348 432.128C54.3548 431.76 53.9348 431.576 53.3748 431.576C52.7988 431.576 52.3788 431.76 52.1148 432.128C51.8588 432.488 51.7188 432.956 51.6948 433.532L51.6828 433.844L51.6948 434.168C51.7188 434.744 51.8588 435.216 52.1148 435.584C52.3788 435.944 52.7988 436.124 53.3748 436.124ZM63.3686 437C63.2886 437 63.2246 436.976 63.1766 436.928C63.1286 436.872 63.1046 436.804 63.1046 436.724V429.956L61.0886 431.504C61.0326 431.552 60.9726 431.576 60.9086 431.576C60.8366 431.576 60.7686 431.536 60.7046 431.456L60.4166 431.084C60.3766 431.028 60.3566 430.972 60.3566 430.916C60.3566 430.828 60.3966 430.756 60.4766 430.7L63.0806 428.684C63.1686 428.628 63.2726 428.6 63.3926 428.6H63.9566C64.0366 428.6 64.1006 428.628 64.1486 428.684C64.2046 428.732 64.2326 428.796 64.2326 428.876V436.724C64.2326 436.804 64.2046 436.872 64.1486 436.928C64.1006 436.976 64.0366 437 63.9566 437H63.3686ZM66.0183 437C65.9383 437 65.8703 436.976 65.8143 436.928C65.7663 436.872 65.7423 436.804 65.7423 436.724V436.364C65.7423 436.18 65.8423 436.004 66.0423 435.836L68.6583 433.232C69.2503 432.728 69.6583 432.316 69.8823 431.996C70.1063 431.676 70.2183 431.336 70.2183 430.976C70.2183 430.504 70.0863 430.136 69.8223 429.872C69.5583 429.6 69.1743 429.464 68.6703 429.464C68.1903 429.464 67.8103 429.604 67.5303 429.884C67.2503 430.164 67.0783 430.54 67.0143 431.012C66.9983 431.1 66.9583 431.168 66.8943 431.216C66.8303 431.264 66.7663 431.288 66.7023 431.288H66.1263C66.0543 431.288 65.9943 431.264 65.9463 431.216C65.8983 431.168 65.8743 431.112 65.8743 431.048C65.8903 430.624 66.0023 430.216 66.2103 429.824C66.4263 429.424 66.7423 429.1 67.1583 428.852C67.5743 428.596 68.0783 428.468 68.6703 428.468C69.5663 428.468 70.2383 428.704 70.6863 429.176C71.1423 429.64 71.3703 430.232 71.3703 430.952C71.3703 431.456 71.2463 431.912 70.9983 432.32C70.7583 432.72 70.3783 433.144 69.8583 433.592L67.4943 435.992H71.2743C71.3623 435.992 71.4303 436.016 71.4783 436.064C71.5263 436.112 71.5503 436.18 71.5503 436.268V436.724C71.5503 436.804 71.5223 436.872 71.4663 436.928C71.4183 436.976 71.3543 437 71.2743 437H66.0183Z" fill="#777777"/>
<path d="M92.7772 437C92.6972 437 92.6332 436.976 92.5852 436.928C92.5372 436.872 92.5132 436.804 92.5132 436.724V429.956L90.4972 431.504C90.4412 431.552 90.3812 431.576 90.3172 431.576C90.2452 431.576 90.1772 431.536 90.1132 431.456L89.8252 431.084C89.7852 431.028 89.7652 430.972 89.7652 430.916C89.7652 430.828 89.8052 430.756 89.8852 430.7L92.4892 428.684C92.5772 428.628 92.6812 428.6 92.8012 428.6H93.3652C93.4452 428.6 93.5092 428.628 93.5572 428.684C93.6132 428.732 93.6412 428.796 93.6412 428.876V436.724C93.6412 436.804 93.6132 436.872 93.5572 436.928C93.5092 436.976 93.4452 437 93.3652 437H92.7772ZM98.1148 437.12C97.4908 437.12 96.9508 437.02 96.4948 436.82C96.0388 436.612 95.6908 436.344 95.4508 436.016C95.2188 435.688 95.0948 435.348 95.0788 434.996C95.0788 434.924 95.1028 434.868 95.1508 434.828C95.1988 434.78 95.2588 434.756 95.3308 434.756H95.8708C95.9588 434.756 96.0308 434.776 96.0868 434.816C96.1428 434.848 96.1868 434.916 96.2188 435.02C96.3228 435.428 96.5468 435.716 96.8908 435.884C97.2428 436.052 97.6548 436.136 98.1268 436.136C98.7028 436.136 99.1588 436 99.4948 435.728C99.8388 435.448 100.011 435.052 100.011 434.54C100.011 433.564 99.4148 433.076 98.2228 433.076H97.0948C97.0148 433.076 96.9468 433.052 96.8908 433.004C96.8428 432.948 96.8188 432.88 96.8188 432.8V432.488C96.8188 432.368 96.8628 432.264 96.9508 432.176L99.2908 429.584H95.7388C95.6588 429.584 95.5908 429.56 95.5348 429.512C95.4868 429.464 95.4628 429.4 95.4628 429.32V428.888C95.4628 428.8 95.4868 428.732 95.5348 428.684C95.5908 428.628 95.6588 428.6 95.7388 428.6H100.491C100.579 428.6 100.647 428.628 100.695 428.684C100.751 428.732 100.779 428.8 100.779 428.888V429.284C100.779 429.372 100.739 429.464 100.659 429.56L98.3188 432.188H98.5108C99.3268 432.212 99.9708 432.424 100.443 432.824C100.923 433.224 101.163 433.808 101.163 434.576C101.163 435.104 101.031 435.56 100.767 435.944C100.511 436.32 100.151 436.612 99.6868 436.82C99.2228 437.02 98.6988 437.12 98.1148 437.12Z" fill="#777777"/>
<path d="M133.054 437C132.974 437 132.91 436.976 132.862 436.928C132.814 436.872 132.79 436.804 132.79 436.724V429.956L130.774 431.504C130.718 431.552 130.658 431.576 130.594 431.576C130.522 431.576 130.454 431.536 130.39 431.456L130.102 431.084C130.062 431.028 130.042 430.972 130.042 430.916C130.042 430.828 130.082 430.756 130.162 430.7L132.766 428.684C132.854 428.628 132.958 428.6 133.078 428.6H133.642C133.722 428.6 133.786 428.628 133.834 428.684C133.89 428.732 133.918 428.796 133.918 428.876V436.724C133.918 436.804 133.89 436.872 133.834 436.928C133.786 436.976 133.722 437 133.642 437H133.054ZM139.664 437C139.584 437 139.516 436.976 139.46 436.928C139.412 436.872 139.388 436.804 139.388 436.724V434.972H135.488C135.408 434.972 135.34 434.948 135.284 434.9C135.236 434.844 135.212 434.776 135.212 434.696V434.252C135.212 434.14 135.256 434.02 135.344 433.892L138.956 428.804C138.996 428.74 139.056 428.692 139.136 428.66C139.216 428.62 139.304 428.6 139.4 428.6H140.216C140.304 428.6 140.372 428.624 140.42 428.672C140.468 428.72 140.492 428.788 140.492 428.876V433.964H141.584C141.664 433.964 141.728 433.992 141.776 434.048C141.832 434.096 141.86 434.16 141.86 434.24V434.696C141.86 434.776 141.832 434.844 141.776 434.9C141.728 434.948 141.664 434.972 141.584 434.972H140.492V436.724C140.492 436.804 140.464 436.872 140.408 436.928C140.36 436.976 140.296 437 140.216 437H139.664ZM136.46 433.988H139.4V429.812L136.46 433.988Z" fill="#777777"/>
<path d="M172.314 437C172.234 437 172.166 436.972 172.11 436.916C172.054 436.86 172.026 436.792 172.026 436.712V430.52L170.214 431.912C170.166 431.952 170.106 431.972 170.034 431.972C169.938 431.972 169.862 431.932 169.806 431.852L169.29 431.18C169.25 431.124 169.23 431.068 169.23 431.012C169.23 430.916 169.274 430.836 169.362 430.772L172.05 428.684C172.138 428.628 172.238 428.6 172.35 428.6H173.43C173.51 428.6 173.578 428.628 173.634 428.684C173.69 428.74 173.718 428.808 173.718 428.888V436.712C173.718 436.792 173.69 436.86 173.634 436.916C173.578 436.972 173.51 437 173.43 437H172.314ZM178.241 437.132C177.577 437.132 177.001 437.02 176.513 436.796C176.033 436.572 175.669 436.276 175.421 435.908C175.173 435.54 175.041 435.144 175.025 434.72V434.696C175.025 434.632 175.049 434.58 175.097 434.54C175.153 434.492 175.213 434.468 175.277 434.468H176.417C176.601 434.468 176.717 434.548 176.765 434.708C176.877 435.06 177.061 435.32 177.317 435.488C177.581 435.656 177.889 435.74 178.241 435.74C178.689 435.74 179.057 435.604 179.345 435.332C179.641 435.06 179.789 434.684 179.789 434.204C179.789 433.772 179.641 433.424 179.345 433.16C179.057 432.888 178.689 432.752 178.241 432.752C178.001 432.752 177.805 432.784 177.653 432.848C177.501 432.912 177.353 433 177.209 433.112C177.193 433.12 177.157 433.144 177.101 433.184C177.045 433.224 176.993 433.252 176.945 433.268C176.905 433.284 176.861 433.292 176.813 433.292H175.685C175.613 433.292 175.549 433.268 175.493 433.22C175.445 433.164 175.421 433.1 175.421 433.028L175.829 428.936C175.837 428.832 175.873 428.752 175.937 428.696C176.009 428.632 176.093 428.6 176.189 428.6H180.701C180.789 428.6 180.857 428.628 180.905 428.684C180.961 428.732 180.989 428.8 180.989 428.888V429.704C180.989 429.784 180.961 429.852 180.905 429.908C180.857 429.964 180.789 429.992 180.701 429.992H177.233L177.041 431.936C177.225 431.816 177.437 431.72 177.677 431.648C177.917 431.568 178.229 431.528 178.613 431.528C179.133 431.528 179.613 431.64 180.053 431.864C180.501 432.08 180.857 432.396 181.121 432.812C181.393 433.22 181.529 433.696 181.529 434.24C181.529 434.824 181.393 435.336 181.121 435.776C180.849 436.208 180.465 436.544 179.969 436.784C179.473 437.016 178.897 437.132 178.241 437.132Z" fill="#AAAAAA"/>
<path d="M212.773 437C212.693 437 212.625 436.972 212.569 436.916C212.513 436.86 212.485 436.792 212.485 436.712V430.52L210.673 431.912C210.625 431.952 210.565 431.972 210.493 431.972C210.397 431.972 210.321 431.932 210.265 431.852L209.749 431.18C209.709 431.124 209.689 431.068 209.689 431.012C209.689 430.916 209.733 430.836 209.821 430.772L212.509 428.684C212.597 428.628 212.697 428.6 212.809 428.6H213.889C213.969 428.6 214.037 428.628 214.093 428.684C214.149 428.74 214.177 428.808 214.177 428.888V436.712C214.177 436.792 214.149 436.86 214.093 436.916C214.037 436.972 213.969 437 213.889 437H212.773ZM218.856 437.12C218.184 437.12 217.592 436.992 217.08 436.736C216.576 436.48 216.184 436.128 215.904 435.68C215.632 435.232 215.496 434.728 215.496 434.168C215.496 433.464 215.808 432.688 216.432 431.84L218.616 428.84C218.68 428.76 218.74 428.7 218.796 428.66C218.852 428.62 218.932 428.6 219.036 428.6H220.176C220.248 428.6 220.304 428.628 220.344 428.684C220.392 428.732 220.416 428.792 220.416 428.864C220.416 428.92 220.4 428.972 220.368 429.02L218.688 431.336C218.816 431.304 218.984 431.288 219.192 431.288C219.728 431.296 220.22 431.428 220.668 431.684C221.124 431.932 221.484 432.272 221.748 432.704C222.02 433.136 222.156 433.616 222.156 434.144C222.156 434.688 222.02 435.188 221.748 435.644C221.484 436.092 221.1 436.452 220.596 436.724C220.1 436.988 219.52 437.12 218.856 437.12ZM218.832 435.728C219.28 435.728 219.66 435.592 219.972 435.32C220.284 435.04 220.44 434.656 220.44 434.168C220.44 433.688 220.284 433.312 219.972 433.04C219.668 432.76 219.288 432.62 218.832 432.62C218.384 432.62 218.004 432.76 217.692 433.04C217.388 433.312 217.236 433.688 217.236 434.168C217.236 434.656 217.388 435.04 217.692 435.32C218.004 435.592 218.384 435.728 218.832 435.728Z" fill="#AAAAAA"/>
<path d="M254.205 437C254.125 437 254.061 436.976 254.013 436.928C253.965 436.872 253.941 436.804 253.941 436.724V429.956L251.925 431.504C251.869 431.552 251.809 431.576 251.745 431.576C251.673 431.576 251.605 431.536 251.541 431.456L251.253 431.084C251.213 431.028 251.193 430.972 251.193 430.916C251.193 430.828 251.233 430.756 251.313 430.7L253.917 428.684C254.005 428.628 254.109 428.6 254.229 428.6H254.793C254.873 428.6 254.937 428.628 254.985 428.684C255.041 428.732 255.069 428.796 255.069 428.876V436.724C255.069 436.804 255.041 436.872 254.985 436.928C254.937 436.976 254.873 437 254.793 437H254.205ZM257.79 437C257.718 437 257.658 436.976 257.61 436.928C257.57 436.872 257.55 436.808 257.55 436.736L257.574 436.628L260.574 429.608H256.614C256.534 429.608 256.466 429.584 256.41 429.536C256.362 429.48 256.338 429.412 256.338 429.332V428.888C256.338 428.8 256.362 428.732 256.41 428.684C256.458 428.628 256.526 428.6 256.614 428.6H261.51C261.598 428.6 261.666 428.628 261.714 428.684C261.762 428.732 261.786 428.8 261.786 428.888V429.296C261.786 429.44 261.754 429.596 261.69 429.764L258.726 436.7C258.686 436.788 258.642 436.86 258.594 436.916C258.546 436.972 258.478 437 258.39 437H257.79Z" fill="#777777"/>
<path d="M292.76 437C292.68 437 292.616 436.976 292.568 436.928C292.52 436.872 292.496 436.804 292.496 436.724V429.956L290.48 431.504C290.424 431.552 290.364 431.576 290.3 431.576C290.228 431.576 290.16 431.536 290.096 431.456L289.808 431.084C289.768 431.028 289.748 430.972 289.748 430.916C289.748 430.828 289.788 430.756 289.868 430.7L292.472 428.684C292.56 428.628 292.664 428.6 292.784 428.6H293.348C293.428 428.6 293.492 428.628 293.54 428.684C293.596 428.732 293.624 428.796 293.624 428.876V436.724C293.624 436.804 293.596 436.872 293.54 436.928C293.492 436.976 293.428 437 293.348 437H292.76ZM298.35 437.12C297.742 437.12 297.198 437.02 296.718 436.82C296.246 436.612 295.878 436.316 295.614 435.932C295.35 435.548 295.218 435.1 295.218 434.588C295.218 434.116 295.334 433.704 295.566 433.352C295.806 432.992 296.126 432.716 296.526 432.524C296.206 432.34 295.958 432.1 295.782 431.804C295.606 431.5 295.518 431.144 295.518 430.736C295.518 430.04 295.778 429.492 296.298 429.092C296.818 428.684 297.502 428.48 298.35 428.48C299.198 428.48 299.878 428.68 300.39 429.08C300.91 429.48 301.17 430.032 301.17 430.736C301.17 431.136 301.082 431.488 300.906 431.792C300.73 432.088 300.486 432.332 300.174 432.524C300.574 432.716 300.89 432.992 301.122 433.352C301.362 433.704 301.482 434.12 301.482 434.6C301.482 435.112 301.35 435.56 301.086 435.944C300.822 436.32 300.45 436.612 299.97 436.82C299.498 437.02 298.958 437.12 298.35 437.12ZM298.35 432.104C298.838 432.088 299.25 431.96 299.586 431.72C299.922 431.48 300.09 431.16 300.09 430.76C300.09 430.352 299.922 430.028 299.586 429.788C299.258 429.54 298.846 429.416 298.35 429.416C297.846 429.416 297.43 429.54 297.102 429.788C296.774 430.028 296.61 430.352 296.61 430.76C296.61 431.168 296.774 431.496 297.102 431.744C297.43 431.984 297.846 432.104 298.35 432.104ZM298.35 436.184C298.918 436.184 299.39 436.04 299.766 435.752C300.15 435.464 300.342 435.08 300.342 434.6C300.342 434.12 300.15 433.736 299.766 433.448C299.39 433.16 298.918 433.016 298.35 433.016C297.774 433.016 297.294 433.16 296.91 433.448C296.534 433.736 296.346 434.12 296.346 434.6C296.346 435.08 296.534 435.464 296.91 435.752C297.294 436.04 297.774 436.184 298.35 436.184Z" fill="#777777"/>
<path d="M20.1983 424.12C19.1663 424.12 18.4103 423.82 17.9303 423.22C17.4583 422.612 17.2063 421.82 17.1743 420.844L17.1623 419.812L17.1743 418.744C17.1983 417.776 17.4503 416.992 17.9303 416.392C18.4183 415.784 19.1743 415.48 20.1983 415.48C21.2303 415.48 21.9863 415.784 22.4662 416.392C22.9543 416.992 23.2103 417.776 23.2343 418.744C23.2423 418.968 23.2463 419.324 23.2463 419.812C23.2463 420.284 23.2423 420.628 23.2343 420.844C23.2023 421.82 22.9462 422.612 22.4662 423.22C21.9943 423.82 21.2383 424.12 20.1983 424.12ZM20.1983 423.124C20.8143 423.124 21.2783 422.92 21.5903 422.512C21.9023 422.104 22.0663 421.528 22.0823 420.784C22.0903 420.552 22.0943 420.22 22.0943 419.788C22.0943 419.348 22.0903 419.02 22.0823 418.804C22.0663 418.068 21.8983 417.496 21.5783 417.088C21.2663 416.672 20.8063 416.464 20.1983 416.464C19.5903 416.464 19.1303 416.672 18.8183 417.088C18.5063 417.496 18.3423 418.068 18.3263 418.804L18.3143 419.788L18.3263 420.784C18.3423 421.528 18.5063 422.104 18.8183 422.512C19.1303 422.92 19.5903 423.124 20.1983 423.124Z" fill="#777777"/>
<path d="M0.864 262C0.784 262 0.716 261.976 0.66 261.928C0.612 261.872 0.588 261.804 0.588 261.724V261.364C0.588 261.18 0.688 261.004 0.888 260.836L3.504 258.232C4.096 257.728 4.504 257.316 4.728 256.996C4.952 256.676 5.064 256.336 5.064 255.976C5.064 255.504 4.932 255.136 4.668 254.872C4.404 254.6 4.02 254.464 3.516 254.464C3.036 254.464 2.656 254.604 2.376 254.884C2.096 255.164 1.924 255.54 1.86 256.012C1.844 256.1 1.804 256.168 1.74 256.216C1.676 256.264 1.612 256.288 1.548 256.288H0.972C0.9 256.288 0.84 256.264 0.792 256.216C0.744 256.168 0.72 256.112 0.72 256.048C0.736 255.624 0.848 255.216 1.056 254.824C1.272 254.424 1.588 254.1 2.004 253.852C2.42 253.596 2.924 253.468 3.516 253.468C4.412 253.468 5.084 253.704 5.532 254.176C5.988 254.64 6.216 255.232 6.216 255.952C6.216 256.456 6.092 256.912 5.844 257.32C5.604 257.72 5.224 258.144 4.704 258.592L2.34 260.992H6.12C6.208 260.992 6.276 261.016 6.324 261.064C6.372 261.112 6.396 261.18 6.396 261.268V261.724C6.396 261.804 6.368 261.872 6.312 261.928C6.264 261.976 6.2 262 6.12 262H0.864ZM10.4998 262.12C9.89981 262.12 9.37981 262.012 8.93981 261.796C8.49981 261.58 8.16381 261.3 7.93181 260.956C7.69981 260.604 7.57581 260.228 7.55981 259.828V259.804C7.55981 259.74 7.58381 259.688 7.63181 259.648C7.67981 259.608 7.73581 259.588 7.79981 259.588H8.38781C8.55581 259.588 8.66381 259.676 8.71181 259.852C8.83181 260.284 9.05181 260.608 9.37181 260.824C9.69981 261.032 10.0758 261.136 10.4998 261.136C11.0438 261.136 11.4958 260.972 11.8558 260.644C12.2158 260.308 12.3958 259.848 12.3958 259.264C12.3958 258.728 12.2158 258.304 11.8558 257.992C11.4958 257.672 11.0438 257.512 10.4998 257.512C10.2118 257.512 9.97981 257.548 9.80381 257.62C9.62781 257.692 9.44781 257.796 9.26381 257.932C9.15981 258.012 9.07181 258.072 8.99981 258.112C8.93581 258.144 8.86381 258.16 8.78381 258.16H8.20781C8.13581 258.16 8.07181 258.136 8.01581 258.088C7.95981 258.032 7.93581 257.968 7.94381 257.896L8.31581 253.9C8.33981 253.7 8.43981 253.6 8.61581 253.6H12.7678C12.8558 253.6 12.9238 253.624 12.9718 253.672C13.0198 253.72 13.0438 253.788 13.0438 253.876V254.32C13.0438 254.4 13.0158 254.464 12.9598 254.512C12.9118 254.56 12.8478 254.584 12.7678 254.584H9.31181L9.09581 256.996C9.47981 256.724 9.99581 256.588 10.6438 256.588C11.1798 256.588 11.6678 256.696 12.1078 256.912C12.5478 257.12 12.8958 257.428 13.1518 257.836C13.4158 258.244 13.5478 258.728 13.5478 259.288C13.5478 259.88 13.4158 260.392 13.1518 260.824C12.8958 261.248 12.5358 261.572 12.0718 261.796C11.6158 262.012 11.0918 262.12 10.4998 262.12ZM17.9014 262.12C16.8694 262.12 16.1134 261.82 15.6334 261.22C15.1614 260.612 14.9094 259.82 14.8774 258.844L14.8654 257.812L14.8774 256.744C14.9014 255.776 15.1534 254.992 15.6334 254.392C16.1214 253.784 16.8774 253.48 17.9014 253.48C18.9334 253.48 19.6894 253.784 20.1694 254.392C20.6574 254.992 20.9134 255.776 20.9374 256.744C20.9454 256.968 20.9494 257.324 20.9494 257.812C20.9494 258.284 20.9454 258.628 20.9374 258.844C20.9054 259.82 20.6494 260.612 20.1694 261.22C19.6974 261.82 18.9414 262.12 17.9014 262.12ZM17.9014 261.124C18.5174 261.124 18.9814 260.92 19.2934 260.512C19.6054 260.104 19.7694 259.528 19.7854 258.784C19.7934 258.552 19.7974 258.22 19.7974 257.788C19.7974 257.348 19.7934 257.02 19.7854 256.804C19.7694 256.068 19.6014 255.496 19.2814 255.088C18.9694 254.672 18.5094 254.464 17.9014 254.464C17.2934 254.464 16.8334 254.672 16.5214 255.088C16.2094 255.496 16.0454 256.068 16.0294 256.804L16.0174 257.788L16.0294 258.784C16.0454 259.528 16.2094 260.104 16.5214 260.512C16.8334 260.92 17.2934 261.124 17.9014 261.124Z" fill="#777777"/>
<path d="M3.492 102.12C2.892 102.12 2.372 102.012 1.932 101.796C1.492 101.58 1.156 101.3 0.924 100.956C0.692 100.604 0.568 100.228 0.552 99.828V99.804C0.552 99.74 0.576 99.688 0.624 99.648C0.672 99.608 0.728 99.588 0.792 99.588H1.38C1.548 99.588 1.656 99.676 1.704 99.852C1.824 100.284 2.044 100.608 2.364 100.824C2.692 101.032 3.068 101.136 3.492 101.136C4.036 101.136 4.488 100.972 4.848 100.644C5.208 100.308 5.388 99.848 5.388 99.264C5.388 98.728 5.208 98.304 4.848 97.992C4.488 97.672 4.036 97.512 3.492 97.512C3.204 97.512 2.972 97.548 2.796 97.62C2.62 97.692 2.44 97.796 2.256 97.932C2.152 98.012 2.064 98.072 1.992 98.112C1.928 98.144 1.856 98.16 1.776 98.16H1.2C1.128 98.16 1.064 98.136 1.008 98.088C0.952 98.032 0.928 97.968 0.936 97.896L1.308 93.9C1.332 93.7 1.432 93.6 1.608 93.6H5.76C5.848 93.6 5.916 93.624 5.964 93.672C6.012 93.72 6.036 93.788 6.036 93.876V94.32C6.036 94.4 6.008 94.464 5.952 94.512C5.904 94.56 5.84 94.584 5.76 94.584H2.304L2.088 96.996C2.472 96.724 2.988 96.588 3.636 96.588C4.172 96.588 4.66 96.696 5.1 96.912C5.54 97.12 5.888 97.428 6.144 97.836C6.408 98.244 6.54 98.728 6.54 99.288C6.54 99.88 6.408 100.392 6.144 100.824C5.888 101.248 5.528 101.572 5.064 101.796C4.608 102.012 4.084 102.12 3.492 102.12ZM10.8936 102.12C9.86156 102.12 9.10556 101.82 8.62556 101.22C8.15356 100.612 7.90156 99.82 7.86956 98.844L7.85756 97.812L7.86956 96.744C7.89356 95.776 8.14556 94.992 8.62556 94.392C9.11356 93.784 9.86956 93.48 10.8936 93.48C11.9256 93.48 12.6816 93.784 13.1616 94.392C13.6496 94.992 13.9056 95.776 13.9296 96.744C13.9376 96.968 13.9416 97.324 13.9416 97.812C13.9416 98.284 13.9376 98.628 13.9296 98.844C13.8976 99.82 13.6416 100.612 13.1616 101.22C12.6896 101.82 11.9336 102.12 10.8936 102.12ZM10.8936 101.124C11.5096 101.124 11.9736 100.92 12.2856 100.512C12.5976 100.104 12.7616 99.528 12.7776 98.784C12.7856 98.552 12.7896 98.22 12.7896 97.788C12.7896 97.348 12.7856 97.02 12.7776 96.804C12.7616 96.068 12.5936 95.496 12.2736 95.088C11.9616 94.672 11.5016 94.464 10.8936 94.464C10.2856 94.464 9.82556 94.672 9.51356 95.088C9.20156 95.496 9.03756 96.068 9.02156 96.804L9.00956 97.788L9.02156 98.784C9.03756 99.528 9.20156 100.104 9.51356 100.512C9.82556 100.92 10.2856 101.124 10.8936 101.124ZM18.4873 102.12C17.4553 102.12 16.6993 101.82 16.2193 101.22C15.7473 100.612 15.4953 99.82 15.4633 98.844L15.4513 97.812L15.4633 96.744C15.4873 95.776 15.7393 94.992 16.2193 94.392C16.7073 93.784 17.4633 93.48 18.4873 93.48C19.5193 93.48 20.2753 93.784 20.7553 94.392C21.2433 94.992 21.4993 95.776 21.5233 96.744C21.5313 96.968 21.5353 97.324 21.5353 97.812C21.5353 98.284 21.5313 98.628 21.5233 98.844C21.4913 99.82 21.2353 100.612 20.7553 101.22C20.2833 101.82 19.5273 102.12 18.4873 102.12ZM18.4873 101.124C19.1033 101.124 19.5673 100.92 19.8793 100.512C20.1913 100.104 20.3553 99.528 20.3713 98.784C20.3793 98.552 20.3833 98.22 20.3833 97.788C20.3833 97.348 20.3793 97.02 20.3713 96.804C20.3553 96.068 20.1873 95.496 19.8673 95.088C19.5553 94.672 19.0953 94.464 18.4873 94.464C17.8793 94.464 17.4193 94.672 17.1073 95.088C16.7953 95.496 16.6313 96.068 16.6153 96.804L16.6033 97.788L16.6153 98.784C16.6313 99.528 16.7953 100.104 17.1073 100.512C17.4193 100.92 17.8793 101.124 18.4873 101.124Z" fill="#777777"/>
<rect x="278.993" y="114" width="32.0072" height="306" fill="#19A974"/>
<rect x="279" y="357" width="32" height="63" fill="#137752"/>
<rect x="239.304" width="32.0072" height="420" fill="#19A974"/>
<rect x="239" y="248" width="32" height="172" fill="#137752"/>
<rect x="199.615" y="280" width="32.0072" height="140" fill="#9EEBCF"/>
<rect x="200" y="376" width="32" height="44" fill="#19A974"/>
<rect x="159.926" y="192" width="32.0072" height="228" fill="#9EEBCF"/>
<rect x="160" y="393" width="32" height="27" fill="#19A974"/>
<rect x="120.237" y="27" width="32.0072" height="393" fill="#19A974"/>
<rect x="120" y="335" width="32" height="85" fill="#137752"/>
<rect x="80.5483" y="70" width="32.0072" height="350" fill="#19A974"/>
<rect x="81" y="294" width="32" height="126" fill="#137752"/>
<rect x="40.8596" y="192" width="32.0072" height="228" fill="#19A974"/>
<rect x="41" y="384" width="32" height="36" fill="#137752"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
homepage/theme/static/images/gfx-metrics-bulb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

18
homepage/theme/static/images/gfx-metrics-key.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 132 KiB

33
homepage/theme/static/images/gfx-metrics-pages.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 512 KiB

13
homepage/theme/static/images/gfx-metrics-real.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 189 KiB

40
homepage/theme/static/images/gfx-metrics-retention.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

1
homepage/theme/static/images/gfx-object-white.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 34 KiB

1
homepage/theme/static/images/gfx-pattern-mint-bright.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

1
homepage/theme/static/images/gfx-pattern-mint-mid.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

1
homepage/theme/static/images/gfx-pattern-yellow-bright.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 46 KiB

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

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

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

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

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

@ -32,36 +32,36 @@
{% endif %} {% endif %}
</head> </head>
{% endblock %} {% endblock %}
<body class="{{ template }} f5 rubik lh-copy fnt-cclr-mid-black cclr-mid-black"> <body class="{{ template }} f5 rubik lh-copy cclr-fnt-black-mid cclr-bg-black-mid">
<div class="cclr-dark-white"> <div class="cclr-bg-white-dark">
<div class="menu w-100 cclr-mid-yellow"> <div class="menu w-100 cclr-bg-yellow-mid">
<section class="nav-bar"> <section class="nav-bar">
<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="f25 normal ma0 ml2 white">Offen</p></a>
</div> </div>
{% if is_getstarted != 'true' %} {% if funnel != 'true' %}
<nav> <nav>
<div class="nav-mobile"><span id="nav-toggle"><span></span></span></div> <div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
<ul class="nav-list"> <ul class="nav-list">
<li> <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>
<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>
<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>
<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>
<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>
<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>
<li> <li>
<a class="b link dim" href="/get-started/">Get started</a> <a class="b link dim" href="/get-started/">Get started</a>
@ -80,53 +80,59 @@
</div> </div>
{% endblock %} {% endblock %}
{% if is_getstarted != 'true' %} {% if funnel != 'true' %}
{% block outro %} {% block outro %}
<div class="w-100 cclr-mid-yellow"> <div class="w-100 cclr-bg-yellow-mid">
<div class="pt3 pb4 ph3" id="bg-cta-bottom"> <div class="pt3 pb4 ph3" id="bg-pattern">
<div class="mw8 center"> <div class="mw8 center">
<div class="flex flex-wrap justify-center pt3"> <div class="flex flex-wrap justify-center tc pt3">
<div class="w55 ph3 pt4 pb5 tc cclr-mid-yellow">
{% if cta_2 != 'true' %}
<div class="wx24 ph4-ns pt4 pb5 cclr-bg-yellow-mid">
<h2 class="f25 normal lh-solid ma0 mb3"> <h2 class="f25 normal lh-solid ma0 mb3">
Participate Participate
</h2> </h2>
<p class="ma0 mb3"> <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> </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> </div>
{% if is_article != 'true' %} {% endif %}
<div class="w55 ph3 pt4 pb5 tc cclr-mid-yellow">
{% if cta_1 != 'true' %}
<div class="wx24 ph4-ns pt4 pb5 cclr-bg-yellow-mid">
<h2 class="f25 normal lh-solid ma0 mb3"> <h2 class="f25 normal lh-solid ma0 mb3">
In the making In the making
</h2> </h2>
<p class="ma0 mb3"> <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> </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> </div>
{% endif %} {% 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"> <h2 class="f25 normal lh-solid ma0 mb3">
Ethical internet Ethical internet
</h2> </h2>
<p class="ma0 mb3"> <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> </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>
</div> </div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
{% endif %} {% endif %}
{% if is_getstarted != 'true' %} {% 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="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"> <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>
<p class="ma0">Transparent web analytics</p> <p class="ma0">Transparent web analytics</p>
<p class="ma0">for everyone</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> <a class="link b dim gray" target="_blank" href="/theme/{{ GPG_KEY_FILE }}">GPG Key</a>
</p> </p>
<p class="ma0 mt2"> <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> <a class="link b dim gray" href="{{ DOCS_URL }}" rel="noopener" target="_blank">Docs</a>
</p> </p>
<p class="ma0"> <p class="ma0">
@ -165,11 +174,13 @@
</div> </div>
</div> </div>
{% else %} {% else %}
<div class="w-100 cclr-mid-mint gray 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="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"> <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>
<p class="ma0">Transparent web analytics</p> <p class="ma0">Transparent web analytics</p>
<p class="ma0">for everyone</p> <p class="ma0">for everyone</p>
@ -182,6 +193,8 @@
{{ BUILD_DATE }} {{ BUILD_DATE }}
</div> </div>
</div> </div>
</div>
</div> </div>
{% endif %} {% endif %}
</div> </div>

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

@ -1,43 +1,55 @@
{% extends "page.html" %} {% extends "page.html" %}
{% set funnel = 'true' %}
{% set is_getstarted = 'true' %}
{% block content %} {% block content %}
<div class="w-100 mt5-ns cclr-dark-white"> <div class="w-100 mt5-ns cclr-bg-white-dark">
<div class="mw7 center pt5 pb5 ph3 ph5-ns bg-white"> <div class="mw7 center pt5 pb5 ph4 bg-white">
<div class="w-100 center">
<h2 class="f1-ns f2 normal tc ma0 mb4"> <div class="w-100 center tc">
Test Offen today
<h2 class="f1-ns f2 normal ma0 mb4">
Get started
</h2> </h2>
<p class="tc tl-ns ma0 mb2 gray"> <h3 class="f25 f2-ns normal ma0 mb5 mh6-ns">
Our alpha release is ready for testing. <em>Offen is free and always will be.</em> Choose your preferred way to self host Offen
</p> </h3>
<p class="tc tl-ns ma0 mb4 gray">
Be aware that things can still contain issues and that the upgrade path may be broken with upcoming releases.
</p>
<div class="flex flex-column items-center"> <div class="flex flex-column items-center">
<p class="b tc lh-title tracked-min ma0 mt3 mb2"> <p class="lh-title ma0 mb2 gray">
Single binary file <br>for Linux, Windows or MacOS Single binary file <br>for Linux, Windows or MacOS
</p> </p>
<a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 white cclr-mid-black" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</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="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
<p class="b tc lh-title tracked-min ma0 mt4 mb2">
Your own Offen instance <p class="lh-title ma0 mb2 gray">
Offen as a lightweight<br> Docker image
</p> </p>
<a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb4 white cclr-mid-black" href="{{ HEROKU_DIRECT_URL }}" rel="noopener" target="_blank">Deploy to Heroku</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 }}" target="_blank" rel="noopener">Deploy to Heroku</a>
</div> </div>
<hr class="mt5 mb4 b--black-05">
<h2 class="f25 normal tc ma0 mb4"> <p class="tc ma0 mb4 mh5-ns gray">
Kick things off Be aware that things can still contain issues and that the upgrade path may be broken with upcoming releases.
</h2>
<p class="tc tl-ns ma0 mb4 gray">
Running a website and want to collect usage statistics? Like to contribute as a developer? Our Docs will help you kick off.
</p> </p>
<hr class="ma0 mb5 b--black-05">
<h3 class="f25 normal ma0 mb5">
Read the docs
</h3>
<div class="flex flex-column items-center"> <div class="flex flex-column items-center">
<p class="b tc lh-title tracked-min ma0 mt3 mb2"> <p class="lh-title ma0 mb2 gray">
Details on how to <br>run, use and develop Offen Details on how to<br> install and run Offen
</p> </p>
<a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb5 white cclr-mid-black" 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>
</div> </div>
</div>
{% endblock %} {% endblock %}

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

@ -1,8 +1,8 @@
{% extends "page.html" %} {% extends "page.html" %}
{% block content %} {% block content %}
<div class="w-100 mt5-ns cclr-mid-yellow"> <div class="w-100 mt5-ns cclr-bg-yellow-mid">
<div class="mw8 center" id="bg-intro"> <div class="mw8 center">
<div class="flex justify-center pt5 ph4"> <div class="flex justify-center pt5 ph4">
<div class="dn db-ns w-20 tr pr3 pb3"> <div class="dn db-ns w-20 tr pr3 pb3">
<img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="58" height="63"> <img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="58" height="63">
@ -23,131 +23,501 @@
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. 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> </p>
<div class="pb5 mb2"> <div class="pb5 mb2">
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="/get-started/" rel="noopener">Start now</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> </div>
</div> </div>
</div> </div>
<div class="w-100" id="bg-feature"> <!-- FEATURE -->
<div class="center"> <div class="w-100 overflow-hidden cclr-bg-mint-mid">
<div class="flex flex-wrap justify-center w-100"> <div id="bg-pattern">
<div class="flex justify-center w55-container" id="bg-feature-1">
<div class="w56 tc pa3"> <div class="mw8 flex flex-wrap justify-center center tc">
<h2 class="f25 normal lh-solid mt5 mb3">
<em class="em-mint"> <div class="w-100 w-third-l cclr-bg-mint-fade-a">
<div class="hx-feature">
<div class="relative">
<div class="absolute bg-feature-1">
<img src="/theme/images/gfx-feature-1.png" alt="feature-2" width="640px" height="480px">
</div>
</div>
<h2 class="f2 normal lh-solid ma0 mb3 pt5">
<em class="em-mint-1">
Free & Open Free & Open
</em> </em>
</h2> </h2>
<p class="ma0 mb5"> <p class="wx18 center ma0">
Our open source code can be fully audited by the community. It will always be available for free. Seriously. <i>Our</i> open source code <i>can be fully audited by the community. It will always be</i> available for free. <i>Seriously.</i>
</p> </p>
</div> </div>
</div> </div>
<div class="flex justify-center w55-container" id="bg-feature-3">
<div class="w56 tc pa3"> <div class="w-100 w-third-l cclr-bg-mint-fade-b">
<h2 class="f25 normal lh-solid mt6 mb3"> <div class="hx-feature" id="bg-feature-2">
<em class="em-mint">
<h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-2">
<em class="em-mint-1">
Self hosted Self hosted
</em> </em>
</h2> </h2>
<p class="ma0"> <p class="wx18 center ma0">
Comply with GDPR guidelines. Don't share data with third parties. Your users have full access to their data. Comply with GDPR <i>guidelines. Don't share data with third parties. Your</i> users have full access <i>to their data.</i>
</p> </p>
</div> </div>
</div> </div>
<div class="flex justify-center w55-container" id="bg-feature-2">
<div class=" w56 tc pa3"> <div class="w-100 w-third-l cclr-bg-mint-fade-a">
<h2 class="f25 normal lh-solid mt7 mb3"> <div class="hx-feature">
<em class="em-mint">
<div class="relative">
<div class="absolute bg-feature-3">
<img src="/theme/images/gfx-feature-3.png" alt="feature-3" width="640px" height="480px">
</div>
</div>
<div>
<h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-3">
<em class="em-mint-1">
Fair & Secure Fair & Secure
</em> </em>
</h2> </h2>
<p class="wx18 center ma0">
Pay respect <i>to your website visitors. Gain valuable insights at the same time. All data is</i> encrypted end-to-end.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- INSIGHTS -->
<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
</p>
<div class="mw7 center">
<p class="f5 ma0 mt3 mb6 mh0 mh3-m mh5-l">
Web analytics <i>is still an unfair and impenetrable business.</i> A proper alternative to common tools <i>is missing. Therefore we develop one.</i> <a class="b link dim cclr-fnt-black-mid" href="/deep-dive/">Deep dive</a>
</p>
</div>
</div>
</div>
<!-- COMPARE -->
<div class="w-100" id="bg-explainer">
<div class="mw8 center flex flex-wrap justify-center">
<!-- COMPARE A -->
<div class="w-50-l w-100 cclr-bg-yellow-mid">
<div class="w-100 dib">
<div class="wx24 center">
<div class="relative">
<div class="absolute bg-compare-a-pfeil">
<img src="/theme/images/gfx-compare-a-pfeil.png" alt="arrow" width="40px" height=="120px">
</div>
</div>
<p class="f25 lh-solid ma0 mt6 mb3">
Your job
</p>
</div>
</div>
<div class="w-100 hx24 dib cclr-bg-white-fade">
<div class="wx24 center">
<div class="flex flex-wrap justify-center">
<div class="w-20 mt4">
<img src="/theme/images/gfx-compare-a.png" alt="numbers" width="75px" height="315px">
</div>
<div class="w-80 mt4">
<p class="ma0 ml3">
Self host <i>Offen in compliance with GDPR guidelines.</i>
</p>
<p class="ma0 ml3 mt4">
<i>Integrate the</i> code snippet <i>into pages you want to track.</i>
</p>
<p class="ma0 ml3 mt4">
<i>Make your</i> users aware <i>of the ability to access their data.</i>
</p>
<p class="ma0 ml3 mt4 mb5">
<i>Improve your services with</i> fair and transparent insights.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- COMPARE B -->
<div class="w-50-l w-100">
<div class="w-100 dn db-l h3 bg-white">
</div>
<div class="w-100 dib cclr-bg-mint-mid">
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb3">
Benefits for your users
</p>
</div>
</div>
<div class="w-100 hx24 dib cclr-bg-white-fade">
<div class="wx24 center">
<div class="relative">
<div class="absolute bg-compare-b-smile">
<img src="/theme/images/gfx-compare-b-smile.png" alt="smile" width="210px" height="140px">
</div>
</div>
<div class="flex flex-wrap justify-center">
<div class="w-20 mt4">
<img src="/theme/images/gfx-compare-b.png" alt="ok" width="75px" height="315px">
</div>
<div class="w-80 mt4">
<p class="ma0 ml3">
Opt in to data collection <i>or decide to not participate at all.</i>
</p>
<p class="ma0 ml3 mt4">
Review own data <i>with detailed explanations of metrics and terms.</i>
</p>
<p class="ma0 ml3 mt4">
Opt out completely <i>at any time or only delete existing usage data.</i>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- COMPARE C -->
<div class="w-50-l w-100">
<div class="w-100 hx-compare-c 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>
What you see
</em>
</p>
<p class="ma0 mb2 mr6-ns gray">
Data of all pages where your Offen installation is active.
</p>
<p class="ma0 mb4 gray">
For example:
</p>
<!-- BOX -->
<div class="w-100 dib br2 pa4 mb5 mb0-l shadow-4 cclr-fnt-black-mid bg-white">
<div class="relative">
<div class="absolute bg-compare-c-pfeil">
<img src="/theme/images/gfx-compare-c-pfeil.png" alt="arrow" width="150px" height="150px">
</div>
</div>
<p class="f25 lh-solid ma0 mb2">
478
</p>
<p class="f7 lh-solid ma0 mb4">
Unique users
</p>
<p class="f25 lh-solid ma0 mb2">
2.530
</p>
<p class="f7 lh-solid ma0 mb4">
Unique sessions
</p>
<p class="f7 lh-solid pt2 ma0 mb3">
Top pages
</p>
<table class="f7 collapse dt--fixed mb4">
<tbody>
<tr class="striped--near-white">
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/</td>
</tr>
<tr class="striped--near-white">
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/blog/</td>
</tr>
<tr class="striped--near-white">
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/landing/</td>
</tr>
<tr class="striped--near-white">
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/otherpage/</td>
</tr>
<tr class="striped--near-white">
<td class="truncate pv2 pl2 pr1">https://sub.yourpage.org/</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- COMPARE D -->
<div class="w-50-l w-100">
<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">
What your users see
</em>
</p>
<p class="ma0 mb2 mr5-ns gray">
Data of all pages a user has visited where your Offen installation is active.
</p>
<p class="ma0 mb4 gray">
For example:
</p>
<!-- 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">
1
</p>
<p class="f7 lh-solid ma0 mb4">
Unique websites
</p>
<p class="f25 lh-solid ma0 mb2">
5
</p>
<p class="f7 lh-solid ma0 mb4">
Unique sessions
</p>
<p class="f7 lh-solid pt2 ma0 mb3">
Top pages
</p>
<table class="f7 collapse dt--fixed mb4">
<tbody>
<tr class="striped--near-white">
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/</td>
</tr>
<tr class="striped--near-white">
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/blog/</td>
</tr>
<tr class="striped--near-white">
<td class="truncate pv2 pl2 pr1">https://www.yourpage.org/otherpage/</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- COMPARE E -->
<div class="w-50-l w-100">
<div class="w-100 hx-more dib cclr-bg-yellow-mid">
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5">
More features
</p>
<div class="flex flex-wrap justify-center">
<div class="w-20 mt4">
<img src="/theme/images/gfx-compare-e.png" alt="plus" width="75px" height="315px">
</div>
<div class="w-80 mt4">
<p class="ma0"> <p class="ma0">
Pay respect to your website visitors. Gain valuable insights at the same time. All data is encrypted end-to-end. All your accounts can be shared <i class="i-on-yellow">within your team.</i>
</p>
<p class="ma0 mt4">
<i class="i-on-yellow">User</i> data is only stored for 6 months <i class="i-on-yellow">and then deleted.</i>
</p>
<p class="ma0 mt4">
<i class="i-on-yellow">Use the</i> in-browser screen <i class="i-on-yellow">for a more intuitive setup.</i>
</p>
<p class="ma0 mt4 mb5">
<i class="i-on-yellow">A</i> detailed documentation <i class="i-on-yellow">on how to run Offen is available.</i>
</p> </p>
</div> </div>
</div> </div>
</div>
</div>
</div>
<!-- COMPARE F -->
<div class="w-50-l w-100">
<div class="w-100 hx-try-user dib cclr-bg-mint-mid">
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5">
Try as user
</p>
<p class="ma0 mt4 mr0 mr4-ns">
<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="{{ 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>
<div class="w-100 dn db-l h4 bg-white">
</div>
</div>
</div>
<!-- METRICS -->
<div class="w-100 hx-metrics dib cclr-bg-white-fade-metrics">
<div class="h-100" id="bg-pattern">
<div class="wx24-metrics center">
<div class="relative">
<div class="absolute bg-metrics-bulb">
<img src="/theme/images/gfx-metrics-bulb.png" alt="smile" width="170px" height="170px">
</div>
</div>
<p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
<em>
Essential metrics
</em>
</p>
<p class="ma0 ml0 ml5-l w-100 w-33-l mb5">
All important statistics <i>that help you to improve your service. Collected</i> without violating the privacy of your users.
</p>
</div>
<!-- BOX 10 Real -->
<div class="relative">
<div class="relative absolute-m absolute-l stackbox-10 center">
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
<p class="lh-solid ma0 mb4">
Real time
</p>
<img src="/theme/images/gfx-metrics-real.svg" alt="temp" width="320px" class="mb3">
</div>
</div>
</div>
<!-- BOX 20 Bars -->
<div class="relative">
<div class="relative absolute-m absolute-l stackbox-20 center">
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
<p class="lh-solid ma0 mb4">
Page views and users
</p>
<img src="/theme/images/gfx-metrics-bars.svg" alt="temp" width="320px" class="mb3">
</div>
</div>
</div>
<!-- BOX 30 Key -->
<div class="relative">
<div class="relative absolute-m absolute-l stackbox-30 center">
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
<p class="lh-solid ma0 mb4">
Key metrics
</p>
<img src="/theme/images/gfx-metrics-key.svg" alt="temp" width="320px" class="mb3">
</div>
</div>
</div>
<!-- BOX 40 Pages -->
<div class="relative">
<div class="relative absolute-m absolute-l stackbox-40 center">
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
<p class="lh-solid ma0 mb4">
Top pages
</p>
<img src="/theme/images/gfx-metrics-pages.svg" alt="temp" width="320px" class="mb3">
</div>
</div>
</div>
<!-- BOX 50 Retention -->
<div class="relative">
<div class="relative absolute-m absolute-l stackbox-50 center mb5 mb0-ns">
<div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
<p class="lh-solid ma0 mb4">
Weekly retention
</p>
<img src="/theme/images/gfx-metrics-retention.svg" alt="temp" width="320px" class="mb3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CTA -->
<div class="w-100 dib bg-white">
<div class="tc mh4">
<div class="relative">
<div class="absolute bg-cta-pfeil">
<img src="/theme/images/gfx-cta-pfeil.png" alt="arrow" width="150px" height="150px">
</div>
</div>
<p class="f1-ns f2 lh-solid ma0 mt6 mb5">
Switch to fair web analytics
</p>
<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
</p>
<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
</p>
<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> </div>
</div> </div>
<div class="w-100 cclr-mid-black white">
<div class="pt3 pb6 ph4" id="bg-cta-top">
<div class="flex justify-end mw6 center pt5">
<div class="w55 tr">
<h2 class="f25 normal lh-solid ma0 mb3">
In the making
</h2>
<p class="ma0 mb4">
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 b--white white" href="/blog/">Project status</a>
</div>
</div>
</div>
</div>
<div class="w-100 bg-white gray">
<div class="flex flex-wrap justify-center pt4 pb5">
<div class="mw7 mw8-l center ph5-ns ph3">
<h2 class="f25 normal lh-solid">Summary</h2>
<div class="columns mb3">
{{ page.content }}
<a class="b link dim ph4 pv2 mt3 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" href="/deep-dive/">Deep dive</a>
</div>
</div>
</div>
</div>
{% endblock %} {% endblock %}
{% block outro %} {% block outro %}
<div class="w-100" id="bg-feature">
<div class="pa4">
<div class="mw8 center flex flex-column flex-row-ns mb5 pa3 cclr-mid-mint">
<div class="w-100 w-60-ns">
<h2 class="f1-ns f2 normal lh-title tc tl-ns ma0 mb3">
Test Offen today
</h2>
<p class="ma0 mb2 tc tl-ns">
Our alpha release is ready for testing. Offen is free and always will be.
</p>
<p class="ma0 mb3 tc tl-ns">
Be aware that things can still contain issues and that the upgrade path may be broken with upcoming releases.
</p>
</div>
<div class="w-100 w-40-ns ml4-m ml6-l">
<p class="b tc lh-title tracked-min ma0 mt3 mb2">
Single binary file <br>for Linux, Windows or MacOS
</p>
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 white cclr-mid-black" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
<p class="b tc lh-title tracked-min ma0 mt4 mb2">
Your own Offen instance
</p>
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 white cclr-mid-black" href="{{ HEROKU_DIRECT_URL }}" rel="noopener" target="_blank">Deploy to Heroku</a>
</div>
</div>
</div>
</div>
<div class="w-100" id="bg-outro">
<div class="pa4">
<div class="mw8 center flex flex-column flex-row-ns mb5 pa3 cclr-mid-yellow">
<div class="w-100 w-60-ns">
<h2 class="f25 normal tc tl-ns ma0 mb3">
Kick things off
</h2>
<p class="ma0 mb3 tc tl-ns">
Running a website and want to collect usage statistics? Like to contribute as a developer? Our Docs will help you kick off.
</p>
</div>
<div class="w-100 w-40-ns ml4-m ml6-l">
<p class="b tc lh-title tracked-min ma0 mt3 mb2">
Details on how to <br>run, use and develop Offen
</p>
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 white cclr-mid-black" href="https://docs.offen.dev/" rel="noopener" target="_blank">Open Docs</a>
</div>
</div>
</div>
</div>
{% endblock %} {% endblock %}

1
homepage/theme/templates/page.html
View File

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

56
homepage/theme/templates/trydemo.html Normal file
View File

@ -0,0 +1,56 @@
{% extends "page.html" %}
{% set funnel = 'true' %}
{% block content %}
<div class="w-100 mt5-ns cclr-bg-white-dark">
<div class="mw7 center pt5 pb5 ph4 bg-white">
<div class="w-100 center">
<h2 class="f1-ns f2 normal tc ma0 mb4">
Try demo
</h2>
<h3 class="f25 f2-ns normal tc ma0 mb5">
Test drive Offen on your system
</h3>
<p class="lh-title ma0 mb3 gray">
Open your terminal and type
</p>
<div class="flex flex-column items-center">
<div class="w-100 ph4 pv2 mb5 inner-shaddow bg-gray">
<code class="ma0 lh-solid word-wrap white">
curl https://demo.offen.dev | bash
</code>
</div>
</div>
<p class="lh-title ma0 mb3 gray">
With Docker use
</p>
<div class="flex flex-column items-center">
<div class="w-100 ph4 pv2 mb5 inner-shaddow bg-gray">
<code class="ma0 lh-solid word-wrap white">
docker run --rm -it -p 9876:9876 offen/offen:latest demo -port 9876
</code>
</div>
</div>
<hr class="ma0 mb5 b--black-05">
<h3 class="f25 normal tc ma0 mb5">
Read the docs
</h3>
<div class="flex flex-column items-center">
<p class="lh-title tc 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>
</div>
</div>
</div>
</div>
{% endblock %}