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.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>
<link rel="stylesheet" type="text/css" href="/style.css"/>
</head>
<body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>
<link rel="stylesheet" type="text/css" href="/style.css"/>
</head>
<body>
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 }
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 }
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 }
Lady’s Gitweb / Blog / commitdiff