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

Merge pull request #50 from offen/index-update

Index update
This commit is contained in:
Frederik Ring 2020-02-25 19:53:09 +01:00 committed by GitHub
commit 9c772d9810
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 83 additions and 66 deletions

View File

@ -1,5 +1,5 @@
title: Transparent web analytics for everyone | Offen
description: Offen is a free and open source analytics software for websites and web applications. Users can access their data while the operators treat it with respect.
description: Offen is a fair alternative to common web analytic tools. Respect your users while gaining insight into their behavior. Self hosted, open source and free.
save_as: index.html
template: index
sitemap_priority: 1.0

View File

@ -70,9 +70,7 @@ GPG_KEY_FILE = '74B041E23DB29D552644CEB1B18C633D6967FE3F.asc'
PATREON_URL = 'https://www.patreon.com/offen'
LINKEDIN_URL = 'https://www.linkedin.com/company/hioffen'
TWITTER_URL = 'https://twitter.com/hioffen'
RELEASE_URL = 'https://github.com/offen/offen/releases/latest/'
RELEASE_DIRECT_URL = 'https://get.offen.dev'
HEROKU_URL = 'https://github.com/offen/heroku'
HEROKU_DIRECT_URL = 'https://heroku.com/deploy?template=https://github.com/offen/heroku/tree/master'
OFFEN_ACCOUNT_ID = os.environ.get('OFFEN_ACCOUNT_ID', None)

View File

@ -66,17 +66,21 @@ LAYOUT
}
}
/* Custom Tachyons class */
.w55-container,
.w55 {
width: 18.5rem;
width: 20rem;
}
.w56 {
width: 20rem;
height: 480px;
}
/* Custom media query - extra small */
@media only screen and (max-width: 30em) {
.w55 {
@media only screen and (max-width: 40em) {
.w55-container {
width: 100%;
}
}
/* ---------------------------------------------------
TYPO AND LAYOUT ELEMENTS
----------------------------------------------------*/
@ -105,10 +109,14 @@ em {
background: linear-gradient(transparent 66%, #fde28c 66%);
font-style: normal;
}
.em-extra {
.em-mint {
background: linear-gradient(transparent 66%, #BBD9D3 66%);
font-style: normal;
}
.em-mint-bright {
background: linear-gradient(transparent 66%, #CEEBE5 66%);
font-style: normal;
}
hr {
margin-left: -1rem;
margin-right: -1rem;
@ -335,11 +343,11 @@ GRAPHICS
background: url(/theme/images/gfx-intro.svg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 200px 130px;
background-position: 200px 80px;
}
@media only screen and (min-width: 30.1em) and (max-width: 60em) {
#bg-intro {
background-position: calc(20% + 120px) 130px;
background-position: calc(20% + 120px) 80px;
}
}
@media only screen and (max-width: 30em) {
@ -347,6 +355,20 @@ GRAPHICS
background-position: 10px 60px;
}
}
/* --------------------------------------------- */
#bg-feature-1 {
background: url(/theme/images/gfx-feature-1.png) center;
background-repeat: no-repeat;
}
#bg-feature-2 {
background: url(/theme/images/gfx-feature-2.png) center;
background-repeat: no-repeat;
}
#bg-feature-3 {
background: url(/theme/images/gfx-feature-3.png) center;
background-repeat: no-repeat;
}
/* --------------------------------------------- */
#bg-feature {
background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 21 KiB

View File

@ -86,7 +86,7 @@
<div class="pt3 pb6 ph3" id="bg-cta-bottom">
<div class="mw8 center">
<div class="flex flex-wrap justify-center">
<div class="w55 mh3 pt5 tc">
<div class="w55 ph3 pt5 tc">
<h2 class="f25 normal lh-solid ma0 mb3">
Participate
</h2>
@ -96,7 +96,7 @@
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
</div>
{% if is_article != 'true' %}
<div class="w55 mh3 pt5 tc">
<div class="w55 ph3 pt5 tc">
<h2 class="f25 normal lh-solid ma0 mb3">
In the making
</h2>
@ -106,7 +106,7 @@
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="/blog/">Project status</a>
</div>
{% endif %}
<div class="w55 mh3 pt5 tc">
<div class="w55 ph3 pt5 tc">
<h2 class="f25 normal lh-solid ma0 mb3">
Ethical internet
</h2>

View File

@ -18,17 +18,11 @@
<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 mb2 fnt-cclr-mid-black" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
<div class="tc">
<a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="{{ RELEASE_URL }}" rel="noopener" target="_blank">Open GitHub release page</a>
</div>
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 fnt-cclr-mid-black" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
<p class="b tc lh-title tracked-min ma0 mt4 mb2">
Your own instance on Heroku
Your own Offen instance
</p>
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="{{ HEROKU_DIRECT_URL }}" rel="noopener" target="_blank">Deploy</a>
<div class="tc">
<a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="{{ HEROKU_URL }}" rel="noopener" target="_blank">Open GitHub configuration repository</a>
</div>
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="{{ HEROKU_DIRECT_URL }}" rel="noopener" target="_blank">Deploy to Heroku</a>
</div>
</div>
</div>

View File

@ -3,7 +3,7 @@
{% block content %}
<div class="w-100 mt5-ns cclr-mid-yellow">
<div class="mw8 center" id="bg-intro">
<div class="flex justify-center pt6-ns pt5 ph4">
<div class="flex justify-center pt5 ph4">
<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">
</div>
@ -20,9 +20,9 @@
Transparent <span>web analytics</span>
</h1>
<p class="ma0 mb4">
Offen is an open source analytics software for websites <span>and web applications. It allows respectful handling of data </span> <span>for operators and users.</span>
Offen is a fair alternative to common web analytic tools. <span>Pay respect to your users while gaining insight into their behavior. </span>Self hosted, open source and free.
</p>
<div class="pb6">
<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>
</div>
</div>
@ -30,32 +30,42 @@
</div>
</div>
<div class="w-100 cclr-mid-mint">
<div class="pt3 pb6 ph3" id="bg-feature">
<div class="mw8 center">
<div class="flex flex-wrap justify-around">
<div class="w55 mh3 mt5 tc cclr-mid-mint">
<h2 class="f25 normal lh-solid ma0 mb3">
<em>Free & Open</em>
<div class="w-100" id="bg-feature">
<div class="center">
<div class="flex flex-wrap justify-center w-100">
<div class="flex justify-center w55-container" id="bg-feature-1">
<div class="w56 tc pa3">
<h2 class="f25 normal lh-solid mt5 mb3">
<em class="em-mint-bright">
Free & Open
</em>
</h2>
<p class="ma0">
Anyone can audit our open source code to verify it works as intended. Offen will always be available for free.
<p class="ma0 mb5">
Our open source code can be fully audited by the community. It will always be available for free. Seriously.
</p>
</div>
<div class="w55 mh3 mt5 tc cclr-mid-mint">
<h2 class="f25 normal lh-solid ma0 mb3">
<em>Fair & Secure</em>
</div>
<div class="flex justify-center w55-container" id="bg-feature-3">
<div class="w56 tc pa3">
<h2 class="f25 normal lh-solid mt6 mb3">
<em class="em-mint-bright">
Self hosted
</em>
</h2>
<p class="ma0">
Pay respect to your website visitors and gain insights as a user at the same time. All data is encrypted end-to-end.
Comply with GDPR guidelines. Don't share data with third parties. Your users have full access to their data.
</p>
</div>
<div class="w55 mh3 mt5 tc cclr-mid-mint">
<h2 class="f25 normal lh-solid ma0 mb3">
<em>Easy to use</em>
</div>
<div class="flex justify-center w55-container" id="bg-feature-2">
<div class=" w56 tc pa3">
<h2 class="f25 normal lh-solid mt7 mb3">
<em class="em-mint-bright">
Fair & Secure
</em>
</h2>
<p class="ma0">
Simply paste our code into the source of your website. Users can visit the auditorium to access their data.
Pay respect to your website visitors. Gain valuable insights at the same time. All data is encrypted end-to-end.
</p>
</div>
</div>
@ -63,7 +73,6 @@
</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">
@ -93,7 +102,6 @@
</div>
{% endblock %}
{% block outro %}
<div class="w-100" id="bg-feature">
<div class="pv5 ph4">
@ -110,17 +118,11 @@
<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 mb2 fnt-cclr-mid-black" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
<div class="tc">
<a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="{{ RELEASE_URL }}" rel="noopener" target="_blank">Open GitHub release page</a>
</div>
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 fnt-cclr-mid-black" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
<p class="b tc lh-title tracked-min ma0 mt4 mb2">
Your own instance on Heroku
Your own Offen instance
</p>
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="{{ HEROKU_DIRECT_URL }}" rel="noopener" target="_blank">Deploy</a>
<div class="tc">
<a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="{{ HEROKU_URL }}" rel="noopener" target="_blank">Open GitHub configuration repository</a>
</div>
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="{{ HEROKU_DIRECT_URL }}" rel="noopener" target="_blank">Deploy to Heroku</a>
</div>
</div>
</div>
@ -130,7 +132,7 @@
<div class="mw8 center flex flex-column flex-row-ns mb3 mb5 cclr-mid-yellow">
<div class="w-100 w-60-ns">
<h2 class="f25 normal tc tl-ns ma0 mb3">
<em class="em-extra">
<em class="em-mint">
Get started now
</em>
</h2>