Add message about non-firefox browsers

config.toml

@@ -35,9 +35,10 @@ filename = "syntax-theme-dark.css"
 
 [extra]
 
-display_author = true
 author = "asonix"
+display_author = true
 favicon = "favicon.ico"
+firefox_message = true
 
 [[extra.header_nav]]
 url = "https://asonix.dog"

static/styles.css

@@ -26,7 +26,6 @@ body {
   justify-content: space-between;
   min-height: 100%;
   overflow-y: hidden;
-  padding: 16px;
 }
 
 .sidebar a,
@@ -41,6 +40,11 @@ body {
   color: #000;
 }
 
+.sidebar header,
+.sidebar footer > div {
+  padding: 16px;
+}
+
 .sidebar header ul {
   list-style: none;
   padding: 0;
@@ -54,6 +58,10 @@ body {
   padding: 2px 0;
 }
 
+.sidebar footer p {
+  max-width: 180px;
+}
+
 pre {
   border: 1px solid #d5d5d5;
   padding: 8px;
@@ -155,6 +163,15 @@ section {
   display: none;
 }
 
+.firefox-message {
+  background-color: lightyellow;
+  border-radius: 2px;
+  display: none;
+  margin: 0;
+  min-width: 100%;
+  padding: 16px;
+}
+
 section.web-environment-integrity-message {
   background-color: lightyellow;
   color: #000;
@@ -186,10 +203,6 @@ main blockquote {
   vertical-align: middle;
 }
 
-.sidebar footer p {
-  max-width: 180px;
-}
-
 @media (prefers-color-scheme: dark) {
   body {
     background-color: #232323;

templates/base.html

@@ -41,6 +41,9 @@
         document.querySelectorAll('.web-environment-integrity-message').forEach((elem) => elem.setAttribute("style", "display: block;"));
         document.querySelectorAll('.site-content').forEach((elem) => elem.setAttribute("style", "display: none;"));
       }
+      if (navigator.userAgent.search("Firefox") == -1) {
+        document.querySelectorAll('.firefox-message').forEach((elem) => elem.setAttribute("style", "display: block;"));
+      }
     </script>
   </body>
 </html>

templates/footer.html

@@ -1,3 +1,8 @@
+{% if config.extra.firefox_message %}
+<p class="firefox-message">
+  This page is best viewed in <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>
+</p>
+{% endif %}
 <div>
   <p class="site-content">
     favicon by <a target="_blank" href="https://weirder.earth/@dzuk">dzuk</a>. background image by ruca.