diff --git a/content/_includes/trip-layout.njk b/content/_includes/trip-layout.njk index b33238f..0580e72 100644 --- a/content/_includes/trip-layout.njk +++ b/content/_includes/trip-layout.njk @@ -23,7 +23,7 @@ -
+
-
-

{{ title }}

-
-
-
- {% set summary = content.split("\n") %} - {# pull first paragraph out of summary for different styling #} - {{ summary.shift() | safe }} - -
- - - - - - - - - - - - - - - - - - - - - - - -
Distance{{ kilometres }}km
Avg. Speed{{ average_speed }}km/h
Ascent{{ ascent }}m
Descent{{ descent }}m
Bike time{{ total_duration }}
- {% for item in summary %} - {{ item | safe }} - {% endfor %} -
-
- {% if name %} -
- {% for day in collections[name] %} -
-
-

{{ day.data.title }}

-

Bike Day {{ loop.index }}

-
- - - - - - - - - - - - - - - - - - - - - - - -
Distance{{ day.data.kilometres }}km
Avg. Speed{{ day.data.average_speed }}km/h
Ascent{{ day.data.ascent }}m
Descent{{ day.data.descent }}m
Bike time{{ day.data.total_duration }}
- {{ day.content | safe }} -
- {% endfor %} -
- - {% endif %} -
-
-
-

- © 2024 Maureen Holland and Jack Araz. Don't sip and cycle. -

- - +

{{ title }}

+
+
+
+ {% set summary = content.split("\n") %} + {# pull first paragraph out of summary for different styling #} + {{ summary.shift() | safe }} + +
+ + + + + + + + + + + + + + + + + + + + + + + +
Distance{{ kilometres }}km
Avg. Speed{{ average_speed }}km/h
Ascent{{ ascent }}m
Descent{{ descent }}m
Bike time{{ total_duration }}
+ {% for item in summary %} + {{ item | safe }} + {% endfor %}
- -
- + + {% if name %} +
+ {% for day in collections[name] %} +
+
+

{{ day.data.title }}

+

Bike Day {{ loop.index }}

+
+ + + + + + + + + + + + + + + + + + + + + + + +
Distance{{ day.data.kilometres }}km
Avg. Speed{{ day.data.average_speed }}km/h
Ascent{{ day.data.ascent }}m
Descent{{ day.data.descent }}m
Bike time{{ day.data.total_duration }}
+ {{ day.content | safe }} +
+ {% endfor %} +
+ + {% endif %} + + \ No newline at end of file diff --git a/content/index.njk b/content/index.njk index 9fe9a72..7f5eea2 100644 --- a/content/index.njk +++ b/content/index.njk @@ -27,39 +27,34 @@
{# 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 #} - +
-

{{ trip.data.title }}

+

{{ featured.data.title }}

- {{ trip.data.subtitle }} + {{ featured.data.subtitle }}

- {% 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" %}

- {{ trip.data.days }} + {{ featured.data.days }} days

- {{ trip.data.kilometres }} + {{ featured.data.kilometres }} km

From - {{ trip.data.start }} + {{ featured.data.start }} to - {{ trip.data.end }} + {{ featured.data.end }}

- {% 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 %}

diff --git a/content/trips/cairngorms/index.md b/content/trips/cairngorms/index.md index 1a886d7..7b7b9e1 100644 --- 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 index d6091d8..ae07a89 100644 --- 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 index afc9666..8b8b596 100644 --- 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 index b6ce0c1..22102e3 100644 --- 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 index 266e604..bd9854b 100644 --- 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 { diff --git a/css/trip.css b/css/trip.css index 47b2a77..03655aa 100644 --- a/css/trip.css +++ b/css/trip.css @@ -1,367 +1,259 @@ @import url(https://unpkg.com/leaflet@1.9.4/dist/leaflet.css) layer(vendor); @layer vendor { - /* prevent child z-index from competing with rest of page */ - .map { - isolation: isolate; - } - - /* remove default link styling */ - .map a { - box-shadow: unset; - } -} -@layer template { - /* note: main is max-width 100% to allow white background / mountain svg overlap */ - .grid { - --gutter: var(--space-s); - --max-line-length: fit-content(50ch); - --grid-template-columns: minmax(0, 1fr) [content-start] - var(--max-line-length) [content-end] minmax(0, 1fr); - } - - main.grid > *, - .subgrid > * { - grid-column: content; - } - - /* to investigate: should be falling back to --gutter value, but isn't taking effect */ - .subgrid { - --subgrid-row-gutter: var(--space-s); - } - - .stats { - --float-width: fit-content; - } - - @media screen and (width < 28rem) { - main > .grid { - --column-gutter: 0; + /* prevent child z-index from competing with rest of page */ + .map { + isolation: isolate; } - } - - @supports (grid-template-columns: subgrid) { - @media screen and (width > 78rem) { - .grid { - --column-gutter: var(--space-l); - --grid-template-columns: 1fr [content-start] var(--max-line-length) - [content-end] minmax(20%, 25rem) [sidebar-end] 1fr; - --grid-template-rows: [summary-content-start] auto auto - [day-content-start] auto [day-content-end]; - - .subgrid { - --subgrid-row: summary-content-start / day-content-end; - --subgrid-template-rows: subgrid; - } - - .subgrid + * { - grid-row: day-content; - } - .map { - grid-column: content-end / sidebar-end; - grid-row: 1 / -1; /* this -1 for row only works within subgrid */ - position: sticky; - top: var(--space-l); - } - } + /* remove default link styling */ + .map a { + box-shadow: unset; } - } } -/* Mountain Header */ -@layer component { - :root { - --title-stack-index: 1; - } - - [class^="mountain"] ~ header { - height: calc(3 * var(--font-step-5)); - - @media screen and (width > 64rem) { - height: calc(2.5 * var(--font-step-5)); +@layer template { + .grid { + --gutter: var(--space-s); + --max-line-length: fit-content(50ch); + --grid-template-columns: minmax(0, 1fr) [content-start] var(--max-line-length) [content-end] minmax(0, 1fr); } - } - - h1 { - position: relative; - z-index: var(--title-stack-index); - } - - /* todo: manage heights better across screen sizes*/ - :where(svg[class^="mountain"]) { - position: absolute; - inset: 0; - width: 100%; - } - - .mountain-background { - top: calc(var(--font-step-5) * 0.6); - fill: var(--color-accent-light); - } - - .mountain-midground { - height: 150px; - top: calc(var(--font-step-5) * 1.2); - fill: var(--color-accent); - } - - .mountain-foreground { - top: calc(var(--font-step-5) * 0.8); - height: 250px; - fill: var(--color-accent-dark); - } - - main { - --max-width: 100%; - position: relative; - /* go on top of mountains */ - z-index: var(--title-stack-index); - padding-top: var(--space-l-xl); - background-color: var(--color-neutral-light); - } -} -/* Mountain Header: Parallax */ -@media screen and (prefers-reduced-motion: no-preference) { - /* figure out height responsiveness later */ - @media screen and (height > 39rem) { - /* support query and more on parallax technique: https://keithclark.co.uk/articles/practical-css-parallax/ */ - @supports ( - (perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) - ) { - @layer variant { - .parallax { - height: 100vh; - overflow-x: hidden; - overflow-y: auto; - overscroll-behavior: contain; - perspective: 1px; - isolation: isolate; /* prevent descendent z-index from fighting with nav or footer*/ - } - - h1 { - /* - I wanted to nest mountains inside header, but then sticky behaviour doesn't take - effect on Firefox. Seems related to spec implementation for perspective and further - descendents: https://bugzilla.mozilla.org/show_bug.cgi?id=716524 - - tried with preserve-3d on header (maybe try with it on h1 too?) - */ - position: sticky; - top: var(--space-m); /* match block padding*/ - } + main.grid>*, + .subgrid>* { + grid-column: content; + } - :where(svg[class^="mountain"]):last-of-type { - z-index: calc(var(--title-stack-index) + 1); - } + /* to investigate: should be falling back to --gutter value, but isn't taking effect */ + .subgrid { + --subgrid-row-gutter: var(--space-s); + } - /* todo: manage heights better across screen sizes*/ - :where(svg[class^="mountain"]) { - position: fixed; - } + .stats { + --float-width: fit-content; + } - .mountain-background { - height: 100px; - top: -550px; - transform: translateZ(-2px); - scale: 3; + @media screen and (width < 28rem) { + main>.grid { + --column-gutter: 0; } + } - .mountain-midground { - top: -150px; - transform: translateZ(-1px); - scale: 2; + @supports (grid-template-columns: subgrid) { + @media screen and (width > 78rem) { + .grid { + --column-gutter: var(--space-l); + --grid-template-columns: 1fr [content-start] var(--max-line-length) [content-end] minmax(20%, 25rem) [sidebar-end] 1fr; + --grid-template-rows: [summary-content-start] auto auto [day-content-start] auto [day-content-end]; + + .subgrid { + --subgrid-row: summary-content-start / day-content-end; + --subgrid-template-rows: subgrid; + } + + .subgrid+* { + grid-row: day-content; + } + + .map { + grid-column: content-end / sidebar-end; + grid-row: 1 / -1; + /* this -1 for row only works within subgrid */ + position: sticky; + top: var(--space-l); + } + } } + } +} - .mountain-foreground { - top: -20px; - transform: translateZ(0); - } +/* Mountain Header */ +@layer component { + :root { + --title-stack-index: 1; + } - main { - /* go on top of last mountain */ - z-index: calc(var(--title-stack-index) + 2); - } + /* position mountains relative to header */ + .trip-header { + position: relative; + padding-block-end: var(--font-step-5); + overflow: hidden; + } - @media screen and (width > 38rem) { - .mountain-background { - top: -400px; - height: 200px; - } + h1 { + position: relative; + z-index: var(--title-stack-index); + } - .mountain-midground { - top: -70px; - } + :where(svg[class^="mountain"]) { + position: absolute; + inset-inline: 0; + } - .mountain-foreground { - top: 30px; - } - } + .mountain-background { + fill: var(--color-accent-light); + inset-block-end: 0; + } - @media screen and (width > 75rem) { - .mountain-background { - top: -300px; - height: initial; - } + .mountain-midground { + fill: var(--color-accent); + inset-block-end: calc(-1 * (var(--font-step-5) / 3)); + scale: 2; + } - .mountain-midground { - top: 30px; - } + .mountain-foreground { + fill: var(--color-accent-dark); + inset-block-end: calc(-1 * (var(--font-step-5) / 5)); + } - .mountain-foreground { - top: 100px; - } - } - } + main { + padding-top: var(--space-l-xl); } - } } /* maybe split out stats and map styling to separate components? */ /* Trip (Stack, Stats, Map) */ @layer component { - [data-trip-content] { - display: flow-root; - } - - .iframe-container { - width: 100%; - position: relative; - overflow: hidden; - aspect-ratio: 1/1; - - & iframe { - position: absolute; - inset: 0; - width: 100%; - height: 100%; + [data-trip-content] { + display: flow-root; } - } - - .map path { - transition: opacity var(--transition-duration); - } - - .map:has([data-animation="highlight"]) - path:not([data-animation="highlight"]) { - opacity: 0.1; - } - - /* todo: add elevation profile svg in after element with accent color */ - .stats { - container: stats / inline-size; - display: block; /* allows container queries to take effect */ - padding-block: var(--space-xs); - padding-inline: var(--space-s); - border: 2px solid var(--color-accent-dark); - box-shadow: -2px 3px 0 var(--color-accent-dark), - -3px 4px 0 var(--color-accent-dark), -4px 5px 0 var(--color-accent-dark), - -5px 6px 0 var(--color-accent-dark); - border-radius: var(--space-xs); - background-color: var(--color-accent-light); - - & tr { - width: min-content; + + .iframe-container { + width: 100%; + position: relative; + overflow: hidden; + aspect-ratio: 1/1; + + & iframe { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + } } - & th { - width: max-content; - text-align: left; + .map path { + transition: opacity var(--transition-duration); } - } - @container stats (width <= 20rem) { - .stats th { - padding-inline-end: var(--space-s); /* simulate margin */ + .map:has([data-animation="highlight"]) path:not([data-animation="highlight"]) { + opacity: 0.1; } - } - - @container stats (width > 20rem) { - .stats tbody { - --nb-columns: 2; - display: grid; - grid-template-columns: repeat(var(--nb-columns), auto); - row-gap: var(--space-xs); + + /* todo: add elevation profile svg in after element with accent color */ + .stats { + container: stats / inline-size; + display: block; + /* allows container queries to take effect */ + padding-block: var(--space-xs); + padding-inline: var(--space-s); + border: 2px solid var(--color-accent-dark); + box-shadow: -2px 3px 0 var(--color-accent-dark), + -3px 4px 0 var(--color-accent-dark), -4px 5px 0 var(--color-accent-dark), + -5px 6px 0 var(--color-accent-dark); + border-radius: var(--space-xs); + background-color: var(--color-accent-light); + + & th { + width: max-content; + text-align: left; + } } - .stats tr > * { - display: block; + @container stats (width <=20rem) { + .stats th { + padding-inline-end: var(--space-s); + /* simulate margin */ + } } - } - @container stats (width > 24rem) { - .stats tbody { - --nb-columns: 3; + @container stats (width > 20rem) { + .stats tbody { + --nb-columns: 2; + display: grid; + grid-template-columns: repeat(var(--nb-columns), auto); + row-gap: var(--space-xs); + } + + .stats tr>* { + display: block; + } } - } - @container stats (width > 32rem) { - .stats tbody { - --nb-columns: 4; + @container stats (width > 24rem) { + .stats tbody { + --nb-columns: 3; + } } - } - @container stats (width > 36rem) { - .stats tbody { - --nb-columns: 5; + @container stats (width > 32rem) { + .stats tbody { + --nb-columns: 4; + } + } + + @container stats (width > 36rem) { + .stats tbody { + --nb-columns: 5; + } } - } } /* Trip: Summary (Intro Paragraph) */ @layer variant { - [data-trip-content="summary"] { - > p:first-of-type { - font-size: var(--font-step-1); - font-weight: 400; - line-height: 1.4; - - /* still need the ampersand */ - &::first-line { - font-variant-caps: petite-caps; - font-weight: 700; - } - - /* todo: manage RTL styling */ - @media screen and (width > 37.5rem) { - &::first-letter { - float: left; - /* logical properties don't seem to work here */ - /* chrome not recognizing font step definition */ - margin-left: calc(-0.33 * var(--font-step-5)); - font-size: var(--font-step-5); - letter-spacing: 0.05em; - line-height: 1; - } - } - - @media screen and (width > 56rem) { - line-height: unset; - - &::first-letter { - margin-top: unset; + [data-trip-content="summary"] { + >p:first-of-type { + font-size: var(--font-step-1); + font-weight: 400; + line-height: 1.4; + + /* still need the ampersand */ + &::first-line { + font-variant-caps: petite-caps; + font-weight: 700; + } + + /* todo: manage RTL styling */ + @media screen and (width > 37.5rem) { + &::first-letter { + float: left; + /* logical properties don't seem to work here */ + margin-left: calc(-0.33 * var(--font-step-5)); + font-size: var(--font-step-5); + font-weight: initial; + letter-spacing: 0.05em; + /* hack for safari/chrome to get letter poking above rest of line */ + line-height: 0.5; + } + } + + @media screen and (width > 56rem) { + line-height: unset; + + &::first-letter { + margin-top: unset; + } + } } - } } - } } @supports not (selector(& a)) { - [data-trip-content] { - display: block; - width: 60ch; - margin-inline: auto; - } - - [data-trip-content] > *:not(:last-child) { - margin-block-end: var(--space-s); - } - - /* todo: add column styling for full-width stats */ - .stats { - /* weird this isn't applying from main styles, it's not nested... */ - background-color: var(--color-accent-light); - padding: var(--space-xs) var(--space-s); - } -} + [data-trip-content] { + display: block; + width: 60ch; + margin-inline: auto; + } + + [data-trip-content]>*:not(:last-child) { + margin-block-end: var(--space-s); + } + + /* todo: add column styling for full-width stats */ + .stats { + /* weird this isn't applying from main styles, it's not nested... */ + background-color: var(--color-accent-light); + padding: var(--space-xs) var(--space-s); + } +} \ No newline at end of file