From: Lady Date: Mon, 1 May 2023 00:49:07 +0000 (-0700) Subject: Set a minimum viewport width of 480px X-Git-Url: https://git.ladys.computer/Blog/commitdiff_plain/dd6893b971c1196cc6f23bdab5ca5429aaa50d3e?ds=sidebyside Set a minimum viewport width of 480px The banner image of the site is a standard 468px wide, meaning that on smaller devices (phones in portrait mode) it will awkwardly overflow the viewport. This sets the viewport on such devices to 480px and also provides some CSS improvements in the case that the screen is too small for other reasons. --- diff --git a/index#entry.xhtml b/index#entry.xhtml index 9b03dfd..97ee62a 100644 --- a/index#entry.xhtml +++ b/index#entry.xhtml @@ -1,6 +1,6 @@ - + diff --git a/index#feed.xhtml b/index#feed.xhtml index 0de394a..918857e 100644 --- a/index#feed.xhtml +++ b/index#feed.xhtml @@ -1,6 +1,6 @@ - + diff --git a/style.css b/style.css index 28b392c..37eb424 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,7 @@ html{ Color: #E3E3E3; Background: #1A1A1A; Font-Family: Serif; Line-Height: 1.5 } body{ Display: Flow-Root; Box-Sizing: Border-Box; Margin: 0; Border: 1PX #000000 Solid; Min-Block-Size: 100SVB; Color: #E3E3E3; Background: No-Repeat Radial-Gradient(Ellipse 64REM 96REM At Center, Transparent 32REM, #1A1A1A) Center / Cover, Repeating-Linear-Gradient(-45DEG, #3E3E3E00 0, #3E3E3E00 2PX, #3E3E3E7F 2.12PX, #3E3E3E7F 4.12PX, #3E3E3E00 4.24PX), #1A1A1A } body>header{ Padding-Block: 16PX; Border-Block-End: 3PX #2CB38D Double } -body>header img{ Display: Block; Margin: Auto; Image-Rendering: Pixelated } +body>header img{ Display: Block; Margin: Auto; Block-Size: Auto; Max-Inline-Size: 100%; Image-Rendering: Pixelated } body>footer{ Border-Block-Start: 3PX #2CB38D Double } main{ Display: Flow-Root; Margin: Auto; Border-Inline: 1PX #97596B Solid; Padding-Inline: 3CH; Max-Inline-Size: 43REM; Background: #1A1A1A } main>header>p,main>nav>header>h1{ Margin-Block: 1.5REM; Border: 2PX #700020 Solid; Padding-Inline: 1CH; Max-Inline-Size: Max-Content; Color: #700020; Background: #F3DEE3; Box-Shadow: 0 0 0 2PX #F3DEE3, 2PX 2PX 0 2PX #2CB38D, -2PX -2PX 0 2PX #700020; Font-Size: 1.5REM; Font-Style: Italic; Font-Weight: Normal }