From 64f48f82c049e110b4f35f3ae83ab3d016817cc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Tue, 17 Feb 2026 18:54:09 +0100 Subject: [PATCH] feat: Implement light theme, mobile menu, font and image fallback --- assets/css/tailwind.css | 34 +++++++++++++++++++++++++-- assets/js/main.js | 50 ++++++++++++++++++++++++++++++++++++++++ default.hbs | 7 ++++-- index.hbs | 12 +++++----- partials/footer.hbs | 10 ++++---- partials/header.hbs | 27 +++++++++++++++++----- partials/mobile-menu.hbs | 12 ++++++++++ post.hbs | 16 ++++++++----- 8 files changed, 141 insertions(+), 27 deletions(-) create mode 100644 partials/mobile-menu.hbs diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css index 481a7db..fdc73f6 100644 --- a/assets/css/tailwind.css +++ b/assets/css/tailwind.css @@ -1,6 +1,16 @@ @import "tailwindcss"; @theme { + /* Default Custom Properties (Dark Theme) */ + --bg-primary: var(--color-gray-900); + --bg-secondary: var(--color-gray-800); + --bg-tertiary: var(--color-gray-700); + --text-primary: var(--color-gray-100); + --text-secondary: var(--color-gray-400); + --text-tertiary: var(--color-gray-300); + --brand-primary: var(--color-indigo-600); + --brand-secondary: var(--color-indigo-700); + --color-gray-900: #1a1a1a; --color-gray-800: #2b2b2b; --color-gray-700: #3c3c3c; @@ -10,12 +20,31 @@ --color-gray-100: #f5f5f5; --color-indigo-600: #4f46e5; --color-indigo-700: #4338ca; - --font-family-sans: "Inter", sans-serif; + + /* Font Families */ + --font-family-body: "Montserrat", sans-serif; + --font-family-heading: "Playfair Display", serif; +} + +/* Light Theme Overrides (outside @theme block) */ +html[data-theme='light'] { + --bg-primary: var(--color-gray-100); + --bg-secondary: var(--color-gray-200); + --bg-tertiary: var(--color-gray-300); + --text-primary: var(--color-gray-900); + --text-secondary: var(--color-gray-600); + --text-tertiary: var(--color-gray-700); } @layer base { body { - @apply bg-gray-900 text-gray-100; + background-color: var(--bg-primary); + color: var(--text-primary); + font-family: var(--font-family-body); /* Apply default body font */ + } + + h1, h2, h3, h4, h5, h6 { + font-family: var(--font-family-heading); /* Apply heading font */ } } @@ -46,3 +75,4 @@ #lightbox.show { animation: fadeIn 0.3s ease-out forwards; } + diff --git a/assets/js/main.js b/assets/js/main.js index 727df23..616d9b9 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -2,6 +2,10 @@ document.addEventListener('DOMContentLoaded', () => { console.log('Palina theme loaded!'); + const htmlElement = document.documentElement; + // Remove 'hidden' class from html to prevent FOUC + htmlElement.classList.remove('hidden'); + // Staggered fade-in animation for post grid const gridItems = document.querySelectorAll('.post-grid-item'); gridItems.forEach((item, index) => { @@ -40,4 +44,50 @@ document.addEventListener('DOMContentLoaded', () => { } }); } + + // Theme Switcher + const themeToggle = document.getElementById('theme-toggle'); + // const htmlElement = document.documentElement; // Already defined above + + const currentTheme = localStorage.getItem('theme'); + if (currentTheme) { + htmlElement.setAttribute('data-theme', currentTheme); + } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) { + // Default to light theme if system preference is light + htmlElement.setAttribute('data-theme', 'light'); + } + + if (themeToggle) { + themeToggle.addEventListener('click', () => { + let newTheme = htmlElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'; + htmlElement.setAttribute('data-theme', newTheme); + localStorage.setItem('theme', newTheme); + }); + } + + // Mobile Menu + const mobileMenuToggle = document.getElementById('mobile-menu-toggle'); + const mobileMenuClose = document.getElementById('mobile-menu-close'); + const mobileMenu = document.getElementById('mobile-menu'); + + if (mobileMenuToggle && mobileMenu && mobileMenuClose) { + mobileMenuToggle.addEventListener('click', () => { + mobileMenu.classList.remove('-translate-x-full'); + mobileMenu.classList.add('translate-x-0'); + }); + + mobileMenuClose.addEventListener('click', () => { + mobileMenu.classList.remove('translate-x-0'); + mobileMenu.classList.add('-translate-x-full'); + }); + + // Close menu if a link is clicked + const mobileNavLinks = mobileMenu.querySelectorAll('a'); + mobileNavLinks.forEach(link => { + link.addEventListener('click', () => { + mobileMenu.classList.remove('translate-x-0'); + mobileMenu.classList.add('-translate-x-full'); + }); + }); + } }); diff --git a/default.hbs b/default.hbs index c18c0ca..edbfcd9 100644 --- a/default.hbs +++ b/default.hbs @@ -1,13 +1,14 @@ - + {{meta_title}} + {{ghost_head}} - +
{{> header}} @@ -19,6 +20,8 @@ {{> footer}}
+ {{> mobile-menu}} +