diff --git a/src/components/RefImage.vue b/src/components/RefImage.vue
index 26c76b6..b17824e 100644
--- a/src/components/RefImage.vue
+++ b/src/components/RefImage.vue
@@ -12,7 +12,7 @@
 
 <style lang="scss">
 .figure {
-  max-width: var(--container-width-images);
+  max-width: var(--refimage-max-width);
   margin: 0 auto;
 
   &__image {
diff --git a/src/components/TextBlock.vue b/src/components/TextBlock.vue
index ffaefd1..6302f81 100644
--- a/src/components/TextBlock.vue
+++ b/src/components/TextBlock.vue
@@ -6,7 +6,8 @@
 
 <style lang="scss">
   .textblock {
-    max-width: var(--container-width-text);
-    margin: var(--content-spacing);
+    max-width: var(--textblock-max-width);
+    margin: auto;
+    padding: var(--textblock-padding);
   }
 </style>
diff --git a/src/components/TimelineItem.vue b/src/components/TimelineItem.vue
index b0bfae9..d1ff9b9 100644
--- a/src/components/TimelineItem.vue
+++ b/src/components/TimelineItem.vue
@@ -53,10 +53,11 @@ const dateLabels = computed<Record<string, string>>(() => {
     &:not(:last-child):before {
       content: "";
       position: absolute;
-      top: var(--timeline-position-top);
-      left: var(--timeline-stroke-position);
+      top: var(--timeline-stroke-position-top);
+      left: var(--timeline-stroke-position-horizontal);
       height: var(--timeline-stroke-length);
-      border-left: var(--timeline-stroke-border);
+      border-left: var(--timeline-stroke-thickness) solid
+        var(--timeline-stroke-color);
     }
 
     @media (min-width: 64em) {
@@ -69,7 +70,7 @@ const dateLabels = computed<Record<string, string>>(() => {
 
         &:before {
           left: auto;
-          right: var(--timeline-stroke-position);
+          right: var(--timeline-stroke-position-horizontal);
         }
 
         .timeline-item__datetime {
@@ -88,14 +89,15 @@ const dateLabels = computed<Record<string, string>>(() => {
       text-align: center;
       line-height: 1.1;
 
-      background-color: var(--timeline-circle-background-color);
+      background-color: var(--timeline-circle-background);
 
       flex: 0 0 var(--timeline-circle-size);
       width: var(--timeline-circle-size);
       height: var(--timeline-circle-size);
 
       margin: 0;
-      border: var(--timeline-stroke-border);
+      border: var(--timeline-stroke-thickness) solid
+        var(--timeline-stroke-color);
       border-radius: 100%;
       padding: var(--timeline-circle-padding);
     }
diff --git a/src/scss/base.scss b/src/scss/base.scss
index 2478f77..343ea1b 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -37,38 +37,33 @@
   --font-size: 18px;
   --text-line-height: 1.5em;
 
-  --margin-paragraph: 1rem;
+  --paragraph-margin: 1rem;
 
-  --container-width-text: 40rem;
-  --container-width-images: 40rem;
-  --container-width-tables: 40rem;
-  --container-width-timeline: calc(var(--timeline-circle-size) * 15);
+  --textblock-max-width: 36rem;
+  --refimage-max-width: 36rem;
 
   --container-spacing-top-safe: max(1rem, env(safe-area-inset-top));
   --container-spacing-right-safe: max(1rem, env(safe-area-inset-right));
   --container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom));
   --container-spacing-left-safe: max(1rem, env(safe-area-inset-left));
 
-  --content-spacing: 0 var(--container-spacing-right-safe) 0
+  --textblock-padding: 0 var(--container-spacing-right-safe) 0
     var(--container-spacing-left-safe);
 
-  --navigation-item-font-size: 1.75rem;
+  --navigation-item-font-size: 1.5rem;
   --navigation-item-line-height: 3.25rem;
   --navigation-width: 100vw;
 
+  --timeline-max-width: calc(var(--timeline-circle-size) * 15);
   --timeline-circle-size: 4rem;
   --timeline-circle-font-size: calc(var(--timeline-circle-size) * 0.2);
-  --timeline-circle-background-color: rgba(107, 185, 219, 0.5);
-  --timeline-circle-padding: calc(var(--timeline-circle-font-size) * 0.5);
-
-  --timeline-position-top: var(--timeline-circle-size);
+  --timeline-circle-background-color: var(--theme-c-woody-brown);
+  --timeline-circle-padding: calc(var(--timeline-circle-font-size));
 
   --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
-  --timeline-stroke-color: var(--theme-c-crystal-blue);
-  --timeline-stroke-border: var(--timeline-stroke-thickness) solid
-    var(--timeline-stroke-color);
   --timeline-stroke-length: calc(100% - var(--timeline-circle-size) + 1.5rem);
-  --timeline-stroke-position: calc(
+  --timeline-stroke-position-top: var(--timeline-circle-size);
+  --timeline-stroke-position-horizontal: calc(
     var(--timeline-circle-size) / 2 - var(--timeline-stroke-thickness) / 2
   );
 
@@ -76,9 +71,9 @@
   --timeline-item-margin-odd: 0 0 0 calc(50% - var(--timeline-circle-size) / 2);
   --timeline-item-margin-even: 0 calc(50% - var(--timeline-circle-size) / 2) 0 0;
 
-  --color-table-border-radius: 1rem;
-  --color-table-color-cell-width: 10vw;
-  --color-table-spacing: 0 var(--container-spacing-right-safe) 0
+  --table-max-width: 36rem;
+  --table-border-radius: 1rem;
+  --table-outer-spacing: 0 var(--container-spacing-right-safe) 0
     var(--container-spacing-left-safe);
 }
 
@@ -103,12 +98,16 @@
   --color-router-link-hover: var(--theme-c-walnut-brown);
   --color-router-link-active: var(--theme-c-crystal-blue);
 
-  --color-table-row-hover: var(--theme-c-walnut-brown);
-  --color-table-heading-background: var(--theme-c-dark-grey-blue);
-  --color-table-heading-text-color: var(--theme-c-text-dark);
-  --color-table-cell-background: var(--theme-c-desert-sand);
-  --color-table-cell-text-color: var(--theme-c-text-light);
-  --color-table-cell-text-color-hover: var(--theme-c-text-dark);
+  --table-row-background-hover: var(--theme-c-walnut-brown);
+  --table-heading-background: var(--theme-c-dark-grey-blue);
+  --table-heading-text-color: var(--theme-c-text-dark);
+  --table-cell-background: var(--theme-c-desert-sand);
+  --table-cell-text-color: var(--theme-c-text-light);
+  --table-cell-text-color-hover: var(--theme-c-text-dark);
+
+  --timeline-stroke-color: var(--theme-c-dark-grey-blue);
+  --timeline-circle-background: var(--theme-c-dark-grey-blue-translucent);
+  --timeline-icon-color: var(--theme-c-antique-white);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -123,22 +122,26 @@
     --color-link-text-hover: var(--theme-c-text-light);
     --color-link-text-underline: var(--theme-c-text-dark);
 
-    --color-table-row-hover: var(--theme-c-walnut-brown);
-    --color-table-heading-background: var(--theme-c-deep-oak);
-    --color-table-heading-text-color: var(--theme-c-text-dark);
-    --color-table-cell-background: var(--theme-c-woody-brown);
-    --color-table-cell-text-color: var(--theme-c-text-dark);
-    --color-table-cell-text-color-hover: var(--theme-c-text-dark);
+    --table-row-background-hover: var(--theme-c-walnut-brown);
+    --table-heading-background: var(--theme-c-deep-oak);
+    --table-heading-text-color: var(--theme-c-text-dark);
+    --table-cell-background: var(--theme-c-woody-brown);
+    --table-cell-text-color: var(--theme-c-text-dark);
+    --table-cell-text-color-hover: var(--theme-c-text-dark);
+
+    --timeline-stroke-color: var(--theme-c-crystal-blue);
+    --timeline-circle-background: var(--theme-c-crystal-blue-translucent);
+    --timeline-icon-color: var(--theme-c-antique-white);
   }
 }
 
-@media (min-width: 45em) {
+@media (min-width: 50em) {
   :root {
     --font-size: 20px;
     --navigation-width: 20rem;
     --color-table-color-cell-width: 10rem;
-    --content-spacing: auto;
-    --color-table-spacing: 0;
+    --textblock-padding: auto;
+    --table-outer-spacing: 0;
   }
 }
 
diff --git a/src/scss/main.scss b/src/scss/main.scss
index c808a15..9508042 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -44,7 +44,7 @@ h6 {
 }
 
 p {
-  margin: var(--margin-paragraph) 0;
+  margin: var(--paragraph-margin) 0;
 }
 
 a {