Webring

site/css/dark.scss

@@ -12,6 +12,8 @@
 	--aside-warning-background: var(--dark-aside-warning-background);
 	--aside-warning-border: var(--dark-aside-warning-border);
 
+	--webring-background: var(--dark-webring-background);
+
 	// Syntax highdarking
 	--atom-base: var(--dark-atom-base);
 	--atom-mono-1: var(--dark-atom-mono-1);

site/css/light.scss

@@ -12,6 +12,8 @@
 	--aside-warning-background: var(--light-aside-warning-background);
 	--aside-warning-border: var(--light-aside-warning-border);
 
+	--webring-background: var(--light-webring-background);
+
 	// Syntax highlighting
 	--atom-base: var(--light-atom-base);
 	--atom-mono-1: var(--light-atom-mono-1);

site/css/main.scss

@@ -30,6 +30,9 @@ $dark-accent-color: #f9c72f;
 	--light-aside-warning-border: #c6322f;
 	--dark-aside-warning-border: #c6322f;
 
+	--light-webring-background: linear-gradient(135deg, #855988, #6b4984, #483475, #2b2f77, #141852);
+	--dark-webring-background: linear-gradient(135deg, rgba(128, 224, 105, 1), rgba(128, 224, 105, 0.7));
+
 	// Syntax highlighting
 	--light-atom-base: #fafafa;
 	--dark-atom-base: #282c34;
@@ -646,8 +649,12 @@ table {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	align-items: flex-start;
 	flex-wrap: wrap;
+	align-items: baseline;
+
+	> * {
+		width: 50%;
+	}
 
 	.site-title {
 		margin: 0;
@@ -656,6 +663,8 @@ table {
 	}
 
 	.ui-controls {
+		order: 1;
+
 		input {
 			display: none;
 		}
@@ -691,6 +700,21 @@ table {
 			}
 		}
 	}
+
+	.webring {
+		order: 2;
+		background: var(--webring-background);
+		background-clip: text;
+		width: fit-content;
+		font-size: 1.2em;
+		font-variant: small-caps;
+		font-weight: 900;
+
+		a {
+			text-decoration: none;
+			color: transparent;
+		}
+	}
 }
 
 // Pagination
@@ -754,6 +778,15 @@ table {
 	}
 }
 
+@media (max-width: 768px) {
+	.site-footer {
+		display: block;
+		> * {
+			width: 100%;
+		}
+	}
+}
+
 // 720 + 30 + 720 + 15
 // main content, l/r container padding, aside width (50% on each side), outer edge margin
 // inner edge margin overlaps with container padding

site/layouts/default.html.ejs

@@ -70,10 +70,8 @@
 	</div>
 
 	<footer class="site-footer container">
-		<!-- <div> -->
-			<div>
 		<h2 class="site-title">Shadowfacts</h2>
-				<p class="ui-controls">
+		<span class="ui-controls">
 			Theme:
 			<input type="radio" name="theme" id="auto" value="auto">
 			<label for="auto">auto</label>
@@ -81,8 +79,7 @@
 			<label for="light">light</label>
 			<input type="radio" name="theme" id="dark" value="dark">
 			<label for="dark">dark</label>
-				</p>
+		</span>
-			</div>
 		<nav class="social-links">
 			<ul>
 				<li><%- fancyLink("Email", "mailto:me@shadowfacts.net", "rel=me") %></li>
@@ -92,7 +89,11 @@
 				<li><%- fancyLink("Mastodon", "https://social.shadowfacts.net/users/shadowfacts", "rel=me") %></li>
 			</ul>
 		</nav>
-		<!-- </div> -->
+		<aside class="webring">
+			<a href="https://metro.bieszczady.pl">Metro Bieszczady webring</a>
+<a title="previous page in webring" href="https://metro-bieszczady-webring.michcio.workers.dev/previous?from=shadowfacts">←</a>
+<a title="next page in webring" href="https://metro-bieszczady-webring.michcio.workers.dev/next?from=shadowfacts">→</a>
+		</aside>
 
 		<script>
 			(() => {