The old Pelican theme I used to use for mcol.xyz
git clone https://mcol.xyz/code/rice-theme
Log | Files | Refs | README

commit 2445f07663747bc0c6931f319138f85efdd5d518
parent 9a932933c16d5969126c3cc9d53930a0a2bdf541
Author: mcol <mcol@posteo.net>
Date:   Mon,  3 Aug 2020 13:06:56 +0100

make CSS more reasonable for small screens

Diffstat:
Mstatic/css/main.css | 119+++++++++++++++++++++++++++++++++++++++++++++----------------------------------
Mtemplates/index.html | 22++++++++++++----------
2 files changed, 80 insertions(+), 61 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css @@ -37,11 +37,11 @@ body { font-family: lato, "Liberation Sans", "DejaVu Sans", sans-serif; font-size: 1.3em; color: var(--text); - height: 98vh; + height: 96vh; display: flex; justify-content: space-evenly; align-items: center; - flex-flow: row wrap; + flex-direction: row; } .win { @@ -57,13 +57,7 @@ body { overflow: hidden; display: flex; flex-direction: column; -} - -@media (hover: none) { /* for devices with no hover */ - .win { - border-color: var(--trim); - color: var(--trim); - } + flex: 0 0 auto; } .bar { @@ -119,10 +113,19 @@ h1 a:hover { /* HOME PAGE */ +#home { + display: flex; + height: 100%; + width: 100%; + justify-content: space-evenly; + align-items: center; +} + #home1,#home2 { position: absolute; border-color: var(--text); color: var(--text); + margin: 10px 0; } @@ -140,12 +143,11 @@ h1 a:hover { } #home2 { - top: calc(50% + 44px); + top: calc(50% + 22px); left: calc(50% - 352px); } - #home1 { - top: calc(50% - 235px); + top: calc(50% - 260px); left: calc(50% - 88px); } @@ -156,48 +158,13 @@ h1 a:hover { padding-bottom: 0.5em; } -@media (max-height: 580px) { - #home1,#home2 { - position: initial; - } -} - -@media (min-width: 491px) and (max-width: 780px) { - #home1 { - right: 5%; - margin-left: auto; - } - #home2 { - left: 5%; - margin-left: auto; - } -} - -@media (max-width: 490px) { - body { - flex-direction: column; - } - #home1,#home2 { - width: 77%; - position: initial; - } -} - /* PAGES */ -#nav { - margin: 0 8%; -} - #page { - height: 98vh; - flex: 1 1 50%; + height: 100%; overflow: auto; -} - -#page > div { - padding: 5% 15% 3% 0; + width: calc(85% - 428px); } .art-info { @@ -270,6 +237,7 @@ table { } .ar-art { + padding-top: 10px; grid-column: 1; } @@ -1078,13 +1046,13 @@ table { .highlight { white-space: pre-wrap; word-wrap: break-word; - padding: 4px 18px; + padding: 4px 14px; } #page pre { overflow-x: auto; margin-left: 50px; - padding-left: 20px; + padding: 8px; border-left: 2px solid var(--trim); } @@ -1164,3 +1132,52 @@ table { .vi { color: var(--c2) } /* Name.Variable.Instance */ .vm { color: var(--c2) } /* Name.Variable.Magic */ .il { color: var(--c2); font-weight: bold } /* Literal.Number.Integer.Long */ + + +/* RESPONSIVENESS */ + +@media (max-height: 580px) { + #home1,#home2 { + position: initial; + } +} + +@media (min-width: 491px) and (max-width: 780px) { + #home1 { + right: 5%; + margin-left: auto; + } + #home2 { + left: 5%; + margin-right: auto; + } +} + +@media (max-width: 1180px) { + body { + flex-direction: column; + height: unset; + min-height: 97vh; + } + #page { + height: initial; + overflow: unset; + width: 75%; + } +} + +@media (max-width: 490px) { + .win,#home1,#home2,#page { + width: 88%; + position: initial; + } + .wc ul { + padding-left: 10%; + } +} + +@media (max-width: 960px) { + #home { + flex-direction: column; + } +} diff --git a/templates/index.html b/templates/index.html @@ -1,19 +1,21 @@ {% extends "base.html" %} {% block body %} -<div id=home1 class=win> - <div class=bar></div> - <div class=wc> - <div> - {{ SITESUBTITLE }}<span id=c>_</span></li> +<div id=home> + <div id=home1 class=win> + <div class=bar></div> + <div class=wc> + <div> + {{ SITESUBTITLE }}<span id=c>_</span></li> + </div> </div> </div> -</div> -<div id=home2 class=win> - <div class=bar></div> - <div class=wc> - {% include "menu.html" %} + <div id=home2 class=win> + <div class=bar></div> + <div class=wc> + {% include "menu.html" %} + </div> </div> </div> {% endblock %}