From 96db93167f0d63ffc5be749e24fc3ae9fe11f91a Mon Sep 17 00:00:00 2001
From: Odette <0x4f4449@puppygirl.systems>
Date: Thu, 27 Feb 2025 15:38:09 -0800
Subject: [PATCH] fix some css issues

---
 css/natalie.css | 513 ++++++++++++++++++++++++++++++++++++++++++++++++
 css/styles.css  |  40 +++-
 2 files changed, 552 insertions(+), 1 deletion(-)
 create mode 100644 css/natalie.css

diff --git a/css/natalie.css b/css/natalie.css
new file mode 100644
index 0000000..d3a402f
--- /dev/null
+++ b/css/natalie.css
@@ -0,0 +1,513 @@
+@font-face {
+  font-family: 'MapleMono';
+  src: url('/font/MapleMono.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'MapleMonoItalic';
+  src: url('/font/MapleMonoItalic.ttf') format('truetype');
+}
+
+@media (max-width: 1400px) {
+  body {
+    margin: 0%;
+    width: 100%
+  }
+}
+
+@media (min-width: 1400px) {
+  body { 
+    margin: 0 20%;
+    width: 60%;
+  }
+}
+
+* {
+  font-family: 'MapleMono';
+  font-size: 16.5px;
+  text-wrap: wrap;
+}
+
+:root {
+  --bg: #F2F4F8;
+  --alt-bg: #dde1e6;
+  --fg: #161616;
+  --hl: #33b1ff; 
+  --link: #0154EF;
+  --visited-link: #673ab7; 
+  --highlight: #0154EF;
+  --gray: #525252;
+  background: var(--bg);
+  background-image: radial-gradient(var(--gray) 2px, var(--alt-bg) 2px);
+  background-size: 1vw 1vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.-punctuation-bracket {color: #ff7eb6}
+.-function-macro {color: #08bdba}
+.SpecialChar {color: #37474f}
+.-punctuation-special {color: #ff7eb6}
+.-variable {color: #37474f}
+.-string-escape {color: #ffab91}
+.-function {font-weight: bold; color: #673ab7}
+.-punctuation-bracket {color: #ff7eb6}
+.-keyword-function {color: #ff7eb6}
+.Number {color: #ffab91}
+.-variable {color: #37474f}
+.-variable-builtin {color: #37474f}
+.-keyword {color: #ee5396}
+.Operator {color: #ee5396}
+.-constant-builtin {color: #08bdba}
+.-function-builtin {color: #673ab7}
+.Type {color: #ee5396}
+.-function {font-weight: bold; color: #673ab7}
+.Comment {font-style: italic; color: #161616}
+.Boolean {color: #ee5396}
+.-keyword-operator {color: #ff7eb6}
+.-punctuation-delimiter {color: #ff7eb6}
+.-tag {color: #ee5396}
+.-tag-delimiter {color: #ffab91}
+.Operator {color: #ee5396}
+.Underlined {text-decoration-line: underline}
+.-tag-attribute {color: #ffab91}
+.String {color: #be95ff}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #161616;
+    --alt-bg: #262626;
+    --fg: #f2f4f8;
+    --hl: #0f62fe;
+    --link: #33b1ff;
+    --visited-link: #be95ff; 
+    --highlight: #33b1ff;
+    --gray: #202020;
+  }
+
+  .-punctuation-bracket {color: #3ddbd9}
+  .-function-macro {color: #08bdba}
+  .SpecialChar {color: #d0d0d0}
+  .-punctuation-special {color: #3ddbd9}
+  .-variable {color: #d0d0d0}
+  .-string-escape {color: #82cfff}
+  .-function {font-weight: bold; color: #ff7eb6}
+  .-punctuation-bracket {color: #3ddbd9}
+  .-keyword-function {color: #3ddbd9}
+  .Number {color: #82cfff}
+  .-variable {color: #d0d0d0}
+  .-variable-builtin {color: #d0d0d0}
+  .-keyword {color: #78a9ff}
+  .Operator {color: #78a9ff}
+  .-constant-builtin {color: #08bdba}
+  .-function-builtin {color: #ff7eb6}
+  .Type {color: #78a9ff}
+  .-function {font-weight: bold; color: #ff7eb6}
+  .String {color: #be95ff}
+  .Comment {font-style: italic; color: #525252}
+  .Boolean {color: #78a9ff}
+  .-keyword-operator {color: #3ddbd9}
+  .-punctuation-delimiter {color: #3ddbd9}
+}
+
+.rainbow-text {
+  animation:rainbow-text 5s ease-in-out infinite
+}
+@keyframes rainbow-text {
+ 0% {
+  color:red
+ }
+ 20% {
+  color:orange
+ }
+ 40% {
+  color:green
+ }
+ 60% {
+  color:blue
+ }
+ 80% {
+  color:purple
+ }
+ to {
+  color:red
+ }
+}
+
+body {
+  text-wrap: wrap;
+  max-width: 100%;
+  min-height: 100vh;
+  background-color: var(--bg);
+  color: var(--fg);
+  overflow: auto;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  display: flex;
+  flex-direction: column;
+}
+
+h1 {
+  font-size: 33px;
+  font-weight: normal;
+}
+
+h2 {
+  font-size: 22px;
+  font-family: 'MapleMonoItalic';
+  font-weight: normal;
+}
+
+h3 {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  padding-top: 10px;
+  position: -webkit-sticky;
+  position: sticky;
+  background-color: var(--bg);
+  top: 0;
+  width: 100%;
+  z-index: 100000;
+  display: flex;
+  align-items: flex-start;
+  overflow: clip;
+
+  > nav {
+    border-bottom: 1px solid var(--fg);
+    width: 100%;
+
+    > ul {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      align-items: baseline;
+      justify-content: flex-start;
+      list-style-type: none;
+
+      > li {
+        padding: 10px;
+
+        > h1 {
+          display: inline
+        }
+      }
+    }
+  }
+}
+
+footer {
+  background-color: var(--alt-bg);
+  border-bottom: none;
+  margin: 15px;
+  padding: 5px;
+  margin-bottom: 0;
+  display: grid;
+  grid-template-columns: 20fr 1fr; /* icky hack */
+  grid-template-rows: min-content min-content;
+
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+
+  a {
+    margin: 0 !important;
+    display: flex;
+    float: right;
+    width: 88px;
+    height: 31px;
+  }
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  background: var(--alt-bg);
+  box-shadow: 10px 10px var(--gray);
+  margin: 15px 30px;
+  padding: 20px;
+
+  > details[open] {
+    summary {
+      padding-bottom: 5px;
+    }
+  }
+
+  > p {
+    margin: 5px 0;
+  }
+
+  > h1, h2, h3 {
+    margin: 10px 0;
+  }
+
+  &.ignore-section {
+    background: var(--bg);
+    box-shadow: none;
+    margin: 0;
+    padding: 5px 10px;
+  }
+}
+
+form {
+  background: var(--alt-bg);
+  display: flex;
+  flex-direction: column;
+  width: 50%; 
+  padding: 20px;
+  margin: 15px 0;
+  box-shadow: 10px 10px var(--gray);
+
+  > button {
+    margin: 10px;
+    padding: 10px;
+    border: none;
+    color: var(--fg);
+    background: var(--bg);
+    
+    &:hover {
+      background: var(--hl);
+    }
+  }
+
+  > input {
+    color: var(--fg);
+    margin: 10px;
+    border: none;
+    background: var(--bg);
+  
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+figure {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  max-width: 125%;
+  background: var(--bg);
+  margin: 0;
+  margin-bottom: 15px;
+
+  > a {
+    padding: 10px;
+    padding-bottom: 0;
+
+    > img {
+      height: auto;
+      width: 100%;
+    }
+  }
+
+  > figcaption {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    padding: 5px;
+    margin: 0;
+  }
+}
+
+table {
+  width: auto;
+  border-collapse: collapse;
+}
+
+th, td {
+  padding-left: 10px;
+  padding-right: 10px;
+  text-align: left;
+}
+
+th:first-child, td:first-child {
+  width: 20%;
+}
+
+th:last-child, td:last-child {
+  width: 20%;
+}
+
+iframe {
+  border: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+blockquote {
+  border-left: 10px solid var(--gray);
+  margin: 4px 16px;
+  padding-left: 10px;
+}
+
+summary {
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+code, pre {
+  background: var(--bg);
+  margin: 10px;
+  padding: 5px;
+  overflow: clip;
+}
+
+xmp {
+  margin: 20px;
+}
+
+a {
+  color: var(--link);
+  width: fit-content
+}
+
+a ~ a, li:has(a), a ~ span > a {
+  margin: 4px 0;
+}
+
+a:visited {
+  color: var(--visited-link);
+}
+
+video {
+  width: 95%;
+  border: 10px solid var(--bg);
+  margin: 10px auto;
+  display: block
+}
+
+sup {
+  font-size: smaller;
+  line-height: 0;
+}
+
+footnote {
+  font-size: 13px;
+  margin-top: 20px;
+  display: flex;
+}
+
+.post {
+  background: var(--alt-bg);
+  box-shadow: 10px 10px var(--gray);
+  margin: 30px;
+  padding: 20px;
+}
+
+.italic {
+  font-family: 'MapleMonoItalic' !important; 
+}
+
+.captioned-image {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  max-width: 100%;
+  background: var(--bg);
+  margin-bottom: 15px;
+  margin-right: 10px;
+
+  > img {
+    height: auto;
+    padding: 10px;
+  }
+
+  > p {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    padding: 5px;
+    margin: 0;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+
+::selection {
+  background: var(--highlight)
+}
+
+image-column-container {
+  min-width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+image-container {
+  display: flex;
+  margin-right: 5px;
+  flex: 1;
+  width: 33%;
+  height: auto;
+}
+
+flex-column {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  > captioned-image {
+    max-width: 100%;
+  }
+}
+
+image-column img {
+  width: 100%;
+  height: auto;
+}
+
+text-column {
+  max-width: 66%
+}
+
+flex-grid {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+flex-grid-item {
+    flex: 1 0 200px;
+    margin: 5px;
+    overflow: hidden;
+    position: relative;
+}
+
+flex-grid-item > img {
+    max-width: 110%;
+    height: auto;
+    display: block;
+}
+
+@media (max-width: 700px) {
+  image-container {display: inline-block; min-width: 100% !important}
+  div.captioned-image {min-width: 100%; margin-right: 0;}
+  text-column {display: inline-block; max-width: 100%;}
+  image-column-container {flex-direction: column;}
+  header > nav > ul > li > h1 { display: none};
+}
diff --git a/css/styles.css b/css/styles.css
index dc2504b..fb52680 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,7 +1,45 @@
+:root {
+  --bg: #ebdbb2;
+  --fg: #282828;
+}
 body {
-    background-color: #ebdbb2;
+    background-color: var(--bg);
     color:#282828;
 }
 a {
     text-decoration: none;
 }
+header {
+  padding-top: 10px;
+  position: -webkit-sticky;
+  position: sticky;
+  background-color: var(--bg);
+  top: 0;
+  width: 100%;
+  z-index: 100000;
+  display: flex;
+  align-items: flex-start;
+  overflow: clip;
+
+  > nav {
+    border-bottom: 1px solid var(--fg);
+    width: 100%;
+
+    > ul {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      align-items: baseline;
+      justify-content: flex-start;
+      list-style-type: none;
+
+      > li {
+        padding: 10px;
+
+        > h1 {
+          display: inline
+        }
+      }
+    }
+  }
+}