]> Lady’s Gitweb - Blog/commitdiff
Lady’s Gitweb / Blog / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side (parent: d79fc3e)
Small improvements for mobile browsers
authorLady <redacted>
Mon, 1 May 2023 00:38:33 +0000 (17:38 -0700)
committerLady <redacted>
Mon, 1 May 2023 00:38:33 +0000 (17:38 -0700)
- 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.

index#entry.xhtml patch | blob | history
index#feed.xhtml patch | blob | history
style.css patch | blob | history

diff --git a/index#entry.xhtml b/index#entry.xhtml
index 1a6aefe4f4aeed12d9f9008db15ec7da230ce939..9b03dfd07acfa06deb21325446ef26c3f37961b9 100644 (file)
--- a/index#entry.xhtml
+++ b/index#entry.xhtml
@@ -1,5 +1,6 @@
 <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>
diff --git a/index#feed.xhtml b/index#feed.xhtml
index a121a3421e207d504a54f8eba11ef6c452bfe70b..0de394adc209bbce51cf65a0c236b5a549cf580c 100644 (file)
--- a/index#feed.xhtml
+++ b/index#feed.xhtml
@@ -1,5 +1,6 @@
 <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>
diff --git a/style.css b/style.css
index ca0996a2f04dc9037932fb45e07cf310c645977a..28b392c02aea76cea0082683e25f456513048ad2 100644 (file)
--- 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 }
Source code for https://blog.ladys.computer
This page took 0.022207 seconds and 4 git commands to generate.