2
0
mirror of https://github.com/offen/website.git synced 2024-12-23 05:20:21 +01:00

add get-started page

This commit is contained in:
Hendrik Niefeld 2020-01-31 21:58:30 +01:00
parent cffa98d15b
commit 96bd068dca
4 changed files with 73 additions and 2 deletions

View File

@ -0,0 +1,4 @@
title: Get started | Offen
description: temp
slug: get-started
template: getstarted

View File

@ -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;
}
@ -100,6 +106,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,6 +126,9 @@ ul {
padding-inline-start: 1rem;
}
}
.tracked-min {
letter-spacing: .03em;
}
/* ---------------------------------------------------
@ -320,4 +333,3 @@ GRAPHICS
#bg-cta-bottom {
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
}

View File

@ -40,6 +40,7 @@
<div class="icon">
<a href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
</div>
{% if is_getstarted != 'true' %}
<nav>
<div class="nav-mobile"><span id="nav-toggle"><span></span></span></div>
<ul class="nav-list">
@ -63,6 +64,7 @@
</li>
</ul>
</nav>
{% endif %}
</div>
</section>
</div>
@ -74,6 +76,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 +116,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">

View File

@ -0,0 +1,51 @@
{% extends "page.html" %}
{% set is_getstarted = 'true' %}
{% block content %}
<div class="w-100 mt5-ns cclr-mid-mint">
<div class="pv5 ph4">
<div class="mw8 center flex flex-column flex-row-ns">
<div class="w-100 w-60-ns">
<h2 class="f25 normal ma0 mb3">
<em>Our alpha release</em>
</h2>
<p class="ma0 mb3">
Offen is in active development. Do something brave and test our very first alpha release today. Its 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="#">Download</a>
<div class="tc">
<a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="#">Open GitHub release page</a>
</div>
</div>
</div>
</div>
</div>
<div class="w-100 cclr-mid-yellow">
<div class="pv5 ph4">
<div class="mw8 center flex flex-column flex-row-ns mb3">
<div class="w-100 w-60-ns">
<h2 class="f25 normal ma0 mb3">
<em class="em-extra">
Get started now
</em>
</h2>
<p class="ma0 mb3">
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="#">Open guides</a>
</div>
</div>
</div>
</div>
{% endblock %}