visual changes mostly

content/_index.md

@@ -5,9 +5,7 @@ title = 'Home'
 <div class="background">
 <section>
 
-<div class="huge">
-owo
-</div>
+# hai :3
 
 my name is **sel** (or selene, if you want to be fancy) <small>([they/it](https://en.pronouns.page/they&it), 3pp appriciated)</small>
 
@@ -68,7 +66,7 @@ my pgp signature is [`BD6C944B 88BDE1C0 9F26E3D1 C4A80409 D21A12B3`](https://git
 
 - [my attempts at programming](https://git.linuxposting.xyz/sel)
 - [my 88x31 button](https://git.linuxposting.xyz/sel/webbed-site/raw/branch/main/static/buttons/sel.png) (feel free to hotlink it! :3 and poke at me if you do)
-- [source of this page's background & most of my profile pictures](https://xcancel.com/yihan1949)
+- [source of most of my profile pictures](https://xcancel.com/yihan1949)
 - the [neocat emojis](https://volpeon.ink/emojis/neocat/) by [volpeon](https://volpeon.ink) are licensed under [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)
 
 </section>

themes/webbed-theme/assets/css/main.css

@@ -1,23 +1,19 @@
+:root {
+  color-scheme: light dark;
+}
 
 html, body {
   width: 100%;
   margin: 0;
 }
 
-.background {
-  background: linear-gradient(rgba(5, 6, 7, 0.85), rgba(5, 6, 7, 0.70), rgba(5, 6, 7, 0.95)), url('/background.jpg');
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-
 body {
-  font-family: "SUSE Mono", sans-serif;
-  font-weight: 550;
-  font-size: 18px;
+  font-family: "Cascadia Code", sans-serif;
+  font-weight: 500;
+  font-size: 16px;
 
-  color: #cdd6f4;
-  background-color: #050607;
+  color: light-dark(#4c4f69, #cdd6f4);
+  background-color: light-dark(#dce0e8, #11111b);
   line-height: 1.5;
 
   display: flex;
@@ -31,8 +27,8 @@ nav {
   flex-direction: row;
   justify-content: start;
   align-items: center;
-  border-bottom: 3px dashed #f1f1f110;
-  background-color: #10121465;
+  border-bottom: 3px dashed light-dark(#bcc0cc, #313244);
+  background-color: light-dark(#dce0e8, #11111b);
   position: fixed;
   top: 0;
   left: 0;
@@ -60,12 +56,16 @@ section.buttons-wrapper {
   flex-direction: column;
   align-items: center;
 
-  background-color: #10121465;
+  background-color: light-dark(#ccd0da, #181825);
   max-width: 100%
 }
 
+section.highlighted {
+  background-color: light-dark(#ccd0da, #181825);
+}
+
 section {
-  border-bottom: 3px dashed #f1f1f110;
+  border-bottom: 3px dashed light-dark(#bcc0cc, #313244);
 
   padding-left: 2.5rem;
   padding-right: 2.5rem;
@@ -74,7 +74,7 @@ section {
 }
 
 section > p {
-  max-width: 90ch;
+  max-width: 95ch;
 }
 
 section > div.buttons {
@@ -112,41 +112,30 @@ footer {
   justify-content: center;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Silkscreen", sans-serif;
-  font-weight: normal;
-}
-
-.huge {
-  font-family: "Silkscreen", sans-serif;
-  font-weight: normal;
-  font-size: 350%
-}
-
 .summary, .date {
-  color: #a6adc8
+  color: light-dark(#6c6f85, #a6adc8)
 }
 
 a {
-  color: #89b4fa;
+  color: light-dark(#1e66f5, #89b4fa);
   text-decoration: underline;
   text-decoration-style: dashed;
 }
 
 i, em {
-  color: #f5c2e7
+  color: light-dark(#ea76cb, #f5c2e7)
 }
 
 b, strong {
-  color: #94e2d5
+  color: light-dark(#179299, #94e2d5)
 }
 
-s {
-  color: #f38ba8
+s, del {
+  color: light-dark(#d20f39, #f38ba8)
 }
 
 small {
-  color: #a6adc8
+  color: light-dark(#6c6f85, #a6adc8)
 }
 
 table {
@@ -155,7 +144,7 @@ table {
 }
 
 table, th, td {
-  border: 3px dashed #1e1e2e;
+  border: 3px dashed light-dark(#bcc0cc, #313244);
 }
 
 th, td {
@@ -165,16 +154,20 @@ th, td {
 }
 
 th {
-  background-color: #181825
+  background-color: light-dark(#bcc0cc, #313244);
 }
 
 code {
   font-family: "JetBrains Mono", monospace;
-  color: #f5e0dc
+  color: light-dark(#dc8a78, #f5e0dc)
 }
 
-hr {
-  border: 1px solid #f1f1f110;
+blockquote {
+  color: light-dark(#6c6f85, #a6adc8);
+  border-left: 3px dashed light-dark(#bcc0cc, #313244);
+  margin-left: 0;
+  padding-left: 2rem;
+  max-width: calc(95ch - 2rem);
 }
 
 li {

themes/webbed-theme/layouts/_partials/head.html

@@ -5,7 +5,7 @@
 <!-- fonts -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=SUSE+Mono:ital,wght@0,100..800;1,100..800&family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&display=swap" rel="stylesheet">
 
 {{ partialCached "head/css.html" . }}
 {{ partialCached "head/js.html" . }}

themes/webbed-theme/layouts/page.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <section>
+  <section class="highlighted">
     <h1>{{ .Title }}</h1>
 
     {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}

themes/webbed-theme/layouts/section.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <section>
+  <section class="highlighted">
     <h1>{{ .Title }}</h1>
     {{ .Content }}
   </section>

themes/webbed-theme/layouts/taxonomy.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <section>
+  <section class="highlighted">
     <h1>{{ .Title }}</h1>
     {{ .Content }}
   </section>

themes/webbed-theme/layouts/term.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <section>
+  <section class="highlighted">
     <h1>#{{ .Title }}</h1>
     {{ .Content }}
   </section>