Avoid dotted header underline in mobile

it renders blocky squares. So fall back to wavy underline in mobile
upstairsisboiling · Aug 9, 2024 · 64cc906 · 64cc906
1 parent d913301
commit 64cc906
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 9 deletions.
diff --git a/docs/album/feed.xml b/docs/album/feed.xml
@@ -14,7 +14,7 @@
         <category>event</category>
         <category>misc</category>
         <category>single</category>
-        <lastBuildDate>Fri Aug 09 2024 18:14:57 GMT+0300 (GMT+03:00)</lastBuildDate>
+        <lastBuildDate>Fri Aug 09 2024 23:48:31 GMT+0300 (GMT+03:00)</lastBuildDate>
         <copyright>All rights reserved 2024, Upstairs is boiling</copyright>
         <docs>https://www.rssboard.org/rss-specification</docs>
         <generator>writ-cms</generator>

diff --git a/docs/assets/custom/style.css b/docs/assets/custom/style.css
@@ -238,8 +238,22 @@ img {
 
 .post-title-link {
     color: inherit;
-    text-decoration-thickness: 13px;
-    text-decoration-style: dotted;
+    text-decoration-style: wavy;
+    text-decoration-thickness: 0.08em;
+    text-underline-offset: 0.2em;
+}
+
+/*
+ * Dotted underline renders as squares in mobile,
+ * so use them only on bigger screens.
+ * */
+@media ((min-width: 420px) and (min-height: 900px)),
+       ((min-width: 900px) and (min-height: 420px)) {
+    .post-title-link {
+        text-decoration-thickness: 0.125em;
+        text-decoration-style: dotted;
+        text-underline-offset: initial;
+    }
 }
 
 .post-released {

diff --git a/docs/event/feed.xml b/docs/event/feed.xml
@@ -14,7 +14,7 @@
         <category>event</category>
         <category>misc</category>
         <category>single</category>
-        <lastBuildDate>Fri Aug 09 2024 18:14:57 GMT+0300 (GMT+03:00)</lastBuildDate>
+        <lastBuildDate>Fri Aug 09 2024 23:48:31 GMT+0300 (GMT+03:00)</lastBuildDate>
         <copyright>All rights reserved 2024, Upstairs is boiling</copyright>
         <docs>https://www.rssboard.org/rss-specification</docs>
         <generator>writ-cms</generator>

diff --git a/docs/feed.xml b/docs/feed.xml
@@ -14,7 +14,7 @@
         <category>event</category>
         <category>misc</category>
         <category>single</category>
-        <lastBuildDate>Fri, 09 Aug 2024 15:14:57 GMT</lastBuildDate>
+        <lastBuildDate>Fri, 09 Aug 2024 20:48:31 GMT</lastBuildDate>
         <copyright>All rights reserved 2024, Upstairs is boiling</copyright>
         <docs>https://www.rssboard.org/rss-specification</docs>
         <generator>writ-cms</generator>

diff --git a/docs/misc/feed.xml b/docs/misc/feed.xml
@@ -14,7 +14,7 @@
         <category>event</category>
         <category>misc</category>
         <category>single</category>
-        <lastBuildDate>Fri Aug 09 2024 18:14:57 GMT+0300 (GMT+03:00)</lastBuildDate>
+        <lastBuildDate>Fri Aug 09 2024 23:48:31 GMT+0300 (GMT+03:00)</lastBuildDate>
         <copyright>All rights reserved 2024, Upstairs is boiling</copyright>
         <docs>https://www.rssboard.org/rss-specification</docs>
         <generator>writ-cms</generator>

diff --git a/docs/single/feed.xml b/docs/single/feed.xml
@@ -14,7 +14,7 @@
         <category>event</category>
         <category>misc</category>
         <category>single</category>
-        <lastBuildDate>Fri Aug 09 2024 18:14:57 GMT+0300 (GMT+03:00)</lastBuildDate>
+        <lastBuildDate>Fri Aug 09 2024 23:48:31 GMT+0300 (GMT+03:00)</lastBuildDate>
         <copyright>All rights reserved 2024, Upstairs is boiling</copyright>
         <docs>https://www.rssboard.org/rss-specification</docs>
         <generator>writ-cms</generator>

diff --git a/theme/style.css b/theme/style.css
@@ -238,8 +238,22 @@ img {
 
 .post-title-link {
     color: inherit;
-    text-decoration-thickness: 13px;
-    text-decoration-style: dotted;
+    text-decoration-style: wavy;
+    text-decoration-thickness: 0.08em;
+    text-underline-offset: 0.2em;
+}
+
+/*
+ * Dotted underline renders as squares in mobile,
+ * so use them only on bigger screens.
+ * */
+@media ((min-width: 420px) and (min-height: 900px)),
+       ((min-width: 900px) and (min-height: 420px)) {
+    .post-title-link {
+        text-decoration-thickness: 0.125em;
+        text-decoration-style: dotted;
+        text-underline-offset: initial;
+    }
 }
 
 .post-released {