From 69647cbe80f5bd09e38da537ae482ecd33ec8f81 Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Wed, 3 Jul 2024 10:42:55 -0400 Subject: [PATCH 1/7] Remove parallax for now, too many magic numbers --- content/_includes/trip-layout.njk | 7 +- css/trip.css | 125 +++--------------------------- 2 files changed, 12 insertions(+), 120 deletions(-) diff --git a/content/_includes/trip-layout.njk b/content/_includes/trip-layout.njk index b33238f..06a2014 100644 --- a/content/_includes/trip-layout.njk +++ b/content/_includes/trip-layout.njk @@ -23,8 +23,8 @@ -
- + -

{{ title }}

@@ -228,7 +227,5 @@
- - \ No newline at end of file diff --git a/css/trip.css b/css/trip.css index 47b2a77..cbae20a 100644 --- a/css/trip.css +++ b/css/trip.css @@ -13,7 +13,6 @@ } @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); @@ -76,12 +75,11 @@ --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)); - } + /* position mountains relative to header */ + header { + position: relative; + padding-block-end: var(--font-step-5); + overflow: hidden; } h1 { @@ -89,132 +87,29 @@ z-index: var(--title-stack-index); } - /* todo: manage heights better across screen sizes*/ :where(svg[class^="mountain"]) { position: absolute; - inset: 0; - width: 100%; + inset-inline: 0; } .mountain-background { - top: calc(var(--font-step-5) * 0.6); fill: var(--color-accent-light); + inset-block-end: 0; } .mountain-midground { - height: 150px; - top: calc(var(--font-step-5) * 1.2); fill: var(--color-accent); + inset-block-end: calc(-1 * (var(--font-step-5) / 3)); + scale: 2; } .mountain-foreground { - top: calc(var(--font-step-5) * 0.8); - height: 250px; fill: var(--color-accent-dark); + inset-block-end: calc(-1 * (var(--font-step-5) / 5)); } 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*/ - } - - :where(svg[class^="mountain"]):last-of-type { - z-index: calc(var(--title-stack-index) + 1); - } - - /* todo: manage heights better across screen sizes*/ - :where(svg[class^="mountain"]) { - position: fixed; - } - - .mountain-background { - height: 100px; - top: -550px; - transform: translateZ(-2px); - scale: 3; - } - - .mountain-midground { - top: -150px; - transform: translateZ(-1px); - scale: 2; - } - - .mountain-foreground { - top: -20px; - transform: translateZ(0); - } - - main { - /* go on top of last mountain */ - z-index: calc(var(--title-stack-index) + 2); - } - - @media screen and (width > 38rem) { - .mountain-background { - top: -400px; - height: 200px; - } - - .mountain-midground { - top: -70px; - } - - .mountain-foreground { - top: 30px; - } - } - - @media screen and (width > 75rem) { - .mountain-background { - top: -300px; - height: initial; - } - - .mountain-midground { - top: 30px; - } - - .mountain-foreground { - top: 100px; - } - } - } - } } } From b4a179058bcea485e7d48e9dd70bf83059d9897f Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Wed, 3 Jul 2024 11:01:13 -0400 Subject: [PATCH 2/7] Fix trip first letter styling for chrome/safari --- css/trip.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/css/trip.css b/css/trip.css index cbae20a..c9e60cb 100644 --- a/css/trip.css +++ b/css/trip.css @@ -223,11 +223,12 @@ &::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); + font-weight: initial; letter-spacing: 0.05em; - line-height: 1; + /* hack for safari/chrome to get letter poking above rest of line */ + line-height: 0.5; } } From 6001fb2a26815a315966d792eee5900fdcf8211d Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Wed, 3 Jul 2024 11:06:28 -0400 Subject: [PATCH 3/7] Keep 1 day trip stat on single line --- css/trip.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/css/trip.css b/css/trip.css index c9e60cb..a5bd048 100644 --- a/css/trip.css +++ b/css/trip.css @@ -156,10 +156,6 @@ border-radius: var(--space-xs); background-color: var(--color-accent-light); - & tr { - width: min-content; - } - & th { width: max-content; text-align: left; From 778452443f98a1586c004ef84136a6ea186a68b8 Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Wed, 3 Jul 2024 11:55:11 -0400 Subject: [PATCH 4/7] Change home page colors --- css/home.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/css/home.css b/css/home.css index 266e604..297bfcc 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; @@ -149,10 +154,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); } } @@ -609,8 +614,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 { From 3834359cb390a8c8a9bba6a170232b8873cf0efc Mon Sep 17 00:00:00 2001 From: maureenlholland Date: Wed, 3 Jul 2024 12:20:10 -0400 Subject: [PATCH 5/7] Add featured tag, update ardbeg for outer hebrides content --- content/index.njk | 29 +++++++++------------- content/trips/cairngorms/index.md | 2 +- content/trips/lindisfarne/index.md | 2 +- content/trips/loch-lomond/index.md | 2 +- content/trips/outer-hebrides-skye/index.md | 2 +- css/home.css | 21 +++------------- 6 files changed, 19 insertions(+), 39 deletions(-) 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 297bfcc..bd9854b 100644 --- a/css/home.css +++ b/css/home.css @@ -52,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) { @@ -284,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); } @@ -403,6 +387,7 @@ line-height: 1.2; } + .title, .subtitle, .excerpt, & picture { From 3a4df0361029340dbd30d504299506ff34c3b8e3 Mon Sep 17 00:00:00 2001 From: "Jack Y. Araz" Date: Fri, 5 Jul 2024 08:08:38 -0400 Subject: [PATCH 6/7] bugfix --- content/_includes/trip-layout.njk | 264 +++++++++--------- css/trip.css | 432 +++++++++++++++--------------- 2 files changed, 349 insertions(+), 347 deletions(-) diff --git a/content/_includes/trip-layout.njk b/content/_includes/trip-layout.njk index 06a2014..b50d22f 100644 --- a/content/_includes/trip-layout.njk +++ b/content/_includes/trip-layout.njk @@ -23,8 +23,8 @@ -
- + -

{{ 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/css/trip.css b/css/trip.css index a5bd048..03655aa 100644 --- a/css/trip.css +++ b/css/trip.css @@ -1,259 +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; - } + + /* prevent child z-index from competing with rest of page */ + .map { + isolation: isolate; + } + + /* remove default link styling */ + .map a { + box-shadow: unset; + } } @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); - } - - 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; + .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; } - } - - @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; + /* 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; } + } - .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); + @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 Header */ @layer component { - :root { - --title-stack-index: 1; - } - - /* position mountains relative to header */ - header { - position: relative; - padding-block-end: var(--font-step-5); - overflow: hidden; - } - - h1 { - position: relative; - z-index: var(--title-stack-index); - } - - :where(svg[class^="mountain"]) { - position: absolute; - inset-inline: 0; - } - - .mountain-background { - fill: var(--color-accent-light); - inset-block-end: 0; - } - - .mountain-midground { - fill: var(--color-accent); - inset-block-end: calc(-1 * (var(--font-step-5) / 3)); - scale: 2; - } - - .mountain-foreground { - fill: var(--color-accent-dark); - inset-block-end: calc(-1 * (var(--font-step-5) / 5)); - } - - main { - padding-top: var(--space-l-xl); - } + :root { + --title-stack-index: 1; + } + + /* position mountains relative to header */ + .trip-header { + position: relative; + padding-block-end: var(--font-step-5); + overflow: hidden; + } + + h1 { + position: relative; + z-index: var(--title-stack-index); + } + + :where(svg[class^="mountain"]) { + position: absolute; + inset-inline: 0; + } + + .mountain-background { + fill: var(--color-accent-light); + inset-block-end: 0; + } + + .mountain-midground { + fill: var(--color-accent); + inset-block-end: calc(-1 * (var(--font-step-5) / 3)); + scale: 2; + } + + .mountain-foreground { + fill: var(--color-accent-dark); + inset-block-end: calc(-1 * (var(--font-step-5) / 5)); + } + + 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); - - & th { - width: max-content; - text-align: left; + + .iframe-container { + width: 100%; + position: relative; + overflow: hidden; + aspect-ratio: 1/1; + + & iframe { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + } } - } - @container stats (width <= 20rem) { - .stats th { - padding-inline-end: var(--space-s); /* simulate margin */ + .map path { + transition: opacity var(--transition-duration); } - } - - @container stats (width > 20rem) { - .stats tbody { - --nb-columns: 2; - display: grid; - grid-template-columns: repeat(var(--nb-columns), auto); - row-gap: var(--space-xs); + + .map:has([data-animation="highlight"]) path:not([data-animation="highlight"]) { + opacity: 0.1; } - .stats tr > * { - display: block; + /* 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; + } } - } - @container stats (width > 24rem) { - .stats tbody { - --nb-columns: 3; + @container stats (width <=20rem) { + .stats th { + padding-inline-end: var(--space-s); + /* simulate margin */ + } } - } - @container stats (width > 32rem) { - .stats tbody { - --nb-columns: 4; + @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 > 36rem) { - .stats tbody { - --nb-columns: 5; + @container stats (width > 24rem) { + .stats tbody { + --nb-columns: 3; + } } - } -} -/* 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 */ - 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; + @container stats (width > 32rem) { + .stats tbody { + --nb-columns: 4; } - } + } - @media screen and (width > 56rem) { - line-height: unset; + @container stats (width > 36rem) { + .stats tbody { + --nb-columns: 5; + } + } +} - &::first-letter { - margin-top: unset; +/* 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 */ + 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 From 4fb25ceccfbd1fc0cfb4e29c1025da02466541a6 Mon Sep 17 00:00:00 2001 From: "Jack Y. Araz" Date: Fri, 5 Jul 2024 08:14:50 -0400 Subject: [PATCH 7/7] fix map --- content/_includes/trip-layout.njk | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/content/_includes/trip-layout.njk b/content/_includes/trip-layout.njk index b50d22f..0580e72 100644 --- a/content/_includes/trip-layout.njk +++ b/content/_includes/trip-layout.njk @@ -109,9 +109,7 @@ title="Trip map" height="300px" width="100%" - src="../../maps/{{ title | lower | replace(" - ", " - -") }}.html"> + src="../../maps/{{ title | lower | replace(" ", "-") }}.html">