Improve and simplify style

src/index.scss

@@ -6,6 +6,7 @@
 *::before,
 *::after {
   margin: 0;
+  padding: 0;
   box-sizing: border-box;
 
   @media (prefers-reduced-motion) {
@@ -24,6 +25,15 @@ html[animations='off'] {
   }
 }
 
+button {
+  border: none;
+  background: none;
+}
+
+a {
+  text-decoration: none;
+}
+
 html {
   height: 100%;
 

src/page/header/header.scss

@@ -35,6 +35,14 @@
   a {
     color: var(--very-light-text-color);
     margin-top: var(--line-height);
+
+    :focus:not(:hover) {
+      outline: var(--very-light-text-color) solid var(--line-width);
+    }
+  }
+
+  a {
+    border-bottom: 2px solid var(--very-light-text-color);
   }
 
   @include on-small-screen {

src/page/image-anchor/image-anchor.scss

@@ -3,7 +3,6 @@
 .image-anchor {
   display: flex;
   align-items: center;
-  text-decoration: none;
 
   &:not(:first-child) {
     padding-top: var(--line-height);

src/page/image-button/image-button.html.ts

@@ -7,17 +7,13 @@ export const ImageButtonFactory =
     title: string,
     { shouldDownload = false }: { shouldDownload?: boolean } = {}
   ) =>
-  (href: url) =>
+  (href?: url) =>
-    `
+    `<a ${href ? `href="${href}"` : ''}
-  <a class="image-button" 
+      class="image-button" tabindex="-1" rel="noopener" target="_blank" ${
-    href="${href}"
+        shouldDownload ? 'download' : ''
-    rel="noopener"
+      }>
-    target="_blank"
+      <button>
-    ${shouldDownload ? 'download' : ''}
+        <div class="svg-container">${svg}</div>
-  >
+        <p>${title}</p>
-    <div class="svg-container">
+      </button>
-      ${svg}
+    </a>`;
-    </div>
-    <p>${title}</p>
-  </a>
-`;

src/page/image-button/image-button.scss

@@ -2,22 +2,26 @@
 
 .image-button {
   @include image-button(var(--icon-size));
+  padding: var(--small-margin) 8px;
+  text-align: center;
 
-  > .svg-container {
+  > button {
-    position: relative;
+    cursor: pointer;
-    margin: auto;
-    @include square(var(--icon-size));
 
-    > svg {
+    > .svg-container {
-      transition: stroke var(--transition-time), transform var(--transition-time);
+      position: relative;
+      margin: auto;
+      @include square(var(--icon-size));
+
+      > svg {
+        transition: stroke var(--transition-time), transform var(--transition-time);
+      }
+    }
+
+    > p {
+      font-size: 0.9rem;
+      font-style: italic;
+      text-align: center;
     }
   }
-
-  > p {
-    padding-bottom: var(--small-margin);
-    font-size: 0.9rem;
-    font-style: italic;
-    padding: 0 8px 8px 8px;
-    text-align: center;
-  }
 }

src/page/image-viewer/image-viewer.scss

@@ -26,8 +26,6 @@
   }
 
   #cancel {
-    background: none;
-    border: none;
     @include image-button(var(--large-icon-size));
     @include square(calc(var(--large-icon-size) + var(--normal-margin) * 2));
     position: absolute;

src/page/link/link.scss

@@ -1,6 +1,5 @@
 @use '../../style/mixins' as *;
 
 .link {
-  text-decoration: none;
   border-bottom: 2px solid var(--special-text-color);
 }

src/page/timeline-element/timeline-element.html.ts

@@ -1,6 +1,7 @@
 import info from '../../../static/icons/info.svg';
 import { titleToFragment } from '../../helper/title-to-fragment';
 import { html } from '../../types/html';
+import { ImageButtonFactory } from '../image-button/image-button.html';
 import { TimelineElementParameters } from './timeline-element-parameters';
 import './timeline-element.scss';
 
@@ -32,14 +33,7 @@ export const generate = (
         }
 
         <div class="buttons">
-        ${
+        ${more ? ImageButtonFactory(info, showMore)() : ''}
-          more
-            ? `<div tabindex=0 class="info-button">
-              <div class="svg-container">${info}</div>
-              <p>${showMore}</p>
-            </div>`
-            : ''
-        }
         ${links.join('')}
         </div>
       </div>

src/page/timeline-element/timeline-element.scss

@@ -1,7 +1,7 @@
 @use '../../style/mixins' as *;
 
 @mixin q-dependent-line-container($q) {
-  .line {
+  > .line {
     height: calc(#{$q} - var(--icon-size) / 2);
 
     &:before {
@@ -13,7 +13,7 @@
     }
   }
 
-  .date {
+  > .date {
     top: calc(#{$q} - 0.5ch);
   }
 }
@@ -53,7 +53,7 @@
       }
     }
 
-    .date {
+    > .date {
       @include special-text-font();
       position: absolute;
       transform-origin: left center;
@@ -73,11 +73,11 @@
       border-radius: 0 0 100px 100px;
     }
 
-    .line-container {
+    > .line-container {
       min-width: 160px;
     }
 
-    &:not(:first-of-type) .card {
+    &:not(:first-of-type) > .card {
       margin-top: var(--large-margin);
     }
   }
@@ -86,43 +86,34 @@
     flex-direction: column;
     align-items: center;
 
-    .line-container {
+    > .line-container {
       @include q-dependent-line-container(50%);
       height: 150px;
       min-width: 64%;
 
-      .date {
+      > .date {
         transform: translateX(calc(var(--icon-size) / 2 + 12px)) translateY(-10%);
       }
     }
   }
 
-  .card {
+  > .card {
+    @include blurred-background();
     box-shadow: var(--shadow);
+    overflow: hidden;
     border-radius: var(--border-radius);
-    z-index: 1;
     background-color: var(--blurred-card-color);
     transition: background-color var(--transition-time);
 
-    @include blurred-background();
+    > .lower {
-
+      > * {
-    .image,
-    video,
-    iframe {
-      border-radius: var(--border-radius) var(--border-radius) 0 0;
-    }
-
-    $border-width: 1px;
-
-    .lower {
-      & > * {
         padding: 0 var(--normal-margin);
         margin-top: var(--small-margin);
       }
 
-      h2 {
+      > h2 {
         text-align: center;
-        margin-bottom: -10px;
+        margin-bottom: -6px;
 
         > a {
           @include sub-title-font();
@@ -130,12 +121,11 @@
         }
       }
 
-      .description,
+      > .description {
-      .info-button {
         text-align: center;
       }
 
-      .more {
+      > .more {
         overflow: hidden;
         margin: 0;
         height: 0;
@@ -146,7 +136,9 @@
         }
       }
 
-      .buttons {
+      $border-width: 1px;
+
+      > .buttons {
         display: flex;
         justify-content: center;
         border-top: $border-width solid var(--normal-text-color);
@@ -156,32 +148,9 @@
         padding: 0;
         margin-top: var(--small-margin);
 
-        .info-button {
+        > * {
-          @include image-button(var(--icon-size));
-          @include main-font();
-
-          .svg-container {
-            position: relative;
-            margin: auto;
-            @include square(var(--icon-size));
-
-            svg {
-              transition: stroke var(--transition-time), transform var(--transition-time);
-            }
-          }
-
-          p {
-            padding-bottom: var(--small-margin);
-            font-size: 0.9rem;
-            font-style: italic;
-            padding: 0 8px var(--small-margin) 8px;
-          }
-        }
-
-        & > * {
           flex: 1;
 
-          padding-top: var(--small-margin);
           &:not(:last-child) {
             border-right: $border-width solid var(--normal-text-color);
             transition: border-color var(--transition-time);

src/page/timeline-element/timeline-element.ts

@@ -13,12 +13,15 @@ export class TimelineElement extends PageElement {
     private readonly showLess: string
   ) {
     super(generate(timelineElement, showMore));
-    this.more = this.query('.more');
 
     addEventListener('resize', this.handleResize.bind(this));
 
+    this.more = this.query('.more');
     if (this.more) {
-      this.query('.info-button').addEventListener('click', this.toggleOpen.bind(this));
+      this.query('.buttons > .image-button').addEventListener(
+        'click',
+        this.toggleOpen.bind(this)
+      );
     }
 
     this.attachElementByReplacing(
@@ -52,7 +55,7 @@ export class TimelineElement extends PageElement {
 
     this.isOpen = true;
 
-    this.query('.info-button > p').innerText = this.showLess;
+    this.query('.buttons > .image-button p').innerText = this.showLess;
 
     const deltaHeight = this.more.scrollHeight;
     this.more.style.height = `${deltaHeight.toString()}px`;
@@ -65,7 +68,7 @@ export class TimelineElement extends PageElement {
 
     this.isOpen = false;
 
-    this.query('.info-button > p').innerText = this.showMore;
+    this.query('.buttons > .image-button p').innerText = this.showMore;
 
     this.more.style.height = '0';
   }

src/page/up-arrow-button/up-arrow-button.scss

@@ -9,8 +9,6 @@
     transform var(--transition-time);
 
   border-radius: var(--border-radius);
-  background: none;
-  border: none;
 
   position: fixed;
   bottom: var(--small-margin);

src/style/mixins.scss

@@ -22,7 +22,6 @@ $breakpoint-width: 800px !default;
   display: block;
   box-sizing: content-box;
   cursor: pointer;
-  text-decoration: none;
 
   &:hover svg {
     transform: translateX(-50%) translateY(-50%) scale(1.15);
@@ -37,7 +36,6 @@ $breakpoint-width: 800px !default;
 }
 
 @mixin title-fragment-link() {
-  text-decoration: none;
   position: relative;
 
   &:before {
@@ -125,7 +123,6 @@ $breakpoint-width: 800px !default;
   $line-width: 2px;
 
   @include special-text-font();
-  text-decoration: none;
   cursor: pointer;
   position: relative;
   display: inline-block;

static/icons/open.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 18 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
   <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
   <path d="M20 12h-13l3 -3m0 6l-3 -3" />