diff options
| -rw-r--r-- | assets/style.css | 227 | ||||
| -rw-r--r-- | templates/footer.html | 40 | ||||
| -rw-r--r-- | templates/header.html | 28 |
3 files changed, 226 insertions, 69 deletions
diff --git a/assets/style.css b/assets/style.css index d97b1ed..126f4cd 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,3 +1,5 @@ +/* Typography and styling */ + html { font-family: 'Barlow', sans-serif; font-size: 13pt; @@ -5,6 +7,10 @@ html { color: #000; } +body { + min-width: 22rem; +} + code, pre, var { font-family: 'Roboto Mono', monospace; font-weight: 300; @@ -14,6 +20,9 @@ pre { margin: 0.3em; padding-left: 0.5em; border-left: 2pt dotted #fc8; + border-right: 2pt dotted #fc8; + + overflow-x: scroll; } code, var { @@ -35,7 +44,7 @@ a:hover { } body { - margin: 0px; + margin: 0; background: white; } @@ -75,31 +84,51 @@ h6 { font-weight: 300; } +/* layout */ + header { - height: 8rem; - margin-bottom: 3rem; + height: 4rem; + margin-bottom: 2rem; background: linear-gradient(to bottom, #fafafa, #fafafa 66%, #eeeeee); display: flex; } main { display: flex; - width: 100%; + flex-direction: row; } -.width-content { - width: 900px; +.content-holder { + display: flex; + flex-direction: column; + align-items: stretch; + + overflow-x: hidden; /* this prevents <pre> and pals from killing the layout */ } -.width-sidebar { - width: 300px; +/* side stuff */ + +.flex-sidefill-l { } -.flex-fill { +.flex-sidefill-r { +} + +.width-sidebox-counterweight { +} + +.width-sidebox-placeholder { +} + +.sidebox { +} + +.width-content { + box-sizing: border-box; flex-grow: 1; } -.flex-sidefill { +.flex-fill { flex-grow: 1; } @@ -114,21 +143,43 @@ main { display: flex; } +.topbar-padding { + min-width: 2rem; +} + +.topbar-unilu { + background: white; + align-self: flex-end; + padding: 0.5rem; + padding-bottom: 0.1rem; + border: solid 1pt #777; + border-bottom: none; + border-radius: 0.5rem 0.5rem 0 0; +} + +.logo-unilu { + height: 2.5rem; + width: 3rem; + background-image: url('static/unilu.svg'); + background-size: contain; + background-repeat: no-repeat; +} + .topbar-lcsb { align-self: flex-end; - padding-bottom: 1rem; + padding-bottom: 0.5rem; } .logo-lcsb { - height: 5rem; - width: 5rem; + height: 2.5rem; + width: 2.5rem; background-image: url('static/lcsb.svg'); background-size: contain; background-repeat: no-repeat; } .topbar-text { - padding-bottom: 1rem; + padding-bottom: 0.5rem; font-family: 'Barlow Condensed', sans-serif; font-weight: 300; line-height: 1.2; @@ -138,45 +189,33 @@ main { .header-title { align-self: flex-end; - font-size: 300%; + font-size: 120%; margin-left: .6em; } .header-subtitle { + display: none; align-self: flex-end; font-size: 120%; max-width: 7em; margin-left: .5em; padding-left: .5em; - margin-bottom: 0.3em; + margin-bottom: 0.1rem; border-left: 1pt solid #777; } -.topbar-unilu { - background: white; - align-self: flex-end; - padding: 1.5rem; - padding-bottom: 0.2rem; - border: solid 1pt #777; - border-bottom: none; - border-radius: 20px 20px 0 0; -} +/* meta bar */ -.logo-unilu { - height: 5rem; - width: 6rem; - background-image: url('static/unilu.svg'); - background-size: contain; - background-repeat: no-repeat; -} +.sidebox { + align-self: flex-start; + box-sizing: border-box; + width: 100%; -/* contents bar */ + padding-left: 2rem; + padding-right: 2rem; -.sidebar-box { - align-self: flex-start; font-size: 80%; color: #777; - padding-left: 2em; } .sidebar-header { @@ -188,6 +227,16 @@ main { margin-bottom: 1em; } +/* main content */ + +.content { + box-sizing: border-box; + width: 100%; + + padding-left: 2rem; + padding-right: 2rem; +} + /* footer */ .content-footer { @@ -195,8 +244,8 @@ main { margin-top: 5rem; background-color: #aaa; box-shadow: - inset 10rem -10rem 10rem 0px #fff, - inset -10rem -10rem 10rem 0px #fff; + inset 10rem -10rem 10rem 0 #fff, + inset -10rem -10rem 10rem 0 #fff; display: flex; } @@ -228,3 +277,105 @@ main { font-size: 80%; color: #777; } + +/* responsive switchery */ + +@media screen and (min-width: 390pt /*30 rem*/) { + .header-title { + font-size: 150%; + } + + .header-subtitle { + font-size: 75%; + display: block; + } +} + +@media screen and (min-width: 780pt /*60 rem*/) { + /* + * bigger than forced 1column: + * - switch header to "normal" form + * - start growing borders + */ + + header { + height: 8rem; + margin-bottom: 3rem; + } + + .flex-sidefill-l { + flex-grow: 1; + } + + .flex-sidefill-r { + flex-grow: 1; + } + + .width-content { + width: 60rem; + flex-grow: 0; + } + + /* header stuff */ + + .topbar-unilu { + padding: 1.5rem; + padding-bottom: 0.2rem; + border-radius: 1.5rem 1.5rem 0 0; + } + + .logo-unilu { + height: 5rem; + width: 6rem; + } + + .topbar-lcsb { + padding-bottom: 1rem; + } + + .logo-lcsb { + height: 5rem; + width: 5rem; + } + + .topbar-text { + padding-bottom: 1rem; + } + + .header-title { + font-size: 300%; + } + + .header-subtitle { + margin-bottom: 0.4rem; + font-size: 120%; + } +} + +@media screen and (min-width: 1040pt /*80 rem*/) { + .flex-sidefill-r { + flex-grow: 0; + } + + .content-holder { + flex-direction: row-reverse; + } + + .width-sidebox-placeholder { + width: 20rem; + } + + .sidebox { + width: 20rem; + } +} + +@media screen and (min-width: 1300pt /*100 rem*/) { + .flex-sidefill-r { + flex-grow: 1; + } + + .width-sidebox-counterweight { + width: 20rem; + } +} diff --git a/templates/footer.html b/templates/footer.html index 834f1f2..16c79f5 100644 --- a/templates/footer.html +++ b/templates/footer.html @@ -1,31 +1,19 @@ - <div class="content-footer"> - <div class="flex-fill"></div> - <div class="footer-r3"></div> - <div class="footer-lcsb"></div> - <div class="footer-text"> - <div> - The contents are available under the <a href="#">Creative Commons Attribution-ShareAlike License (CC-BY-SA 4.0)</a>. - </div> - <div> - <a href="#">Privacy Policy</a> (Only necessary cookies accepted — <a href="#">change</a>) + <div class="content-footer"> + <div class="flex-fill"></div> + <div class="footer-r3"></div> + <div class="footer-lcsb"></div> + <div class="footer-text"> + <div> + The contents are available under the <a href="#">Creative Commons Attribution-ShareAlike License (CC-BY-SA 4.0)</a>. + </div> + <div> + <a href="#">Privacy Policy</a> (Only necessary cookies accepted — <a href="#">change</a>) + </div> </div> + <div class="flex-fill"></div> </div> - <div class="flex-fill"></div> - </div> - </div> - <div class="width-sidebar sidebar-box"> - <div class="sidebar-header"> - Page categories - </div> - <div class="sidebar-values"> - a → b → c - </div> - <div class="sidebar-header"> - Last modification - </div> - <div class="sidebar-values"> - January 2023 </div> + <div class="width-sidebox-counterweight"></div> </div> - <div class="flex-sidefill"></div> + <div class="flex-sidefill-r"></div> </main> diff --git a/templates/header.html b/templates/header.html index a790e26..25d2aba 100644 --- a/templates/header.html +++ b/templates/header.html @@ -1,6 +1,8 @@ <header> - <div class="flex-sidefill topbar-borderbottom"></div> + <div class="flex-sidefill-l topbar-borderbottom"></div> + <div class="width-sidebox-counterweight topbar-borderbottom"></div> <div class="width-content same-height"> + <div class="topbar-padding topbar-borderbottom"></div> <div class="topbar-unilu topbar-borderbottom"> <div class="logo-unilu"></div> </div> @@ -12,10 +14,26 @@ <div class="topbar-lcsb topbar-borderbottom"> <div class="logo-lcsb"></div> </div> + <div class="topbar-padding topbar-borderbottom"></div> </div> - <div class="flex-sidefill topbar-borderbottom"></div> + <div class="width-sidebox-placeholder topbar-borderbottom"></div> + <div class="flex-sidefill-r topbar-borderbottom"></div> </header> <main> - <div class="flex-sidefill"></div> - <div class="width-sidebar sidebar-box"></div> - <div class="width-content"> + <div class="flex-sidefill-l"></div> + <div class="content-holder"> + <div class="sidebox"> + <div class="sidebar-header"> + Page categories + </div> + <div class="sidebar-values"> + a → b → c + </div> + <div class="sidebar-header"> + Last modification + </div> + <div class="sidebar-values"> + January 2023 + </div> + </div> + <div class="content width-content"> |