px -> em, add meta viewport

rjwebb · rjwebb · commit a4352e61f9e6 · 2025-08-03T22:37:47.000+02:00
diff --git a/html_day_2025/home.css b/html_day_2025/home.css
@@ -5,30 +5,21 @@ body {
 
 h1 {
   font-family: Verdana, Geneva, Tahoma, sans-serif;
-  font-size: 72px;
-  text-decoration: wavy;
 }
 
 ul {
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 0.5em;
   padding-left: 0;
-}
-
-ul {
-  /* border-style: solid; */
-  padding: 1px;
-  padding-top: 5px;
-  /* border-radius: 5px; */
-  /* border-color: pink; */
+  padding-top: 1em;
 }
 
 li {
   list-style: none;
   border-style: solid;
-  padding: 10px;
-  border-radius: 5px;
+  padding: 0.5em;
+  border-radius: 0.5em;
   border-color: white;
 }
 
@@ -52,6 +43,10 @@ li > a {
   color: black;
 }
 
+li > a:visited {
+  color: darkblue;
+}
+
 summary {
   cursor: pointer;
 }
diff --git a/html_day_2025/index.html b/html_day_2025/index.html
@@ -3,6 +3,7 @@
 <head>
   <link rel="stylesheet" href="home.css">
   <title>my home</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 
 <body>
diff --git a/html_day_2025/rooms/bathroom.html b/html_day_2025/rooms/bathroom.html
@@ -3,6 +3,7 @@
 <head>
   <link rel="stylesheet" href="../home.css">
   <title>bathroom | my home</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 
 <body>
diff --git a/html_day_2025/rooms/bedroom.html b/html_day_2025/rooms/bedroom.html
@@ -3,6 +3,7 @@
 <head>
   <link rel="stylesheet" href="../home.css">
   <title>bedroom | my home</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 
 <body>
diff --git a/html_day_2025/rooms/hallway.html b/html_day_2025/rooms/hallway.html
@@ -3,6 +3,7 @@
 <head>
   <link rel="stylesheet" href="../home.css">
   <title>hallway | my home</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 
 <body>
diff --git a/html_day_2025/rooms/laundry.html b/html_day_2025/rooms/laundry.html
@@ -3,6 +3,7 @@
 <head>
   <link rel="stylesheet" href="../home.css">
   <title>laundry | my home</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 
 <body>
diff --git a/html_day_2025/rooms/living.html b/html_day_2025/rooms/living.html
@@ -3,6 +3,7 @@
 <head>
   <link rel="stylesheet" href="../home.css">
   <title>living room | my home</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 
 <body>
diff --git a/html_day_2025/rooms/loggia.html b/html_day_2025/rooms/loggia.html
@@ -3,6 +3,7 @@
 <head>
   <link rel="stylesheet" href="../home.css">
   <title>loggia | my home</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 
 <body>
diff --git a/html_day_2025/rooms/small.html b/html_day_2025/rooms/small.html
@@ -3,6 +3,7 @@
 <head>
   <link rel="stylesheet" href="../home.css">
   <title>small room | my home</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 
 <body>
diff --git a/html_day_2025/rooms/toilet.html b/html_day_2025/rooms/toilet.html
@@ -3,6 +3,7 @@
 <head>
   <link rel="stylesheet" href="../home.css">
   <title>toilet | my home</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 
 <body>
diff --git a/index.html b/index.html
@@ -3,21 +3,18 @@
 <head>
     <title>Home | rjwebb.github.io</title>
     <link rel="stylesheet" type="text/css" href="styles/style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 
 <body>
     <h1>Hi, I'm Bob</h1>
 
-    <hr />
-
     <div id="html-day-banner">On 2nd August 2025, I participated in <strong><a
                 href="https://html.energy/html-day/2025/index.html">HTML day</a></strong> - a worldwide celebration of
         the expressive and liberatory power of writing HTML. <strong><a href="./html_day_2025/">You can visit the
                 website I created here</a></strong>.
     </div>
 
-    <hr />
-
     <ul>
         <li>
             Web development<br />
diff --git a/styles/style.css b/styles/style.css
@@ -1,13 +1,16 @@
 body {
-  max-width: 768px;
+  max-width: 50em;
   font-family: "Arial", sans-serif;
   margin: auto;
-  padding: 20px;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
   background-color: #fff4e3;
 }
 
 #html-day-banner {
-  border: 2px solid lime;
+  border: 0.2em solid lime;
   background-color: white;
-  padding: 10px;
+  padding: 0.5em;
 }
