mobile-friendly view and scss->sass

src/about/About.mdx

@@ -1,4 +1,4 @@
-import openingImage from "../img/IMG_20240725_175449_803.jpg";
+import openingImage from "../img/DSC_5633.jpg";
 import rainbow from "../img/IMG-0186.jpg";
 import japanese from "../img/IMG_20230531_000224_01.jpg";
 import computers from "../img/IMG_3071.jpg";

src/about/AboutPage.tsx

@@ -1,4 +1,4 @@
-import "./about.scss";
+import "./about.sass";
 import {HTMLProps, lazy} from "react";
 import {Link} from "../router/Link";
 import {Path} from "../router/router";

src/about/about.sass

@@ -0,0 +1,82 @@
+@use "../nav/nav"
+$paragraph: 20px
+$max-width: 600px
+$min-width: 400px
+
+.about-page
+  color: white
+  display: flex
+  justify-content: center
+
+.title
+  text-align: center
+  margin: nav.$padding
+
+.self
+  width: 100%
+  border-bottom: white 4px solid
+
+
+.about-container
+  min-width: $min-width
+  flex-shrink: 1
+  display: flex
+  flex-direction: column
+  align-items: center
+  font-family: Neuton, serif
+  line-height: 40px
+
+  img:not(.self)
+    border: 2px white solid
+
+  p
+    text-indent: 30px
+    padding: nav.$padding
+    max-width: $max-width
+    font-size: $paragraph
+
+  h1
+    font-size: $paragraph * 2
+    padding: nav.$padding
+
+  h2
+    font-size: $paragraph * 1.5
+    padding: nav.$padding
+
+  h3
+    font-size: $paragraph * 1.1
+    font-weight: bold
+
+.edge
+  background: #27213C
+  flex-grow: 1
+  min-width: 30%
+
+.clothing, .computers
+  margin: 15px 0
+  display: flex
+  flex-direction: row
+  justify-content: center
+
+
+.clothing>img
+  width: 33%
+
+
+.computers
+  // select second
+  img:not(:first-child)
+    width: 20%
+
+  img
+    width: 30%
+
+.external-link
+  text-decoration: underline !important
+
+ul
+  display: flex
+  flex-direction: column
+  font-size: $paragraph
+  max-width: $max-width
+  gap: 10px

src/about/about.scss

@@ -1,93 +0,0 @@
-@use "../nav/nav.scss";
-$paragraph: 20px;
-$max-width: 600px;
-
-.about-page {
-  color: white;
-  display: flex;
-  justify-content: center;
-}
-
-.title {
-  text-align: center;
-  margin: nav.$padding;
-}
-
-.self {
-  width: 100%;
-  border-bottom: white 4px solid;
-}
-
-.about-container {
-  margin-top: 2 * nav.$padding;
-  flex-shrink: 1;
-  max-width: 75%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  font-family: Neuton;
-  line-height: 40px;
-
-  img:not(.self) {
-    border: 2px white solid;
-  }
-
-  p {
-    text-indent: 30px;
-    margin: 10px;
-    max-width: $max-width;
-    font-size: $paragraph;
-  }
-
-  h1 {
-    font-size: $paragraph * 2;
-  }
-  h2 {
-    font-size: $paragraph * 1.5;
-  }
-  h3 {
-    font-size: $paragraph * 1.1;
-    font-weight: bold;
-  }
-}
-
-.edge {
-  background:#27213C;
-  flex-grow: 1;
-}
-
-.clothing, .computers {
-  margin: 15px 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-
-.clothing>img {
-  width: 33%;
-}
-
-.computers {
-  // select second
-  img:not(:first-child) {
-    width: 20%;
-  }
-
-  img {
-    width: 30%;
-  }
-}
-
-
-
-.external-link {
-  text-decoration: underline !important;
-}
-
-ul {
-  display: flex;
-  flex-direction: column;
-  font-size: $paragraph;
-  max-width: $max-width;
-  gap: 10px;
-}