SFBadSteben/schachfreunde-badsteben
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: adjust typography and layout styles in impressum, footer, and navbar

Browse Source 
Refined text sizes and spacing across components (`impressum.php`, `footer.php`, `navbar.php`) for improved consistency. Added custom styles for headings and impressum-specific elements in `input.css`.
This commit is contained in:
Tobias Feigel
2025-07-13 13:50:04 +02:00
parent 5f37dfceef
commit 2b616ab182
4 changed files with 33 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/snippets/footer.php
+5 -5
View File
@@ -73,19 +73,19 @@
d="M193.8 49.42c3.74-11.08 9.7-23.25 17.37-32.37-6.4.81-13.75 3.25-18.55 7.66 6.44 8.58-3.49 15.31-15.92 13.33-13.29-2.12-21.73-11.06-6.46-18.18-2.49-7.46-6.56-13.66-11.3-19.85-4.74 6.19-8.82 12.39-11.3 19.85 15.27 7.12 6.82 16.06-6.46 18.18-12.43 1.98-22.36-4.75-15.92-13.33-4.8-4.41-12.16-6.84-18.55-7.66 7.66 9.11 13.62 21.29 17.36 32.36 22.99-4.42 46.76-4.42 69.74 0Zm-8.37-13.12c-2.6.51-5.59.56-8.74.06-3.54-.56-6.74-1.61-9.24-2.98 8.4.19 14.41-4.27 5.89-10.8 2.65-4.43 6.15-7.84 10.06-11.14 2.16 4.65 3.9 9.2 4.44 14.34-8.86 1.97-7.67 6.99-2.42 10.52Zm-35.03-2.92c-2.5 1.37-5.69 2.42-9.24 2.98-3.15.5-6.14.45-8.74-.06 5.25-3.53 6.43-8.54-2.42-10.52.54-5.14 2.29-9.7 4.45-14.34 3.92 3.3 7.41 6.71 10.06 11.14-8.51 6.52-2.51 10.99 5.89 10.8Z"/> d="M193.8 49.42c3.74-11.08 9.7-23.25 17.37-32.37-6.4.81-13.75 3.25-18.55 7.66 6.44 8.58-3.49 15.31-15.92 13.33-13.29-2.12-21.73-11.06-6.46-18.18-2.49-7.46-6.56-13.66-11.3-19.85-4.74 6.19-8.82 12.39-11.3 19.85 15.27 7.12 6.82 16.06-6.46 18.18-12.43 1.98-22.36-4.75-15.92-13.33-4.8-4.41-12.16-6.84-18.55-7.66 7.66 9.11 13.62 21.29 17.36 32.36 22.99-4.42 46.76-4.42 69.74 0Zm-8.37-13.12c-2.6.51-5.59.56-8.74.06-3.54-.56-6.74-1.61-9.24-2.98 8.4.19 14.41-4.27 5.89-10.8 2.65-4.43 6.15-7.84 10.06-11.14 2.16 4.65 3.9 9.2 4.44 14.34-8.86 1.97-7.67 6.99-2.42 10.52Zm-35.03-2.92c-2.5 1.37-5.69 2.42-9.24 2.98-3.15.5-6.14.45-8.74-.06 5.25-3.53 6.43-8.54-2.42-10.52.54-5.14 2.29-9.7 4.45-14.34 3.92 3.3 7.41 6.71 10.06 11.14-8.51 6.52-2.51 10.99 5.89 10.8Z"/>
</svg> </svg>
</a> </a>
<ul class="text-base text-center sm:flex items-center justify-center gap-6 lg:gap-10 xl:gap-14 transition-all duration-500"> <ul class="text-l lg:text-xl text-center sm:flex items-center justify-center gap-6 lg:gap-10 xl:gap-14 transition-all duration-500">
<li><a href="/impressum" <li><a href="/impressum"
class="font-sans text-base text-white hover:text-sf_gelb-500">Impressum</a> class="font-sans text-white hover:text-sf_gelb-500">Impressum</a>
</li> </li>
<li><a href="/datenschutz" <li><a href="/datenschutz"
class="font-sans text-base text-white hover:text-sf_gelb-500">Datenschutzerklärung</a> class="font-sans text-white hover:text-sf_gelb-500">Datenschutzerklärung</a>
</li> </li>
<li><a href="/satzung" <li><a href="/satzung"
class="font-sans text-base text-white hover:text-sf_gelb-500">Satzung</a> class="font-sans text-white hover:text-sf_gelb-500">Satzung</a>
</li> </li>
<li> <li>
<a href="https://archiv.schachfreunde-badsteben.de/" <a href="https://archiv.schachfreunde-badsteben.de/"
class="font-sans text-base text-white hover:text-sf_gelb-500" class="font-sans text-white hover:text-sf_gelb-500"
target="_blank">Archiv</a> target="_blank">Archiv</a>
</li> </li>
</ul> </ul>
site/snippets/navbar.php
+16 -16
View File
@@ -74,15 +74,15 @@
</svg> </svg>
</div> </div>
<!-- Desktop Menu (Mitte) --> <!-- Desktop Menu (Mitte) -->
<div class="hidden md:block"> <div class="text-l lg:text-xl hidden md:block ">
<div class="flex items-baseline space-x-4"> <div class="flex items-baseline space-x-4">
<!-- Einfacher Menüpunkt --><a href="/" <!-- Einfacher Menüpunkt --><a href="/"
class="font-bold px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600">Home</a> class="font-bold px-3 py-2 rounded-md text-gray-700 transition-colors hover:text-blue-600">Home</a>
<!-- Einfacher Menüpunkt --><a href="/news" <!-- Einfacher Menüpunkt --><a href="/news"
class="font-bold px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600">News</a> class="font-bold px-3 py-2 rounded-md text-gray-700 transition-colors hover:text-blue-600">News</a>
<!-- Dropdown Menü 1 --> <!-- Dropdown Menü 1 -->
<div class="group relative"> <div class="group relative">
<button class="flex font-bold items-center px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600"> <button class="flex font-bold items-center px-3 py-2 rounded-md text-gray-700 transition-colors hover:text-blue-600">
Spielbetrieb Spielbetrieb
<svg class="ml-1 h-4 w-4 transform transition-transform group-hover:rotate-180" <svg class="ml-1 h-4 w-4 transform transition-transform group-hover:rotate-180"
fill="currentColor" viewBox="0 0 20 20"> fill="currentColor" viewBox="0 0 20 20">
@@ -94,17 +94,17 @@
<div class="invisible absolute left-0 z-10 mt-2 w-48 rounded-md bg-white opacity-0 shadow-lg transition-all duration-200 group-hover:visible group-hover:opacity-100"> <div class="invisible absolute left-0 z-10 mt-2 w-48 rounded-md bg-white opacity-0 shadow-lg transition-all duration-200 group-hover:visible group-hover:opacity-100">
<div class="py-1"> <div class="py-1">
<a href="https://www.ligamanager.schachbund-bayern.de/hof/ergebnisse/spielplan.htm?ligaId=2391" <a href="https://www.ligamanager.schachbund-bayern.de/hof/ergebnisse/spielplan.htm?ligaId=2391"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" class="block px-4 py-2 text-m text-gray-700 hover:bg-gray-100"
target="_blank">A-Klasse</a> target="_blank">A-Klasse</a>
<a href="https://www.ligamanager.schachbund-bayern.de/hof/ergebnisse/spielplan.htm?ligaId=2392" <a href="https://www.ligamanager.schachbund-bayern.de/hof/ergebnisse/spielplan.htm?ligaId=2392"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" class="block px-4 py-2 text-m text-gray-700 hover:bg-gray-100"
target="_blank">B-Klasse</a> target="_blank">B-Klasse</a>
</div> </div>
</div> </div>
</div> </div>
<!-- Dropdown Menü 2 --> <!-- Dropdown Menü 2 -->
<div class="group relative"> <div class="group relative">
<button class="flex font-bold items-center px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600"> <button class="flex font-bold items-center px-3 py-2 rounded-md text-gray-700 transition-colors hover:text-blue-600">
Über uns Über uns
<svg class="ml-1 h-4 w-4 transform transition-transform group-hover:rotate-180" <svg class="ml-1 h-4 w-4 transform transition-transform group-hover:rotate-180"
fill="currentColor" viewBox="0 0 20 20"> fill="currentColor" viewBox="0 0 20 20">
@@ -130,9 +130,9 @@
</div> </div>
</div> </div>
<!-- Einfacher Menüpunkt --><a href="/termine" <!-- Einfacher Menüpunkt --><a href="/termine"
class="font-bold px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600">Termine</a> class="font-bold px-3 py-2 rounded-md text-gray-700 transition-colors hover:text-blue-600">Termine</a>
<!-- Einfacher Menüpunkt --><a href="/kontakt" <!-- Einfacher Menüpunkt --><a href="/kontakt"
class="font-bold px-3 py-2 rounded-md text-base text-gray-700 transition-colors hover:text-blue-600">Kontakt</a> class="font-bold px-3 py-2 rounded-md text-gray-700 transition-colors hover:text-blue-600">Kontakt</a>
</div> </div>
</div> </div>
<!-- Social Media Icons (Rechts) - Nur Desktop --> <!-- Social Media Icons (Rechts) - Nur Desktop -->
@@ -181,16 +181,16 @@
</div> </div>
<!-- Mobile Menu --> <!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden"> <div id="mobile-menu" class="hidden md:hidden">
<div class="space-y-1 border-t bg-white px-2 pt-2 pb-3 sm:px-3"> <div class="text-2xl space-y-1 border-t bg-white px-2 pt-2 pb-3 sm:px-3">
<!-- Einfacher Menüpunkt --> <!-- Einfacher Menüpunkt -->
<a href="/" <a href="/"
class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600">Home</a> class="block rounded-md px-3 py-2 font-medium text-gray-700 hover:text-blue-600">Home</a>
<!-- Einfacher Menüpunkt --> <!-- Einfacher Menüpunkt -->
<a href="/news" <a href="/news"
class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600">News</a> class="block rounded-md px-3 py-2 font-medium text-gray-700 hover:text-blue-600">News</a>
<!-- Mobile Dropdown 1 --> <!-- Mobile Dropdown 1 -->
<div class="relative"> <div class="relative">
<button class="mobile-dropdown-btn flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-base font-medium text-gray-700 hover:text-blue-600"> <button class="mobile-dropdown-btn flex w-full items-center justify-between rounded-md px-3 py-2 text-left font-medium text-gray-700 hover:text-blue-600">
Spielbetrieb Spielbetrieb
<svg class="mobile-dropdown-arrow h-4 w-4 transform transition-transform" <svg class="mobile-dropdown-arrow h-4 w-4 transform transition-transform"
fill="currentColor" viewBox="0 0 20 20"> fill="currentColor" viewBox="0 0 20 20">
@@ -208,7 +208,7 @@
</div> </div>
<!-- Mobile Dropdown 2 --> <!-- Mobile Dropdown 2 -->
<div class="relative"> <div class="relative">
<button class="mobile-dropdown-btn flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-base font-medium text-gray-700 hover:text-blue-600"> <button class="mobile-dropdown-btn flex w-full items-center justify-between rounded-md px-3 py-2 text-left font-medium text-gray-700 hover:text-blue-600">
Über uns Über uns
<svg class="mobile-dropdown-arrow h-4 w-4 transform transition-transform" <svg class="mobile-dropdown-arrow h-4 w-4 transform transition-transform"
fill="currentColor" viewBox="0 0 20 20"> fill="currentColor" viewBox="0 0 20 20">
@@ -233,9 +233,9 @@
</div> </div>
<!-- Einfache Menüpunkte --> <!-- Einfache Menüpunkte -->
<a href="/termine" <a href="/termine"
class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600">Termine</a> class="block rounded-md px-3 py-2 font-medium text-gray-700 hover:text-blue-600">Termine</a>
<a href="/kontakt" <a href="/kontakt"
class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-600">Kontakt</a> class="block rounded-md px-3 py-2 font-medium text-gray-700 hover:text-blue-600">Kontakt</a>
<!-- Social Media Icons im Mobile Menu --> <!-- Social Media Icons im Mobile Menu -->
<div class="mt-4 border-t pt-4"> <div class="mt-4 border-t pt-4">
<div class="px-3 py-2"> <div class="px-3 py-2">
site/templates/impressum.php
+3 -3
View File
@@ -1,8 +1,8 @@
<?php snippet('layout', slots: true) ?> <?php snippet('layout', slots: true) ?>
<section class="bg-sf_grau-50 py-24"> <section class="impressum bg-sf_grau-50 py-24">
<div class="impressum lg:px-8 max-w-7xl mx-auto px-4 sm:px-6"> <div class="lg:px-8 max-w-7xl mx-auto px-4 sm:px-6">
<h1 class="text-3xl">Impressum</h1> <h1>Impressum</h1>
</div> </div>
<div class="grid grid-cols-1 lg:grid lg:grid-cols-2 lg:px-8 max-w-7xl mx-auto px-4 sm:px-6"> <div class="grid grid-cols-1 lg:grid lg:grid-cols-2 lg:px-8 max-w-7xl mx-auto px-4 sm:px-6">
<div id="lc-text"></div> <div id="lc-text"></div>
src/css/input.css
+9 -1
View File
@@ -43,7 +43,7 @@
@layer components { @layer components {
p { p {
@apply text-2xl font-serif; @apply text-xl font-serif;
} }
h1 { h1 {
@@ -54,8 +54,16 @@
@apply text-3xl font-sans py-4; @apply text-3xl font-sans py-4;
} }
h3 {
@apply text-2xl font-sans font-bold py-2;
}
.blockpage p { .blockpage p {
@apply py-4; @apply py-4;
} }
.impressum h2 {
@apply text-3xl pt-12;
}
} }