diff --git a/homepage/content/pages/index.md b/homepage/content/pages/index.md index 8ede77e..549ff64 100644 --- a/homepage/content/pages/index.md +++ b/homepage/content/pages/index.md @@ -7,6 +7,6 @@ __Offen__ is a web analytics software that gives users access to the data they a Usage metrics come with explanations about their meaning, relevance, usage and possible privacy implications. __Offen__ also details *which kind of data is not collected*. All data can be deleted selectively or in its entirety by the users, or the collection can be disabled altogether. -__Offen__ treats both users and operators as parties of equal importance. Users can expect full transparency and are encouraged to make *autonomous and informed decisions regarding the use of their data*. Operators are enabled to gain insights while respecting their users' privacy and their data. +__Offen__ treats both users and operators as parties of equal importance. Users can expect full transparency and are encouraged to make *autonomous and informed decisions regarding the use of their data*. Operators are enabled to gain insights while respecting their users' privacy and data. -__Offen__ is currently in the early stages of development and is applying for funds to sustain its development. An early alpha version is running on this site: you can visit the [auditorium](https://auditorium-alpha.offen.dev) to access your data. +__Offen__ is currently in the early stages of development and is applying for funds to sustain its development. An early alpha version is running on this site: you can *visit the [auditorium](https://auditorium-alpha.offen.dev)* to access your data. diff --git a/styles/index.css b/styles/index.css index 9412a0e..1292975 100644 --- a/styles/index.css +++ b/styles/index.css @@ -5,7 +5,7 @@ ROOTS ----------------------------------------------------*/ :root { --yellow-mid: #F7BF08; ---yellow-bright: #F7BF08; +--yellow-bright: #fde28c; --black-mid: #39352A; --grey-mid: #898989; --grey-bright: #D5D5D5; @@ -23,6 +23,76 @@ BASICS } +/* --------------------------------------------------- +LAYOUT +----------------------------------------------------*/ +.menu { + width: 100%; + height: 70px; + position: fixed; + top: 0; + right: 0; + background-color: var(--yellow-mid); +} +.intro { + width: 100%; + height: 400px; + margin: 70px 0 0 0; + background-color: var(--yellow-mid); +} +.feature { + width: 100%; + height: 400px; + background-color: var(--grey-bright); +} +.cta-top { + width: 100%; + height: 200px; + color: var(--yellow-mid); + background-color: var(--black-mid); +} +.content { + width: 100%; + margin: 70px 0 0 0; + background-color: var(--white); +} +.content-index { + width: 100%; + background-color: var(--white); +} +.cta-bottom { + width: 100%; + height: 200px; + background-color: var(--yellow-mid); +} +.footer { + width: 100%; + height: 240px; + color: var(--grey-mid); + background-color: var(--black-mid); +} + +/* Mobile Styles */ +@media only screen and (max-width: 960px) { + .container-reader, + .container-full { + padding: 40px 20px 80px 20px; + } +} + +/* Desktop Styles */ +@media only screen and (min-width: 961px) { + .container-reader { + width: 600px; + margin: 0 auto; + padding: 40px 20px 80px 20px; + } + .container-full { + padding: 40px 80px 80px 80px; + } +} + + /* --------------------------------------------------- TYPO ----------------------------------------------------*/ @@ -32,6 +102,7 @@ body { font-size: 18px; line-height: 1.5; font-weight: 400; + word-wrap: break-word; color: var(--grey-mid); } h1, @@ -46,23 +117,62 @@ h3, h4 { font-size: 18px; } +h3 { + margin: 0 0 20px 0; +} +p + h3 { + margin: 60px 0 20px 0; +} +h4 { + color: var(--grey-mid); +} + + +/* --------------------------------------------------- +LINKS +----------------------------------------------------*/ +a, +a:hover, +a:focus { + color: var(--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: var(--grey-bright); +} + + + + /* --------------------------------------------------- TYPO ELEMENTS ----------------------------------------------------*/ +p { + margin: 0 0 20px 0; +} +hr { + height: 0; + margin: 80px 0 20px 0; + border-top: 1px solid var(--grey-bright); +} .intro h1 { color: var(--white); } blockquote { margin: 0; - font-style: italic + padding: 0 0 0 20px; + font-style: italic; border-left: 1px solid var(--grey-bright); } -hr { - height: 0; - border-top: 1px solid var(--grey-bright); -} strong { font-weight: 700 } @@ -74,7 +184,16 @@ h3 strong { font-weight: 400; color: var(--black-mid); } - +em { +background: linear-gradient(transparent 66%, var(--yellow-bright) 66%); +font-style: normal; +} +.footnote { + color: var(--grey-bright); +} +ol { +padding-inline-start: 20px; +} /* --------------------------------------------------- MENU @@ -225,74 +344,3 @@ nav ul li ul li a { #nav-toggle.active span:after { transform: rotate(-45deg); } - - -/* --------------------------------------------------- -LAYOUT -----------------------------------------------------*/ -.menu { - width: 100%; - height: 70px; - position: fixed; - top: 0; - right: 0; - background-color: var(--yellow-mid); -} -.intro { - width: 100%; - height: 400px; - margin: 70px 0 0 0; - background-color: var(--yellow-mid); -} -.feature { - width: 100%; - height: 400px; - background-color: var(--grey-bright); -} -.cta-top { - width: 100%; - height: 200px; - color: var(--yellow-mid); - background-color: var(--black-mid); -} -.content { - width: 100%; - margin: 70px 0 0 0; - background-color: var(--white); -} -.content-index { - width: 100%; - background-color: var(--white); -} -.cta-bottom { - width: 100%; - height: 200px; - background-color: var(--yellow-mid); -} -.footer { - width: 100%; - height: 240px; - color: var(--grey-mid); - background-color: var(--black-mid); -} - -/* Mobile Styles */ -@media only screen and (max-width: 960px) { - .container-reader { - margin: 0 20px 0 20px; - } - .container-full { - margin: 0 20px 0 20px; - } -} - -/* Desktop Styles */ -@media only screen and (min-width: 961px) { - .container-reader { - width: 600px; - margin: 0 auto; - } - .container-full { - margin: 0 80px 0 80px; - } -}