From d6e489a1d93f81f6dddb06503ede0327eb64d373 Mon Sep 17 00:00:00 2001
From: ktyl <me@ktyl.dev>
Date: Fri, 31 Dec 2021 17:02:21 +0000
Subject: [PATCH] responsive about

---
 src/inc_css/nav.css   |  4 ++
 src/inc_css/page.css  | 78 +++++++++++++++++++++++++++++++++++++++
 src/inc_css/title.css | 11 ++++++
 src/root/about.html   |  2 +-
 src/root/styles.css   | 86 +------------------------------------------
 todo.md               |  4 +-
 6 files changed, 97 insertions(+), 88 deletions(-)
 create mode 100644 src/inc_css/page.css

diff --git a/src/inc_css/nav.css b/src/inc_css/nav.css
index 7c18edf..bcb3beb 100644
--- a/src/inc_css/nav.css
+++ b/src/inc_css/nav.css
@@ -20,6 +20,10 @@
     padding-left:0;
     width: 80%;
 }
+ul.nav-links {
+    margin-top: 0;
+    list-style-type: none;
+}
 
 .nav .nav-links li {
     display: block;
diff --git a/src/inc_css/page.css b/src/inc_css/page.css
new file mode 100644
index 0000000..22c4d7c
--- /dev/null
+++ b/src/inc_css/page.css
@@ -0,0 +1,78 @@
+.page {
+    position: absolute;
+    width: max(30vmax,500px);
+    left:50%;
+    top:0;
+    padding: 0px 0 50px;
+    padding-top: 5vh;
+
+    transform: translate(-50%, 0);
+}
+
+.page .text-panel .separator {
+    position: relative;
+    background-color: var(--foreground-inactive);
+
+    width: .35em;
+    height: .35em;
+    left: 50%;
+
+    border-radius: 100%;
+
+    transform: translateX(-50%);
+}
+
+.page a {
+    text-decoration: none;
+    color: var(--accent);
+    transition: all 0.1s;
+}
+.page a:hover {
+    color: var(--foreground);
+}
+
+.page .text-panel {
+    margin: 0;
+    margin-left: -2em;
+    padding: .6em 2em;
+    color: var(--foreground-inactive);
+
+    font-size: 1.1em;
+    /*font-weight: bold;*/
+
+    line-height: 1.25em;
+
+    background-color: var(--background);
+    border-radius: 2em;
+
+    width: 100%;
+    border-color: var(--background-alt);
+    border-width: 3px;
+    border-style: solid;
+}
+
+
+.page h1 {
+    color: var(--foreground-inactive);
+
+    font-size: 1.7em;
+
+    margin: .5em;
+
+    text-align: center;
+}
+
+@media only screen and (max-width: 600px) {
+    .page {
+        margin-top: 2em;
+        width: 100%;
+        padding: 0;
+
+        overflow: hidden;
+    }
+
+    .page .text-panel p {
+        padding: 0 .5em;
+        margin-right: .5em;
+    }
+}
diff --git a/src/inc_css/title.css b/src/inc_css/title.css
index f16b490..8eb1b30 100644
--- a/src/inc_css/title.css
+++ b/src/inc_css/title.css
@@ -2,6 +2,12 @@
     font-size: 1em;
 }
 
+.title h1 {
+    padding-bottom: 0;
+    margin-bottom:0;
+    margin-top:0;
+}
+
 .title a {
     transition: all 0.1s ease-in;
     color: var(--foreground-active);
@@ -11,3 +17,8 @@
     color: var(--accent);
     transform: translateY(50%);
 }
+
+.pageTitle {
+    margin-left: -0.15em;
+    color: var(--foreground-inactive);
+}
diff --git a/src/root/about.html b/src/root/about.html
index 03619e3..25de384 100644
--- a/src/root/about.html
+++ b/src/root/about.html
@@ -19,7 +19,7 @@
 
 <h1>hi!</h1>
 
-<div class="textPanel">
+<div class="text-panel">
 <p>
 hello! im cat. i like the arts, sciences, philosophy, languages and everything in between.
 </p>
diff --git a/src/root/styles.css b/src/root/styles.css
index f2117c3..47f5338 100644
--- a/src/root/styles.css
+++ b/src/root/styles.css
@@ -14,26 +14,10 @@ body {
 
 #include title.css
 #include nav.css
+#include page.css
 #include landing.css
 #include blog.css
 
-.pageTitle {
-    margin-left: -0.15em;
-    color: var(--foreground-inactive);
-}
-
-h1 {
-    color: var(--color1);
-    padding-bottom: 0;
-    margin-bottom:0;
-    margin-top:0;
-}
-
-ul {
-    margin-top: 0;
-    list-style-type: none;
-}
-
 li {
     display:inline;
 }
@@ -56,74 +40,6 @@ a.fsText {
     color: var(--foreground);
 }
 
-.page {
-    position: absolute;
-    width: max(30vmax,500px);
-    left:50%;
-    top:0;
-    padding: 0px 0 50px;
-    padding-top: 5vh;
-
-    transform: translate(-50%, 0);
-}
-@media only screen and (max-width: 600px) {
-    .page {
-        width: 100%;
-        padding: 0;
-    }
-}
-
-.page .textPanel .separator {
-    position: relative;
-    background-color: var(--foreground-inactive);
-
-    width: .35em;
-    height: .35em;
-    left: 50%;
-
-    border-radius: 100%;
-
-    transform: translateX(-50%);
-}
-
-.page a {
-    text-decoration: none;
-    color: var(--accent);
-    transition: all 0.1s;
-}
-.page a:hover {
-    color: var(--foreground);
-}
-
-.page .textPanel {
-    margin: 0;
-    margin-left: -2em;
-    padding: .6em 2em;
-    color: var(--foreground-inactive);
-
-    font-size: 1.1em;
-    /*font-weight: bold;*/
-
-    line-height: 1.25em;
-
-    background-color: var(--background);
-    border-radius: 2em;
-
-    width: 100%;
-    border-color: var(--background-alt);
-    border-width: 3px;
-    border-style: solid;
-}
-
-.page h1 {
-    color: var(--foreground-inactive);
-
-    font-size: 1.7em;
-
-    margin: .5em;
-
-    text-align: center;
-}
 
 #include socials.css
 #include gallery.css
diff --git a/todo.md b/todo.md
index 70d07b4..3d03f60 100644
--- a/todo.md
+++ b/todo.md
@@ -9,8 +9,8 @@
     * [-] landing page
         * [x] central
         * [ ] smaller
-    * [ ] about
-        * [ ] narrow text
+    * [-] about
+        * [x] narrow text
         * [ ] hope -> use
     * [x] solar system
         * [x] smaller