From: Lady <redacted>
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;hp=64cd367784f1fa70d0ef53d658122d3f81bb8809
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 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
- <meta name="viewport" content="width=device-width,initial-scale=1"/>
+ <meta name="viewport" content="width=480"/>
<link rel="stylesheet" type="text/css" href="/style.css"/>
</head>
<body>
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 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
- <meta name="viewport" content="width=device-width,initial-scale=1"/>
+ <meta name="viewport" content="width=480"/>
<link rel="stylesheet" type="text/css" href="/style.css"/>
</head>
<body>
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 }