Add share button and more (fixes #73)

CHANGELOG.md

@@ -14,7 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `--disabled-opacity` CSS variable for setting opacity of disabled elements.
 - Add `--hover` CSS variable for setting zoom on hover.
 - Add `--shadow-glass` CSS variable for setting shadow for glass-like elements.
-- Add `config.extra.bundled_fonts` config variable to use custom fonts instead of system.
+- Add `config.extra.bundled_fonts` config variable to use custom fonts instead of system (#44).
+- Add `config.extra.show_share_button` confog variable for enabling share button in articles (#73).
 - Add `external` class to comment timestamp.
 - Add `h1` with page/section title by default.
 - Add active state to footer's "Powered by" links.
@@ -64,6 +65,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Show theme switcher if `config.extra.default_theme` is set, even if `config.extra.nav.show_theme_switcher` is not.
 - Tweak `kbd` styling.
 - Tweak padding of verified instance badge.
+- Use logical inset properties instead of `top`, `right`, `bottom`, and `left`.
 - Use more fitting cursors in some contexts.
 - Use percents instead of decimals for color opacity.
 - Use PNG instead of GIF for comments QR code to reduce download size.

config.toml

@@ -115,6 +115,9 @@ show_read_time = true
 #
 # words_per_minute = 200
 #
+# Whether to show a share button in articles.
+# Uses https://shareopenly.org.
+show_share_button = true
 # Whether to enable the KaTeX library for rendering LaTeX.
 # Note: This will make your page significantly heavier.
 katex = true

content/demo/index.md

@@ -655,12 +655,12 @@ You know, <span class="spoiler solid">Duckquill is a pretty dumb name.</span> I
   #color-picker-container {
     -webkit-backdrop-filter: var(--blur);
     position: fixed;
-    bottom: 1rem;
-    left: 0;
     transform: translateX(calc(-100% + 1rem));
     z-index: 1;
     backdrop-filter: var(--blur);
     transition: var(--transition);
+    inset-block-end: 1rem;
+    inset-inline-start: 0;
     box-shadow: var(--edge-highlight), var(--shadow-glass);
     border-start-end-radius: var(--rounded-corner);
     border-end-end-radius: var(--rounded-corner);
@@ -679,8 +679,6 @@ You know, <span class="spoiler solid">Duckquill is a pretty dumb name.</span> I
   }
 
   :root[dir*="rtl"] #color-picker-container {
-    right: 0;
-    left: unset;
     transform: translateX(calc(100% - 1rem));
   }
 

content/tricks/index.md

@@ -28,8 +28,8 @@ You can make navbar have more traditional look:
 
 ```scss
 #site-nav {
-    top: 0;
     margin-block-start: 0;
+    inset-block-start: 0;
     box-shadow: var(--shadow-glass);
     border-radius: 0;
     width: 100%;
@@ -66,8 +66,8 @@ Or you can make it sticked to top but not full-width:
 
 ```scss
 #site-nav {
-    top: 0;
     margin-block-start: 0;
+    inset-block-start: 0;
     box-shadow: var(--shadow-glass);
     border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem) calc(var(--rounded-corner) + 0.5rem);
 

sass/_article-list.scss

@@ -73,21 +73,16 @@
 		&.poor {
 			&::before {
 				position: absolute;
-				top: 50%;
-				right: -3rem;
 				transform: translateY(-50%);
 				opacity: 0.5;
 				z-index: -1;
 				mask-size: cover;
 				transition: var(--transition-longer);
+				inset-block-start: 50%;
+				inset-inline-end: -3rem;
 				width: 12rem;
 				height: 12rem;
 				content: "";
-
-				:root[dir*="rtl"] & {
-					right: unset;
-					left: -3rem;
-				}
 			}
 
 			&:hover::before {
@@ -268,11 +263,6 @@
 				width: 1rem;
 				height: 1rem;
 			}
-
-			:root[dir*="rtl"] & {
-				right: unset;
-				left: 0;
-			}
 		}
 
 		.draft-badge {

sass/_article.scss

@@ -1,23 +1,23 @@
 #banner-container {
 	-webkit-user-select: none;
 	position: absolute;
-	top: 0;
-	left: 0;
 	z-index: -1;
 	mask-image: linear-gradient(black, transparent);
+	inset-block-start: 0;
+	inset-inline-start: 0;
 	width: 100vw;
 	height: 50vw; // hack to keep the aspect ratio 2:1
 	user-select: none;
 
 	#banner {
 		position: fixed;
-		top: 0;
-		left: 0;
 		transition: none;
 		margin: 0;
+		inset-block-start: 0;
+		inset-inline-start: 0;
 	}
 
-	& + h1 {
+	&+h1 {
 		margin-block-start: 35vw;
 	}
 
@@ -26,8 +26,110 @@
 			margin-block-start: 50vw;
 		}
 
-		& + h1 {
+		&+h1 {
 			margin-block-start: 2rem;
 		}
 	}
 }
+
+#floating-buttons {
+	display: flex;
+	position: fixed;
+	flex-direction: column;
+	gap: 0.5rem;
+	inset-block-end: 1rem;
+	inset-inline-end: 1rem;
+
+	@media only screen and (max-width: 720px) {
+		display: none;
+	}
+
+	#toc summary,
+	#go-to-top,
+	#share,
+	#issue {
+		display: inline-block;
+		transition: var(--transition);
+		box-shadow: var(--edge-highlight);
+		border-radius: 999px;
+		background-color: var(--fg-muted-1);
+		padding: 0.5rem;
+		color: var(--fg-muted-4);
+		line-height: 0;
+
+		&:hover {
+			background-color: var(--fg-muted-2);
+			color: var(--fg-muted-5);
+		}
+
+		&:active {
+			transform: var(--active);
+		}
+
+		.icon {
+			transition: var(--transition);
+			width: 1rem;
+			height: 1rem;
+		}
+	}
+
+	#toc {
+		position: relative;
+		box-shadow: none;
+		border-radius: 0;
+		background-color: transparent;
+		padding: 0;
+
+		summary {
+			&::before {
+				display: none;
+			}
+
+			.icon {
+				mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 3a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1ZM2 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1Zm-4 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2m4 0c-.554 0-1 .446-1 1s.446 1 1 1h8c.554 0 1-.446 1-1s-.446-1-1-1z'/%3E%3C/svg%3E");
+
+				:root[dir*="rtl"] & {
+					transform: scaleX(-100%);
+				}
+			}
+		}
+
+		div {
+			-webkit-backdrop-filter: var(--blur);
+			position: absolute;
+			backdrop-filter: var(--blur);
+			inset-block-end: 0;
+			inset-inline-end: 3rem;
+			box-shadow: var(--edge-highlight), var(--shadow-glass);
+			border-radius: var(--rounded-corner);
+			background-color: var(--nav-bg);
+			padding: 1rem;
+			width: min(calc(var(--container-width) / 3), 90vw);
+
+			h2 {
+				margin-block-start: 0;
+				color: var(--fg-muted-4);
+				font-weight: bold;
+				font-size: var(--font-size-x-large);
+				font-family: var(--font-system-ui);
+			}
+
+			ul {
+				margin-block-start: 0;
+				padding-inline-start: 0.75rem;
+			}
+		}
+	}
+
+	#go-to-top .icon {
+		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1 11a1 1 0 0 1 .293-.707l6-6a1 1 0 0 1 1.414 0l6 6a1 1 0 1 1-1.414 1.414L8 6.414l-5.293 5.293A1 1 0 0 1 1 11m0 0'/%3E%3C/svg%3E");
+	}
+
+	#share .icon {
+		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 1a1 1 0 0 0-.5.135 1 1 0 0 0-.207.158l-3 3a1 1 0 0 0 0 1.414 1 1 0 0 0 1.414 0L7 4.414V10a1 1 0 0 0 1 1 1 1 0 0 0 1-1V4.414l1.293 1.293a1 1 0 0 0 1.414 0 1 1 0 0 0 0-1.414L8.738 1.326 8.7 1.287a1 1 0 0 0-.195-.15l-.008-.004a1 1 0 0 0-.236-.098h-.004A1 1 0 0 0 8 1M4 7c-1.645 0-3 1.355-3 3v2c0 1.645 1.355 3 3 3h8c1.645 0 3-1.355 3-3v-2c0-1.645-1.355-3-3-3a1 1 0 0 0 0 2c.564 0 1 .436 1 1v2c0 .564-.436 1-1 1H4c-.564 0-1-.436-1-1v-2c0-.564.436-1 1-1a1 1 0 0 0 0-2'/%3E%3C/svg%3E");
+	}
+
+	#issue .icon {
+		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M5 0c-.55 0-1 .45-1 1 0 .691.39 1.285.8 1.605C4.298 3.277 4 4.105 4 5H3V4H1v1c0 .832.563 1.523 1.05 1.77.493.246.95.23.95.23h1v1H1v2h3v1H3s-.457-.016-.95.23C1.563 11.477 1 12.168 1 13v3h2v-3h1.129c.45 1.719 2.016 3 3.871 3s3.422-1.281 3.871-3H13v3h2v-3c0-.832-.562-1.523-1.05-1.77-.493-.246-.95-.23-.95-.23h-1v-1h3V8h-3V7h1s.457.016.95-.23C14.437 6.523 15 5.832 15 5V4h-2v1h-1c0-.895-.297-1.723-.8-2.395.41-.32.8-.914.8-1.605 0-.55-.45-1-1-1s-1 .45-1 1a1 1 0 0 0-.645.238C8.93 1.086 8.473 1 8 1s-.93.086-1.355.238A1 1 0 0 0 6 1c0-.55-.45-1-1-1m2.969 5.031h.062A.97.97 0 0 1 9 6v3.063a.97.97 0 0 1-.969.968H7.97A.97.97 0 0 1 7 9.062V6a.97.97 0 0 1 .969-.969m0 6h.062A.97.97 0 0 1 9 12v.063a.97.97 0 0 1-.969.968H7.97a.97.97 0 0 1-.97-.969V12a.97.97 0 0 1 .969-.969m0 0'/%3E%3C/svg%3E");
+	}
+}

sass/_input.scss

@@ -62,8 +62,8 @@ input[type="radio"] {
 	border-radius: 50%;
 
 	&::before {
-		top: 0.125rem;
+		inset-block-start: 0.125rem;
-		left: 0.125rem;
+		inset-inline-start: 0.125rem;
 		border-radius: 50%;
 		width: 0.5rem;
 		height: 0.5rem;
@@ -75,11 +75,11 @@ input[type="checkbox"] {
 	border-radius: calc(var(--rounded-corner-small) / 2);
 
 	&::before {
-		top: -0.125rem;
-		left: -0.125rem;
 		transform-origin: bottom left;
 		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M13.754 4.668c.176-.2.262-.461.246-.723a1 1 0 0 0-.34-.687 1 1 0 0 0-.726-.246 1 1 0 0 0-.688.34L5.95 10.547 3.707 8.3A1 1 0 0 0 2 9.01a1 1 0 0 0 .293.708l3 3c.195.195.465.3.742.293.278-.012.535-.133.719-.344zm0 0'/%3E%3C/svg%3E");
 		mask-size: cover;
+		inset-block-start: -0.125rem;
+		inset-inline-start: -0.125rem;
 		width: 1rem;
 		height: 1rem;
 	}
@@ -104,13 +104,13 @@ input[type="checkbox"] {
 		}
 
 		&::before {
-			top: 0.25rem;
-			left: 0.25rem;
 			transform: none;
 			transform-origin: center;
 			opacity: 1;
 			mask-image: none;
 			transition: var(--transition);
+			inset-block-start: 0.25rem;
+			inset-inline-start: 0.25rem;
 			box-shadow: var(--shadow);
 			border-radius: 50%;
 			background-color: white;

sass/_nav.scss

@@ -1,10 +1,10 @@
 #site-nav {
 	-webkit-backdrop-filter: var(--blur);
 	position: sticky;
-	top: 1rem;
 	z-index: 999;
 	backdrop-filter: var(--blur);
 	margin: 1rem auto;
+	inset-block-start: 1rem;
 	box-shadow: var(--edge-highlight), var(--shadow-glass);
 	border-radius: 1.625rem;
 	background-color: var(--nav-bg);
@@ -20,13 +20,13 @@
 		#main-content {
 			-webkit-backdrop-filter: var(--blur);
 			position: absolute;
-			top: 0;
 			left: 50%;
 			transform: translateX(-50%);
 			opacity: 0;
 			z-index: 999;
 			backdrop-filter: var(--blur);
 			transition: var(--transition);
+			inset-block-start: 0;
 			box-shadow:
 				var(--edge-highlight),
 				var(--shadow-glass);
@@ -37,8 +37,8 @@
 			text-decoration: none;
 
 			&:focus {
-				top: calc(100% + 0.5rem);
 				opacity: 1;
+				inset-block-start: calc(100% + 0.5rem);
 			}
 		}
 
@@ -335,9 +335,9 @@
 		-webkit-backdrop-filter: var(--blur);
 		display: flex;
 		position: absolute;
-		top: calc(100% + 0.5rem);
-		left: 0;
 		backdrop-filter: var(--blur);
+		inset-block-start: calc(100% + 0.5rem);
+		inset-inline-start: 0;
 		box-shadow: var(--edge-highlight), var(--shadow-glass);
 		border-radius: calc(var(--rounded-corner) + 0.5rem);
 		background-color: var(--nav-bg);

sass/_typography.scss

@@ -181,7 +181,7 @@ hr {
 
 	&::after {
 		position: relative;
-		top: -1.75rem;
+		inset-block-start: -1.75rem;
 		content: "☙❧";
 		color: var(--fg-muted-4);
 		font-size: var(--font-size-xx-large);

templates/article.html

@@ -72,13 +72,21 @@
 	</nav>
 {%- endif -%}
 
-<div class="dialog-buttons">
+<div id="floating-buttons">
-	{# <a class="no-hover inline-button colored external" href="https://shareopenly.org/share/?url={{ page.permalink }}&text={{ page.description | urlencode }}">{{ macros_translate::translate(key="share", default="Share", language_strings=language_strings) }}</a> #}
+	{%- if page.extra.toc -%}
-	<a class="inline-button" href="#top">{{ macros_translate::translate(key="go_to_top", default="Go to Top", language_strings=language_strings) }}</a>
+		<details id="toc">
+			<summary title="{{ macros_translate::translate(key='table_of_contents', default='Table of Contents', language_strings=language_strings) }}"><i class="icon"></i></summary>
+			<div>
+				{%- include "partials/toc.html" -%}
+			</div>
+		</details>
+	{%- endif -%}
+	<a id="go-to-top" href="#top" title="{{ macros_translate::translate(key='go_to_top', default='Go to Top', language_strings=language_strings) }}"><i class="icon"></i></a>
+	{%- if config.extra.show_share_button -%}
+		<a id="share" href="https://shareopenly.org/share/?url={{ page.permalink }}&text={{ page.description | urlencode }}" rel="{{ rel_attributes }}" title="{{ macros_translate::translate(key='share', default='Share', language_strings=language_strings) }}"><i class="icon"></i></a>
+	{%- endif -%}
 	{%- if config.extra.issues_url -%}
-		<a class="inline-button colored external" href="{{ config.extra.issues_url }}" rel="{{ rel_attributes }}">
+		<a id="issue" href="{{ config.extra.issues_url }}" rel="{{ rel_attributes }}" title="{{ macros_translate::translate(key='file_an_issue', default='File an Issue', language_strings=language_strings) }}"><i class="icon"></i></a>
-			{{- macros_translate::translate(key="file_an_issue", default="File an Issue", language_strings=language_strings) -}}
-		</a>
 	{%- endif -%}
 </div>
 {% endblock content %}