From da59c96d1f5014c642497f3a172ec5773889c654 Mon Sep 17 00:00:00 2001
From: Timm Friebe <thekid@thekid.de>
Date: Sun, 25 Feb 2024 09:36:24 +0100
Subject: [PATCH 1/4] Use CSS nesting

---
 src/main/handlebars/layout.handlebars | 692 +++++++++++++-------------
 1 file changed, 345 insertions(+), 347 deletions(-)

diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars
index 79271af..1f74ede 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 {
@@ -156,14 +156,14 @@
       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 +177,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;
+      & 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);
+      }
     }
 
     .suggestions {
@@ -217,86 +227,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,102 +323,115 @@
       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 1rem 1rem;
-      font-size: 1.5rem;
-      height: 1.5rem;
-      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 1rem 1rem;
+        font-size: 1.5rem;
+        height: 1.5rem;
+        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;
-    }
+      & .cards {
+        margin-top: 1rem;
+      }
 
-    section h2 {
-      font-size: 1.5rem;
-      font-weight: 700;
-      display: grid;
-      grid-template-columns: 1fr max-content;
-    }
+      & h2 {
+        font-size: 1.5rem;
+        font-weight: 700;
+        display: grid;
+        grid-template-columns: 1fr max-content;
+      }
 
-    section h2 a {
-      color: var(--text-color);
-    }
+      & h2 a {
+        color: var(--text-color);
+      }
 
-    section h2 .top {
-      text-decoration: none;
-      color: orange;
+      & h2 .top {
+        text-decoration: none;
+        color: orange;
+      }
+
+      & .content {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+      }
+
+      & .content a {
+        overflow-wrap: anywhere;
+      }
+
+      & .content p {
+        margin-bottom: 1rem;
+      }
     }
 
     .meta, .meta a {
@@ -426,16 +441,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;dashed
-      color: orange;
+      & li:first-child:not(:last-child)::after, & li + li:not(:last-child)::after {
+        content: ' / ';
+        margin-right: -.1rem;
+        color: orange;
+      }
     }
 
     ul.summary {
@@ -445,57 +460,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 {
@@ -503,30 +505,26 @@
       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.size-1 {
-      grid-template-columns: 1fr;
-    }
+      &.all, &.size-1 {
+        grid-template-columns: 1fr;
+      }
 
-    .images.size-1 video {
-      aspect-ratio: auto;
-    }
+      &.size-1 video {
+        aspect-ratio: auto;
+      }
 
-    .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 {
@@ -534,54 +532,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 {
@@ -596,62 +594,62 @@
       padding: 0;
       border: none;
       background-color: transparent;
-    }
 
-    #lightbox::backdrop {
-      -webkit-backdrop-filter: blur(10px) brightness(.5);
-      backdrop-filter: blur(10px) brightness(.5);
-    }
+      &::backdrop {
+        -webkit-backdrop-filter: blur(10px) brightness(.5);
+        backdrop-filter: blur(10px) brightness(.5);
+      }
 
-    #lightbox[open] {
-      transform: scale(1, 1);
-    }
+      &[open] {
+        transform: scale(1, 1);
+      }
 
-    #lightbox .image {
-      position: relative;
-      width: 100%;
-    }
+      & .image {
+        position: relative;
+        width: 100%;
+      }
 
-    #lightbox img {
-      border: 2px solid #444;
-      border-radius: .25rem;
-      max-height: calc(100vh - 6rem);
-      width: auto;
-      margin: auto;
-    }
+      & img {
+        border: 2px solid #444;
+        border-radius: .25rem;
+        max-height: calc(100vh - 6rem);
+        width: auto;
+        margin: auto;
+      }
 
-    #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;
-    }
+      & .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;
+      }
 
-    #lightbox img:hover ~ .meta {
-      transform: scale(1, 1);
-    }
+      & img:hover ~ .meta {
+        transform: scale(1, 1);
+      }
 
-    #lightbox .meta div {
-      background-color: white;
-      color: black;
-      padding: .25rem 1rem;
-    }
+      & .meta div {
+        background-color: white;
+        color: black;
+        padding: .25rem 1rem;
+      }
 
-    #lightbox .meta div:where(:first-child) {
-      border-top-left-radius: .25rem;
-    }
+      & .meta div:where(:first-child) {
+        border-top-left-radius: .25rem;
+      }
 
-    #lightbox .meta div:where(:last-child) {
-      border-top-right-radius: .25rem;
+      & .meta div:where(:last-child) {
+        border-top-right-radius: .25rem;
+      }
     }
 
     footer {

From 42b26e777a1e3b9a9c055c5c2cd49c5d069b53b0 Mon Sep 17 00:00:00 2001
From: Timm Friebe <thekid@thekid.de>
Date: Sun, 25 Feb 2024 09:44:34 +0100
Subject: [PATCH 2/4] Apply nesting inside media query

---
 src/main/handlebars/layout.handlebars | 46 +++++++++++++--------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars
index 1f74ede..941e8c7 100755
--- a/src/main/handlebars/layout.handlebars
+++ b/src/main/handlebars/layout.handlebars
@@ -685,30 +685,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;
+        }
       }
     }
 

From f580cea954d4895aa97c8f7c49ea8d10b23b9d97 Mon Sep 17 00:00:00 2001
From: Timm Friebe <thekid@thekid.de>
Date: Sun, 25 Feb 2024 12:24:45 +0100
Subject: [PATCH 3/4] Fix continuous image list inside content view

---
 src/main/handlebars/layout.handlebars | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars
index 2a8de68..45c03cd 100755
--- a/src/main/handlebars/layout.handlebars
+++ b/src/main/handlebars/layout.handlebars
@@ -515,7 +515,7 @@
         grid-template-columns: 1fr;
       }
 
-      &:where(.is-odd) .image:first-child {
+      &:where(.is-odd):not(.all) .image:first-child {
         grid-column: 1 / 3;
       }
 

From 82a932de5588e65ec137857a835016b7bf0208fe Mon Sep 17 00:00:00 2001
From: Timm Friebe <thekid@thekid.de>
Date: Sun, 25 Feb 2024 12:28:48 +0100
Subject: [PATCH 4/4] Fix specificity

---
 src/main/handlebars/layout.handlebars | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars
index 45c03cd..0851010 100755
--- a/src/main/handlebars/layout.handlebars
+++ b/src/main/handlebars/layout.handlebars
@@ -515,7 +515,7 @@
         grid-template-columns: 1fr;
       }
 
-      &:where(.is-odd):not(.all) .image:first-child {
+      &:where(.is-odd:not(.all)) .image:first-child {
         grid-column: 1 / 3;
       }