diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars index 1949965..a6d1e7b 100755 --- a/src/main/handlebars/layout.handlebars +++ b/src/main/handlebars/layout.handlebars @@ -86,42 +86,42 @@ nav { display: flex; justify-content: center; - } - nav ul { - width: 1023px; - display: flex; - flex-direction: row; - margin: 0; - padding: 0; - list-style-type: none; - background-color: var(--nav-color); - } + ul { + width: 1023px; + display: flex; + flex-direction: row; + margin: 0; + padding: 0; + list-style-type: none; + background-color: var(--nav-color); + } - nav li { - padding: .35rem 1.5rem; - font-size: 1.2rem; - font-variant-caps: all-small-caps; - font-weight: 900; - letter-spacing: .2rem; - } + li { + padding: .35rem 1.5rem; + font-size: 1.2rem; + font-variant-caps: all-small-caps; + font-weight: 900; + letter-spacing: .2rem; + } - nav li.active { - border-bottom: .25rem solid #444; - } + li.active { + border-bottom: .25rem solid #444; + } - nav li.right { - margin-left: auto; - } + li.right { + margin-left: auto; + } - nav li a { - text-decoration: none; - } + li a { + text-decoration: none; + } - nav li button { - background-color: inherit; - border: none; - cursor: pointer; + li button { + background-color: inherit; + border: none; + cursor: pointer; + } } main { @@ -155,15 +155,14 @@ background-size: cover; background-position: center; height: 50vh; - box-shadow: 0 .25rem .5rem rgb(0 0 0 / .4); - } - .cover h1 { - font-size: 7rem; - margin: 1rem; - letter-spacing: .25rem; - display: inline-block; - color: white; + h1 { + font-size: 7rem; + margin: 1rem; + letter-spacing: .25rem; + display: inline-block; + color: white; + } } #search { @@ -177,25 +176,35 @@ box-shadow: .25rem .25rem 1rem rgb(0 0 0 / .2); position: relative; height: 2.75rem; - } - #search::before { - content: ''; - position: absolute; - inset: .35rem .5rem; - width: 2rem; - background: no-repeat center / 1.5rem url(/static/search.svg); - } + &::before { + content: ''; + position: absolute; + inset: .35rem .5rem; + width: 2rem; + background: no-repeat center / 1.5rem url(/static/search.svg); + } - #search input[type='text'] { - font-size: 1.15rem; - font-family: inherit; - font-weight: 700; - padding: .25rem; - border: none; - outline: none; - background-color: transparent; - position: relative; + &.suggesting { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-bottom: none; + } + + &.suggesting .suggestions { + transform: scale(1, 1); + } + + input[type='text'] { + font-size: 1.15rem; + font-family: inherit; + font-weight: 700; + padding: .25rem; + border: none; + outline: none; + background-color: transparent; + position: relative; + } } .suggestions { @@ -217,86 +226,78 @@ transition: transform ease-in-out 150ms; transform-origin: top; list-style: none; - } - .suggestions li { - padding: .5rem; - } - - .suggestions li:last-child { - border-bottom-right-radius: .35rem; - border-bottom-left-radius: .35rem; - } - - .suggestions li:hover, .suggestions li[aria-selected='true'] { - background-color: #efefef; - } + li { + padding: .5rem; + } - .suggestions li em { - font-style: normal; - font-weight: 900; - } + li:last-child { + border-bottom-right-radius: .35rem; + border-bottom-left-radius: .35rem; + } - .suggestions a { - display: grid; - grid-template-areas: 'title date' 'locations empty'; - grid-template-columns: 1fr max-content; - text-decoration: none; - } + li:hover, li[aria-selected='true'] { + background-color: #efefef; + } - .suggestions a.journey .title::before { - content: 'Reise: '; - } + li em { + font-style: normal; + font-weight: 900; + } - .suggestions a.fulltext { - grid-area: title; - color: black; - } + a { + display: grid; + grid-template-areas: 'title date' 'locations empty'; + grid-template-columns: 1fr max-content; + text-decoration: none; + } - .suggestions .title { - grid-area: title; - } + a.journey .title::before { + content: 'Reise: '; + } - .suggestions .date { - grid-area: date; - color: black; - } + a.fulltext { + grid-area: title; + color: black; + } - .suggestions .locations { - grid-area: locations; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - color: #999; - } + .title { + grid-area: title; + } - #search.suggesting { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - border-bottom: none; - } + .date { + grid-area: date; + color: black; + } - #search.suggesting .suggestions { - transform: scale(1, 1); + .locations { + grid-area: locations; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: #999; + } } - #results .summary { - margin-bottom: 1rem; - color: #ccc; - } + #results { + .summary { + margin-bottom: 1rem; + color: #ccc; + } - #results .excerpt { - overflow-wrap: anywhere; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; - } + .excerpt { + overflow-wrap: anywhere; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + } - #results em { - font-style: normal; - font-weight: 900; - text-decoration: underline dotted orange; + em { + font-style: normal; + font-weight: 900; + text-decoration: underline dotted orange; + } } article.intro { @@ -321,114 +322,127 @@ transform: scale; transition: 100ms ease-in-out; box-shadow: .5rem .5rem 1rem rgb(0 0 0 / .2); - } - .card:hover { - transform: scale(1.05, 1.05); - } + &:hover { + transform: scale(1.05, 1.05); + } - .card img { - border-radius: .25rem; - height: 22rem; - width: 100%; - object-fit: cover; - } + img { + border-radius: .25rem; + height: 22rem; + width: 100%; + object-fit: cover; + } - .card .without-preview { - border-radius: .25rem; - height: 22rem; - width: 100%; - } + &.continue img { + opacity: .3; + } - .card.continue img { - opacity: .3; - } + .without-preview { + border-radius: .25rem; + height: 22rem; + width: 100%; + } - .card .next { - position: absolute; - top: calc(50% - 1.5rem); - left: calc(50% - 1.5rem); - background-color: white; - height: 3rem; - width: 3rem; - border-radius: 50%; - text-align: center; - line-height: 3rem; - opacity: 1; - font-size: 1.75rem; - box-shadow: .5rem .5rem 1rem rgb(0 0 0 / .2); - } + .next { + position: absolute; + top: calc(50% - 1.5rem); + left: calc(50% - 1.5rem); + background-color: white; + height: 3rem; + width: 3rem; + border-radius: 50%; + text-align: center; + line-height: 3rem; + opacity: 1; + font-size: 1.75rem; + box-shadow: .5rem .5rem 1rem rgb(0 0 0 / .2); + } - .card .date { - position: absolute; - top: .75rem; - left: .75rem; - background-color: black; - border-radius: .25rem; - color: white; - padding: .125rem .4rem; - } + .date { + position: absolute; + top: .75rem; + left: .75rem; + background-color: black; + border-radius: .25rem; + color: white; + padding: .125rem .4rem; + } - .card .current.date { - background-color: orange; - } + .current.date { + background-color: orange; + } - .card .current.date::before { - content: 'LIVE'; - margin-right: .25rem; - padding-right: .25rem; - border-right: 1px solid white; - } + .current.date::before { + content: 'LIVE'; + margin-right: .25rem; + padding-right: .25rem; + border-right: 1px solid white; + } - .card h3 { - position: absolute; - inset: auto 1rem .75rem 1rem; - font-size: 1.5rem; - height: 1.75rem; - color: white; - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 1; - text-shadow: 0 0 .5rem rgb(0 0 0 / .6); + h3 { + position: absolute; + inset: auto 1rem .75rem 1rem; + font-size: 1.5rem; + height: 1.75rem; + color: white; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + text-shadow: 0 0 .5rem rgb(0 0 0 / .6); + } } section { padding-top: 1rem; margin-bottom: 3rem; font-size: 1.1rem; - } - section .cards { - margin-top: 1rem; - } + h2 { + font-size: 1.5rem; + font-weight: 700; + } - section h2 { - font-size: 1.5rem; - font-weight: 700; - } + h2.scroll { + display: grid; + grid-template-columns: 1fr max-content; + } - section h2.scroll { - display: grid; - grid-template-columns: 1fr max-content; - } + h2 a { + color: var(--text-color); + } - section h2 a { - color: var(--text-color); - } + h2.current::before { + content: 'LIVE'; + background-color: orange; + margin-right: .5rem; + padding: .125rem .4rem; + border-radius: .25rem; + font-size: 1rem; + } - section h2.current::before { - content: 'LIVE'; - background-color: orange; - margin-right: .5rem; - padding: .125rem .4rem; - border-radius: .25rem; - font-size: 1rem; - } + h2 .top { + text-decoration: none; + color: orange; + } - section h2 .top { - text-decoration: none; - color: orange; + .cards { + margin-top: 1rem; + } + + .content { + margin-top: 1rem; + margin-bottom: 1rem; + } + + .content a { + overflow-wrap: anywhere; + } + + .content p { + margin-bottom: 1rem; + } } .meta, .meta a { @@ -438,16 +452,16 @@ ul.locations { display: inline; padding-left: 0; - } - .locations li { - display: inline; - } + li { + display: inline; + } - .locations li:first-child:not(:last-child)::after, .locations li + li:not(:last-child)::after { - content: ' / '; - margin-right: -.1rem; - color: orange; + li:first-child:not(:last-child)::after, li + li:not(:last-child)::after { + content: ' / '; + margin-right: -.1rem; + color: orange; + } } ul.summary { @@ -457,57 +471,44 @@ border-radius: .25rem; padding: .25rem 0.75rem; margin-top: 2rem; - } - .summary li::before { - content: '\2193 '; - color: orange; - } + li::before { + content: '\2193 '; + color: orange; + } - .summary a { - color: var(--text-color); - padding-left: .5ch; - text-decoration: none; - line-height: rem; - } + a { + color: var(--text-color); + padding-left: .5ch; + text-decoration: none; + line-height: rem; + } - .summary a:hover { - text-decoration: underline dotted orange; - } + a:hover { + text-decoration: underline dotted orange; + } - .summary .date { - float: right; - color: var(--meta-color); - font-size: .9rem; + .date { + float: right; + color: var(--meta-color); + font-size: .9rem; + } } a.scroll { text-decoration: none; color: var(--text-color); - } - - a.scroll::after { - content: '#'; - color: orange; - padding-left: .25rem; - opacity: 0; - } - a.scroll:hover::after { - opacity: .5; - } - - section .content { - margin-top: 1rem; - margin-bottom: 1rem; - } - - section .content a { - overflow-wrap: anywhere; - } + &::after { + content: '#'; + color: orange; + padding-left: .25rem; + opacity: 0; + } - section .content p { - margin-bottom: 1rem; + &:hover::after { + opacity: .5; + } } .images { @@ -515,34 +516,30 @@ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; - } - .images.overview { - grid-template-columns: 1fr 1fr 1fr 1fr; - padding-bottom: 1rem; - } - - .images.all { - grid-template-columns: 1fr; - } + &.overview { + grid-template-columns: 1fr 1fr 1fr 1fr; + padding-bottom: 1rem; + } - .images.is-single { - grid-template-columns: 1fr; - } + &.all, &.is-single { + grid-template-columns: 1fr; + } - .images.is-single video { - aspect-ratio: auto; - } + &.is-single video { + aspect-ratio: auto; + } - .images:where(.is-odd:not(.all)) .image:first-child { - grid-column: 1 / 3; - } + &:where(.is-odd:not(.all)) .image:first-child { + grid-column: 1 / 3; + } - .image img, .image video { - aspect-ratio: 15 / 10; - object-fit: cover; - border-radius: .25rem; - box-shadow: .25rem .25rem 1rem rgb(0 0 0 / .2); + .image img, .image video { + aspect-ratio: 15 / 10; + object-fit: cover; + border-radius: .25rem; + box-shadow: .25rem .25rem 1rem rgb(0 0 0 / .2); + } } #map { @@ -550,54 +547,54 @@ width: 100%; height: 20rem; position: relative; - } - #map.full { - height: 50vh; - margin-bottom: 2rem; - } + &.full { + height: 50vh; + margin-bottom: 2rem; + } - #map .ol-viewport { - border-radius: .25rem; - } + .ol-viewport { + border-radius: .25rem; + } - #map .popup { - position: absolute; - z-index: 1; - background-color: white; - border-radius: .25rem; - display: none; - padding: .25rem; - } + .popup { + position: absolute; + z-index: 1; + background-color: white; + border-radius: .25rem; + display: none; + padding: .25rem; + } - #map .popup ul { - list-style: none; - padding: .25rem; - margin: 0; - color: black; + .popup ul { + list-style: none; + padding: .25rem; + margin: 0; + color: black; + } } .pagination { display: flex; justify-content: center; gap: 1rem; - } - .pagination a { - background-color: var(--button-color); - border-radius: .125rem; - padding: .25rem .5rem; - width: 6rem; - text-align: center; - text-decoration: none; - } + a { + background-color: var(--button-color); + border-radius: .125rem; + padding: .25rem .5rem; + width: 6rem; + text-align: center; + text-decoration: none; + } - .pagination a[aria-disabled] { - color: #aaa; - } + a[aria-disabled] { + color: #aaa; + } - .pagination .page { - padding: .25rem 0; + .page { + padding: .25rem 0; + } } #lightbox { @@ -612,62 +609,62 @@ padding: 0; border: none; background-color: transparent; - } - - #lightbox::backdrop { - -webkit-backdrop-filter: blur(10px) brightness(.5); - backdrop-filter: blur(10px) brightness(.5); - } - #lightbox[open] { - transform: scale(1, 1); - } - - #lightbox .image { - position: relative; - width: 100%; - } - - #lightbox img { - border: 2px solid #444; - border-radius: .25rem; - max-height: calc(100vh - 6rem); - width: auto; - margin: auto; - } + &::backdrop { + -webkit-backdrop-filter: blur(10px) brightness(.5); + backdrop-filter: blur(10px) brightness(.5); + } - #lightbox .meta { - position: absolute; - bottom: 2px; - right: 0; - left: 0; - font-size: .9rem; - display: grid; - grid-template-columns: repeat(6, max-content); - gap: 1px; - justify-content: center; - pointer-events: none; - transform: scale(0, 1); - transform-origin: bottom; - transition: transform ease-in-out 70ms; - } + &[open] { + transform: scale(1, 1); + } - #lightbox img:hover ~ .meta { - transform: scale(1, 1); - } + .image { + position: relative; + width: 100%; + } - #lightbox .meta div { - background-color: white; - color: black; - padding: .25rem 1rem; - } + img { + border: 2px solid #444; + border-radius: .25rem; + max-height: calc(100vh - 6rem); + width: auto; + margin: auto; + } - #lightbox .meta div:where(:first-child) { - border-top-left-radius: .25rem; - } + .meta { + position: absolute; + bottom: 2px; + right: 0; + left: 0; + font-size: .9rem; + display: grid; + grid-template-columns: repeat(6, max-content); + gap: 1px; + justify-content: center; + pointer-events: none; + transform: scale(0, 1); + transform-origin: bottom; + transition: transform ease-in-out 70ms; + + div { + background-color: white; + color: black; + padding: .25rem 1rem; + } + + div:where(:first-child) { + border-top-left-radius: .25rem; + } + + div:where(:last-child) { + border-top-right-radius: .25rem; + } + } - #lightbox .meta div:where(:last-child) { - border-top-right-radius: .25rem; + img:hover ~ .meta { + transform: scale(1, 1); + } } footer { @@ -707,30 +704,30 @@ margin-left: 0; margin-right: 0; max-width: 100%; - } - - #lightbox .meta { - grid-template-columns: repeat(3, max-content) 1fr; - transform: scale(1, 1); - gap: 0; - background-color: white; - border: none; - border-radius: 0; - position: unset; - } - - #lightbox img { - border: none; - border-radius: 0; - } - - #lightbox .meta div:nth-child(2) { - grid-column: span 3; - } - #lightbox .meta div { - border-radius: unset; - background-color: unset; + .meta { + grid-template-columns: repeat(3, max-content) 1fr; + transform: scale(1, 1); + gap: 0; + background-color: white; + border: none; + border-radius: 0; + position: unset; + } + + img { + border: none; + border-radius: 0; + } + + .meta div:nth-child(2) { + grid-column: span 3; + } + + .meta div { + border-radius: unset; + background-color: unset; + } } }