From bd63034366cd97e835f2e86309c184d027341fc0 Mon Sep 17 00:00:00 2001
From: Lazy Hippopotamus <lazy@hippo.com>
Date: Tue, 5 Mar 2024 12:31:37 -0500
Subject: [PATCH] the fancy black borders

---
 README          |  9 ++++++---
 output/main.css | 29 +++++++++++++++++++++++++++--
 site/main.css   | 31 ++++++++++++++++++++++++++++---
 3 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/README b/README
index 363f01b..c31be59 100644
--- a/README
+++ b/README
@@ -1,3 +1,6 @@
-This is a Sitix (https://github.com/LinuxRocks2000/sitix-rewrite) project. To build it, run `sitix site` in the root directory. The output directory will contain the built site.
-DO NOT RUN `sitix build site -o .`! I learned the hard way that recovering the files sitix will delete IS IMPOSSIBLE! And it'll even remove all your git stuff, which I was rather
-mad about.
\ No newline at end of file
+This is a Sitix (https://github.com/LinuxRocks2000/sitix-rewrite) project. To
+build it, run `sitix site` in the root directory. The output directory will
+contain the built site. DO NOT RUN `sitix build site -o .`! I learned the hard
+way that recovering the files sitix will delete IS IMPOSSIBLE! And it'll even
+remove all your git stuff, which I was rather mad about. Yes, I wrote sitix and
+should understand all of its implications. What, you *don't* get tired?
\ No newline at end of file
diff --git a/output/main.css b/output/main.css
index 3087a9d..b44b29c 100644
--- a/output/main.css
+++ b/output/main.css
@@ -90,17 +90,29 @@
 #shape {
     height: calc(10vh + 3px);
     width: 100vw;
-    background-color: var(--cream);
+    background-color: black;
     clip-path: polygon(0% calc(100% - 3px), 0% 100%, 100% 100%, 100% calc(100% - 3px), 50% 0%);
     position: absolute;
     bottom: -1px;
 }
 
+#shape::after {
+    content: "";
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 3px;
+    left: 0px;
+    clip-path: inherit;
+    background-color: var(--cream);
+}
+
 #title {
     font-size: 4em;
     font-family: Lobster;
     text-align: center;
-    background-color: var(--cream);
+    background-color: black;
     color: black;
     padding-top: 52px; /* TODO: make this less worsely */
     position: sticky;
@@ -109,6 +121,19 @@
     clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 10vh), 0% 100%);
 }
 
+#title::after {
+    display: inline-block;
+    content: "";
+    width: 100vw;
+    height: 100%;
+    position: absolute;
+    top: -3px;
+    left: 0px;
+    z-index: -1;
+    background-color: var(--cream);
+    clip-path: inherit;
+}
+
 div#nav {
     display: flex;
     justify-content: center;
diff --git a/site/main.css b/site/main.css
index 95a512e..b44b29c 100644
--- a/site/main.css
+++ b/site/main.css
@@ -1,6 +1,6 @@
 @font-face {
     font-family: Lobster;
-    src: url(Lobster-Regular.ttf);
+    src: url(res/Lobster-Regular.ttf);
 }
 
 * {
@@ -90,17 +90,29 @@
 #shape {
     height: calc(10vh + 3px);
     width: 100vw;
-    background-color: var(--cream);
+    background-color: black;
     clip-path: polygon(0% calc(100% - 3px), 0% 100%, 100% 100%, 100% calc(100% - 3px), 50% 0%);
     position: absolute;
     bottom: -1px;
 }
 
+#shape::after {
+    content: "";
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 3px;
+    left: 0px;
+    clip-path: inherit;
+    background-color: var(--cream);
+}
+
 #title {
     font-size: 4em;
     font-family: Lobster;
     text-align: center;
-    background-color: var(--cream);
+    background-color: black;
     color: black;
     padding-top: 52px; /* TODO: make this less worsely */
     position: sticky;
@@ -109,6 +121,19 @@
     clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 10vh), 0% 100%);
 }
 
+#title::after {
+    display: inline-block;
+    content: "";
+    width: 100vw;
+    height: 100%;
+    position: absolute;
+    top: -3px;
+    left: 0px;
+    z-index: -1;
+    background-color: var(--cream);
+    clip-path: inherit;
+}
+
 div#nav {
     display: flex;
     justify-content: center;