diff --git a/assets/_colors.scss b/assets/_colors.scss index 0c7a066..96f0aeb 100644 --- a/assets/_colors.scss +++ b/assets/_colors.scss @@ -1,4 +1,6 @@ -$color-background: #fff; -$color-burger: #231f20; -$color-link: #000; -$color-text: #000; +$color-background: #fff; +$color-burger: #231f20; +$color-link: #000; +$color-overlay: #231f20; +$color-overlay-text: #fff; +$color-text: #000; diff --git a/assets/_gallery.scss b/assets/_gallery.scss new file mode 100644 index 0000000..a8a16bd --- /dev/null +++ b/assets/_gallery.scss @@ -0,0 +1,57 @@ +@import 'breakpoints'; +@import 'colors'; + +.gallery { + display: flex; + flex-wrap: wrap; + gap: 1rem; + + a { + &.blur-on-hover { + &:hover img { + filter: blur(5px); + transform: scale(120%); + } + + img { + transition: all 500ms; + } + } + + img { + display: block; + } + + p { + background: rgba($color-overlay, 0.9); + color: $color-overlay-text; + margin-bottom: 0; + padding: 0.5em 1em; + position: absolute; + transform: translateY(-100%); + width: 280px; + } + } + + img { + &.landscape { + height: 100%; + width: auto; + } + + &.portrait { + height: auto; + width: 100%; + } + } + + .image { + align-items: center; + display: flex; + height: 280px; + justify-content: center; + max-height: 280px; + width: 280px; + overflow: hidden; + } +} diff --git a/assets/style.scss b/assets/style.scss index 2b55038..4a365aa 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -1,6 +1,7 @@ @import 'breakpoints'; @import 'colors'; @import 'fonts'; +@import 'gallery'; * { box-sizing: border-box; @@ -8,13 +9,17 @@ padding: 0; } +:root { + font-size: 16px; +} + body { background: $color-background; color: $color-text; display: flex; flex-direction: column; font-family: "Maven Pro", sans-serif; - font-size: 18px; + font-size: 1.125rem; line-height: 1.5; margin: 0 auto; max-width: $large; @@ -236,15 +241,6 @@ hr { margin: 3em 0; } -.blur-on-hover { - transition: all 500ms; - - &:hover { - filter: blur(5px); - transform: scale(120%); - } -} - .date { margin-bottom: 0; diff --git a/content/_index.md b/content/_index.md index 49aa3e6..24b4994 100644 --- a/content/_index.md +++ b/content/_index.md @@ -7,5 +7,3 @@ menu: ![kontakt – Das Kulturfestival (Symbolbild)](/symbolbild.jpg) by [ChrisU](https://instagram.com/chrisu_photography) - -# Aktuelles diff --git a/content/galerie/_index.md b/content/galerie/_index.md new file mode 100644 index 0000000..fbc7f9f --- /dev/null +++ b/content/galerie/_index.md @@ -0,0 +1,7 @@ +--- +title: Galerie +menu: + main: + weight: 40 +--- + diff --git a/layouts/galerie/section.html b/layouts/galerie/section.html new file mode 100644 index 0000000..0b77c2a --- /dev/null +++ b/layouts/galerie/section.html @@ -0,0 +1,14 @@ +{{ define "main" }} +
{{ .Title }}
+ +{{ end }} +{{ .Title }}
+ +{{ end }} +