From baf496acf0640fecdc01864989f2142a9757ba14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milan=20P=C3=A4ssler?= Date: Thu, 12 Dec 2019 03:16:40 +0100 Subject: initial styling --- static/main.css | 115 ++++++++++++++++++++++++++++++++++++++++++++++++++++---- static/rust.png | Bin 0 -> 56915 bytes 2 files changed, 108 insertions(+), 7 deletions(-) create mode 100644 static/rust.png (limited to 'static') diff --git a/static/main.css b/static/main.css index a8eea22..b7aae97 100644 --- a/static/main.css +++ b/static/main.css @@ -5,6 +5,7 @@ body { a { text-decoration: none; + color: #800000; } a:hover { @@ -17,12 +18,10 @@ a:hover { max-height:75px; } -.content { - padding: 15px; -} - .title { - margin: 0 auto; + align-items: center; + display: flex; + flex-direction: column; display: flex; max-width: 120ch; } @@ -33,6 +32,108 @@ a:hover { } .title .logo { - padding: 15px; - flex-shrink: 0; + padding-top: 15px; +} + +.title>div>:first-child { + margin-top: 0; +} +.title>div>:last-child { + margin-bottom: 0; +} + +.header .links { + display: flex; + flex-direction: row; + justify-content: center; +} +.header .links>* { + margin: .5em 1em; +} + +body { + display: flex; + flex-direction: column; + /*background: linear-gradient(to bottom, #cc2020, #cc4040);*/ /* red */ + background: linear-gradient(to bottom, #101070, #101040); /* blue */ + box-sizing: border-box; + min-height: 100vh; +} +.header { + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 1em; +} +.content { + display: flex; + flex-direction: column; + justify-content: space-between; + padding-top: 1.5em; + margin-top: 3px; +} +.content>p::before { + content: '\1f6c8'; + display: block; + position: absolute; + margin-left: -1.3em; +} +.content>p { + border: 1px solid #ccc; + background: white; + padding: .5em; + padding-left: 2.1em; +} +body>* { + padding: 0 .8em; + box-sizing: border-box; + background-color: rgba(255, 255, 255, .8); +} + +.nav { + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; +} +.nav .nav-item { + margin: 0 .5em; +} + +@media (min-width: 600px) { + body { + padding: 7vh 0; + align-items: center; + } + body>*:first-child { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + body>*:last-child { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + body>* { + /*box-shadow: 0 0 10px #ccc;*/ + /*border: 1px solid #ccc;*/ + width: 80%; + max-width: 800px; + } + .title { + flex-direction: row; + } + .header { + flex-direction: row; + } + .header .links { + justify-content: center; + flex-direction: column; + } + .header .links>* { + margin: .1em 0; + } + .title .logo { + padding-top: 0; + padding-right: 15px; + } } diff --git a/static/rust.png b/static/rust.png new file mode 100644 index 0000000..a706d7c Binary files /dev/null and b/static/rust.png differ -- cgit v1.2.3