From: Lady Date: Mon, 1 May 2023 00:38:33 +0000 (-0700) Subject: Small improvements for mobile browsers X-Git-Url: https://git.ladys.computer/Blog/commitdiff_plain/64cd367784f1fa70d0ef53d658122d3f81bb8809 Small improvements for mobile browsers - Use `svb` instead of `vh` for `` sizing to prevent overflow when the location bar is placed above content. - Add viewport meta tag to templates to prevent downscaling on some mobile devices. - Use `Max-Inline-Size` instead of `Max-Width` when styling `
` for consistency. --- diff --git a/index#entry.xhtml b/index#entry.xhtml index 1a6aefe..9b03dfd 100644 --- a/index#entry.xhtml +++ b/index#entry.xhtml @@ -1,5 +1,6 @@ + diff --git a/index#feed.xhtml b/index#feed.xhtml index a121a34..0de394a 100644 --- a/index#feed.xhtml +++ b/index#feed.xhtml @@ -1,5 +1,6 @@ + diff --git a/style.css b/style.css index ca0996a..28b392c 100644 --- a/style.css +++ b/style.css @@ -1,9 +1,9 @@ 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: 100VH; 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{ 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>footer{ Border-Block-Start: 3PX #2CB38D Double } -main{ Display: Flow-Root; Margin: Auto; Border-Inline: 1PX #97596B Solid; Padding-Inline: 3CH; Max-Width: 43REM; Background: #1A1A1A } +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 } main>footer>p,main>nav>footer>p{ Display: Block; Margin-Block: 1.5REM; Margin-Inline: Auto; Border-Style: Solid; Border-Block-Color: #D6B7BF #2CB38D; Border-Inline-Color: #D6B7BF #2CB38D; Border-Width: 1PX; Padding-Inline: 1CH; Max-Inline-Size: Max-Content; Color: #700020; Background: #F3DEE3; Box-Shadow: 0 0 0 1PX #700020, Inset 0 0 0 1PX #700020 } main>nav>footer>p{ Margin-Inline: Auto 0 }