|
12 | 12 | <link rel="apple-touch-icon" href="{{ '/assets/images/apple-touch-icon.png' | url }}" /> |
13 | 13 | <meta name="generator" content="{{ eleventy.generator }}" /> |
14 | 14 | </head> |
15 | | - <body class="flex flex-col min-h-screen font-montserrat text-white bg-[url('/assets/images/background.jpg')] bg-cover bg-center bg-fixed"> |
| 15 | + <body class="flex flex-col min-h-screen font-montserrat text-[var(--text-color)] bg-[var(--bg-color)] bg-[url('/assets/images/background.jpg')] bg-cover bg-center bg-fixed bg-blend-multiply"> |
| 16 | + <!-- Ribbon --> |
| 17 | + <a class="github-fork-ribbon right-top" href="https://github.com/brisbanesocialchess/brisbanesocialchess.github.io" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a> |
16 | 18 | <!-- Background overlay --> |
17 | | - <div class="flex-grow min-h-[calc(100vh-85px)] bg-black/65 flex justify-center p-12 max-md:p-4"> |
18 | | - <main class="max-w-[620px] w-[calc(100%-1rem)] bg-black/55 p-4 rounded-xl shadow-[0_0_50px_rgba(0,0,0,0.6)] flex flex-col gap-6"> |
19 | | - <!-- Ribbon --> |
20 | | - <a |
21 | | - class="github-fork-ribbon right-top" |
22 | | - href="https://github.com/brisbanesocialchess/brisbanesocialchess.github.io" |
23 | | - data-ribbon="Fork me on GitHub" |
24 | | - title="Fork me on GitHub" |
25 | | - >Fork me on GitHub</a |
| 19 | + <div class="flex-grow min-h-[calc(100vh-85px)] bg-[var(--bg-overlay)] flex justify-center p-12 max-md:p-4"> |
| 20 | + <!-- Container --> |
| 21 | + <main class="relative max-w-[620px] w-[calc(100%-1rem)] bg-[var(--card-bg)] p-4 rounded-xl shadow-[0_0_50px_rgba(0,0,0,0.6)] flex flex-col gap-6"> |
| 22 | + <!-- Switch --> |
| 23 | + <button |
| 24 | + class="theme-toggle absolute top-4 left-4 cursor-pointer" |
| 25 | + id="theme-toggle" |
| 26 | + title="Toggle light & dark theme" |
| 27 | + aria-label="Toggle theme" |
26 | 28 | > |
| 29 | + <svg class="sun-and-moon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24"> |
| 30 | + <mask class="moon" id="moon-mask"> |
| 31 | + <rect x="0" y="0" width="100%" height="100%" fill="white" /> |
| 32 | + <circle cx="24" cy="10" r="6" fill="black" /> |
| 33 | + </mask> |
| 34 | + <circle class="sun" cx="12" cy="12" r="6" mask="url(#moon-mask)" fill="currentColor" /> |
| 35 | + <g class="sun-beams" stroke="currentColor"> |
| 36 | + <line x1="12" y1="1" x2="12" y2="3" /> |
| 37 | + <line x1="12" y1="21" x2="12" y2="23" /> |
| 38 | + <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /> |
| 39 | + <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" /> |
| 40 | + <line x1="1" y1="12" x2="3" y2="12" /> |
| 41 | + <line x1="21" y1="12" x2="23" y2="12" /> |
| 42 | + <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /> |
| 43 | + <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" /> |
| 44 | + </g> |
| 45 | + </svg> |
| 46 | + </button> |
27 | 47 | <!-- Logo --> |
28 | 48 | <div class="text-center"> |
29 | 49 | <a href="{{ '/' | url }}"> |
|
41 | 61 | <!-- Top Navigation --> |
42 | 62 | <nav> |
43 | 63 | <div class="flex items-center md:hidden"> |
44 | | - <button id="menu-toggle" type="button" aria-expanded="false" class="text-gray-300 hover:text-white cursor-pointer"> |
| 64 | + <button id="menu-toggle" type="button" aria-expanded="false" class="cursor-pointer"> |
45 | 65 | <svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="2" |
46 | 66 | viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
47 | 67 | <path stroke-linecap="round" stroke-linejoin="round" |
48 | 68 | d="M4 6h16M4 12h16M4 18h16"></path> |
49 | 69 | </svg> |
50 | 70 | </button> |
51 | | - <span class="flex-1 text-center text-white text-md font-bold"> |
| 71 | + <span class="flex-1 text-center text-md font-bold"> |
52 | 72 | Brisbane Social Chess |
53 | 73 | </span> |
54 | 74 | </div> |
55 | 75 | <div id="menu" |
56 | 76 | class="flex-wrap hidden flex-col items-center justify-center space-y-2 mt-4 text-center text-sm md:flex md:flex-row md:space-y-0 md:space-x-2 md:mt-0"> |
57 | 77 | {% for link in navigation.navLinks -%} |
58 | 78 | <a href="{{ link.url | url }}" |
59 | | - class="block w-full py-2 rounded hover:bg-white/10 hover:text-white |
| 79 | + class="block w-full py-2 rounded hover:bg-white/10 |
60 | 80 | md:inline-block md:w-auto md:py-0 md:p-2 |
61 | | - {% if page.url == link.url %}text-[#849eff] hover:text-[#849eff] font-bold{% else %} text-gray-300{% endif %}"> |
| 81 | + {% if page.url == link.url %}text-[#849eff] hover:text-[#849eff] font-bold{% else %}{% endif %}"> |
62 | 82 | {{ link.text }} |
63 | 83 | </a> |
64 | 84 | {%- endfor %} |
|
80 | 100 | {% endfor %} |
81 | 101 | </div> |
82 | 102 | <!-- Footer --> |
83 | | - <footer class="h-[85px] text-center p-8 pb-20 md:pb-8 text-sm text-white/60 flex flex-col items-center justify-center gap-3"> |
| 103 | + <footer class="h-[85px] text-center p-8 pb-20 md:pb-8 text-sm flex flex-col items-center justify-center gap-3"> |
84 | 104 | <div class="hidden md:flex space-x-4"> |
85 | 105 | {% for social in site.socials %} |
86 | 106 | {{ social_macro.social_link(social, "hover:opacity-80 transition") }} |
|
0 commit comments