PC styles nearly done

src/style/a.scss

@@ -0,0 +1,48 @@
+@import "vars";
+@import "mixins";
+
+a {
+  @include insignificant-font();
+  text-decoration: none;
+  position: relative;
+  cursor: pointer;
+  color: $accent-color;
+  display: inline-block;
+  overflow: hidden;
+
+  $border-shift: 10px;
+
+  transition: transform $slow-transition-time;
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: $line-width;
+    bottom: 0;
+    z-index: 1;
+    background: linear-gradient(
+      90deg,
+      $card-color 0,
+      transparentize($card-color, 1) 4px,
+      transparentize($card-color, 1) calc(100% - 4px),
+      $card-color 100%
+    );
+  }
+
+  &:after {
+    content: "";
+    display: block;
+    width: calc(100% + #{$border-shift});
+    z-index: 0;
+    border-bottom: $line-width dotted $accent-color;
+    transition: transform $slow-transition-time;
+  }
+
+  &:hover {
+    &:after {
+      transform: translateX(-$border-shift);
+    }
+  }
+}

src/style/elements.scss

@@ -1,18 +0,0 @@
-#photo-viewer {
-  width: 100%;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: var(--photo-viewer-color);
-  z-index: -3;
-  opacity: 0;
-  transition: opacity var(--transition-time);
-}
-
-/* #photo */
-#photo-viewer > img {
-  max-width: 80vw;
-  max-height: 80vh;
-}
-/**/

src/style/mixins.scss

@@ -29,6 +29,11 @@
   height: $size;
 }
 
+@mixin max-square($size) {
+  max-width: $size;
+  max-height: $size;
+}
+
 @mixin title-font() {
   font: 400 3.33rem "Raleway", serif;
 }

src/style/page.scss

@@ -1,84 +0,0 @@
-header,
-footer,
-#timeline,
-#about > p:first-of-type,
-#timeline > section:not(:first-of-type) > .card {
-  margin-top: var(--margin);
-}
-
-#about > p {
-}
-
-#timeline > section {
-  display: flex;
-}
-
-.card {
-  flex: 1;
-}
-
-#about > p,
-.card > *:not(:first-child):not(:last-child),
-.collapsed > *:not(:first-child) {
-  margin-top: var(--line-height);
-}
-
-img {
-  user-select: none;
-  border-radius: var(--border-radius);
-  cursor: pointer;
-}
-
-.description {
-  font-style: italic;
-  margin-bottom: var(--smaller-margin);
-}
-
-.collapsed > p {
-  text-align: left;
-}
-
-.collapsed {
-  height: 0;
-  overflow: hidden;
-  transition: height var(--transition-time);
-}
-.collapsed > *:last-child {
-  margin-bottom: var(--smaller-margin);
-}
-
-footer {
-  margin-bottom: var(--margin);
-}
-
-@media (max-width: 900px) {
-  body {
-    font-size: 0.85em;
-  }
-
-  #photo {
-    max-width: 94vw;
-  }
-
-  .card {
-    font-size: 0.9em;
-  }
-
-  header {
-    flex-direction: column;
-  }
-
-  h1,
-  #header-pic {
-    font-size: 3em;
-  }
-
-  #header-pic {
-    height: 5.5ch;
-    margin: 0.75ex 0 0.5ex 0;
-  }
-
-  #about > p {
-    text-align: left;
-  }
-}