offen/website
2
0
Fork 0
mirror of https://github.com/offen/website.git synced 2024-10-18 12:10:25 +02:00
Code Issues Projects Releases Wiki Activity

index mobile

Browse Source
This commit is contained in:
Hendrik Niefeld 2019-12-23 11:46:19 +01:00
parent 0015bca088
commit f198fb29f4
3 changed files with 55 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
/* ---------------------------------------------------
CUSTOM COLORS
COLORS
----------------------------------------------------*/
/* Custom Tachyons classes */
.cclr-mid-yellow {
background-color: #F7BF08;
}
@ -38,23 +39,25 @@ LAYOUT
----------------------------------------------------*/
.menu {
width: 100%;
height: 4rem; /* mt5 */
height: 4rem; /* Tachyons mt5 */
position: fixed;
z-index: 1;
top: 0;
right: 0;
}
/* Mobile Styles*/
@media only screen and (max-width: 480px) {
/* Custom media query - extra small */
@media only screen and (max-width: 29.99em) {
.menu {
position: static;
}
}
.w55 {
/* Custom Tachyons class */
.w55 {
width: 18rem;
}
/* custom margin for two-row text */
@media only screen and (min-width: 1088px) {
/* Custom media query - extra large */
@media only screen and (min-width: 68em) {
/* Custom Tachyons class - margin for two-row text */
.mrgn-t {
margin-top: 2.8rem;
}
@ -64,12 +67,19 @@ LAYOUT
/* ---------------------------------------------------
TYPO
----------------------------------------------------*/
/* Custom Tachyons class */
.f25 {
font-size: 1.9rem;
}
span {
display: table;
}
/* Custom media query - medium small - neutralize span line braks */
@media only screen and (max-width: 34em) {
p span {
display: initial;
}
}
em {
background: linear-gradient(transparent 66%, #fde28c 66%);
font-style: normal;

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

@ -34,7 +34,7 @@
{% endblock %}
<body class="{{ template }} f5 sans-serif lh-copy fnt-cclr-mid-black">
<!-- Menu ######################################################### -->
<div class="menu w-100 cclr-mid-yellow"> <!--menu-->
<div class="menu w-100 cclr-mid-yellow"> <!-- menu -->
<section class="nav-bar">
<div class="nav-container">
<div class="icon">
@ -68,7 +68,7 @@
</div>
<!-- Content ######################################################### -->
{% block content %}
<div class="w-100 mt5 bg-white mid-grey">
<div class="w-100 mt5-ns bg-white mid-grey"> <!-- content -->
<div class="mw6 center">
{{ content }}
</div>
@ -120,40 +120,38 @@
{% endblock %}
<!-- Footer ######################################################### -->
<div class="w-100 cclr-mid-black gray"> <!--footer-->
<div class="flex-l justify-between pt4 pb6 ph4">
<div class="flex w-auto">
<div class="w5 mr3 fnt-cclr-mid-yellow">
<p class="ma0">Offen</h3>
<p class="ma0">Transparent web analytics</h4>
<p class="ma0">for everyone</h4>
</div>
<div class="w5 mr4">
<p class="ma0">
<a class="link b dim gray" href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
<a class="link b dim gray" target="_blank" href="/theme/{{ GPG_KEY_FILE }}">[GPG Key]</a>
</p>
<p class="ma0">
<a class="link b dim gray" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
</p>
<p class="ma0">
<a class="link b dim gray" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
</p>
</div>
<div class="w5">
<p class="ma0">
<a class="link b dim gray" href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
</p>
<p class="ma0">
<a class="link b dim gray" href="{{ TWITTER_URL }}" rel="noopener" target="_blank">Twitter</a>
</p>
<p class="ma0">
<a class="link b dim gray" href="/legal-notice/">Legal Notice</a>
</p>
</div>
<div class="flex flex-row-l flex-column w-100-l w-80 center pt4 pb6 ph4">
<div class="w-25-l mt3 mr3 fnt-cclr-mid-yellow">
<p class="ma0">Offen</h3>
<p class="ma0">Transparent web analytics</h4>
<p class="ma0">for everyone</h4>
</div>
<div class="tr">
<div class="w-25-l mt3 mr3">
<p class="ma0">
<a class="link b dim gray" href="mailto:{{ CONTACT_EMAIL }}">{{CONTACT_EMAIL}}</a>
</p>
<p class="ma0">
<a class="link b dim gray" target="_blank" href="/theme/{{ GPG_KEY_FILE }}">Email GPG Key</a>
</p>
<p class="ma0 mt2">
<a class="link b dim gray" href="{{ GITHUB_ORG }}" rel="noopener" target="_blank">GitHub</a>
</p>
<p class="ma0">
<a class="link b dim gray" href="{{ PATREON_URL }}" rel="noopener" target="_blank">Patreon</a>
</p>
</div>
<div class="w-25-l mt3 mr3">
<p class="ma0">
<a class="link b dim gray" href="{{ LINKEDIN_URL }}" rel="noopener" target="_blank">LinkedIn</a>
</p>
<p class="ma0">
<a class="link b dim gray" href="{{ TWITTER_URL }}" rel="noopener" target="_blank">Twitter</a>
</p>
<p class="ma0">
<a class="link b dim gray" href="/legal-notice/">Legal Notice</a>
</p>
</div>
<div class="w-25-l mt3 tr-l">
{{ BUILD_DATE }}
</div>
</div>

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

@ -1,14 +1,14 @@
{% extends "page.html" %}
{% block content %}
<div class="w-100 cclr-mid-yellow"> <!--intro-->
<div class="w-100 mt5 mb0 ph4" id="bg-intro">
<div class="flex justify-center pt6 ph4">
<div class="mw5 tr pr4">
<div class="w-100 mt5-ns cclr-mid-yellow"> <!-- menu -->
<div class="mw8 center" id="bg-intro">
<div class="flex flex-wrap pt6-ns pt-3 ph4">
<div class="mw5 pr4">
<img src="/theme/images/offen-logo-white.svg" alt="Offen logo" width="146" height="90">
</div>
<div class="mw6">
<h1 class="f1 lh-solid ma0 mb3">
<h1 class="f1-ns f2 lh-solid ma0 mb3">
Transparent <span>web analytics</span>
</h1>
<p class="ma0 mb4">