feat: Add train category expander

.opencode/command/update-traincategory.md

@@ -0,0 +1,43 @@
+---
+description: Update train category information
+agent: build
+---
+
+Update the page $ARGUMENTS to new train category shortcodes.
+
+A shortcode looks like:
+
+```
+{{% train-category
+    title="title"
+    type="highspeed" (can be highspeed, regional, subway, bus, funicular, sleeper)
+    fip_accepted=true (can be true, false, partially)
+    reservation_required=true (can be true, false, partially)
+    reservation_possible=true (can be true, false, partially; omit the attribute if false or if reservation_required is true)
+    route_overview_url="https://example.com" (if there is an route overview link in the description, otherwise omit the attribute)
+    additional_information_url="https://example.com" (if there is an additional information link in the description, otherwise omit the attribute)
+%}}
+{{% /train-category %}}
+```
+
+Do not use brackets around boolean attributes like true and false. Place each attribute in a new line.
+
+Important information (previously paragraphs that started with ⚠️ in the text) should be changed to an important highlight shortcut (in the same position as the text was before):
+
+```
+{{% highlight important %}}
+{{% /highlight %}}
+```
+
+If there is a risk of confusion (previously marked with ℹ️ in the text), add it as confusion highlight (in the same position the text was before):
+
+```
+{{% highlight confusion %}}
+{{% /highlight %}}
+```
+
+Tranform the "**Reservation cost:**" (or language equivalent) section to a heading "### Reservation".
+
+If there is additional information in the text that can't be represented in the shortcode, add the information to the text. For example "**Reservation required:** ⚠️ sometimes (marked with _R_)" becomes "A reservation is required for some trains (marked with _R_)."
+
+Make sure to remove the old expanders after adding the shortcode.

assets/sass/_variables.scss

@@ -14,6 +14,20 @@ $bg-code: #fff284;
 $color-onLight: #000000;
 $color-table-border: #5b5b5b;
 
+$tag-colors: (
+  success: #155724,
+  warning: #b64900,
+  error: #b70000,
+  info: #414141,
+);
+
+$tag-colors-dark: (
+  success: #a8d5ba,
+  warning: #f0d98d,
+  error: #f5a9ae,
+  info: #d1d1d1,
+);
+
 html {
   --pagefind-ui-scale: 1 !important;
   --pagefind-ui-text: #000;
@@ -27,6 +41,13 @@ html {
   --color-onLight: #{$color-onLight};
   --color-table-border: #{$color-table-border};
   --color-body: rgb(33, 37, 41);
+
+  @each $name, $color in $tag-colors {
+    --tag-#{$name}-bg: #{mix(white, $color, 90%)};
+    --tag-#{$name}-color: #{$color};
+    --tag-#{$name}-border: #{mix(white, $color, 50%)};
+  }
+
   --border-radius-s: 0.4rem;
   --border-radius-m: 0.8rem;
   --border-radius-l: 1.6rem;
@@ -37,6 +58,7 @@ html {
   --highlight-color-tip: #c4f2ff;
   --highlight-color-inofficial: #f0f3f5;
   --highlight-color-important: #ffe3d9;
+  --highlight-color-confusion: #ffe6cc;
   --border: 0.1rem solid transparent;
   --pagefind-ui-font: roboto, Arial, Helvetica, sans-serif;
   --outline-focus-indicator: #257fa8;
@@ -54,16 +76,27 @@ html[data-theme="dark"] {
     --link-special: #ffffff;
     --bg-default: #151b23;
     --bg-neutral: #0d1117;
+    --bg-accent: #86761a;
+    --bg-accent2: #daba00;
+    --bg-accent3: #fff284;
     --color-onLight: #ffffff;
     --color-table-border: #555;
     --color-body: #e0e0e0;
+
+    @each $name, $color in $tag-colors-dark {
+      --tag-#{$name}-bg: #{mix(black, $color, 65%)};
+      --tag-#{$name}-color: #{$color};
+      --tag-#{$name}-border: #{mix(black, $color, 50%)};
+    }
+
     --pagefind-ui-border: #555;
     --box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.5);
     --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.3);
     --pagefind-ui-background: var(--bg-default);
     --highlight-color-tip: #1a4a5c;
     --highlight-color-inofficial: #2a2d30;
     --highlight-color-important: #4a2a1a;
+    --highlight-color-confusion: #4a3a1a;
     --border: 0.1rem solid #3d444d;
     --outline-focus-indicator: #2e9acb;
   }

assets/sass/expander.scss

@@ -47,7 +47,7 @@
     }
   }
 
-  > div {
+  &-title {
     display: flex;
     align-items: center;
     gap: 0.5rem;

assets/sass/main.scss

@@ -17,3 +17,5 @@
 @import "startpage.scss";
 @import "interactiveMap.scss";
 @import "dropdown.scss";
+@import "trainCategory.scss";
+@import "tag.scss";

assets/sass/tag.scss

@@ -0,0 +1,18 @@
+.a-tag {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.4rem 0.8rem;
+  border-radius: var(--border-radius-s);
+  font-size: 0.7em;
+  font-weight: 500;
+  white-space: nowrap;
+
+  @each $name, $color in $tag-colors {
+    &--#{$name} {
+      background: var(--tag-#{$name}-bg);
+      color: var(--tag-#{$name}-color);
+      border: 0.1rem solid var(--tag-#{$name}-border);
+    }
+  }
+}

assets/sass/textHighlight.scss

@@ -54,3 +54,12 @@
     border: 0.2rem solid #ba3d12;
   }
 }
+
+.m-text-highlight--confusion {
+  background-color: var(--highlight-color-confusion);
+  border-left: #ff9100e1 solid 1rem;
+
+  @media print {
+    border: 0.2rem solid #ff9100e1;
+  }
+}

assets/sass/trainCategory.scss

@@ -0,0 +1,51 @@
+.o-train-category__header {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.o-train-category__title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+}
+
+.o-train-category__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+}
+
+details.o-expander__summary--train-category {
+  &:hover,
+  &:focus {
+    .o-train-category__title-text {
+      text-decoration: underline;
+    }
+  }
+}
+
+details.o-expander--train-category:not([open]) {
+  @media (max-width: $breakpoint-md) {
+    .a-tag__text {
+      display: none;
+    }
+  }
+}
+
+.o-train-category__content {
+  .m-text-highlight {
+    &--important,
+    &--confusion {
+      > .m-text-highlight__roofline {
+        color: var(--tag-warning-color);
+      }
+
+      background-color: var(--tag-warning-bg);
+      border: var(--tag-warning-border) solid;
+      border-width: 1px 1px 1px 1rem;
+    }
+  }
+}