base.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <!doctype html>
  2. <html class="default">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>ForgeFed</title>
  7. <link rel="stylesheet" type="text/css" href="/theme.css" />
  8. <link rel="icon" href="/img/logo.svg" />
  9. <script>
  10. // check whether the default colour scheme has been overridden
  11. // must be done as early as possible to avoid FOUC
  12. let theme = sessionStorage.getItem("theme")
  13. if (theme) document.documentElement.classList.add(theme)
  14. </script>
  15. <link rel="alternate" type="application/atom+xml" title="ForgeFed Blog" href="/atom.xml">
  16. </head>
  17. <body class="body">
  18. <header class="header">
  19. <h1 class="header-title">
  20. <a class="header-title__link" href="/">
  21. <img src="/img/logo-with-name.svg" alt="ForgeFed" title="ForgeFed" />
  22. </a>
  23. </h1>
  24. <nav class="nav" id="site-nav">
  25. <a class="nav__link"
  26. href="/spec">📓 specification</a>
  27. <a class="nav__link"
  28. href="/blog">📜 blog</a>
  29. <a class="nav__link"
  30. href="https://codeberg.org/ForgeFed/ForgeFed/issues">🐞 issues</a>
  31. <a class="nav__link"
  32. href="https://socialhub.activitypub.rocks/c/software/forgefed/60">🗒️ forum</a>
  33. <a class="nav__link"
  34. href="https://matrix.to/#/#forgefed:libera.chat">💬 chat</a>
  35. </nav>
  36. </header>
  37. <main class="main">
  38. {% block content %} {% endblock %}
  39. </main>
  40. <footer class="footer">
  41. <p xmlns:dct="http://purl.org/dc/terms/">
  42. <a rel="license"
  43. href="http://creativecommons.org/publicdomain/zero/1.0/">
  44. <img src="https://licensebuttons.net/p/zero/1.0/88x31.png"
  45. style="border-style: none;"
  46. alt="CC0" />
  47. </a>
  48. <br />
  49. <a rel="dct:publisher" href="https://forgefed.org/">
  50. <span property="dct:title">The ForgeFed team</span>
  51. </a>
  52. has dedicated all copyright and related and neighboring
  53. rights to
  54. <span property="dct:title">ForgeFed</span> to the public domain
  55. worldwide.
  56. </p>
  57. <p>❤ Copying is an act of love. Please copy, reuse and share!</p>
  58. <p>
  59. Site generated with
  60. <a class="footer__link" href="https://www.getzola.org">Zola</a>
  61. and
  62. <a class="footer__link" href="https://tabatkins.github.io/bikeshed">Bikeshed</a>.
  63. </p>
  64. <p>
  65. <a href="https://liberapay.com/ForgeFed/donate">
  66. <img alt="Donate using Liberapay"
  67. src="https://liberapay.com/assets/widgets/donate.svg" />
  68. </a>
  69. <a href="https://opencollective.com/forgefed">
  70. <img alt="Donate using Open Collective"
  71. src="/img/open_collective.svg" />
  72. </a>
  73. </p>
  74. </footer>
  75. <script>
  76. let html = document.documentElement
  77. let siteNav = document.getElementById("site-nav")
  78. function currentColorScheme() {
  79. if (html.classList.contains("dark")) return "dark"
  80. if (html.classList.contains("light")) return "light"
  81. if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark"
  82. return "light" // default
  83. }
  84. let themeSelectionElement = document.createElement("a")
  85. themeSelectionElement.className = "nav__link"
  86. themeSelectionElement.id="theme-selector"
  87. themeSelectionElement.onclick=toggleTheme
  88. themeSelectionElement.innerText = (currentColorScheme() == "dark") ? "🌞" : "🌑"
  89. siteNav.appendChild(themeSelectionElement)
  90. function toggleTheme() {
  91. if (currentColorScheme() == "light") {
  92. html.classList.remove("light")
  93. html.classList.add("dark")
  94. themeSelectionElement.innerText = "🌞"
  95. sessionStorage.setItem("theme", "dark")
  96. } else {
  97. html.classList.remove("dark")
  98. html.classList.add("light")
  99. themeSelectionElement.innerText = "🌑"
  100. sessionStorage.setItem("theme", "light")
  101. }
  102. }
  103. </script>
  104. </body>
  105. </html>