figbert.com-website

commit 2d654b0b72784ec5d313bfab272aa83f7e56760b
parent 4c2ab568a68eeabd90de175c1338dd67dff9dc24
Author: FIGBERT <figbert@figbert.com>
Date:   Wed,  7 Aug 2024 13:46:59 -0700

Tweak anchor links

Diffstat:
M
static/global.css
 | 
37
++++++++++++++++++++++++++++++-------
M
templates/anchor-link.html
 | 
4
+++-

2 files changed, 33 insertions(+), 8 deletions(-)
diff --git a/static/global.css b/static/global.css
@@ -1,6 +1,19 @@
 :root {
   color-scheme: light dark;
-  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    avenir next,
+    avenir,
+    segoe ui,
+    helvetica neue,
+    helvetica,
+    Cantarell,
+    Ubuntu,
+    roboto,
+    noto,
+    arial,
+    sans-serif;
   line-height: 1.618;
 }
 
@@ -50,17 +63,24 @@ footer {
 
 a {
   color: inherit;
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     color: #8e60a7;
   }
 }
 
-p, details {
+p,
+details {
   margin-block-start: 0ch;
   margin-block-end: 2ch;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin: 0;
   position: relative;
 
@@ -77,7 +97,9 @@ ul {
   list-style: square;
 }
 
-video, picture, img {
+video,
+picture,
+img {
   width: 100%;
 }
 
@@ -93,8 +115,9 @@ small {
 .zola-anchor {
   opacity: 0;
   position: absolute;
-  right: 101%;
-  transition: opacity .1s linear;
+  right: 100.5%;
+  font-size: 60%;
+  transition: opacity 0.3s cubic-bezier(1, 0, 0, 1);
 }
 
 .section-list {
diff --git a/templates/anchor-link.html b/templates/anchor-link.html
@@ -1 +1,3 @@
-<a class="zola-anchor" href="#{{ id }}" aria-label="Anchor link for: {{ id }}">§</a>
+<a class="zola-anchor" href="#{{ id }}" aria-label="Anchor link for: {{ id }}"
+  >#</a
+>