From 7cb42d47f32600620d52022fa9b19a48cc006049 Mon Sep 17 00:00:00 2001 From: Joshua Goins Date: Sun, 6 Nov 2022 22:08:00 -0500 Subject: [PATCH] Improve site resizing, and image viewing Images are no longer super blown up on desktop devices, images are now limited in size according to the current article width. On large displays, the article width is now limited so the text is actually readable. --- themes/red/assets/css/site.css | 35 +++++++++++++------------ themes/red/layouts/_default/baseof.html | 2 ++ 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/themes/red/assets/css/site.css b/themes/red/assets/css/site.css index 38834b7..20080cb 100644 --- a/themes/red/assets/css/site.css +++ b/themes/red/assets/css/site.css @@ -1,15 +1,13 @@ /* desktop devices */ @media (min-width: 768px) { - aside { - flex: 200px 0 0; - } - header { margin: 10px; } aside { margin: 10px; + + flex: 15em 0 0; } article { @@ -19,14 +17,17 @@ footer { margin: 10px; } + + #content { + display: flex; + flex-direction: row; + max-width: 100em; + + } } /* mobile devices */ @media (max-width: 768px) { - aside { - width: 100%; - } - aside div { padding: 2px; } @@ -42,12 +43,10 @@ body { background-color: var(--background-primary); accent-color: var(--accent-color); - display: flex; - flex-flow: row wrap; - color: var(--text-color); } + :root { --primary-accent: #9f5858; --secondary-accent: #c99192; @@ -107,7 +106,8 @@ article { padding: 15px; - flex: 2 0; + min-width: 0; + flex: 1 1 auto; } footer { @@ -130,16 +130,17 @@ footer { margin-bottom: 5px; } -.article-img { - width: 100%; - height: auto; -} - .gallery-img { border: 1px black solid; border-radius: 5px; } +.article-img { + max-width: 100%; + max-height: 100%; + height: auto; +} + figure { flex-grow: 1; text-align: center; diff --git a/themes/red/layouts/_default/baseof.html b/themes/red/layouts/_default/baseof.html index 760be67..228e43f 100644 --- a/themes/red/layouts/_default/baseof.html +++ b/themes/red/layouts/_default/baseof.html @@ -3,8 +3,10 @@ {{- partial "head.html" . -}}
{{- partial "header.html" . -}}
+
{{- block "main" . }}{{- end }}
+