]> Lady’s Gitweb - Blog/commitdiff
Lady’s Gitweb / Blog / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side (parent: 64cd367)
Set a minimum viewport width of 480px
authorLady <redacted>
Mon, 1 May 2023 00:49:07 +0000 (17:49 -0700)
committerLady <redacted>
Mon, 1 May 2023 00:55:48 +0000 (17:55 -0700)
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.

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 9b03dfd07acfa06deb21325446ef26c3f37961b9..97ee62a985816069f6b27ad0d37e0658bf36bcbb 100644 (file)
--- 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 0de394adc209bbce51cf65a0c236b5a549cf580c..918857e1f6b75c5094c77a2e712041be474426b2 100644 (file)
--- 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 28b392c02aea76cea0082683e25f456513048ad2..37eb424f1e3ba2dbf0cf682776bcf48caf5c5450 100644 (file)
--- 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 }
Source code for https://blog.ladys.computer
This page took 0.022035 seconds and 4 git commands to generate.