layout.html.php 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <?php if (!defined('HTMLY')) die('HTMLy'); ?>
  2. <!DOCTYPE html>
  3. <html lang="<?php echo blog_language();?>">
  4. <head>
  5. <?php echo head_contents();?>
  6. <?php echo $metatags;?>
  7. <link href="<?php echo theme_path();?>css/stylesheet.css" rel="stylesheet">
  8. <meta name="theme-color" content="#2e2e33">
  9. <meta name="msapplication-TileColor" content="#2e2e33">
  10. <noscript>
  11. <style>
  12. #theme-toggle,
  13. .top-link {
  14. display: none;
  15. }
  16. </style>
  17. <style>
  18. @media (prefers-color-scheme: dark) {
  19. :root {
  20. --theme: rgb(29, 30, 32);
  21. --entry: rgb(46, 46, 51);
  22. --primary: rgb(218, 218, 219);
  23. --secondary: rgb(155, 156, 157);
  24. --tertiary: rgb(65, 66, 68);
  25. --content: rgb(196, 196, 197);
  26. --code-block-bg: rgb(46, 46, 51);
  27. --code-bg: rgb(55, 56, 62);
  28. --border: rgb(51, 51, 51);
  29. }
  30. .list {
  31. background: var(--theme);
  32. }
  33. .list:not(.dark)::-webkit-scrollbar-track {
  34. background: 0 0;
  35. }
  36. .list:not(.dark)::-webkit-scrollbar-thumb {
  37. border-color: var(--theme);
  38. }
  39. }
  40. </style>
  41. </noscript>
  42. </head>
  43. <body class="<?php if (is_index() || isset($is_profile)):?>list<?php endif;?> dark" id="top">
  44. <?php if (facebook()) { echo facebook(); } ?>
  45. <?php if (login()) { toolbar(); } ?>
  46. <script>
  47. if (localStorage.getItem("pref-theme") === "dark") {
  48. document.body.classList.add('dark');
  49. } else if (localStorage.getItem("pref-theme") === "light") {
  50. document.body.classList.remove('dark')
  51. }
  52. </script>
  53. <header class="header">
  54. <nav class="nav">
  55. <div class="logo">
  56. <a href="<?php echo site_url();?>" title="<?php echo blog_title();?>"><?php echo blog_title();?></a>
  57. <div class="logo-switches">
  58. <button id="theme-toggle" title="Mode">
  59. <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  60. <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
  61. </svg>
  62. <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  63. <circle cx="12" cy="12" r="5"></circle>
  64. <line x1="12" y1="1" x2="12" y2="3"></line>
  65. <line x1="12" y1="21" x2="12" y2="23"></line>
  66. <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
  67. <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
  68. <line x1="1" y1="12" x2="3" y2="12"></line>
  69. <line x1="21" y1="12" x2="23" y2="12"></line>
  70. <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
  71. <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
  72. </svg>
  73. </button>
  74. </div>
  75. </div>
  76. <div id="menu-wrapper">
  77. <?php echo menu('primary-menu');?>
  78. </div>
  79. </nav>
  80. </header>
  81. <main class="main">
  82. <?php echo content();?>
  83. </main>
  84. <footer class="footer">
  85. <span>
  86. <?php echo copyright();?>
  87. <br><span>Based on <a href="https://github.com/adityatelange/hugo-PaperMod/" rel="nofollow" target="_blank">Papermod</a></span>
  88. </span>
  89. </footer>
  90. <a href="#top" aria-label="go to top" title="Go to Top" class="top-link" id="top-link">
  91. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
  92. <path d="M12 6H0l6-6z"></path>
  93. </svg>
  94. </a>
  95. <script>
  96. let menu = document.getElementById('menu')
  97. if (menu) {
  98. menu.scrollLeft = localStorage.getItem("menu-scroll-position");
  99. menu.onscroll = function () {
  100. localStorage.setItem("menu-scroll-position", menu.scrollLeft);
  101. }
  102. }
  103. document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  104. anchor.addEventListener("click", function (e) {
  105. e.preventDefault();
  106. var id = this.getAttribute("href").substr(1);
  107. if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  108. document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
  109. behavior: "smooth"
  110. });
  111. } else {
  112. document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
  113. }
  114. if (id === "top") {
  115. history.replaceState(null, null, " ");
  116. } else {
  117. history.pushState(null, null, `#${id}`);
  118. }
  119. });
  120. });
  121. </script>
  122. <script>
  123. var mybutton = document.getElementById("top-link");
  124. window.onscroll = function () {
  125. if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
  126. mybutton.style.visibility = "visible";
  127. mybutton.style.opacity = "1";
  128. } else {
  129. mybutton.style.visibility = "hidden";
  130. mybutton.style.opacity = "0";
  131. }
  132. };
  133. </script>
  134. <script>
  135. document.getElementById("theme-toggle").addEventListener("click", () => {
  136. if (document.body.className.includes("dark")) {
  137. document.body.classList.remove('dark');
  138. localStorage.setItem("pref-theme", 'light');
  139. } else {
  140. document.body.classList.add('dark');
  141. localStorage.setItem("pref-theme", 'dark');
  142. }
  143. })
  144. </script>
  145. <?php if (analytics()): ?><?php echo analytics() ?><?php endif; ?>
  146. </body>
  147. </html>