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'],
|
||||
'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb3'],
|
||||
'h5': ['ma0'],
|
||||
'h6': ['f5', 'lh-solid', 'normal', 'i', 'ma0', 'mb3', 'light-silver'],
|
||||
'h6': ['f5', 'lh-solid', 'normal', 'ma0', 'mb3', 'light-silver'],
|
||||
'p': ['ma0', 'pb3'],
|
||||
'blockquote': ['f5', 'i', 'ma0', 'ml4-ns', 'ml3'],
|
||||
'hr': ['mt5', 'mb3', 'b--black-05']
|
||||
|
||||
@ -69,7 +69,7 @@ article {
|
||||
}
|
||||
/* Custom Tachyons class */
|
||||
.w55 {
|
||||
width: 18rem;
|
||||
width: 18.5rem;
|
||||
}
|
||||
/* Custom media query - extra small */
|
||||
@media only screen and (max-width: 30em) {
|
||||
@ -89,6 +89,9 @@ TYPO AND LAYOUT ELEMENTS
|
||||
/* Break long word on mobile */
|
||||
body {
|
||||
overflow-wrap: break-word;
|
||||
overscroll-behavior: none;
|
||||
/* overscroll color */
|
||||
background-color: #39352A;
|
||||
}
|
||||
/* Custom Tachyons class */
|
||||
.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="preload" href="/theme//fonts/rubik-v9-latin-regular.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 %}
|
||||
<script async src="/script.js" data-account-id="{{ OFFEN_ACCOUNT_ID }}"></script>
|
||||
{% endif %}
|
||||
@ -123,9 +118,11 @@
|
||||
<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">
|
||||
<p class="ma0">Offen</h3>
|
||||
<p class="ma0">Transparent web analytics</h4>
|
||||
<p class="ma0">for everyone</h4>
|
||||
<p class="ma0">
|
||||
<a class="b link dim fnt-cclr-mid-yellow" href="/">Offen</a>
|
||||
</p>
|
||||
<p class="ma0">Transparent web analytics</p>
|
||||
<p class="ma0">for everyone</p>
|
||||
</div>
|
||||
<div class="w-25-l mt3 mr3">
|
||||
<p class="ma0">
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
<em>Free & Open</em>
|
||||
</h2>
|
||||
<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>
|
||||
</div>
|
||||
<div class="w55 mh3 pt5 tc">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user