- Use `svb` instead of `vh` for `<body>` 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 `<main>`
for consistency.
<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"/>
<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"/>
<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 }
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 }
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 }
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 }
Lady’s Gitweb / Blog / commitdiff