mirror of
https://github.com/offen/website.git
synced 2024-12-27 23:10:22 +01:00
GitHub
commit
ae5cc2fe61
@ -8,6 +8,7 @@ ENV SITEURL=$siteurl
|
||||
ARG offenaccountid
|
||||
ENV OFFEN_ACCOUNT_ID=$offenaccountid
|
||||
|
||||
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
|
||||
RUN npm install -g postcss-cli@^6.1.3 autoprefixer@^9.7.0 svgo@^1.3.0
|
||||
RUN apt-get update \
|
||||
&& apt-get install -y libjpeg-progs optipng \
|
||||
|
||||
@ -33,10 +33,10 @@ The current state of *Offen runs on this domain.* You should have noticed our co
|
||||
|
||||
### Testdrive on your system
|
||||
Whether you are a developer that want to contribute or a website operator that wants to test Offen. Have a demo up and running in no time on your local machine. Download and install a single binary file on Linux, Windows or MacOS.
|
||||
[Download demo](https://github.com/offen/offen/releases/download/v0.1.0-alpha.1/offen-v0.1.0-alpha.1.tar.gz){: target="_blank" 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="yellow"}
|
||||
|
||||
### 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 [very first alpha release](https://github.com/offen/offen/releases/tag/v0.1.0-alpha.1){: 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.
|
||||
|
||||
### We need to talk about Safari
|
||||
Currently, the way we store encryption keys securely on the client side does not work in Apple's Safari browser. Fortunately, our improved opt-in flow will allow us to resume Safari support in milestone 3. Please bear with us until then.
|
||||
|
||||
5
homepage/content/pages/get-started.md
Normal file
5
homepage/content/pages/get-started.md
Normal file
@ -0,0 +1,5 @@
|
||||
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.
|
||||
slug: get-started
|
||||
template: getstarted
|
||||
sitemap_priority: 0.8
|
||||
@ -70,5 +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://github.com/offen/offen/releases/download/v0.1.0-alpha.2/offen-v0.1.0-alpha.2.tar.gz'
|
||||
|
||||
OFFEN_ACCOUNT_ID = os.environ.get('OFFEN_ACCOUNT_ID', None)
|
||||
|
||||
@ -11,12 +11,18 @@ COLORS
|
||||
.brd-cclr-mid-yellow {
|
||||
border-color: #F7BF08;
|
||||
}
|
||||
.cclr-bright-yellow {
|
||||
.cclr-yellow-bright {
|
||||
background-color: #fde28c;
|
||||
}
|
||||
.fnt-cclr-yellow-bright {
|
||||
color: #fde28c;
|
||||
}
|
||||
.cclr-mid-mint {
|
||||
background-color: #BBD9D3;
|
||||
}
|
||||
.fnt-cclr-mint-bright {
|
||||
color: #E2F6F2;
|
||||
}
|
||||
.cclr-mid-black {
|
||||
background-color: #39352A;
|
||||
}
|
||||
@ -71,7 +77,6 @@ LAYOUT
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
TYPO AND LAYOUT ELEMENTS
|
||||
----------------------------------------------------*/
|
||||
@ -100,6 +105,10 @@ em {
|
||||
background: linear-gradient(transparent 66%, #fde28c 66%);
|
||||
font-style: normal;
|
||||
}
|
||||
.em-extra {
|
||||
background: linear-gradient(transparent 66%, #BBD9D3 66%);
|
||||
font-style: normal;
|
||||
}
|
||||
hr {
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
@ -116,14 +125,20 @@ ul {
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
}
|
||||
.tracked-min {
|
||||
letter-spacing: .03em;
|
||||
}
|
||||
.intro-margin-a {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
.intro-margin-b {
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
MENU
|
||||
----------------------------------------------------*/
|
||||
.nav-list {
|
||||
margin: 0 0.7rem 0 0;
|
||||
}
|
||||
.nav-bar {
|
||||
height: 4rem;
|
||||
}
|
||||
@ -160,10 +175,19 @@ nav ul li a:visited {
|
||||
background: #F7BF08;
|
||||
color: #39352A;
|
||||
}
|
||||
nav ul li:last-child a {
|
||||
padding-right: 2rem;
|
||||
background: #39352A;
|
||||
color: #fff;
|
||||
}
|
||||
nav ul li a:hover,
|
||||
nav ul li a:visited:hover {
|
||||
color: #39352A;
|
||||
}
|
||||
nav ul li:last-child a:hover,
|
||||
nav ul li:last-child a:visited:hover {
|
||||
color: #fff;
|
||||
}
|
||||
nav ul li a:not(:only-child):after,
|
||||
nav ul li a:visited:not(:only-child):after {
|
||||
padding-left: 0.4rem;
|
||||
@ -212,17 +236,19 @@ nav ul li ul li a {
|
||||
nav ul li a {
|
||||
padding: 1rem;
|
||||
line-height: 1;
|
||||
padding-left: 20%;
|
||||
padding-left: 4.2rem;
|
||||
}
|
||||
nav ul li ul li a {
|
||||
padding-left: 30%;
|
||||
}
|
||||
nav ul li:last-child a {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
nav ul li:last-child a {
|
||||
box-shadow: 0px 7px 15px -6px rgba(57,53,42,0.2);
|
||||
padding-bottom: 1.2rem;
|
||||
margin: 0;
|
||||
box-shadow: 0px 7px 15px -6px rgba(57,53,42,0.2);
|
||||
}
|
||||
nav ul li:first-child a {
|
||||
padding-top: 0.2rem;
|
||||
}
|
||||
.nav-dropdown {
|
||||
position: static;
|
||||
}
|
||||
@ -306,7 +332,20 @@ IMAGES
|
||||
GRAPHICS
|
||||
----------------------------------------------------*/
|
||||
#bg-intro {
|
||||
background: url(/theme/images/gfx-intro.svg) no-repeat center;
|
||||
background: url(/theme/images/gfx-intro.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
background-position: 200px 130px;
|
||||
}
|
||||
@media only screen and (min-width: 30.1em) and (max-width: 60em) {
|
||||
#bg-intro {
|
||||
background-position: calc(20% + 120px) 130px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 30em) {
|
||||
#bg-intro {
|
||||
background-position: 10px 60px;
|
||||
}
|
||||
}
|
||||
#bg-feature {
|
||||
background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
|
||||
@ -320,4 +359,3 @@ GRAPHICS
|
||||
#bg-cta-bottom {
|
||||
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 30 KiB |
@ -37,9 +37,11 @@
|
||||
<div class="menu w-100 cclr-mid-yellow">
|
||||
<section class="nav-bar">
|
||||
<div class="nav-container">
|
||||
<div class="icon">
|
||||
<a href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
|
||||
<div class="icon flex">
|
||||
<a class="link dim" href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
|
||||
<a class="link dim" href="/"><p class="f25 normal ma0 ml2 white">Offen</p></a>
|
||||
</div>
|
||||
{% if is_getstarted != 'true' %}
|
||||
<nav>
|
||||
<div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
|
||||
<ul class="nav-list">
|
||||
@ -61,8 +63,12 @@
|
||||
<li>
|
||||
<a class="b link dim fnt-cclr-mid-black" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="b link dim" href="/get-started/">Get started</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@ -74,6 +80,7 @@
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% if is_getstarted != 'true' %}
|
||||
{% block outro %}
|
||||
<div class="w-100 cclr-mid-yellow">
|
||||
<div class="pt3 pb6 ph3" id="bg-cta-bottom">
|
||||
@ -113,6 +120,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endif %}
|
||||
<div class="w-100 cclr-mid-black gray ph4"> <!--footer-->
|
||||
<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">
|
||||
@ -123,6 +131,7 @@
|
||||
<p class="ma0">for everyone</p>
|
||||
</div>
|
||||
<div class="w-25-l mt3 mr3">
|
||||
{% if is_getstarted != 'true' %}
|
||||
<p class="ma0">
|
||||
<a class="link b dim gray" href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
|
||||
</p>
|
||||
@ -135,8 +144,10 @@
|
||||
<p class="ma0">
|
||||
<a class="link b dim gray" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="w-25-l mt3 mr3">
|
||||
{% if is_getstarted != 'true' %}
|
||||
<p class="ma0">
|
||||
<a class="link b dim gray" href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
|
||||
</p>
|
||||
@ -146,6 +157,7 @@
|
||||
<p class="ma0">
|
||||
<a class="link b dim gray" href="/legal-notice/">Legal Notice</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="w-25-l mt3 tr-l">
|
||||
{{ BUILD_DATE }}
|
||||
|
||||
51
homepage/theme/templates/getstarted.html
Normal file
51
homepage/theme/templates/getstarted.html
Normal file
@ -0,0 +1,51 @@
|
||||
{% extends "page.html" %}
|
||||
|
||||
{% set is_getstarted = 'true' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="w-100 mt5-ns" id="bg-feature">
|
||||
<div class="pv5 ph4">
|
||||
<div class="mw8 center flex flex-column flex-row-ns mb5 cclr-mid-mint">
|
||||
<div class="w-100 w-60-ns">
|
||||
<h2 class="f25 normal tc tl-ns ma0 mb3">
|
||||
<em>Our alpha release</em>
|
||||
</h2>
|
||||
<p class="ma0 mb3 tc tl-ns">
|
||||
Offen is in active development. Do something brave and test our latest alpha release today. It’s free and always will be.
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-100 w-40-ns ml4-m ml6-l">
|
||||
<p class="tc lh-title tracked-min ma0 mt3-ns mb2 white">
|
||||
Single binary file for <br>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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100" id="bg-outro">
|
||||
<div class="pv5 ph4">
|
||||
<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">
|
||||
Get started now
|
||||
</em>
|
||||
</h2>
|
||||
<p class="ma0 mb3 tc tl-ns">
|
||||
Running a website and need to collect usage statistics? Want to contribute as a developer? Our guides will help you kick off.
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-100 w-40-ns ml4-m ml6-l">
|
||||
<p class="tc lh-title tracked-min ma0 mt3-ns mb2 white">
|
||||
Details on how to run, use <br>and develop Offen
|
||||
</p>
|
||||
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 fnt-cclr-mid-black" href="https://docs.offen.dev/" rel="noopener" target="_blank">Open guides</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@ -3,11 +3,19 @@
|
||||
{% block content %}
|
||||
<div class="w-100 mt5-ns cclr-mid-yellow">
|
||||
<div class="mw8 center" id="bg-intro">
|
||||
<div class="flex flex-wrap pt6-ns pt-3 ph4">
|
||||
<div class="mw5 pr4 pb3">
|
||||
<img src="/theme/images/offen-logo-white.svg" alt="Offen logo" width="146" height="90">
|
||||
<div class="flex justify-center pt6-ns 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>
|
||||
<div class="mw6">
|
||||
<div class="w-100 w-80-ns">
|
||||
<div class="flex">
|
||||
<div class="db dn-ns intro-margin-a mb2 mr2">
|
||||
<img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="40" height="43">
|
||||
</div>
|
||||
<h1 class="f1-ns f2 normal lh-solid ma0 mb1 intro-margin-b white">
|
||||
Offen
|
||||
</h1>
|
||||
</div>
|
||||
<h1 class="f1-ns f2 normal lh-solid ma0 mb3">
|
||||
Transparent <span>web analytics</span>
|
||||
</h1>
|
||||
@ -15,7 +23,7 @@
|
||||
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>
|
||||
</p>
|
||||
<div class="pb6">
|
||||
<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 brd-cclr-mid-black fnt-cclr-mid-black" href="/get-started/" rel="noopener">Start now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -26,7 +34,7 @@
|
||||
<div class="pt3 pb6 ph3" id="bg-feature">
|
||||
<div class="mw8 center">
|
||||
<div class="flex flex-wrap justify-around">
|
||||
<div class="w55 mh3 pt5 tc">
|
||||
<div class="w55 mh3 mt5 tc cclr-mid-mint">
|
||||
<h2 class="f25 normal lh-solid ma0 mb3">
|
||||
<em>Free & Open</em>
|
||||
</h2>
|
||||
@ -34,7 +42,7 @@
|
||||
Anyone can audit our open source code to verify it works as intended. Offen will always be available for free.
|
||||
</p>
|
||||
</div>
|
||||
<div class="w55 mh3 pt5 tc">
|
||||
<div class="w55 mh3 mt5 tc cclr-mid-mint">
|
||||
<h2 class="f25 normal lh-solid ma0 mb3">
|
||||
<em>Fair & Secure</em>
|
||||
</h2>
|
||||
@ -42,7 +50,7 @@
|
||||
Pay respect to your website visitors and gain insights as a user at the same time. All data is encrypted end-to-end.
|
||||
</p>
|
||||
</div>
|
||||
<div class="w55 mh3 pt5 tc">
|
||||
<div class="w55 mh3 mt5 tc cclr-mid-mint">
|
||||
<h2 class="f25 normal lh-solid ma0 mb3">
|
||||
<em>Easy to use</em>
|
||||
</h2>
|
||||
@ -87,19 +95,49 @@
|
||||
|
||||
|
||||
{% block outro %}
|
||||
<div class="w-100 cclr-mid-yellow">
|
||||
<div class="pt3 pb6 ph4" id="bg-outro">
|
||||
<div class="flex justify-end mw6 center pt5">
|
||||
<div class="w55 tr">
|
||||
<h2 class="f25 normal lh-solid ma0 mb3">
|
||||
Ethical internet
|
||||
</h2>
|
||||
<p class="mb4">
|
||||
We're working hard to ensure that Offen is independent, cutting-edge and can be sustained for years to come.
|
||||
</p>
|
||||
<a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="{{PATREON_URL}}" rel="noopener" target="_blank">Support us</a>
|
||||
<div class="w-100" id="bg-feature">
|
||||
<div class="pv5 ph4">
|
||||
<div class="mw8 center flex flex-column flex-row-ns mb5 cclr-mid-mint">
|
||||
<div class="w-100 w-60-ns">
|
||||
<h2 class="f25 normal tc tl-ns ma0 mb3">
|
||||
<em>Our alpha release</em>
|
||||
</h2>
|
||||
<p class="ma0 mb3 tc tl-ns">
|
||||
Offen is in active development. Do something brave and test our latest alpha release today. It’s free and always will be.
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-100 w-40-ns ml4-m ml6-l">
|
||||
<p class="tc lh-title tracked-min ma0 mt3-ns mb2 white">
|
||||
Single binary file for <br>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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100" id="bg-outro">
|
||||
<div class="pv5 ph4">
|
||||
<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">
|
||||
Get started now
|
||||
</em>
|
||||
</h2>
|
||||
<p class="ma0 mb3 tc tl-ns">
|
||||
Running a website and need to collect usage statistics? Want to contribute as a developer? Our guides will help you kick off.
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-100 w-40-ns ml4-m ml6-l">
|
||||
<p class="tc lh-title tracked-min ma0 mt3-ns mb2 white">
|
||||
Details on how to run, use <br>and develop Offen
|
||||
</p>
|
||||
<a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 fnt-cclr-mid-black" href="https://docs.offen.dev/" rel="noopener" target="_blank">Open guides</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user