From 682ef8d1d1020e1453ac31c0729313a8dec9cff4 Mon Sep 17 00:00:00 2001 From: Katherina Walshe-Grey Date: Wed, 12 Feb 2025 23:16:21 +0000 Subject: [PATCH 1/5] Redo layout to avoid bug --- index.html | 14 +++----------- style.css | 29 +++++++++++++++++------------ 2 files changed, 20 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index 1d64d21..ef4f2fb 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@

The Trees of Kortirion

-
+

Alalminórë

O ancient city on a leaguered hill!
@@ -61,9 +61,6 @@ Of mighty ships too soon, too soon, to sail
To other days beyond these sunlit seas.

-
- -

Narquelion

Alalminórë! Green heart of this Isle
@@ -114,9 +111,6 @@ In heedless winds beneath the sullen sky,
And fall like dying birds among the meres.

-
- -

Hrívion

Alas! Kortirion, Queen of Elms, alas!
@@ -166,9 +160,7 @@ And silence. Here I too will dwell;
Kortirion, I will meet the winter here.

-
-

Mettanyë

I would not find the burning domes and sands
@@ -183,7 +175,7 @@ The Folk Immortal under withered elms,
Alalminórë once in ancient realms.

-
+ - \ No newline at end of file + diff --git a/style.css b/style.css index 03aac1b..97dd74e 100644 --- a/style.css +++ b/style.css @@ -57,21 +57,10 @@ h2::before { display: block; font-style: normal; font-variant-caps: all-small-caps; -} - -/* FIXME: using ch units here somehow breaks the OpenType features. */ -/* ...but only in Firefox, and not on Mac. **/ -/* needs further investigation. conceivably a Gecko bug. */ -/* verified it happens with other fonts too e.g. Open Sans (ss02 has a different "g") */ - -.section { - max-width: 55ch; - margin: 0 auto; + margin-bottom: 0.65rem; } .verse { - max-width: 47ch; /* Through the wood’s sunny aisles and tree-propped halls */ - margin-left: auto; margin-bottom: 1.3rem; } @@ -79,6 +68,22 @@ h2::before { padding-left: 1em; } +/* FIXME: These should be specified in ch units in case the webfont doesn't load, + * but using ch units somehow breaks the OpenType features. + * ...but only in Firefox, and not on Mac. Possibly a Gecko bug? + */ + +main { + max-width: 19.2rem; /* 40ch */ + margin: 0 auto; +} + +@media (min-width: 33.6rem) /* 70ch */ { + main { + text-wrap: nowrap; + } +} + .line { display: inline-block; margin-left: 2em; From 1cf5012db1fc93f69cc0c09941fda568dc617641 Mon Sep 17 00:00:00 2001 From: Katherina Walshe-Grey Date: Wed, 12 Feb 2025 23:35:20 +0000 Subject: [PATCH 2/5] Add author details --- index.html | 2 ++ style.css | 7 +++++++ 2 files changed, 9 insertions(+) diff --git a/index.html b/index.html index ef4f2fb..4e23bc4 100644 --- a/index.html +++ b/index.html @@ -176,6 +176,8 @@ Alalminórë once in ancient realms.

+ +
J. R. R. Tolkien
1962
diff --git a/style.css b/style.css index 97dd74e..527028d 100644 --- a/style.css +++ b/style.css @@ -89,3 +89,10 @@ main { margin-left: 2em; text-indent: -2em; } + +.author { + text-align: center; + font-variant-caps: all-small-caps; + font-variant-numeric: oldstyle-nums; + margin-top: 3.9rem; +} From 30e14ade494f420edc8633f7d079b7a7ffda75e5 Mon Sep 17 00:00:00 2001 From: Katherina Walshe-Grey Date: Wed, 12 Feb 2025 23:35:26 +0000 Subject: [PATCH 3/5] Tweak colour --- style.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 527028d..0bad3c2 100644 --- a/style.css +++ b/style.css @@ -26,12 +26,14 @@ html { font-size-adjust: 0.4; font-variant-alternates: swash(fancy); line-height: 1.3rem; + color: #333; + background-color: #f9f9ef; + scrollbar-color: #ce5e46 #f9f9ef; } body { counter-reset: section; margin: 7.8rem 1.3rem; - background-color: #f9f9ef; } h1, h2 { From eea2e5cff74d1edc374c81619cb6643cbf2a4ea5 Mon Sep 17 00:00:00 2001 From: Katherina Walshe-Grey Date: Wed, 12 Feb 2025 23:35:42 +0000 Subject: [PATCH 4/5] Fix typos --- index.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 4e23bc4..231279c 100644 --- a/index.html +++ b/index.html @@ -78,14 +78,13 @@

A wind in the grass! The turning of the year.
A shiver in the reeds beside the stream,
- A whisper in the trees - afar they hear,
+ A whisper in the trees – afar they hear,
Piercing the heart of summer’s tangled dream,
Chill music that a herald piper plays
Foreseeing winter and the leafless days.
The late flowers trembling on the ruined walls
Already stoop to hear that elven-flute.
- Through the wood’s sunny aisles and tree-propped - halls
+ Through the wood’s sunny aisles and tree-propped halls
Winding amid the green with clear cold note
Like a thin strand of silver glass remote.

@@ -136,7 +135,7 @@ You dance like shimmering shadows in the wind,
As once you danced upon the shining lawn
Of Elvenhome, before we were, before
- You crossed wide seas uno the mortal shore. + You crossed wide seas unto the mortal shore.

Now are your trees, old grey Kortirion,
From 815792cd169c6958d7fa28c984a90c45c320e028 Mon Sep 17 00:00:00 2001 From: Katherina Walshe-Grey Date: Wed, 12 Feb 2025 23:54:40 +0000 Subject: [PATCH 5/5] Explicitly scope swashes to headings --- style.css | 33 +++++++++++++++------------------ 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/style.css b/style.css index 0bad3c2..a54d8ba 100644 --- a/style.css +++ b/style.css @@ -24,7 +24,6 @@ html { font-family: "EB Garamond", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif; font-size: 1.25rem; font-size-adjust: 0.4; - font-variant-alternates: swash(fancy); line-height: 1.3rem; color: #333; background-color: #f9f9ef; @@ -36,11 +35,16 @@ body { margin: 7.8rem 1.3rem; } +main { + max-width: 40ch; + margin: 0 auto; +} + h1, h2 { text-align: center; font-weight: normal; - margin: 1.95rem 0 0.65rem; line-height: 2.6rem; + margin: 1.95rem 0 0.65rem; } h1 { @@ -51,6 +55,7 @@ h1 { h2 { font-size: 1.5625rem; font-style: italic; + font-variant-alternates: swash(fancy); } h2::before { @@ -70,17 +75,16 @@ h2::before { padding-left: 1em; } -/* FIXME: These should be specified in ch units in case the webfont doesn't load, - * but using ch units somehow breaks the OpenType features. - * ...but only in Firefox, and not on Mac. Possibly a Gecko bug? - */ - -main { - max-width: 19.2rem; /* 40ch */ - margin: 0 auto; +.author { + text-align: center; + font-variant-caps: all-small-caps; + font-variant-numeric: oldstyle-nums; + margin-top: 3.9rem; } -@media (min-width: 33.6rem) /* 70ch */ { +/* Long lines: allow to overflow the column unless they would go offscreen altogether */ + +@media (min-width: 70ch) { main { text-wrap: nowrap; } @@ -91,10 +95,3 @@ main { margin-left: 2em; text-indent: -2em; } - -.author { - text-align: center; - font-variant-caps: all-small-caps; - font-variant-numeric: oldstyle-nums; - margin-top: 3.9rem; -}