Scale font size on small screens

tweedegolf · Jun 4, 2024 · ddf666b · ddf666b
1 parent 45e4cf3
commit ddf666b
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="icon" type="image/svg+xml" href="./src/icon.svg">
   <meta name="description"
     content="Welke ervaring heb je opgedaan met deze beroepsactiviteit in de praktijk (in een huisartsgeneekundige setting)?">

diff --git a/src/ThemeSection.tsx b/src/ThemeSection.tsx
@@ -31,7 +31,7 @@ export default function ThemeSection({
           className="theme"
         >
           <h3>
-            <span style={{ background: color }}>{themeIndex + 1}</span>
+            <span>{themeIndex + 1}</span>
             {name}
           </h3>
         </th>

diff --git a/src/data.json b/src/data.json
@@ -326,7 +326,7 @@
     },
     {
       "name": "Preventie",
-      "color": "#fed702",
+      "color": "#e9c701",
       "experiences": [
         {
           "name": "Stelt, samen met een patiënt, een individueel zorgplan op ter preventie van een chronische ziekte.",

diff --git a/src/index.css b/src/index.css
@@ -2,7 +2,6 @@
 
 html {
   box-sizing: border-box;
-  font-size: 16px;
 }
 
 html,
@@ -11,7 +10,6 @@ body {
   padding: 0;
   margin: 0;
   width: 100%;
-  min-width: 460px;
 }
 
 *,
@@ -53,6 +51,7 @@ body {
   line-height: 1.4;
   padding: 2rem;
   position: relative;
+  font-size: 16px;
 }
 
 @media screen and (max-width: 768px) {
@@ -61,6 +60,12 @@ body {
   }
 }
 
+@media screen and (max-width: 460px) {
+  html, body {
+    font-size: 3.4vw;
+  }
+}
+
 h1 {
   font-size: 2rem;
   margin-bottom: 1rem;
@@ -155,13 +160,14 @@ th {
   border: 1px solid #f0f0f0;
   vertical-align: middle;
   min-width: 2rem;
+  padding: 0;
 }
 
 /* table form styling */
 
 table.form th.theme {
   border: 1px solid;
-  padding: 1.5rem 1rem;
+  padding: 1.25rem;
 }
 
 table.form td.white {
@@ -200,11 +206,22 @@ table.form h3 {
   margin: 0;
   padding: 0;
   color: white;
-  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  font-size: 1.5rem;
+  line-height: 1.3;
 }
 
 table.form h3 span {
-  margin-right: 0.5rem;
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  font-size: 1rem;
+  line-height: 2rem;
+  text-align: center;
+  border-radius: 1rem;
+  margin-right: 1rem;
+  background-color: rgba(0, 0, 0, 0.15);
+  vertical-align: top;
 }
 
 table.form tbody input {
@@ -322,7 +339,7 @@ table.form tr.selectable:hover {
 [data-tooltip]::before {
   content: "";
   position: absolute;
-  top: -1px;
+  top: 0;
   left: 50%;
   transform: translateX(-50%);
   border-width: 0.25rem 0.5rem 0 0.5rem;