diff options
Diffstat (limited to 'static')
-rw-r--r-- | static/css/gb.css | 27 | ||||
-rw-r--r-- | static/css/style.css | 56 | ||||
-rw-r--r-- | static/css/theme.css | 25 |
3 files changed, 75 insertions, 33 deletions
diff --git a/static/css/gb.css b/static/css/gb.css index 54682d0..8152469 100644 --- a/static/css/gb.css +++ b/static/css/gb.css @@ -1,33 +1,26 @@ -body{ +main { text-align: center; - background-color: #e0dbcd; } -div.gameboy{ - padding: 10px; - border-radius: 10px; +div.gameboy { display: inline-block; background-color: #a89f94; + border-radius: 10px; + padding: 1em; + width: clamp(30ch, 100%, 45ch); } -img.screen{ +div.gameboy img.screen { border: 10px solid #2b2b26; border-radius: 10px; - width: 320px; - height: 288px; + width: 100%; } -table{ +div.gameboy table.controls { margin-left: auto; margin-right: auto; } -table.controls{ - max-width: 320px; - height: auto; -} - -.controls input, img{ - height: 35px; - width: auto; +div.gameboy table.controls input{ + width: 100%; } diff --git a/static/css/style.css b/static/css/style.css index 47ec270..915a1f2 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -13,7 +13,8 @@ h2 { text-align: center; } -body, html { +body, +html { margin: 0; padding: 0; } @@ -36,10 +37,13 @@ body > header { body > footer { grid-area: footer; + padding-top: 0.5em; + padding-bottom: 0.5em; } main { grid-area: main; + padding-top: 0.5em; border-radius: 5px; padding-bottom: 0.5em; } @@ -48,7 +52,9 @@ a{ text-decoration: none; } -body > header, body > footer, main { +body > header, +body > footer, +main { justify-self: center; width: clamp(30ch, calc(100% - 1em), 75ch); padding-left: 0.5em; @@ -59,6 +65,12 @@ main.art { width: clamp(30ch, calc(100% - 1em), 100%); } +main.art p { + margin-left: auto; + margin-right: auto; + width: clamp(30ch, calc(100% - 1em), 75ch); +} + /* article/art elements */ div.article-info, @@ -180,6 +192,9 @@ pre { } code { + padding: 0.1em; + padding-left: 0.4em; + padding-right: 0.4em; overflow-wrap: anywhere; } @@ -208,6 +223,19 @@ code.crypto { /* images */ +figure { + margin: 0; + margin-left: 1em; + margin-right: 1em; +} + +figcaption { + margin-top: 0.5em; + text-align: center; + font-size: smaller; + font-style: italic; +} + img { border-radius: 5px; max-width: 100%; @@ -267,7 +295,6 @@ div.art-grid a { } div.art-grid img { - border: 1px solid white; object-fit: cover; } @@ -293,8 +320,9 @@ a.zoom-in { cursor: zoom-in; } -/* art nav */ -div.art-nav { +/* art nav / for now also page nav */ +div.art-nav, +div.page-nav { width: 100%; display: grid; grid-template-areas: @@ -305,19 +333,23 @@ div.art-nav { justify-items: center; } -div.art-nav > span.index { +div.art-nav > span.index, +div.page-nav > span.index { grid-area: index; } -div.art-nav > span.previous { +div.art-nav > span.previous, +div.page-nav > span.previous { grid-area: prev; } -div.art-nav > span.next { +div.art-nav > span.next, +div.page-nav > span.next { grid-area: next; } -div.art-nav > span { +div.art-nav > span, +div.page-nav > span { border-radius: 5px; min-width: 1em; max-width: 10em; @@ -329,12 +361,14 @@ div.art-nav > span { margin-right: 0.2em; } -div.art-nav > span span { +div.art-nav > span span, +div.page-nav > span span { display: none; } @media screen and (min-width: 600px) { - div.art-nav > span span { + div.art-nav > span span, + div.page-nav > span span { display: inline; } } diff --git a/static/css/theme.css b/static/css/theme.css index 8f900ba..b3bbb18 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -44,6 +44,7 @@ --switch-sun: var(--color13); --code-border: var(--color3); + --art-border: var(--color3); --pagenav-bg: var(--color1); --pagenav-bg-hl: var(--color2); @@ -77,6 +78,7 @@ --switch-sun: var(--color13); --code-border: var(--color4); + --art-border: var(--color4); --pagenav-bg: var(--color10); --pagenav-bg-hl: var(--color9); @@ -188,19 +190,32 @@ button.theme-switcher > .fa-sun { color: var(--switch-sun); } -/* art nav */ -div.art-nav > span { +/* art grid / art gallery */ +div.art-grid img { + border: 1px solid var(--art-border); +} + +div.art-grid img:hover { + border: 5px solid var(--art-border); +} + +/* art nav / for now also page nav */ +div.art-nav > span, +div.page-nav > span { background: var(--pagenav-bg); } -div.art-nav > span > a { +div.art-nav > span > a, +div.page-nav > span > a { color: var(--pagenav-link); } -div.art-nav > span:hover { +div.art-nav > span:hover, +div.page-nav > span:hover { background: var(--pagenav-bg-hl); } -div.art-nav > span:hover > a { +div.art-nav > span:hover > a, +div.page-nav > span:hover > a { color: var(--pagenav-link-hl); } |