Merge pull request #31 from Whisky-and-Wheels/bugfixes

Bugfixes
Whisky-and-Wheels · Jul 5, 2024 · 5485e0a · 5485e0a
2 parents 86000ff + 4fb25ce
commit 5485e0a
Show file tree

Hide file tree

Showing 8 changed files with 360 additions and 488 deletions.
diff --git a/content/_includes/trip-layout.njk b/content/_includes/trip-layout.njk
diff --git a/content/index.njk b/content/index.njk
@@ -27,39 +27,34 @@
         <main
             class="container grid">
             {# sort from newest to oldest #}
-            {%- for trip in collections.trip | reverse -%}
-                {% if trip.data.label %}
-                    {% set label = trip.data.label %}
-                {% else %}
-                    {% set label = 'glenfiddich' %}
-                {% endif %}
+            {%- for featured in collections.featured | reverse -%}
                 {# todo: proper sizes values for label images #}
-                <a data-label="{{ label }}" href="{{ trip.page.url }}">
+                <a data-label="{{ featured.data.label }}" href="{{ featured.page.url }}">
                     <article class="article">
-                        <h2 class="title">{{ trip.data.title }}</h2>
+                        <h2 class="title">{{ featured.data.title }}</h2>
                         <h3 class="subtitle">
-                            <span>{{ trip.data.subtitle }}</span>
+                            <span>{{ featured.data.subtitle }}</span>
                         </h3>
-                        {% image ["img/", trip.data.image_file, ".jpeg"] | join, trip.data.image_alt, "300px" %}
+                        {% image ["img/", featured.data.image_file, ".jpeg"] | join, featured.data.image_alt, "300px" %}
                         <p class="days">
-                            <strong>{{ trip.data.days }}</strong>
+                            <strong>{{ featured.data.days }}</strong>
                             <span>days</span>
                         </p>
                         <p class="kilometres">
-                            <strong>{{ trip.data.kilometres }}</strong>
+                            <strong>{{ featured.data.kilometres }}</strong>
                             <span>km</span>
                         </p>
                         <p class="location">
                             <span>From</span>
-                            <strong>{{ trip.data.start }}</strong>
+                            <strong>{{ featured.data.start }}</strong>
                             <span>to</span>
-                            <strong>{{ trip.data.end }}</strong>
+                            <strong>{{ featured.data.end }}</strong>
                         </p>
                         <p class="excerpt">
-                            {% if trip.data.label == 'glenlivet' %}
-                                {{ trip.page.excerpt | truncate(50) }}
+                            {% if featured.data.label == 'glenlivet' %}
+                                {{ featured.page.excerpt | truncate(50) }}
                             {% else %}
-                                {{ trip.page.excerpt }}
+                                {{ featured.page.excerpt }}
                             {% endif %}
                         </p>
                     </article>

diff --git a/content/trips/cairngorms/index.md b/content/trips/cairngorms/index.md
@@ -16,7 +16,7 @@ sidetrip_km: 0
 social: cairngorms.jpg
 start: Pitlochry
 subtitle: Our first long bike trip
-tags: trip
+tags: ['trip', 'featured']
 title: Cairngorms
 total_duration: 1-09:00:00
 ---

diff --git a/content/trips/lindisfarne/index.md b/content/trips/lindisfarne/index.md
@@ -16,7 +16,7 @@ name: lindisfarne
 social: lindisfarne.jpg
 start: Berwick-upon-Tweed
 subtitle: The causeway that floods twice a day
-tags: trip
+tags: ['trip', 'featured']
 title: Lindisfarne
 total_duration: 07:05:36
 total_elevation: 500m

diff --git a/content/trips/loch-lomond/index.md b/content/trips/loch-lomond/index.md
@@ -14,7 +14,7 @@ name: loch-lomond
 social: loch_lomond.jpg
 start: Balloch
 subtitle: A beautiful but miserable ride
-tags: trip
+tags: ['trip', 'featured']
 title: Loch Lomond
 total_duration: 07:42:17
 total_elevation: 500m

diff --git a/content/trips/outer-hebrides-skye/index.md b/content/trips/outer-hebrides-skye/index.md
@@ -16,7 +16,7 @@ sidetrip_km: 0
 social: outer-hebrides-skye.jpg
 start: Castlebay
 subtitle: Wherein we learn our gear is not Scotland-proof
-tags: trip
+tags: ['trip', 'featured']
 title: Outer Hebrides and Skye
 total_duration: 1-06:44:05
 ---

diff --git a/css/home.css b/css/home.css
@@ -7,6 +7,11 @@
     width: 100%;
   }
 
+  body {
+    background-image:  url("../img/img-noise-1000x1000.png"),linear-gradient(to bottom left, var(--color-neutral-dark) 0.1%, transparent 20%, var(--color-neutral-dark)), linear-gradient(to right, var(--color-neutral-dark) 1%, transparent, var(--color-neutral-dark) 99%);
+    background-blend-mode: hard-light;
+  }
+
   @media screen and (width > 35rem) {
     main {
       align-items: start;
@@ -47,6 +52,7 @@
     /* specific placement adjustments */
     [data-label]:nth-child(1) {
       --grid-column: 2 / var(--grid-col-span);
+      align-self: end;
     }
 
     [data-label]:nth-child(2) {
@@ -149,10 +155,10 @@
     display: grid;
     column-gap: var(--space-m);
     row-gap: var(--space-s);
-    background: radial-gradient(whitesmoke, transparent),
-      url("../img/img-noise-1000x1000.png");
+    background: var(--color-neutral-light);
     background-size: cover;
     padding: var(--space-s-m);
+    border: var(--space-3xs) solid var(--color-neutral-dark);
   }
 }
 
@@ -279,30 +285,13 @@
     .title {
       display: flex;
       align-items: center;
-      font-size: var(--font-step-2);
+      font-size: var(--font-step-1);
       font-weight: 600;
       font-variation-settings: "SOFT" 100;
       text-transform: uppercase;
-
-      &:first-letter {
-        font-size: var(--font-step-3);
-        font-weight: 500;
-        font-variation-settings: "SOFT" 50;
-        letter-spacing: -0.025em;
-      }
-
-      &::after {
-        content: "";
-        display: block;
-        height: var(--divider-thickness);
-        width: 100%;
-        margin-inline-start: var(--space-s);
-        background-color: var(--color-neutral-dark);
-      }
     }
 
     .subtitle {
-      font-family: var(--font-italic);
       font-weight: 400;
       font-size: var(--font-base);
     }
@@ -398,6 +387,7 @@
       line-height: 1.2;
     }
 
+    .title,
     .subtitle,
     .excerpt,
     & picture {
@@ -609,8 +599,6 @@
       line-height: 1;
       text-align: center;
       border: var(--space-3xs) solid black;
-      outline: calc(var(--space-3xs) * 0.5) solid black;
-      outline-offset: calc(var(--space-3xs) * 0.5);
     }
 
     .excerpt {