diff options
Diffstat (limited to 'res/style.css')
-rw-r--r-- | res/style.css | 64 |
1 files changed, 39 insertions, 25 deletions
diff --git a/res/style.css b/res/style.css index 52e8f45..df5c998 100644 --- a/res/style.css +++ b/res/style.css @@ -3,7 +3,7 @@ body { color:#3f3b33; font-family:"Iosevka Aile", "Dejavu Sans", sans-serif; background-color:#292929; - font-size:17px; + font-size:1.1em; margin:0px; padding:0px; } @@ -123,35 +123,33 @@ div#nav-header { background:linear-gradient(#0000, #0000, #0000, #0000, #221), #333; box-shadow:0px 0px 4px #4f4b43; color:#eee; - display:grid; - grid-template-columns:49% 50%; + display:flex; } -div#nav-header div#nav-header-logo img { - margin:2px; - width:100%; - max-width:240px; +div#nav-header div#nav-header-logo { + width:30%; } - /** * Nav header link bar */ div#nav-header-links { border:none; - padding:0px 2px 10px 0px; + padding:2px 1px 7px 0px; text-align:right; + vertical-align:top; + width:70%; } div#nav-header-links ul { - padding:0px; + padding:4px; margin:0px; } div#nav-header-links ul li { list-style:none; display:inline; - padding:0px 8px; + padding:0px 7px; border-right:1px solid #999; } @@ -454,17 +452,19 @@ img#piwik-img { } +/** .grid-container-left { - display:grid; - grid-template-columns:39% 60%; - grid-column-gap: 15px; +display:grid; +grid-template-columns:39% 60%; +grid-column-gap: 15px; } .grid-container-right { - display:grid; - grid-template-columns:60% 39%; - grid-column-gap: 15px; +display:grid; +grid-template-columns:60% 39%; +grid-column-gap: 15px; } + **/ span.docutils.literal { @@ -480,16 +480,30 @@ span.docutils.literal { */ /* Smaller mobile displays with a lower resolution */ @media only screen and (orientation: portrait) and (max-width: 850px) { - html, body { font-size: 15px; } - div#nav-header, .grid-container-left, .grid-container-right { - grid-template-columns:100%; - } + /*html, body { font-size: 15px; }*/ + /*div#nav-header, .grid-container-left, .grid-container-right { + grid-template-columns:100%; + }*/ } /* More modern mobile displays with a higher resolution */ -@media only screen and (orientation: portrait) and (min-resolution: 220dpi) { - html, body { font-size: 19px; } - div#nav-header, .grid-container-left, .grid-container-right { - grid-template-columns:100%; +@media screen and (orientation: portrait) { + html, body { font-size: 1em; } + div#nav-header { + position:fixed; + width:100%; + font-size:.9em; + } + div#nav-header div#nav-header-logo img { + padding:4px; + } + div#nav-header div#nav-header-logo { + display:inline-block; + } + div#nav-header-links { + display:inline-block; + } + div#body-wrapper { + padding-top:30px; } } |