diff options
author | Alexander Sulfrian <alexander@sulfrian.net> | 2022-11-01 15:19:39 +0100 |
---|---|---|
committer | Alexander Sulfrian <alexander@sulfrian.net> | 2022-11-01 15:19:39 +0100 |
commit | 4310a59f8d679533e80d3779ea0fb433cda0a6ba (patch) | |
tree | eafe5633cd921cf0cb666c212e14ab9cf203a09f /accounts/static/layout.css | |
parent | 6eb8ee248fb57d26a38126eb5cfa81e7187c9328 (diff) | |
parent | cd47946abdcc75f06bf61233aa5e50f6ecb77c70 (diff) | |
download | web-4310a59f8d679533e80d3779ea0fb433cda0a6ba.tar.gz web-4310a59f8d679533e80d3779ea0fb433cda0a6ba.tar.bz2 web-4310a59f8d679533e80d3779ea0fb433cda0a6ba.zip |
Merge branch 'jbb/design'
* jbb/design:
Make layout mobile friendly
Slightly modernize design
Diffstat (limited to 'accounts/static/layout.css')
-rw-r--r-- | accounts/static/layout.css | 110 |
1 files changed, 68 insertions, 42 deletions
diff --git a/accounts/static/layout.css b/accounts/static/layout.css index b4ac7b6..5d260c8 100644 --- a/accounts/static/layout.css +++ b/accounts/static/layout.css @@ -32,48 +32,64 @@ html, body { /* header */ -#header-background { - background-color: #333; - width: 100%; - height: 4em; - margin-bottom: 4em; -} -header { - position: absolute; - top: 0; - margin: 0; - padding: 1em 0; - width: 100%; -} -header h1 { - font-size: 2em; - margin: 0; - max-width: 50%; /* make image smaller on small screens */ - min-height: 3em; - padding: 0 1em 0; - display: inline-block; - background-color: #333; - border-bottom-right-radius: .8em; -} -header h1 img { - margin: 0; - max-width: 100%; -} -header #roundcornerb, -header #roundcornerw { - display: inline-block; - width: 50px; - height: 50px; - position: absolute; - top: 4em; - margin: 0; -} -header #roundcornerb { - background-color: #333; -} -header #roundcornerw { - background-color: white; - border-top-left-radius: 1.6em; +@media (min-width: 800px) { + #header-background { + background-color: #333; + width: 100%; + height: 4em; + margin-bottom: 4em; + } + header { + position: absolute; + top: 0; + margin: 0; + padding: 1em 0; + width: 100%; + } + header h1 { + font-size: 2em; + margin: 0; + min-height: 3em; + padding: 0 1em 0; + display: inline-block; + background-color: #333; + border-bottom-right-radius: .8em; + } + header h1 img { + margin: 0; + max-width: 100%; + height: 2em; + } + header #roundcornerb, + header #roundcornerw { + display: inline-block; + width: 50px; + height: 50px; + position: absolute; + top: 4em; + margin: 0; + } + header #roundcornerb { + background-color: #333; + } + header #roundcornerw { + background-color: white; + border-top-left-radius: 1.6em; + } +} + +@media (max-width: 800px) { + #header-background { + background-color: #333; + width: 100%; + height: 3em; + margin-bottom: 4em; + } + header h1 img { + margin: 0; + max-width: 100%; + height: 1.5em; + } } header nav#mainnav { @@ -105,11 +121,21 @@ header nav#mainnav ul li:not(:last-child):after { /* content */ +@media (min-width: 800px) { #content { margin: 0 auto; padding-top: 1em; max-width: 50em; } +} + +@media (max-width: 800px) { +#content { + margin: 0 auto; + padding: 1em; + max-width: 50em; +} +} #content h1 { font-size: 1.8em; |