Margin and variables stuff

CHANGELOG.md

@@ -9,12 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add `bg-overlay` CSS variable to make setting page background image easier.
 - Add `classic-article-list` mod for returning the classic article list style.
 - Add `config.extra.debug_no_styles` config variable for debugging.
 - Add `config.extra.nav.auto_hide` config variable for making the navbar auto-hide unless hovered or keyboard-focused (#106).
 - Add `config.extra.show_backlinks` config variable for showing the backlinks button for linked articles in the article's quick actions.
 - Add `external` class to https:// links in navbar/footer.
 - Add `fediverse:creator` meta tag.
+- Add `shadow-glow` and `text-shadow-glow` CSS variables so that it's easier to use these.
 - Add `title` class for use on `<strong>`.
 - Add back support for lazy async images in comments.
 - Add missing translation strings for author separator and conjunctions.
@@ -31,6 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **[BREAKING]** Rename `nav-bg` CSS variable to `glass-bg`.
 - **[BREAKING]** Rename the visually hidden `hidden` class to `visually-hidden`. `hidden` is now used to completely hide the elements, including screen readers.
 - Add default width/height to the `icon` class.
+- Adjust navbar, main content, and footer margins.
 - Improve the look of threads in comments.
 - Keep images slightly rounded on hover.
 - Make `emoji` class available outside of comments.
@@ -38,9 +41,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Make the shortcodes code much cleaner.
 - Remove top/bottom margin from the first/last element in `<aside>`.
 - Rename `show_read_time` to `show_reading_time`.
+- Rename main content ID from `main` to `main-content`.
 - Replace "Go Back" button with "Go Home" on 404.
 - Rewrite JavaScript scripts to not rely on being inline, but rather function as separate files, as required by Content Security Policy.
 - Tighten the default Content Security Policy.
+- Use `main` for main content instead of `div` with a `container` class.
 - Use Zola's built-in reading time variable instead of the custom implementation (#102).
 
 ### Fixed
@@ -52,6 +57,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Removed
 
+- **[BREAKING]** Remove `container` class in favor of styling the `main` element directly.
 - Remove `inline-button` class and instead apply button styles by default.
 
 ## [5.4.0](https://codeberg.org/daudix/duckquill/compare/v5.3.2...v5.4.0)

content/mods/index.md

@@ -19,6 +19,17 @@ Want to set some nice image as a background? We got you covered:
 
 ![background image](https://files.catbox.moe/no8vfc.png)
 
+```scss
+body {
+    background-image: var(--bg-overlay), url("https://images.unsplash.com/photo-1523712999610-f77fbcfc3843");
+    background-position: center;
+    background-size: cover;
+    background-attachment: fixed;
+}
+```
+
+Most of the time contrast should be okay, but what if it's not? Simply adjust the opacity of `--bg-overlay` based on your needs:
+
 ```scss
 @import "../themes/duckquill/sass/_variables.scss";
 
@@ -31,17 +42,8 @@ Want to set some nice image as a background? We got you covered:
         --bg-overlay: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
     }
 }
-
-body {
-    background-image: var(--bg-overlay), url("https://images.unsplash.com/photo-1523712999610-f77fbcfc3843");
-    background-position: center;
-    background-size: cover;
-    background-attachment: fixed;
-}
 ```
 
-Most of the time contrast should be okay, but what if it's not? Simply adjust the opacity of `--bg-overlay` based on your needs.
-
 ## Classic Article List
 
 Prefer the less fancy look of the article list used in Duckquill some time ago (to some extent)? It can be done with the `classic-article-list` mod:

sass/_comments.scss

@@ -296,7 +296,7 @@
 
 			main {
 				grid-area: post;
-				margin-block-start: 1rem;
+				margin: 1rem 0 0;
 				width: 100%;
 
 				:first-child {

sass/_crt.scss

@@ -1,10 +1,6 @@
 .crt {
 	margin: 1rem 0 1rem;
-	box-shadow:
+	box-shadow: var(--edge-highlight), var(--shadow-glow);
-		var(--edge-highlight),
-		0 0 0 0.0625rem var(--accent-color-alpha),
-		0 0.125rem 0.375rem 0.125rem var(--accent-color-alpha),
-		0 0.25rem 1.5rem 0.25rem var(--accent-color-alpha);
 	border-radius: var(--rounded-corner);
 	background-image: radial-gradient(
 		color-mix(in srgb, var(--accent-color) 30%, black),

sass/_footer.scss

@@ -1,6 +1,5 @@
 #site-footer {
-	margin-block-start: 4rem;
+	margin-block-end: 2rem;
-	padding: 2rem 0;
 	text-align: center;
 
 	nav {
@@ -70,7 +69,7 @@
 		flex-wrap: wrap;
 		justify-content: center;
 		gap: 0.5rem;
-		margin-block-start: 1rem;
+		margin: 1rem auto 0;
 		padding: 0;
 
 		li {

sass/_general.scss

@@ -30,15 +30,13 @@ body {
 
 // Make focused anchor not get covered by nav,
 // and flash it with accent color when jumping to it
-:target:not(#main) {
+:target:not(#main-content) {
 	transition:
 		all var(--transition),
 		scroll-margin-block-start 0s;
 	scroll-margin-block-start: 15vh;
 	color: var(--accent-color);
-	text-shadow:
+	text-shadow: var(--text-shadow-glow);
-		var(--accent-color-alpha) 0 0 0.25rem,
-		var(--accent-color) 0 0 0.75rem;
 }
 
 // Custom focus indicator
@@ -64,8 +62,8 @@ body {
 	}
 }
 
-.container {
+main {
-	margin: 4.25rem auto 0;
+	margin: 4.25rem auto 4rem;
 	width: min(var(--container-width), 90%);
 }
 

sass/_nav.scss

@@ -58,7 +58,6 @@
 
 #site-nav {
 	position: sticky;
-	left: 50%;
 	z-index: 999;
 	margin: 1rem auto 0;
 	inset-block-start: 1rem;
@@ -82,7 +81,7 @@
 	nav {
 		padding: 0.5rem;
 
-		#main-content {
+		& > a {
 			-webkit-backdrop-filter: var(--blur);
 			position: absolute;
 			left: 50%;

sass/_variables.scss

@@ -18,6 +18,7 @@
 	@if $theme == "dark" {
 		// COLORS
 		--bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
+		--bg-overlay: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
 		--fg-color: rgb(255 255 255);
 		--fg-contrast: rgb(0 0 0 / 0.8);
 		--fg-muted-1: rgb(255 255 255 / 0.05);
@@ -34,9 +35,12 @@
 		--yellow-fg: rgb(248 228 92);
 
 		color-scheme: dark;
-	} @else {
+	}
+
+	@else {
 		// COLORS
 		--bg-color: color-mix(in srgb, var(--accent-color) 20%, white);
+		--bg-overlay: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
 		--fg-color: rgb(0 0 0 / 0.8);
 		--fg-contrast: rgb(255 255 255);
 		--fg-muted-1: rgb(0 0 0 / 0.05);
@@ -45,9 +49,7 @@
 		--fg-muted-4: rgb(0 0 0 / 0.5);
 		--fg-muted-5: rgb(0 0 0 / 0.6);
 		--glass-bg: rgb(242 242 242 / 0.7);
-		--accent-color-alpha: rgb(
+		--accent-color-alpha: rgb(from var(--accent-color) r g b / var(--color-opacity));
-			from var(--accent-color) r g b / var(--color-opacity)
-		);
 		--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
 		--blue-fg: rgb(53 132 228);
 		--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
@@ -139,6 +141,11 @@
 			0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14),
 			0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);
 		--shadow-glass: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
+		--shadow-glow: 0 0 0 0.0625rem var(--accent-color-alpha),
+			0 0.125rem 0.375rem 0.125rem var(--accent-color-alpha),
+			0 0.25rem 1.5rem 0.25rem var(--accent-color-alpha);
+		--text-shadow-glow: var(--accent-color-alpha) 0 0 0.25rem,
+			var(--accent-color) 0 0 0.75rem;
 
 		// STATES
 		--hover: scale(1.1);

templates/base.html

@@ -15,11 +15,11 @@
 	{%- if config.extra.nav.links %}
 		{% include "partials/nav.html" %}
 	{%- endif %}
-	<div id="main" class="container">
+	<main id="main-content">
 		{% block custom %}{% endblock custom %}
 		{% block content %}{% endblock content %}
 		{% include "partials/extra_features.html" %}
-	</div>
+	</main>
 	{% include "partials/footer.html" %}
 {% endblock body %}
 </body>

templates/partials/nav.html

@@ -5,7 +5,7 @@
 {%- endif %}
 <header id="site-nav">
 	<nav>
-		<a href="#main" id="main-content" tabindex="0">
+		<a href="#main-content" tabindex="0">
 			{{ macros_translate::translate(key="skip_to_content", default="Skip to Main Content", language_strings=language_strings) }}
 		</a>
 		<ul>