till/kuehlfinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header: Unsplash-Bildmarke (Pawel Czerwinski) neben Logo + mobile Nav scrollbar (kein Overflow auf Phones); Credit ergänzt

Browse Source
This commit is contained in:
Till Heidrich
2026-06-28 17:05:43 +00:00
parent b84feefc5a
commit 568fffdf13
3 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Base.astro
+5 -1
View File
@@ -19,8 +19,12 @@ import '../styles/global.css';
{jsonld && <script type="application/ld+json" set:html={JSON.stringify(jsonld)} />} {jsonld && <script type="application/ld+json" set:html={JSON.stringify(jsonld)} />}
</head> </head>
<body> <body>
<style is:global>
.brand{display:inline-flex;align-items:center;gap:.5rem}
.brandmark{border-radius:8px;object-fit:cover;flex:0 0 auto;box-shadow:0 1px 2px rgba(20,40,60,.18)}
</style>
<header class="site"><div class="wrap bar"> <header class="site"><div class="wrap bar">
<a class="brand" href="/">Kühl<b>finder</b></a> <a class="brand" href="/"><img class="brandmark" src="https://images.unsplash.com/photo-1583444012262-00185bf33cc6?w=120&h=120&fit=crop&q=70&auto=format" alt="" width="30" height="30" loading="eager" decoding="async" />Kühl<b>finder</b></a>
<nav> <nav>
<a href="/geraete">Geräte</a> <a href="/geraete">Geräte</a>
<a href="/rechner">Rechner</a> <a href="/rechner">Rechner</a>
src/pages/bildnachweis.astro
+2
View File
@@ -5,6 +5,8 @@ const credits = [
photoUrl:'https://unsplash.com/photos/a-white-wall-with-three-air-conditioners-on-it-JkHSdaYRiUI', title:'Air Conditioning'}, photoUrl:'https://unsplash.com/photos/a-white-wall-with-three-air-conditioners-on-it-JkHSdaYRiUI', title:'Air Conditioning'},
{use:'Startseite – Alarm-Sektion', author:'Andrey Matveev', handle:'@zelebb', authorUrl:'https://unsplash.com/@zelebb', {use:'Startseite – Alarm-Sektion', author:'Andrey Matveev', handle:'@zelebb', authorUrl:'https://unsplash.com/@zelebb',
photoUrl:'https://unsplash.com/photos/a-hand-holds-a-smartphone-showing-notifications-QGKCe8C3D8g', title:'Smartphone mit Benachrichtigungen'}, photoUrl:'https://unsplash.com/photos/a-hand-holds-a-smartphone-showing-notifications-QGKCe8C3D8g', title:'Smartphone mit Benachrichtigungen'},
{use:'Header – Marken-Bildmarke', author:'Pawel Czerwinski', handle:'@pawel_czerwinski', authorUrl:'https://unsplash.com/@pawel_czerwinski',
photoUrl:'https://unsplash.com/photos/blue-water-with-water-splash-glmqeNTUEfE', title:'Blaue Wasser-/Flüssigkeitstextur'},
]; ];
--- ---
<Base title="Bildnachweis – Kühlfinder" description="Fotonachweise und Lizenzangaben für die auf Kühlfinder verwendeten Bilder."> <Base title="Bildnachweis – Kühlfinder" description="Fotonachweise und Lizenzangaben für die auf Kühlfinder verwendeten Bilder.">
src/styles/global.css
+8 -1
View File
@@ -57,7 +57,14 @@ header.site nav a:hover{color:var(--petrol)}
.brand b{color:var(--petrol)} .brand b{color:var(--petrol)}
footer.site{margin-top:4rem;border-top:1px solid var(--line);background:var(--petrol-soft)} footer.site{margin-top:4rem;border-top:1px solid var(--line);background:var(--petrol-soft)}
footer.site .wrap{padding-top:2rem;padding-bottom:2rem} footer.site .wrap{padding-top:2rem;padding-bottom:2rem}
@media(max-width:720px){header.site nav a{margin-left:.8rem;font-size:.85rem}} @media(max-width:720px){
header.site .bar{gap:.6rem}
.brand{flex:0 0 auto;font-size:1.15rem}
header.site nav{display:flex;align-items:center;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
header.site nav::-webkit-scrollbar{display:none}
header.site nav a{margin-left:0;margin-right:.95rem;font-size:.9rem;white-space:nowrap;flex:0 0 auto}
header.site nav a:last-child{margin-right:0}
}
/* --- v2 additions: data-monitor craft (ui-ux-design-pro + design-taste-frontend) --- */ /* --- v2 additions: data-monitor craft (ui-ux-design-pro + design-taste-frontend) --- */
:root{ :root{