Lichterei: CSS, Layout, Menü-Eintrag
This commit is contained in:
11
assets/css/lichterei.css
Normal file
11
assets/css/lichterei.css
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
:root { --accent-color: #ffb450; }
|
||||||
|
body.lampe-type, body.lampe-type main { background:#111!important; color:#eee!important; }
|
||||||
|
.lichterei-hero { text-align:center; padding:3rem 1rem 2rem; }
|
||||||
|
.lichterei-hero h1 { font-size:2.5rem; margin-bottom:1rem; }
|
||||||
|
.lichterei-hero .intro { font-size:1.15rem; opacity:.85; max-width:600px; margin:0 auto; }
|
||||||
|
.lampen-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:2rem; max-width:1100px; margin:0 auto; padding:2rem 1.5rem 4rem; }
|
||||||
|
.lampe-card { margin:0; border-radius:12px; overflow:hidden; background:rgba(255,255,255,.04); box-shadow:0 0 20px rgba(255,180,80,.08); transition:transform .4s ease,box-shadow .4s ease; animation:floatIn .8s ease-out both,gentleFloat 4s ease-in-out infinite; }
|
||||||
|
.lampe-card:hover { transform:scale(1.05) rotate(1deg); box-shadow:0 0 30px rgba(255,180,80,.2); }
|
||||||
|
.lampe-card img { width:100%; height:auto; display:block; }
|
||||||
|
@keyframes floatIn { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
|
||||||
|
@keyframes gentleFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
|
||||||
@@ -23,3 +23,8 @@ weight = 2
|
|||||||
name = "Posts"
|
name = "Posts"
|
||||||
url = "/posts/"
|
url = "/posts/"
|
||||||
weight = 3
|
weight = 3
|
||||||
|
|
||||||
|
[[menu.main]]
|
||||||
|
name = "Lichterei"
|
||||||
|
url = "/projects/lichterei/"
|
||||||
|
weight = 4
|
||||||
|
|||||||
@@ -1,4 +1,14 @@
|
|||||||
{{ define "main" }}
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>{{ .Title }} - {{ .Site.Title }}</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="/assets/css/lichterei.css">
|
||||||
|
</head>
|
||||||
|
<body class="lampe-type">
|
||||||
|
{{- partial "header.html" . -}}
|
||||||
|
<main id="content">
|
||||||
<section class="lichterei-hero">
|
<section class="lichterei-hero">
|
||||||
<h1>{{ .Title }}</h1>
|
<h1>{{ .Title }}</h1>
|
||||||
<p class="intro">Lampen die ich gesammelt, gebastelt und geliebt habe. Jede hat ihre eigene Geschichte und ihren eigenen Glow.</p>
|
<p class="intro">Lampen die ich gesammelt, gebastelt und geliebt habe. Jede hat ihre eigene Geschichte und ihren eigenen Glow.</p>
|
||||||
@@ -10,4 +20,7 @@
|
|||||||
</figure>
|
</figure>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</section>
|
</section>
|
||||||
{{ end }}
|
</main>
|
||||||
|
{{- partial "footer.html" . -}}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user