diff --git a/index.html b/index.html
index d62518e..582c5d1 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
-
+
diff --git a/src/ThemeSection.tsx b/src/ThemeSection.tsx
index 899fb85..669f8ae 100644
--- a/src/ThemeSection.tsx
+++ b/src/ThemeSection.tsx
@@ -31,7 +31,7 @@ export default function ThemeSection({
className="theme"
>
- {themeIndex + 1}
+ {themeIndex + 1}
{name}
diff --git a/src/data.json b/src/data.json
index 4f25756..e08ab68 100644
--- 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
index bac9b0f..fd293c3 100644
--- 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;