mirror of
https://github.com/offen/website.git
synced 2024-11-25 10:10:28 +01:00
more fixes
This commit is contained in:
parent
601c07f55c
commit
11f841cb25
@ -53,7 +53,7 @@ DECORATE_CONTENT = {
|
|||||||
'h3': ['f5', 'normal', 'mt4', 'ma0', 'mb3', 'fnt-cclr-mid-black'],
|
'h3': ['f5', 'normal', 'mt4', 'ma0', 'mb3', 'fnt-cclr-mid-black'],
|
||||||
'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb3'],
|
'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb3'],
|
||||||
'h5': ['ma0'],
|
'h5': ['ma0'],
|
||||||
'h6': ['f5', 'lh-solid', 'normal', 'i', 'ma0', 'mb3', 'light-silver'],
|
'h6': ['f5', 'lh-solid', 'normal', 'ma0', 'mb3', 'light-silver'],
|
||||||
'p': ['ma0', 'pb3'],
|
'p': ['ma0', 'pb3'],
|
||||||
'blockquote': ['f5', 'i', 'ma0', 'ml4-ns', 'ml3'],
|
'blockquote': ['f5', 'i', 'ma0', 'ml4-ns', 'ml3'],
|
||||||
'hr': ['mt5', 'mb3', 'b--black-05']
|
'hr': ['mt5', 'mb3', 'b--black-05']
|
||||||
|
|||||||
@ -69,7 +69,7 @@ article {
|
|||||||
}
|
}
|
||||||
/* Custom Tachyons class */
|
/* Custom Tachyons class */
|
||||||
.w55 {
|
.w55 {
|
||||||
width: 18rem;
|
width: 18.5rem;
|
||||||
}
|
}
|
||||||
/* Custom media query - extra small */
|
/* Custom media query - extra small */
|
||||||
@media only screen and (max-width: 30em) {
|
@media only screen and (max-width: 30em) {
|
||||||
@ -89,6 +89,9 @@ TYPO AND LAYOUT ELEMENTS
|
|||||||
/* Break long word on mobile */
|
/* Break long word on mobile */
|
||||||
body {
|
body {
|
||||||
overflow-wrap: break-word;
|
overflow-wrap: break-word;
|
||||||
|
overscroll-behavior: none;
|
||||||
|
/* overscroll color */
|
||||||
|
background-color: #39352A;
|
||||||
}
|
}
|
||||||
/* Custom Tachyons class */
|
/* Custom Tachyons class */
|
||||||
.f25 {
|
.f25 {
|
||||||
|
|||||||
349
homepage/theme/static/css/normalize.css
vendored
349
homepage/theme/static/css/normalize.css
vendored
@ -1,349 +0,0 @@
|
|||||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
|
||||||
|
|
||||||
/* Document
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the line height in all browsers.
|
|
||||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
|
||||||
*/
|
|
||||||
|
|
||||||
html {
|
|
||||||
line-height: 1.15; /* 1 */
|
|
||||||
-webkit-text-size-adjust: 100%; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sections
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the margin in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render the `main` element consistently in IE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
main {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the font size and margin on `h1` elements within `section` and
|
|
||||||
* `article` contexts in Chrome, Firefox, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
margin: 0.67em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grouping content
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Add the correct box sizing in Firefox.
|
|
||||||
* 2. Show the overflow in Edge and IE.
|
|
||||||
*/
|
|
||||||
|
|
||||||
hr {
|
|
||||||
box-sizing: content-box; /* 1 */
|
|
||||||
height: 0; /* 1 */
|
|
||||||
overflow: visible; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
||||||
* 2. Correct the odd `em` font sizing in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
pre {
|
|
||||||
font-family: monospace, monospace; /* 1 */
|
|
||||||
font-size: 1em; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Text-level semantics
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the gray background on active links in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
a {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Remove the bottom border in Chrome 57-
|
|
||||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
abbr[title] {
|
|
||||||
border-bottom: none; /* 1 */
|
|
||||||
text-decoration: underline; /* 2 */
|
|
||||||
text-decoration: underline dotted; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
||||||
* 2. Correct the odd `em` font sizing in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
samp {
|
|
||||||
font-family: monospace, monospace; /* 1 */
|
|
||||||
font-size: 1em; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct font size in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
|
||||||
* all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
sub,
|
|
||||||
sup {
|
|
||||||
font-size: 75%;
|
|
||||||
line-height: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Embedded content
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the border on images inside links in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Forms
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Change the font styles in all browsers.
|
|
||||||
* 2. Remove the margin in Firefox and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
optgroup,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
font-family: inherit; /* 1 */
|
|
||||||
font-size: 100%; /* 1 */
|
|
||||||
line-height: 1.15; /* 1 */
|
|
||||||
margin: 0; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Show the overflow in IE.
|
|
||||||
* 1. Show the overflow in Edge.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input { /* 1 */
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
|
||||||
* 1. Remove the inheritance of text transform in Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
select { /* 1 */
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
[type="button"],
|
|
||||||
[type="reset"],
|
|
||||||
[type="submit"] {
|
|
||||||
-webkit-appearance: button;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the inner border and padding in Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button::-moz-focus-inner,
|
|
||||||
[type="button"]::-moz-focus-inner,
|
|
||||||
[type="reset"]::-moz-focus-inner,
|
|
||||||
[type="submit"]::-moz-focus-inner {
|
|
||||||
border-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Restore the focus styles unset by the previous rule.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button:-moz-focusring,
|
|
||||||
[type="button"]:-moz-focusring,
|
|
||||||
[type="reset"]:-moz-focusring,
|
|
||||||
[type="submit"]:-moz-focusring {
|
|
||||||
outline: 1px dotted ButtonText;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the padding in Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
padding: 0.35em 0.75em 0.625em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the text wrapping in Edge and IE.
|
|
||||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
|
||||||
* 3. Remove the padding so developers are not caught out when they zero out
|
|
||||||
* `fieldset` elements in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
legend {
|
|
||||||
box-sizing: border-box; /* 1 */
|
|
||||||
color: inherit; /* 2 */
|
|
||||||
display: table; /* 1 */
|
|
||||||
max-width: 100%; /* 1 */
|
|
||||||
padding: 0; /* 3 */
|
|
||||||
white-space: normal; /* 1 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
|
||||||
*/
|
|
||||||
|
|
||||||
progress {
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the default vertical scrollbar in IE 10+.
|
|
||||||
*/
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Add the correct box sizing in IE 10.
|
|
||||||
* 2. Remove the padding in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="checkbox"],
|
|
||||||
[type="radio"] {
|
|
||||||
box-sizing: border-box; /* 1 */
|
|
||||||
padding: 0; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
|
||||||
[type="number"]::-webkit-outer-spin-button {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the odd appearance in Chrome and Safari.
|
|
||||||
* 2. Correct the outline style in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="search"] {
|
|
||||||
-webkit-appearance: textfield; /* 1 */
|
|
||||||
outline-offset: -2px; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the inner padding in Chrome and Safari on macOS.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="search"]::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
* 2. Change font properties to `inherit` in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
|
||||||
-webkit-appearance: button; /* 1 */
|
|
||||||
font: inherit; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Interactive
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
details {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Add the correct display in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
summary {
|
|
||||||
display: list-item;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Misc
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct display in IE 10+.
|
|
||||||
*/
|
|
||||||
|
|
||||||
template {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add the correct display in IE 10.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[hidden] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
@ -1,612 +0,0 @@
|
|||||||
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
ROOTS
|
|
||||||
----------------------------------------------------*/
|
|
||||||
$yellow-mid: #F7BF08;
|
|
||||||
$yellow-bright: #fde28c;
|
|
||||||
$mint-mid: #BBD9D3;
|
|
||||||
$black-mid: #39352A;
|
|
||||||
$grey-mid: #898989;
|
|
||||||
$grey-bright: #D5D5D5;
|
|
||||||
$white: #FFF;
|
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
BASICS
|
|
||||||
----------------------------------------------------*/
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
LAYOUT & SPACER
|
|
||||||
----------------------------------------------------*/
|
|
||||||
.menu {
|
|
||||||
width: 100%;
|
|
||||||
height: 70px;
|
|
||||||
position: fixed;
|
|
||||||
z-index: 1;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
background-color: $yellow-mid;
|
|
||||||
}
|
|
||||||
.intro {
|
|
||||||
width: 100%;
|
|
||||||
margin: 70px 0 0 0;
|
|
||||||
background-color: $yellow-mid;
|
|
||||||
}
|
|
||||||
.feature {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.cta-top {
|
|
||||||
width: 100%;
|
|
||||||
color: $yellow-mid;
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
width: 100%;
|
|
||||||
margin: 70px 0 0 0;
|
|
||||||
background-color: $white;
|
|
||||||
}
|
|
||||||
.content-index {
|
|
||||||
width: 100%;
|
|
||||||
background-color: $white;
|
|
||||||
}
|
|
||||||
.cta-bottom,
|
|
||||||
.outro {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.footer {
|
|
||||||
width: 100%;
|
|
||||||
min-height: 300px;
|
|
||||||
color: $grey-mid;
|
|
||||||
background-color: $black-mid;
|
|
||||||
}
|
|
||||||
.spacer-intro {
|
|
||||||
width: 430px;
|
|
||||||
}
|
|
||||||
.spacer-right {
|
|
||||||
width: 400px;
|
|
||||||
margin: 0 0 0 auto;
|
|
||||||
}
|
|
||||||
/* Desktop Styles */
|
|
||||||
@media only screen and (min-width: 961px) {
|
|
||||||
.container-full {
|
|
||||||
padding: 60px 0 120px 0;
|
|
||||||
}
|
|
||||||
.container-reader {
|
|
||||||
width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 60px 0 120px 0;
|
|
||||||
}
|
|
||||||
.footer {
|
|
||||||
padding: 40px 40px 0 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Mobile Styles */
|
|
||||||
@media only screen and (min-width: 600px) and (max-width: 960px) {
|
|
||||||
.container-reader {
|
|
||||||
width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (max-width: 960px) {
|
|
||||||
.container-reader,
|
|
||||||
.container-full,
|
|
||||||
.footer {
|
|
||||||
padding: 60px 20px 120px 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Mobile Styles*/
|
|
||||||
@media only screen and (max-width: 480px) {
|
|
||||||
.menu {
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
.intro {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.spacer-intro {
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
.spacer-right {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
CARDS
|
|
||||||
----------------------------------------------------*/
|
|
||||||
.card-deck,
|
|
||||||
.card,
|
|
||||||
.footer-card-deck {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
flex-direction: column;
|
|
||||||
width: 280px;
|
|
||||||
color: $black-mid;
|
|
||||||
}
|
|
||||||
.card h2,
|
|
||||||
.card p {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.footer-card p {
|
|
||||||
margin: 0 0 2px 0;
|
|
||||||
}
|
|
||||||
.footer-card:nth-child(1),
|
|
||||||
.footer-card:nth-child(3) {
|
|
||||||
margin: 0 0 20px 0;
|
|
||||||
}
|
|
||||||
/* Mobile Styles */
|
|
||||||
@media only screen and (max-width: 960px) {
|
|
||||||
.card-deck,
|
|
||||||
.footer-card-deck {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.card-deck {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.card:nth-child(2) {
|
|
||||||
margin: 100px auto 100px auto;
|
|
||||||
}
|
|
||||||
.footer-card {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Desktop Styles */
|
|
||||||
@media only screen and (min-width: 961px) {
|
|
||||||
.card-deck,
|
|
||||||
.footer-card-deck {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
.card-deck {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.card:nth-child(2) {
|
|
||||||
margin: 0 50px 0 50px;
|
|
||||||
}
|
|
||||||
.footer-card-deck {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.footer-card:nth-child(1),
|
|
||||||
.footer-card:nth-child(2),
|
|
||||||
.footer-card:nth-child(3) {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
.footer-card:nth-child(4) {
|
|
||||||
text-align: right;
|
|
||||||
flex-grow: 8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
TYPO
|
|
||||||
----------------------------------------------------*/
|
|
||||||
body {
|
|
||||||
font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-weight: 400;
|
|
||||||
word-wrap: break-word;
|
|
||||||
color: $grey-mid;
|
|
||||||
background-color: $black-mid; // overscroll color
|
|
||||||
}
|
|
||||||
h1,
|
|
||||||
h2 {
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.3;
|
|
||||||
color: $black-mid;
|
|
||||||
}
|
|
||||||
h3,
|
|
||||||
h4 {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $black-mid;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
margin: 0 0 20px 0;
|
|
||||||
}
|
|
||||||
p + h3 {
|
|
||||||
margin: 60px 0 20px 0;
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
color: $grey-mid;
|
|
||||||
}
|
|
||||||
/* Desktop Styles */
|
|
||||||
@media only screen and (min-width: 481px) {
|
|
||||||
h1,
|
|
||||||
h2{
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
margin: 20px 0 10px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Mobile Styles */
|
|
||||||
@media only screen and (max-width: 480px) {
|
|
||||||
h1,
|
|
||||||
h2 {
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (max-width: 330px) {
|
|
||||||
.spacer-intro {
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
LINKS
|
|
||||||
----------------------------------------------------*/
|
|
||||||
a,
|
|
||||||
a:hover,
|
|
||||||
a:focus {
|
|
||||||
color: $grey-mid;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
p a,
|
|
||||||
p a:hover,
|
|
||||||
p a:focus {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
ol li p a,
|
|
||||||
ol li p a:hover,
|
|
||||||
ol li p a:focus {
|
|
||||||
color: $grey-bright;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
TYPO ELEMENTS
|
|
||||||
----------------------------------------------------*/
|
|
||||||
h1 + p {
|
|
||||||
color: $black-mid;
|
|
||||||
}
|
|
||||||
.bg h2 {
|
|
||||||
margin: 0 0 10px 0;
|
|
||||||
}
|
|
||||||
#bg-cta-top h2,
|
|
||||||
#bg-cta-top p,
|
|
||||||
#bg-cta-top .btn-wrapper,
|
|
||||||
#bg-outro h2,
|
|
||||||
#bg-outro p,
|
|
||||||
#bg-outro .btn-wrapper {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
#bg-cta-bottom .btn-wrapper {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
#bg-cta-top h2,
|
|
||||||
#bg-cta-top p {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
#bg-outro h2,
|
|
||||||
#bg-outro p {
|
|
||||||
color: $black-mid;
|
|
||||||
}
|
|
||||||
strong,
|
|
||||||
h1 + p strong,
|
|
||||||
.bg strong {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
.container-reader h2 {
|
|
||||||
margin: 0 0 20px 0;
|
|
||||||
color: $grey-bright;
|
|
||||||
}
|
|
||||||
strong,
|
|
||||||
h3 strong {
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $black-mid;
|
|
||||||
}
|
|
||||||
.cta-top strong {
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
.content-index p,
|
|
||||||
.content p {
|
|
||||||
margin: 0 0 20px 0;
|
|
||||||
}
|
|
||||||
hr {
|
|
||||||
height: 0;
|
|
||||||
margin: 80px 0 20px 0;
|
|
||||||
border-top: 1px solid $grey-bright;
|
|
||||||
}
|
|
||||||
blockquote {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 0 0 20px;
|
|
||||||
font-style: italic;
|
|
||||||
border-left: 1px solid $grey-bright;
|
|
||||||
}
|
|
||||||
ol {
|
|
||||||
padding-inline-start: 20px;
|
|
||||||
}
|
|
||||||
em {
|
|
||||||
background: linear-gradient(transparent 66%, $yellow-bright 66%);
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
.footer-card h3 strong {
|
|
||||||
font-weight: 700;
|
|
||||||
color: $yellow-mid;
|
|
||||||
}
|
|
||||||
.footer h3,
|
|
||||||
.footer h4 {
|
|
||||||
color: $yellow-mid;
|
|
||||||
margin: 0 0 2px 0;
|
|
||||||
}
|
|
||||||
.footnote {
|
|
||||||
color: $grey-bright;
|
|
||||||
}
|
|
||||||
/* reposition for fixed menu */
|
|
||||||
.footnote li {
|
|
||||||
margin-top: -75px;
|
|
||||||
padding-top: 75px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
BUTTONS
|
|
||||||
----------------------------------------------------*/
|
|
||||||
.btn-wrapper {
|
|
||||||
margin: 40px 0 0 0;
|
|
||||||
}
|
|
||||||
.btn-wrapper-article {
|
|
||||||
margin: 30px 0 80px 0;
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
border-radius: 0px;
|
|
||||||
padding: 8px 30px;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.btn-color-yellow,
|
|
||||||
.btn-color-yellow:visited,
|
|
||||||
.btn-color-yellow:link,
|
|
||||||
.btn-color-yellow:hover,
|
|
||||||
.btn-color-yellow:active {
|
|
||||||
font-weight: 700;
|
|
||||||
color: $yellow-mid;
|
|
||||||
border: solid $yellow-mid 5px;
|
|
||||||
}
|
|
||||||
.btn-color-black,
|
|
||||||
.btn-color-black:visited,
|
|
||||||
.btn-color-black:link,
|
|
||||||
.btn-color-black:hover,
|
|
||||||
.btn-color-black:active {
|
|
||||||
font-weight: 700;
|
|
||||||
color: $black-mid;
|
|
||||||
border: solid $black-mid 5px;
|
|
||||||
}
|
|
||||||
.btn-color-white,
|
|
||||||
.btn-color-white:visited,
|
|
||||||
.btn-color-white:link,
|
|
||||||
.btn-color-white:hover,
|
|
||||||
.btn-color-white:active {
|
|
||||||
font-weight: 700;
|
|
||||||
color: $white;
|
|
||||||
border: solid $white 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
MENU
|
|
||||||
----------------------------------------------------*/
|
|
||||||
.nav-list {
|
|
||||||
margin: 0 10px 40px 0;
|
|
||||||
}
|
|
||||||
.nav-bar {
|
|
||||||
height: 70px;
|
|
||||||
}
|
|
||||||
.icon {
|
|
||||||
position: absolute;
|
|
||||||
padding: 12px 0 0 20px;
|
|
||||||
float: left;
|
|
||||||
line-height: 70px;
|
|
||||||
}
|
|
||||||
body.index .icon {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.nav-container {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
nav {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
nav ul {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
nav ul li {
|
|
||||||
float: left;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
nav ul li a,
|
|
||||||
nav ul li a:visited {
|
|
||||||
display: block;
|
|
||||||
padding: 0 20px;
|
|
||||||
line-height: 70px;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 700;
|
|
||||||
background: $yellow-mid;
|
|
||||||
color: $black-mid;
|
|
||||||
}
|
|
||||||
nav ul li a:hover,
|
|
||||||
nav ul li a:visited:hover {
|
|
||||||
color: $black-mid;
|
|
||||||
}
|
|
||||||
nav ul li a:not(:only-child):after,
|
|
||||||
nav ul li a:visited:not(:only-child):after {
|
|
||||||
padding-left: 4px;
|
|
||||||
content: ' ▾';
|
|
||||||
}
|
|
||||||
nav ul li ul li {
|
|
||||||
min-width: 150px;
|
|
||||||
}
|
|
||||||
nav ul li ul li a {
|
|
||||||
padding: 15px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
.nav-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.nav-mobile {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
background: $yellow-mid;
|
|
||||||
height: 70px;
|
|
||||||
width: 70px;
|
|
||||||
}
|
|
||||||
/* Mobile Styles */
|
|
||||||
@media only screen and (max-width: 960px) {
|
|
||||||
.nav-list {
|
|
||||||
margin: 0 0 40px 0;
|
|
||||||
}
|
|
||||||
.nav-mobile {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
nav {
|
|
||||||
width: 100%;
|
|
||||||
padding: 70px 0 15px;
|
|
||||||
}
|
|
||||||
nav ul {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
nav ul li {
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
nav ul li a {
|
|
||||||
padding: 15px;
|
|
||||||
line-height: 20px;
|
|
||||||
padding-left: 25%;
|
|
||||||
}
|
|
||||||
nav ul li ul li a {
|
|
||||||
padding-left: 30%;
|
|
||||||
}
|
|
||||||
nav ul li:last-child a {
|
|
||||||
padding-bottom: 60px;
|
|
||||||
}
|
|
||||||
nav ul li:last-child a {
|
|
||||||
box-shadow: 0px 7px 15px -6px rgba(57,53,42,0.2);
|
|
||||||
}
|
|
||||||
.nav-dropdown {
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Desktop Styles */
|
|
||||||
@media screen and (min-width: 961px) {
|
|
||||||
.nav-list {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#nav-toggle {
|
|
||||||
position: absolute;
|
|
||||||
left: 18px;
|
|
||||||
top: 22px;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 12px 35px 16px 0px;
|
|
||||||
}
|
|
||||||
#nav-toggle span,
|
|
||||||
#nav-toggle span:before,
|
|
||||||
#nav-toggle span:after {
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 1px;
|
|
||||||
height: 2px;
|
|
||||||
width: 25px;
|
|
||||||
background: $black-mid;
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
content: '';
|
|
||||||
/*
|
|
||||||
transition: all 300ms ease-in-out;
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
#nav-toggle span:before {
|
|
||||||
top: -8px;
|
|
||||||
}
|
|
||||||
#nav-toggle span:after {
|
|
||||||
bottom: -8px;
|
|
||||||
}
|
|
||||||
#nav-toggle.active span {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
#nav-toggle.active span:before, #nav-toggle.active span:after {
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
#nav-toggle.active span:before {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
#nav-toggle.active span:after {
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
GRAPHICS
|
|
||||||
----------------------------------------------------*/
|
|
||||||
#bg-intro {
|
|
||||||
background: url(/theme/images/gfx-intro.svg) no-repeat center;
|
|
||||||
}
|
|
||||||
/*-------------------------*/
|
|
||||||
#bg-feature {
|
|
||||||
background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
|
|
||||||
}
|
|
||||||
/*-------------------------*/
|
|
||||||
#bg-cta-top {
|
|
||||||
background: url(/theme/images/gfx-object-white.svg) center;
|
|
||||||
}
|
|
||||||
/*-------------------------*/
|
|
||||||
#bg-outro {
|
|
||||||
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
|
|
||||||
}
|
|
||||||
/*-------------------------*/
|
|
||||||
#bg-cta-bottom {
|
|
||||||
background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------------------------
|
|
||||||
IMAGES
|
|
||||||
----------------------------------------------------*/
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.image-text-custom {
|
|
||||||
margin: 10px 0 -15px 0;
|
|
||||||
}
|
|
||||||
.image-text-600-338 {
|
|
||||||
width: 600px;
|
|
||||||
height: 338px;
|
|
||||||
}
|
|
||||||
.image-text-600-322 {
|
|
||||||
width: 600px;
|
|
||||||
height: 322px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 600px) {
|
|
||||||
.image-text-600-338 {
|
|
||||||
max-width:100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.image-text-600-322 {
|
|
||||||
max-width:100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -27,11 +27,6 @@
|
|||||||
<link rel="stylesheet" type="text/css" href="/theme/css/fonts.css">
|
<link rel="stylesheet" type="text/css" href="/theme/css/fonts.css">
|
||||||
<link rel="preload" href="/theme//fonts/rubik-v9-latin-regular.woff2" as="font">
|
<link rel="preload" href="/theme//fonts/rubik-v9-latin-regular.woff2" as="font">
|
||||||
<link rel="preload" href="/theme//fonts/rubik-v9-latin-500.woff2" as="font">
|
<link rel="preload" href="/theme//fonts/rubik-v9-latin-500.woff2" as="font">
|
||||||
<!--
|
|
||||||
{% assets filters="libsass,postcss,cssmin", output="css/style.min.css", "css/normalize.css", "css/fonts.css", "css/style.scss" %}
|
|
||||||
<link rel="stylesheet" href="/{{ ASSET_URL }}">
|
|
||||||
{% endassets %}
|
|
||||||
-->
|
|
||||||
{% if OFFEN_ACCOUNT_ID and not no_stats %}
|
{% if OFFEN_ACCOUNT_ID and not no_stats %}
|
||||||
<script async src="/script.js" data-account-id="{{ OFFEN_ACCOUNT_ID }}"></script>
|
<script async src="/script.js" data-account-id="{{ OFFEN_ACCOUNT_ID }}"></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
@ -123,9 +118,11 @@
|
|||||||
<div class="w-100 cclr-mid-black gray ph4"> <!--footer-->
|
<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="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">
|
<div class="w-25-l mt3 mr3 fnt-cclr-mid-yellow">
|
||||||
<p class="ma0">Offen</h3>
|
<p class="ma0">
|
||||||
<p class="ma0">Transparent web analytics</h4>
|
<a class="b link dim fnt-cclr-mid-yellow" href="/">Offen</a>
|
||||||
<p class="ma0">for everyone</h4>
|
</p>
|
||||||
|
<p class="ma0">Transparent web analytics</p>
|
||||||
|
<p class="ma0">for everyone</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-25-l mt3 mr3">
|
<div class="w-25-l mt3 mr3">
|
||||||
<p class="ma0">
|
<p class="ma0">
|
||||||
|
|||||||
@ -31,7 +31,7 @@
|
|||||||
<em>Free & Open</em>
|
<em>Free & Open</em>
|
||||||
</h2>
|
</h2>
|
||||||
<p class="ma0">
|
<p class="ma0">
|
||||||
Anyone can audit our open source code to verify it works as intended. Offen will always be available free of charge.
|
Anyone can audit our open source code to verify it works as intended. Offen will always be available for free.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="w55 mh3 pt5 tc">
|
<div class="w55 mh3 pt5 tc">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user