valknar/palina-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement light theme, mobile menu, font and image fallback

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-17 18:54:09 +01:00
parent a781249c1a
commit 64f48f82c0
8 changed files with 141 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
partials/footer.hbs
View File

@@ -1,21 +1,21 @@
<footer class="text-gray-400 bg-gray-900 body-font">
<footer class="text-[var(--text-secondary)] bg-[var(--bg-primary)] body-font">
<div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
<a href="{{@site.url}}" class="flex title-font font-medium items-center md:justify-start justify-center text-white">
<a href="{{@site.url}}" class="flex title-font font-medium items-center md:justify-start justify-center text-[var(--text-primary)]">
<span class="ml-3 text-xl">{{@site.title}}</span>
</a>
<p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-800 sm:py-2 sm:mt-0 mt-4">
<p class="text-sm text-[var(--text-secondary)] sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-[var(--bg-secondary)] sm:py-2 sm:mt-0 mt-4">
© {{date format="YYYY"}} {{@site.title}} — Powered by Ghost
</p>
<span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
{{#if @site.facebook}}
<a href="{{@site.facebook_url}}" class="text-gray-500 hover:text-white transition duration-200">
<a href="{{@site.facebook_url}}" class="text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition duration-200">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
{{/if}}
{{#if @site.twitter}}
<a href="{{@site.twitter_url}}" class="ml-3 text-gray-500 hover:text-white transition duration-200">
<a href="{{@site.twitter_url}}" class="ml-3 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition duration-200">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
</svg>

27
partials/header.hbs
View File

@@ -1,10 +1,25 @@
<header class="text-gray-100 body-font shadow-lg bg-gray-900">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a href="{{@site.url}}" class="flex title-font font-medium items-center text-white mb-4 md:mb-0">
<header class="text-[var(--text-primary)] body-font shadow-lg bg-[var(--bg-primary)]">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center justify-between">
<a href="{{@site.url}}" class="flex title-font font-medium items-center text-[var(--text-primary)] mb-4 md:mb-0">
<span class="ml-3 text-xl">{{@site.title}}</span>
</a>
<nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
{{navigation type="primary"}}
</nav>
<div class="flex items-center">
<nav class="hidden md:flex flex-wrap items-center text-base justify-center">
{{navigation type="primary"}}
<button id="theme-toggle" class="ml-4 p-2 rounded-full bg-[var(--bg-secondary)] text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.178 1.043l-4.243 4.243a.75.75 0 01-1.061 0L.952 2.761a.75.75 0 011.06-1.06l3.52 3.52 3.712-3.712a.75.75 0 011.042-.178zM16.292 7.625a.75.75 0 01.132 1.056l-3.903 4.171c.466 1.102.615 2.373.13 3.673-.393 1.077-.665 2.164-.707 2.296-.135.347-.216.593-.216.593H12.75a.75.75 0 010-1.5h.084c.007-.022.036-.094.09-.253.307-.872.502-1.78.544-2.701.328-1.55-.145-2.915-.756-3.83A6.064 6.064 0 0015.6 9a.75.75 0 01.692-.375zM12.75 22.5c-2.935 0-5.696-1.07-7.795-2.997a.75.75 0 011.061-1.061 9 9 0 0013.868 0 .75.75 0 011.06-1.061C18.446 21.43 15.685 22.5 12.75 22.5z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M15.6 13.5a3.6 3.6 0 11-7.2 0 3.6 3.6 0 017.2 0z" clip-rule="evenodd" />
</svg>
</button>
</nav>
<button id="mobile-menu-toggle" class="md:hidden p-2 rounded-full bg-[var(--bg-secondary)] text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</div>
</header>

12
partials/mobile-menu.hbs Normal file
View File

@@ -0,0 +1,12 @@
<div id="mobile-menu" class="fixed inset-0 z-40 bg-[var(--bg-primary)] transform -translate-x-full transition-transform duration-300 ease-in-out md:hidden">
<div class="flex justify-end p-5">
<button id="mobile-menu-close" class="p-2 rounded-full bg-[var(--bg-secondary)] text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<nav class="flex flex-col items-center justify-center h-full space-y-8 text-2xl">
{{navigation type="primary"}}
</nav>
</div>