Across the board style fixes and simplifications

Plus bump to v3

content/_index.md

@@ -47,7 +47,7 @@ It is highly recommended to switch from the `main` branch to the lates release:
 
 ```sh
 cd themes/duckquill
-git checkout tags/v2.1.0
+git checkout tags/v3.0.0
 ```
 
 To update the submodule, simply switch to a new tag:
@@ -57,7 +57,7 @@ To update the submodule, simply switch to a new tag:
 ```sh
 git submodule update --remote --merge
 git tag --list
-git checkout tags/v2.1.0
+git checkout tags/v3.0.0
 ```
 
 Then, enable it in your `config.toml`:

content/_index.ru.md

@@ -47,7 +47,7 @@ git submodule add https://codeberg.org/daudix/duckquill.git themes/duckquill
 
 ```sh
 cd themes/duckquill
-git checkout tags/v2.1.0
+git checkout tags/v3.0.0
 ```
 
 Чтобы обновить субмодуль, просто переключитесь на новый тег:
@@ -57,7 +57,7 @@ git checkout tags/v2.1.0
 ```sh
 git submodule update --remote --merge
 git tag --list
-git checkout tags/v2.1.0
+git checkout tags/v3.0.0
 ```
 
 Затем включите её в файле `config.toml`:

sass/_article-list.scss

@@ -6,14 +6,14 @@
 			transform: scale(0.95);
 			opacity: 0.6;
 			transition: var(--transition-longer);
-			outline: 2px dashed var(--fg-muted-2);
+			outline: 0.125rem dashed var(--fg-muted-2);
 			outline-offset: 1rem;
 			border-radius: 1rem;
 
 			&:hover {
 				transform: scale(1);
 				opacity: 1;
-				outline: 2px dashed transparent;
+				outline: 0.125rem dashed transparent;
 				outline-offset: 0;
 			}
 		}
@@ -34,8 +34,9 @@
 			right: 0;
 			box-shadow: var(--edge-highlight);
 			border-radius: 999px;
-			padding: 0.25rem 0.75rem;
+			padding: 0.5rem 0.75rem;
 			font-weight: bold;
+			line-height: normal;
 
 			.icon {
 				vertical-align: -0.125em;

sass/_buttons.scss

@@ -7,15 +7,15 @@
 }
 
 .inline-button {
-	display: inline-block;
 	transition: var(--transition);
 	cursor: pointer;
 	box-shadow: var(--edge-highlight);
 	border-radius: var(--rounded-corner);
 	background-color: var(--fg-muted-1);
-	padding: 0.5rem 1rem;
+	padding: 0.625rem 1rem;
 	color: var(--fg-color);
 	font-size: 0.9rem;
+	line-height: normal;
 	text-decoration: none;
 
 	&:hover {

sass/_comments.scss

@@ -1,11 +1,12 @@
 section#comments {
 	#qrcode {
 		float: right;
+		box-sizing: content-box;
 		margin: 3rem 0 0 1rem;
 		background-color: white;
-		padding: 12.5px;
+		padding: 0.75rem;
-		width: 150px;
+		width: 125px;
-		height: 150px;
+		height: 125px;
 
 		body[dir="rtl"] & {
 			float: left;

sass/_containers.scss

@@ -8,7 +8,6 @@
 
 	button {
 		-webkit-backdrop-filter: var(--blur);
-		display: inline-flex;
 		position: absolute;
 		top: 0.5rem;
 		right: 0.5rem;
@@ -20,6 +19,7 @@
 		border-radius: 50%;
 		background-color: var(--fg-muted-1);
 		padding: 0.5rem;
+		line-height: 0;
 
 		body[dir="rtl"] & {
 			right: unset;

sass/_footer.scss

@@ -40,11 +40,11 @@
 		padding: 0;
 
 		li {
-			display: inline-flex;
+			line-height: 0;
 			list-style: none;
 
 			a {
-				display: inline-flex;
+				display: block;
 				transition: var(--transition);
 				border-radius: 999px;
 				padding: 0.5rem;

sass/_general.scss

@@ -44,6 +44,7 @@ body {
 // and flash it with primary color when jumping to it
 :target:not(#main) {
 	animation: var(--transition-long) 1s highlight-in-out;
+	transition: all var(--transition-longer), scroll-margin-top 0s;
 	scroll-margin-top: 20vh;
 	color: var(--primary-color);
 	text-shadow: var(--primary-color-alpha) 0 0 4px, var(--primary-color) 0 0 12px;

sass/_johnvertisement.scss

@@ -1,7 +0,0 @@
-#johnvertisement {
-	display: block;
-	margin: 1rem auto 0;
-	border: none;
-	width: min(728px, 100vw);
-	height: min(90px, 12.367vw);
-}

sass/_nav.scss

@@ -11,23 +11,21 @@
 	max-width: min(var(--container-width), 90%);
 
 	nav {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: center;
-		align-items: center;
 		padding: 0.5rem;
 
 		ul {
 			display: flex;
 			flex-wrap: wrap;
 			justify-content: center;
+			align-items: center;
 			gap: 0.25rem;
 			margin: 0;
 			padding: 0;
 		}
 
 		li {
-			display: inline-flex;
+			display: flex;
+			line-height: normal;
 			list-style: none;
 		}
 
@@ -48,7 +46,7 @@
 			position: relative;
 			transition: var(--transition);
 			border-radius: 999px;
-			padding: 0.325rem 0.75rem;
+			padding: 0.5rem 0.75rem;
 			color: var(--fg-muted-4);
 			text-decoration: none;
 
@@ -107,11 +105,11 @@
 
 			&::after {
 				position: absolute;
-				top: 0;
+				top: -0.25rem;
 				right: -0.5rem;
 				background-color: var(--fg-muted-2);
 				width: 1px;
-				height: 110%;
+				height: calc(100% + 0.5rem);
 				content: "";
 
 				body[dir="rtl"] & {
@@ -132,7 +130,7 @@
 
 		#feed a,
 		#dropdown summary {
-			padding: 0.325rem 0.625rem;
+			padding: 0.5rem 0.625rem;
 
 			&:hover .icon {
 				background-color: var(--primary-color);
@@ -208,6 +206,7 @@
 					padding: 0.25rem;
 
 					li {
+						display: flex;
 						width: 100%;
 
 						a {

sass/_normalize.scss

@@ -7,9 +7,9 @@
 //
 
 :where(html) {
-  line-height: 1.15; // 1
 	-webkit-text-size-adjust: 100%; // 2
 	text-size-adjust: 100%; // 2
+	line-height: 1.15; // 1
 }
 
 // Sections
@@ -21,9 +21,9 @@
 //
 
 :where(h1) {
-  font-size: 2em;
-  margin-block-end: 0.67em;
 	margin-block-start: 0.67em;
+	margin-block-end: 0.67em;
+	font-size: 2em;
 }
 
 // Grouping content
@@ -34,8 +34,8 @@
 //
 
 :where(dl, ol, ul) :where(dl, ol, ul) {
-  margin-block-end: 0;
 	margin-block-start: 0;
+	margin-block-end: 0;
 }
 
 //
@@ -45,8 +45,8 @@
 
 :where(hr) {
 	box-sizing: content-box; // 1
-  color: inherit; // 2
 	height: 0; // 1
+	color: inherit; // 2
 }
 
 // Text-level semantics
@@ -75,8 +75,8 @@
 //
 
 :where(code, kbd, pre, samp) {
-  font-family: monospace, monospace; // 1
 	font-size: 1em; // 2
+	font-family: monospace, monospace; // 1
 }
 
 //
@@ -175,8 +175,8 @@
 //
 
 ::-webkit-input-placeholder {
-  color: inherit;
 	opacity: 0.54;
+	color: inherit;
 }
 
 //
@@ -230,18 +230,18 @@
 //
 
 :where(dialog) {
-  background-color: white;
-  border: solid;
-  color: black;
-  height: -moz-fit-content;
-  height: fit-content;
-  left: 0;
-  margin: auto;
-  padding: 1em;
 	position: absolute;
 	right: 0;
+	left: 0;
+	margin: auto;
+	border: solid;
+	background-color: white;
+	padding: 1em;
 	width: -moz-fit-content;
 	width: fit-content;
+	height: -moz-fit-content;
+	height: fit-content;
+	color: black;
 }
 
 :where(dialog:not([open])) {

sass/_tags.scss

@@ -1,12 +1,14 @@
 .tags {
-	display: inline-block;
+	display: inline-flex;
+	flex-wrap: wrap;
+	gap: 0.25rem;
 	padding: 0;
 	list-style: none;
 
 	li {
-		display: inline-block;
+		display: flex;
 		transition: var(--transition);
-		margin: 0 0.25rem 0.5rem 0;
+		line-height: normal;
 
 		&:active {
 			transform: scale(var(--active));
@@ -20,6 +22,7 @@
 		background-color: var(--fg-muted-1);
 		padding: 0.25rem 0.75rem;
 		color: var(--fg-color);
+		font-size: 0.8rem;
 		text-decoration: none;
 
 		&:hover {

sass/_variables.scss

@@ -76,7 +76,6 @@
 }
 
 @media (prefers-reduced-motion) {
-
 	*,
 	*::before,
 	*::after {

sass/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Duckquill v2.1.0 (https://daudix.codeberg.page/duckquill)
+ * Duckquill v3.0.0 (https://daudix.codeberg.page/duckquill)
  * Copyright 2024 David "Daudix" Lapshin
  * Licensed under MIT (https://codeberg.org/daudix/duckquill/src/branch/main/LICENSE)
  */
@@ -19,7 +19,6 @@
 @use "general";
 @use "icon";
 @use "input";
-@use "johnvertisement";
 @use "media";
 @use "nav";
 @use "not-found";

templates/article_list.html

@@ -6,7 +6,7 @@
 {{ section.description | markdown | safe }}
 
 <small>
-	<a class="link-page" href="{{ get_url(path='tags', lang=lang) }}">{{ trans(key="filter_by_tag", lang=lang) }}</a>
+	<a href="{{ get_url(path='tags', lang=lang) }}">{{ trans(key="filter_by_tag", lang=lang) }}</a>
 	<br />
 	{{ trans(key="newest_to_oldest", lang=lang) }} ↓
 </small>
@@ -14,7 +14,7 @@
 <div id="article-list">
 	{% for page in section.pages %}
 		<article {% if page.draft %}class="draft"{% endif %}>
-			<h3><a class="link-page" href="{{ page.permalink | safe }}">{{ page.title }}</a></h3>
+			<h3><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h3>
 			{%- if page.draft %}
 				<span class="draft-badge">
 					<i class="icon"></i>
@@ -32,7 +32,9 @@
 			{%- endif %}
 			{%- if page.date %}
 				<small>
-					<time datetime="{{ page.date | date(format='%+') }}" pubdate>{{- page.date | date(format=config.extra.date_format) -}}</time>
+					<time datetime="{{ page.date | date(format='%+') }}" pubdate>
+						{{- page.date | date(format=config.extra.date_format) -}}
+					</time>
 					{%- if page.authors %}
 						<span>•</span>
 						<span>{{ trans(key="author", lang=lang) }}: {{ page.authors[0] }}</span>

templates/taxonomy_list.html

@@ -4,11 +4,9 @@
 <h1>{{ trans(key="tags", lang=lang) }}</h1>
 <small>{{ terms | length }} {{ trans(key="tags_in_total", lang=lang) }}</small>
 <br />
-<small>
 <ul class="tags">
 	{% for tag in terms %}
 		<li><a class="tag" href="{{ get_taxonomy_url(kind='tags', name=tag.name, lang=lang) }}">{{ tag.name }}</a></li>
 	{% endfor %}
 </ul>
-</small>
 {% endblock content %}

templates/taxonomy_single.html

@@ -2,19 +2,41 @@
 
 {% block content %}
 <h1>{{ trans(key="posts_with_tag", lang=lang) }} “{{ term.name }}”</h1>
+
 <small>
-	<a class="link-page" href="{{ get_url(path='tags', lang=lang) }}">{{ trans(key="see_all_tags", lang=lang) }}</a>
+	<a href="{{ get_url(path='tags', lang=lang) }}">{{ trans(key="see_all_tags", lang=lang) }}</a>
 	<br />
 	{{ term.pages | length }} {{ trans(key="posts_in_total", lang=lang) }}
 </small>
-<article>
+
+<div id="article-list">
 	{% for page in term.pages %}
-		<h3><a class="link-page" href="{{ page.permalink | safe }}">{{ page.title }}</a></h3>
+		<article {% if page.draft %}class="draft"{% endif %}>
-		{%- if page.description %}
+			<h3><a href="{{ page.permalink | safe }}">{{ page.title }}</a></h3>
-			<p>{{ page.description }}</p>
+			{%- if page.draft %}
+				<span class="draft-badge">
+					<i class="icon"></i>
+					{{ trans(key="drafted", lang=lang) }}
+				</span>
 			{%- endif %}
+			{%- if page.extra.archive %}
+				<span class="archive-badge">
+					<i class="icon"></i>
+					{{ trans(key="archived", lang=lang) }}
+				</span>
+			{%- endif %}
+			{%- if page.description %}
+				{{ page.description | markdown | safe }}
+			{%- endif %}
+			{%- if page.date %}
 				<small>
-			<time datetime='{{ page.date | date(format=' %+') }}' pubdate>{{- page.date | date(format=config.extra.date_format) -}}</time>
+					<time datetime="{{ page.date | date(format='%+') }}" pubdate>
+						{{- page.date | date(format=config.extra.date_format) -}}
+					</time>
+					{%- if page.authors %}
+						<span>•</span>
+						<span>{{ trans(key="author", lang=lang) }}: {{ page.authors[0] }}</span>
+					{%- endif %}
 					{%- if page.taxonomies %}
 						{%- for name, taxon in page.taxonomies %}
 							<span>•</span>
@@ -26,6 +48,9 @@
 						{%- endfor %}
 					{%- endif %}
 				</small>
-	{% endfor %}
+			{%- endif %}
 		</article>
+		<hr>
+	{% endfor %}
+</div>
 {% endblock content %}