From 543d1bf862f353fe465e6bd99c5e5bb1914e0bc4 Mon Sep 17 00:00:00 2001 From: daudix Date: Tue, 17 Sep 2024 01:40:25 +0300 Subject: [PATCH] Add share button and more (fixes #73) --- CHANGELOG.md | 4 +- config.toml | 3 ++ content/demo/index.md | 6 +-- content/tricks/index.md | 4 +- sass/_article-list.scss | 14 +---- sass/_article.scss | 114 +++++++++++++++++++++++++++++++++++++--- sass/_input.scss | 12 ++--- sass/_nav.scss | 10 ++-- sass/_typography.scss | 2 +- templates/article.html | 20 ++++--- 10 files changed, 146 insertions(+), 43 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4bf9acf..f2a00fb 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/config.toml b/config.toml index 248da62..24c2118 100644 --- a/config.toml +++ b/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 diff --git a/content/demo/index.md b/content/demo/index.md index 44ce3fc..5437a21 100644 --- a/content/demo/index.md +++ b/content/demo/index.md @@ -655,12 +655,12 @@ You know, Duckquill is a pretty dumb name. 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, Duckquill is a pretty dumb name. I } :root[dir*="rtl"] #color-picker-container { - right: 0; - left: unset; transform: translateX(calc(100% - 1rem)); } diff --git a/content/tricks/index.md b/content/tricks/index.md index e22d5a0..d94fa3c 100644 --- a/content/tricks/index.md +++ b/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); diff --git a/sass/_article-list.scss b/sass/_article-list.scss index acb2b81..74b7c28 100644 --- a/sass/_article-list.scss +++ b/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 { diff --git a/sass/_article.scss b/sass/_article.scss index 3d4fb69..4e56ec8 100644 --- a/sass/_article.scss +++ b/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"); + } +} diff --git a/sass/_input.scss b/sass/_input.scss index fae5965..c9b7c35 100644 --- a/sass/_input.scss +++ b/sass/_input.scss @@ -62,8 +62,8 @@ input[type="radio"] { border-radius: 50%; &::before { - top: 0.125rem; - left: 0.125rem; + inset-block-start: 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; diff --git a/sass/_nav.scss b/sass/_nav.scss index 7144de9..74fb6ec 100644 --- a/sass/_nav.scss +++ b/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); diff --git a/sass/_typography.scss b/sass/_typography.scss index 8a9b9fb..020f791 100644 --- a/sass/_typography.scss +++ b/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); diff --git a/templates/article.html b/templates/article.html index 3dded52..006f222 100644 --- a/templates/article.html +++ b/templates/article.html @@ -72,13 +72,21 @@ {%- endif -%} -
- {# {{ macros_translate::translate(key="share", default="Share", language_strings=language_strings) }} #} - {{ macros_translate::translate(key="go_to_top", default="Go to Top", language_strings=language_strings) }} +
+ {%- if page.extra.toc -%} +
+ +
+ {%- include "partials/toc.html" -%} +
+
+ {%- endif -%} + + {%- if config.extra.show_share_button -%} + + {%- endif -%} {%- if config.extra.issues_url -%} - - {{- macros_translate::translate(key="file_an_issue", default="File an Issue", language_strings=language_strings) -}} - + {%- endif -%}
{% endblock content %}