offen/website
2
0
Fork 0
mirror of https://github.com/offen/website.git synced 2024-11-22 17:10:29 +01: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

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

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

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

@ -34,7 +34,7 @@
{% endblock %} {% endblock %}
<body class="{{ template }} f5 sans-serif lh-copy fnt-cclr-mid-black"> <body class="{{ template }} f5 sans-serif lh-copy fnt-cclr-mid-black">
<!-- Menu ######################################################### --> <!-- Menu ######################################################### -->
<div class="menu w-100 cclr-mid-yellow"> <!--menu--> <div class="menu w-100 cclr-mid-yellow"> <!-- menu -->
<section class="nav-bar"> <section class="nav-bar">
<div class="nav-container"> <div class="nav-container">
<div class="icon"> <div class="icon">
@ -68,7 +68,7 @@
</div> </div>
<!-- Content ######################################################### --> <!-- Content ######################################################### -->
{% block 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"> <div class="mw6 center">
{{ content }} {{ content }}
</div> </div>
@ -120,40 +120,38 @@
{% endblock %} {% endblock %}
<!-- Footer ######################################################### --> <!-- Footer ######################################################### -->
<div class="w-100 cclr-mid-black gray"> <!--footer--> <div class="w-100 cclr-mid-black gray"> <!--footer-->
<div class="flex-l justify-between pt4 pb6 ph4"> <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">
<div class="flex w-auto"> <p class="ma0">Offen</h3>
<div class="w5 mr3 fnt-cclr-mid-yellow"> <p class="ma0">Transparent web analytics</h4>
<p class="ma0">Offen</h3> <p class="ma0">for everyone</h4>
<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> </div>
<div class="w-25-l mt3 mr3">
<div class="tr"> <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 }} {{ BUILD_DATE }}
</div> </div>
</div> </div>

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

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