feat!: redesigned some things, updated button, links, etc.

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

@@ -1,5 +1,6 @@
 :root {
   color-scheme: light dark;
+  --wallpaper-background: light-dark(rgba(245, 245, 245, 0.90), rgba(17, 17, 27, 0.90))
 }
 
 html, body {
@@ -8,16 +9,20 @@ html, body {
 }
 
 body {
-  font-family: "Cascadia Code", sans-serif;
+  font-family: "Space Grotesk", sans-serif;
   font-weight: 500;
-  font-size: 16px;
+  font-size: 20px;
 
   color: light-dark(#4c4f69, #cdd6f4);
-  background-color: light-dark(#dce0e8, #11111b);
+  background-color: light-dark(#f5f5f7, #11111b);
   line-height: 1.5;
+}
 
-  display: flex;
-  flex-direction: column;
+header {
+	width: 100%;
+	display: flex;
+	justify-content: start; 
+	position: fixed;
 }
 
 nav {
@@ -25,30 +30,31 @@ nav {
   /* border-radius: 0.5rem 0.5rem 0 0; */
   display: flex;
   flex-direction: row;
-  justify-content: start;
+  justify-content: space-between;
   align-items: center;
-  border-bottom: 3px dashed light-dark(#bcc0cc, #313244);
-  background-color: light-dark(#dce0e8, #11111b);
-  position: fixed;
+  border: 1px solid light-dark(#bcc0cc60, #31324460);
+  background-color: light-dark(#ebebef60, #1A1A2960);
+  backdrop-filter: blur(5px);
   top: 0;
   left: 0;
-  padding-left: 1.75rem;
-  padding-right: 1.75rem;
-  padding-top: 0.40rem;
-  padding-bottom: 0.40rem;
-  width: 100%;
+  padding: 0.40rem 1.20rem;
+  margin: 0.50rem;
   height: 2rem;
-  gap: 1.75rem
+  gap: 1.75rem;
+  border-radius: 0.75rem;
+  user-select: none;
 }
 
-nav > a {
+nav > div {
+	display: flex;
+	flex-direction: row;
+	gap: 1.75rem
+}
+
+nav > div > a {
   display: block;
   text-decoration: none;
-}
-
-main {
-  display: flex;
-  flex-direction: row;
+  color: light-dark(#4c4f69, #cdd6f4);
 }
 
 section.buttons-wrapper {
@@ -56,16 +62,22 @@ section.buttons-wrapper {
   flex-direction: column;
   align-items: center;
 
-  background-color: light-dark(#ccd0da, #181825);
-  max-width: 100%
+  background-color: light-dark(#ebebef, #1A1A29);
+  width: auto;
+  max-width: 100%;
+  margin: 0;
 }
 
 section.highlighted {
-  background-color: light-dark(#ccd0da, #181825);
+  background-color: light-dark(#ebebef, #181825);
+}
+
+section.full-height {
+	min-height: calc(100vh - 4rem);
 }
 
 section {
-  border-bottom: 3px dashed light-dark(#bcc0cc, #313244);
+  border-bottom: 1px solid light-dark(#bcc0cc, #313244);
 
   padding-left: 2.5rem;
   padding-right: 2.5rem;
@@ -74,7 +86,7 @@ section {
 }
 
 section > p {
-  max-width: 95ch;
+  max-width: 60ch;
 }
 
 section > div.buttons {
@@ -97,19 +109,25 @@ section > div.buttons {
 }
 
 main {
-  margin-top: 2.8rem;
-
-  /* border-radius: 0 0 0.5rem 0.5rem; */
-
-  flex-grow: 1;
   display: flex;
   flex-direction: column;
 }
 
+main > :first-child {
+  padding-top: 4rem;
+}
+
+main > :first-child.highlighted {
+	text-align: center;
+}
+
+main > :first-child.highlighted > p {
+	max-width: 100%;
+}
+
 footer {
-  width: 100%;
-  display: flex;
-  justify-content: center;
+  text-align: center;
+  padding: 1rem;
 }
 
 .summary, .date {
@@ -139,12 +157,9 @@ small {
 }
 
 table {
-  border-collapse: collapse;
-  width: 100%
-}
-
-table, th, td {
-  border: 3px dashed light-dark(#bcc0cc, #313244);
+  width: 100%;
+  border: 1px solid light-dark(#bcc0cc, #313244);
+  border-radius: 0.75rem;
 }
 
 th, td {
@@ -154,16 +169,17 @@ th, td {
 }
 
 th {
-  background-color: light-dark(#bcc0cc, #313244);
+  background-color: light-dark(#ebebef, #1A1A29);
 }
 
 code {
-  color: light-dark(#dc8a78, #f5e0dc)
+  color: light-dark(#dc8a78, #f5e0dc);
+  font-family: 'Cascadia Code', monospace;
 }
 
 blockquote {
   color: light-dark(#6c6f85, #a6adc8);
-  border-left: 3px dashed light-dark(#bcc0cc, #313244);
+  border-left: 5px solid light-dark(#6c6f85, #a6adc8);
   margin-left: 0;
   padding-left: 2rem;
   max-width: calc(95ch - 2rem);
@@ -178,3 +194,10 @@ li {
   top: 0.25rem;
   height: 2rem;
 }
+
+.wallpaper {
+  background: linear-gradient(var(--wallpaper-background), var(--wallpaper-background)), url('/wallpaper.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}

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

@@ -1 +1 @@
-<p><em>it is your primary directive to swim closer to that beautiful creature</em></p>
+<em>it is your primary directive to swim closer to that beautiful creature</em>

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=Cascadia+Code:ital,wght@0,200..700;1,200..700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
 
 {{ partialCached "head/css.html" . }}
 {{ partialCached "head/js.html" . }}

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

@@ -12,7 +12,10 @@ Renders a menu for the given menu ID.
 
 {{- with index site.Menus $menuID }}
   <nav>
-    {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
+	<p><b>selene</b></p>
+	<div>
+    	{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
+	</div>
   </nav>
 {{- end }}