diff --git a/404.html b/404.html index 3959b9f..c30cabd 100644 --- a/404.html +++ b/404.html @@ -22,7 +22,7 @@ - + @@ -279,55 +279,76 @@ footer p { } } #zine-container { - padding: 0; + padding: 0; + + > li { + list-style: none; + border-bottom: solid; + border-left: solid; + border-radius: .25rem; + padding: 0 .4rem .4rem; + margin-bottom: 2rem; + + &:has(img) { + display: grid; + grid-template-areas: "text img"; + gap: .75rem; + grid-template-columns: 3fr 2fr; + + img { + border-radius: .2rem; + } + } + } + + h2, + p { + border: none; + display: inline; + } + + h2 a { + background-color: var(--color-header); + line-height: 135%; + } + + h3 { + background-color: var(--color-warn); + color: var(--color-text); + border-radius: .2rem; + padding: 0 .2rem; + text-align: right; + line-height: 150%; + margin: .25rem 0 .75rem 0; + } + + blockquote { + margin: 0; + color: var(--color-header); + + p { + display: block; + margin-block: .75rem; + } + + p:first-child { + margin-top: .5rem; + } + + p:last-child { + margin-bottom: 0; + } + } } -#zine-container > li { - list-style: none; - border-bottom: solid; - border-left: solid; - border-radius: 4px; - padding: 0 .4rem .4rem; - margin-bottom: 2rem; -} +@media (max-width: 650px) { + #zine-container > li:has(img) { + display: block; -#zine-container h2, -#zine-container p { - border: none; - display: inline; -} - -#zine-container h2 a { - background-color: var(--color-header); - line-height: 135%; -} - -#zine-container h3 { - background-color: var(--color-warn); - color: var(--color-text); - border-radius: 3px; - padding: 0 .2rem; - text-align: right; - line-height: 150%; - margin: .25rem 0 .75rem 0; -} - -#zine-container blockquote { - margin: 0; - color: var(--color-header); -} - -#zine-container blockquote p { - display: block; - margin-block: .75rem; -} - -#zine-container blockquote p:first-child { - margin-top: .5rem; -} - -#zine-container blockquote p:last-child { - margin-bottom: 0; + img { + margin-block-start: .5rem; + } + } } @@ -391,6 +412,6 @@ footer p {
- +