Footer & UI changes; authorship

output/css/common-dark.css

@@ -1,49 +1,11 @@
+@import url("/css/footer.css");
+@import url("/css/common.css");
+
 * { box-sizing: border-box; }
-html { color: white; background-color: black; font-size: clamp(16px, 2vw, 24px); width: 100%; }
+html { color: var(--primary-color); background-color: var(--secondary-color); font-size: clamp(16px, 2vw, 24px); width: 100%; }
 body { margin: 0; padding: 2rem; width: 100%; line-height: 1.5; }
 a { color: hsl(210, 100%, 60%); }
-pre, .code { background-color: #222; font-size: 0.9rem; white-space: break-spaces; overflow: auto; }
+pre, .code { background-color: var(--secondary-color-shaded); font-size: 0.9rem; white-space: break-spaces; overflow: auto; }
 pre { padding: 1em; }
 .code { padding: 0.1em 0.25em; }
 .hidden { display: none; }
-
-footer {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	max-width: 100%;
-	text-align: center;
-}
-
-footer { font-size: 0.85em; margin-top: 2em; padding-top: 2em; border-top: 1px white solid; }
-
-footer:last-of-type {
-	padding-bottom: 1em;
-}
-
-footer p {
-	max-width: 40em;
-	margin: .5em;
-	text-align: center;
-}
-
-footer nav:first-of-type {
-	margin-block-start: 1em;
-}
-
-footer nav :is(a, span) {
-	display: inline-block;
-	padding: .5em;
-	margin-inline: .1em;
-	margin-block: .1em;
-	min-width: 3em;
-	white-space: nowrap;
-}
-
-footer h2 {
-	margin-block: 0.5em;
-}
-
-#more-sites-info-button {
-	font-size: 1.25em;
-}

output/index.css

@@ -1,3 +1,6 @@
+@import url("/css/footer.css");
+@import url("/css/common.css");
+
 :root {
 	--body-margin: 8px; /* Default value in browsers */
 	--max-font-size-unitless: 18;
@@ -57,8 +60,7 @@ body {
 .h2-like {
 	display: block;
     font-size: 1.5em;
-    margin-top: 0.83em;
+    padding-block: 0.83em;
-    margin-bottom: 0.83em;
     margin-left: 0;
     margin-right: 0;
     font-weight: bold;
@@ -78,27 +80,6 @@ body {
 	color: var(--primary-color);
 }
 
-#toggle-theme-switch:not(:checked) ~ #theming-root {
-	--primary-color:					hsl(0, 0%, 100%);
-	--secondary-color:					hsl(0, 0%, 0%);
-	--secondary-color-heading:			hsl(0, 0%, 17%);
-	--secondary-color-shaded:			hsl(0, 0%, 9%);
-	--anchor-color:						hsl(210, 100%, 60%);
-	--color-http:						hsl(0, 0%, 17%);
-	--color-https:						hsl(195, 53%, 21%);
-}
-
-
-#toggle-theme-switch:checked ~ #theming-root {
-	--primary-color:					hsl(0, 0%, 0%);
-	--secondary-color:					hsl(0, 0%, 100%);
-	--secondary-color-heading:			hsl(0, 0%, 83%);
-	--secondary-color-shaded:			hsl(0, 0%, 91%);
-	--anchor-color:						hsl(210, 100%, 40%);
-	--color-http:						hsl(0, 0%, 83%);
-	--color-https:						hsl(195, 53%, 79%);
-}
-
 a, .anchorstyle {
 	color: var(--anchor-color);
 	text-decoration: underline;
@@ -506,47 +487,17 @@ a.protocol-indicator__parent[href^="https:"] > .protocol-indicator::after {
 	width: 90%;
 }
 
-footer {
+footer, aside {
-	display: flex;
+	font-size: inherit !important;
-	flex-direction: column;
+	border: none !important;
-	align-items: center;
-	max-width: 100%;
-	text-align: center;
-
 	padding-bottom: var(--body-margin);
 	padding-inline: var(--body-margin);
 }
 
-footer:last-of-type {
-	padding-bottom: 1em;
-}
-
-footer p {
-	max-width: 40em;
-	margin: .5em;
-	text-align: center;
-}
-
-footer nav:first-of-type {
-	margin-block-start: 1em;
-}
-
 .footer__nav-target {
-	display: inline-block;
 	padding: .75em .5em;
-	margin-inline: .1em;
-	margin-block: .1em;
-	min-width: 3em;
-	white-space: nowrap;
-}
-
-.footer__h2 {
-	margin-block: 0.5em;
 }
 
-#more-sites-info-button {
-	font-size: 1.25em;
-}
 
 /* --- QR code modals --- */
 #details-modal {
@@ -705,26 +656,22 @@ footer nav:first-of-type {
 
 /* Carousel */
 
-input.carousel-trigger {
+aside > details > p {
-	display: none;
+	padding: 1em 0.75em;
-}
+	background-color: var(--secondary-color-shaded);
-
-.carousel-trigger:not(:checked) + .carousel-label + .carousel-target {
-	display: none;
 }
 
-.carousel-target {
+aside > details > summary {
-	padding: 1em 0.5em;
+	padding-block: 0.5em !important;
-	background-color: var(--secondary-color-shaded);
 }
 
-.carousel-label > label::after {
+aside > details > summary::after {
 	content: "+";
 	padding-inline-start: 1em;
 	font-size: 1.5em;
 }
 
-.carousel-trigger:checked + .carousel-label > label::after {
+aside > details[open] > summary:after{
 	content: "−";
 }
 

sites/+components/footer.php

@@ -1,4 +1,4 @@
-<footer id="footer">
+<aside id="affiliation-disclaimer">
 	<p>
 		This site is not affiliated with
 		<a
@@ -6,6 +6,8 @@
 			target="_blank"
 		>Oxen Privacy Tech Foundation</a>.
 	</p>
+</aside>
+<footer id="footer">
 	<nav id="about-us">
 		<a
 			href="/about"
@@ -86,7 +88,7 @@ if (basename($_SERVER['SCRIPT_FILENAME']) == "index.php"):
 			tabindex="0"
 		>(ℹ)</span><?php endif; ?>
 	</nav>
-	<nav id="about-session" class="highlight">
+	<nav id="about-session">
 		<a
 			href="https://getsession.org/"
 			class="footer__nav-target"
@@ -105,3 +107,12 @@ if (basename($_SERVER['SCRIPT_FILENAME']) == "index.php"):
 		>Session Terms Of Service</a>
 	</nav>
 </footer>
+<footer id="author">
+	<span id="footer__author">
+		by <a
+			class="footer__nav-target"
+			href="https://codeberg.org/gravel/gravel"
+			rel="author"
+		>gravel</a>
+	</span>
+</footer>

sites/+components/page-head.php

@@ -1,6 +1,8 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any">
+<link rel="preload" href="/css/footer.css" as="style"/>
+<link rel="preload" href="/css/common.css" as="style"/>
 <meta
 	http-equiv="Content-Security-Policy"
 	content="<?php
@@ -12,3 +14,5 @@
 >
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 <meta name="robots" content="index, follow">
+<meta name="author" content="gravel">
+<link rel="author" href="https://codeberg.org/gravel/gravel">

sites/about/index.php

@@ -5,9 +5,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<meta charset="UTF-8">
+	<?php include('+components/page-head.php'); ?>
+
 	<link rel="canonical" href="<?=$SITE_CANONICAL_URL?>/about">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" href="/css/common-dark.css">
 	<meta name="description" content="Learn more about sessioncommunities.online, the online self-updating list of Session Communities.">
 	<title>About — sessioncommunities.online</title>

sites/index.php

@@ -118,7 +118,7 @@
 
 			<hr id="footer-divider">
 
-			<footer id="summary">
+			<aside id="summary">
 				<p id="server_summary">
 					<?=count_rooms($servers)?> unique Session Communities
 					on <?=count($servers)?> servers have been found.
@@ -130,22 +130,27 @@
 						<?=date("Y-m-d H:i:s", $timestamp)?> (UTC)
 					</span>.
 				</p>
-				<input type="checkbox" id="carousel-1a" name="carousel-1" class="carousel-trigger"/>
+			</aside>
-				<h2 class="carousel-label footer__h2"><label for="carousel-1a">What is Session Messenger?</label></h2>
+			<aside id="details">
-				<p class="carousel-target">
+				<details>
-					<a href="https://getsession.org/" rel="follow external">Session</a>
+					<summary class="carousel-label aside__h2 h2-like">What is Session Messenger?</summary>
-					is a private messaging app that protects your meta-data,
+					<p class="carousel-target">
-					encrypts your communications, and makes sure your messaging activities
+						<a href="https://getsession.org/" rel="follow external">Session</a>
-					leave no digital trail behind. <a href="/about">Read more.</a>
+						is a private messaging app that protects your meta-data,
-				</p>
+						encrypts your communications, and makes sure your messaging activities
-				<input type="checkbox" id="carousel-1b" name="carousel-1" class="carousel-trigger"/>
+						leave no digital trail behind. <a href="/about">Read more.</a>
-				<h2 class="carousel-label footer__h2"><label for="carousel-1b">What are Session Communities?</label></h2>
+					</p>
-				<p class="carousel-target">
+				</details>
-					Session Communities are public chatrooms accessible from within Session Messenger.
+				<details>
-					This web project crawls known sources of Session Communities, and
+					<summary class="carousel-label aside__h2 h2-like">What are Session Communities?</summary>
-					displays information about them as a static HTML page. <a href="/about">Read more.</a>
+					<p class="carousel-target">
-				</p>
+						Session Communities are public chatrooms accessible from within Session Messenger.
-				<p id="disclaimer">
+						This web project crawls known sources of Session Communities, and
+						displays information about them as a static HTML page. <a href="/about">Read more.</a>
+					</p>
+				</details>
+				<p>Disclaimer:</p>
+				<p id="content-disclaimer">
 					Session Communities shown on this list are fetched automatically from
 					<a
 					href="<?=$REPOSITORY_CANONICAL_URL?>#which-sources-are-crawled"
@@ -167,7 +172,7 @@
 					However, some interactive features are
 					only available with JS enabled.
 				</p>
-			</footer>
+			</aside>
 			<?php include "+components/footer.php"; ?>
 
 			<div id="copy-snackbar"></div>