1<!DOCTYPE html>
2<html lang="{{ site.lang | default: "en-US" }}">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7
8 {% seo %}
9
10 <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
11 <link id="fa-stylesheet" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css">
12
13 <!-- Favicon -->
14 <link rel="icon" type="image/x-icon" href="{{ '/assets/favicon.ico' | relative_url }}">
15 <link rel="shortcut icon" type="image/x-icon" href="{{ '/assets/favicon.ico' | relative_url }}">
16
17 <!-- Theme Toggle - inline script to prevent flash of wrong theme -->
18 <script>
19 (function() {
20 function getSystemPreference() {
21 return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
22 ? 'dark'
23 : 'light';
24 }
25 function getTheme() {
26 try {
27 const stored = localStorage.getItem('theme');
28 if (stored === 'dark' || stored === 'light') {
29 return stored;
30 }
31 } catch (e) {}
32 return getSystemPreference();
33 }
34 const theme = getTheme();
35 if (theme === 'dark') {
36 document.documentElement.setAttribute('data-theme', 'dark');
37 }
38 })();
39 </script>
40 </head>
41 <body>
42
43 {%- include header.html -%}
44
45 <main class="page-content" aria-label="Content">
46 <div class="wrapper">
47 {{ content }}
48 </div>
49 {%- include footer.html -%}
50 </main>
51
52 <script src="{{ '/assets/js/theme-toggle.js' | relative_url }}"></script>
53 </body>
54
55</html>
56