From ccaaab06c437a782c1250ac6aa11e224f9916b41 Mon Sep 17 00:00:00 2001 From: Yann Herklotz Date: Fri, 15 Jan 2021 21:43:52 +0000 Subject: Actually update css --- docs/css/org.css | 268 ++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 174 insertions(+), 94 deletions(-) (limited to 'docs') diff --git a/docs/css/org.css b/docs/css/org.css index af01257..ade4bcf 100644 --- a/docs/css/org.css +++ b/docs/css/org.css @@ -1,8 +1,7 @@ body { - width: 95%; font-size: 14px; - margin: 2% auto; font-family: "Alegreya", serif; + margin: 0; color: #333; background-color: #fdf6e3; } @@ -15,86 +14,32 @@ body { background-color: #A5573E; } -@media screen and (min-width: 600px) { - body { - font-size: 18px; - } +.logo { + text-align: center; } -@media screen and (min-width: 1200px) { - body { - margin: 2% 0; - margin-left: 27rem; - } - - #left-bar { - position: fixed; - left: 0px; - top: 0px; - padding: 25px; - width: 20rem; - height: 100%; - background-color: #A5573E; - } - - .logo { - text-align: center; - position: relative; - } - - .logo > a { - color: #fdf6e3; - font-size: 5rem; - font-weight: bold; - text-decoration: none; - } - - .logo > a:hover { - border-bottom: none; - } - - #navbar { - text-align: center; - position: relative; - } - - #navbar > span { - padding: 0 1em; - } - - #navbar > span > a { - color: #fdf6e3; - font-size: 1.5rem; - font-weight: bold; - } - - #navbar > span > a:hover { - border-bottom: none; - color: #003355; - } +.logo > a { + color: #fdf6e3; + font-weight: bold; + text-decoration: none; +} - a.toc-link { - color: #fdf6e3; - } +.logo > a:hover { + border-bottom: none; +} - header p { - color: #fdf6e3; - line-height: 1.3; - } +#navbar { + text-align: center; +} - #postamble { - float: left; - position: fixed; - left: 50px; - bottom: 0; - max-width: 20rem; - } +#navbar > span > a { + color: #fdf6e3; + font-weight: bold; } -@media screen and (min-width: 810px) { - body { - max-width: 800px; - } +#navbar > span > a:hover { + border-bottom: none; + color: #003355; } ::selection { @@ -204,24 +149,6 @@ h4,h5,h6 { font-size: 1em; } -@media screen and (min-width: 600px) { - h1 { - font-size: 2em; - } - h2 { - font-size: 1.5em; - } - h3 { - font-size: 1.3em; - } - h1,h2,h3 { - line-height: 1.4em; - } - h4,h5,h6 { - font-size: 1.1em; - } -} - dt { font-weight: bold; } @@ -683,9 +610,162 @@ p.verse { } -@media screen and (min-width: 600px) { +@media screen and (max-width: 699px) { + + body { + font-size: 18px; + } + + #content { + width: 90%; + margin: 0 auto; + } + + header p { + display: none; + } + + #toc { + display: none; + } + + #left-bar { + width: 100%; + height: 3rem; + background-color: #A5573E; + } + + .logo { + float: left; + margin: 0 0.3em; + font-size: 2em; + } + + #navbar { + float: right; + margin: 1em 0.5em; + } + + #navbar > span { + margin: 0 0.2em; + } + + h1 { + font-size: 2em; + } + + h2 { + font-size: 1.5em; + } + + h3 { + font-size: 1.3em; + } + + h1,h2,h3 { + line-height: 1.4em; + } + + h4,h5,h6 { + font-size: 1.1em; + } + .creator { display: inline; float: right; } } + +@media screen and (min-width: 700px) and (max-width: 1049px) { + body { + max-width: 700px; + margin-left: 15rem; + margin-right: 2.5rem; + } + + #left-bar { + position: fixed; + left: 0px; + top: 0px; + padding: 1rem; + width: 10rem; + height: 100%; + background-color: #A5573E; + } + + .logo { + font-size: 3.5em; + } + + #navbar > span { + padding: 0 1em; + } + + #navbar > span > a { + font-size: 1.5em; + } + + a.toc-link { + color: #fdf6e3; + } + + header p { + color: #fdf6e3; + line-height: 1.3; + } + + #postamble { + float: left; + position: fixed; + left: 50px; + bottom: 0; + max-width: 20rem; + } +} + +@media screen and (min-width: 1050px) { + body { + max-width: 700px; + margin-left: 20rem; + margin-right: 2.5rem; + } + + #left-bar { + position: fixed; + left: 0px; + top: 0px; + padding: 1.5rem; + width: 15rem; + height: 100%; + background-color: #A5573E; + } + + .logo { + font-size: 4rem; + } + + #navbar > span { + padding: 0 1em; + } + + #navbar > span > a { + font-size: 1.5rem; + } + + a.toc-link { + color: #fdf6e3; + } + + header p { + color: #fdf6e3; + line-height: 1.3; + } + + #postamble { + float: left; + position: fixed; + left: 50px; + bottom: 0; + max-width: 20rem; + } +} -- cgit