Add custom css

salif · Sep 30, 2024 · d1a9276 · d1a9276
1 parent 65ac21e
commit d1a9276
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/_data/values.yml b/_data/values.yml
@@ -1,27 +1,28 @@
 "bg":
-  footer_os: "Този сайт е с отворен код."
+  footer_os: "Този сайт е с отворен код"
   footer_im: "Подобрете тази страница"
+  theme: "Тема"
 "eo":
-  footer_os: "Ĉi tiu retejo estas malfermita fonto."
+  footer_os: "Ĉi tiu retejo estas malfermita fonto"
   footer_im: "Plibonigu ĉi tiun paĝon"
 "tr":
-  footer_os: "Bu site açık kaynaktır."
+  footer_os: "Bu site açık kaynaktır"
   footer_im: "Bu sayfayı geliştirin"
 "zh-CN":
-  footer_os: "该网站是开源的。"
+  footer_os: "该网站是开源的"
   footer_im: "改进此页面"
 "es":
-  footer_os: "Este sitio es de código abierto."
+  footer_os: "Este sitio es de código abierto"
   footer_im: "Mejorar esta página"
 "ar":
-  footer_os: "هذا الموقع مفتوح المصدر."
+  footer_os: "هذا الموقع مفتوح المصدر"
   footer_im: "تحسين هذه الصفحة"
 "pt":
-  footer_os: "Este site é de código aberto."
+  footer_os: "Este site é de código aberto"
   footer_im: "Melhorar esta página"
 "ru":
-  footer_os: "Этот сайт с открытым исходным кодом."
+  footer_os: "Этот сайт с открытым исходным кодом"
   footer_im: "Улучшить эту страницу"
 "id":
-  footer_os: "Situs ini bersifat open source."
+  footer_os: "Situs ini bersifat open source"
   footer_im: "Perbaiki halaman ini"
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,27 +1,40 @@
 <!DOCTYPE html>
-<html lang="{{ page.lang | default: site.lang }}" {%- if page.lang == "ar" %} dir="rtl"{% endif %}>
+<html lang="{{ page.lang | default: site.lang }}" {%- if page.lang == "ar" %} dir="rtl"{% endif %} class="theme-color-links">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="index, follow" />
 {% seo %}
+    <style>:root {color-scheme: light dark;}</style>
+    <script async src="https://salif.github.io/globasa-xwexi-pages/assets/script.min.js?v=241001"></script>
     <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}" />
-    {% if jekyll.environment == "production" %}
-    <script data-goatcounter="https://sgi.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
-    {% endif %}
+    <link rel="stylesheet" href="https://salif.github.io/globasa-xwexi-pages/assets/custom.css?v=241001" />
   </head>
   <body>
     <div class="container-lg px-3 my-5 markdown-body">
       {{ content }}
 
       {% if site.github.private != true and site.github.license %}
+      {% assign theme = site.data.values[page.lang].theme | default: "Theme" %}
       <div class="footer border-top border-gray-light mt-5 pt-3 text-right text-gray">
-        {{ site.data.values[page.lang].footer_os | default: "This site is open source." }} <a href="{% github_edit_link %}">{{ site.data.values[page.lang].footer_im | default: "Improve this page" }}</a>.
+        {{ site.data.values[page.lang].footer_os | default: "This site is open source" }} &#8226; <a
+        href="{% github_edit_link %}">{{ site.data.values[page.lang].footer_im | default: "Improve this page" }}</a>
+        &#8226; <select id="theme-switch" aria-label="Choose a theme">
+          <option id="theme-switch-auto" value="theme-auto">{{ theme }}: Auto</option>
+          <option id="theme-switch-light" value="theme-light">{{ theme }}: Light</option>
+          <option id="theme-switch-dark" value="theme-dark">{{ theme }}: Dark</option>
+          <option id="theme-switch-rust" value="theme-rust">{{ theme }}: Rust</option>
+          <option id="theme-switch-midnight" value="theme-midnight">{{ theme }}: Midnight</option>
+          <option id="theme-switch-sc-auto" value="theme-sc-auto">{{ theme }}: SC Auto</option>
+          <option id="theme-switch-sc-light" value="theme-sc-light">{{ theme }}: SC Light</option>
+          <option id="theme-switch-sc-dark" value="theme-sc-dark">{{ theme }}: SC Dark</option>
+        </select>
       </div>
       {% endif %}
     </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>
-    <script>anchors.add();</script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js"
+      integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>
+    <script>window.addEventListener("load", function () { anchors.add(); });</script>
   </body>
 </html>