qenya/kortirion.uk
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: qenya:a920fcb98afd1b9728696f61cadd8b498b928c3a
Branches Tags
qenya:main
...
compare: qenya:815792cd169c6958d7fa28c984a90c45c320e028
Branches Tags
qenya:main

5 commits
a920fcb98a ... 815792cd16

Author SHA1 Message Date
Katherina Walshe-Grey 815792cd16 Explicitly scope swashes to headings 2025-02-12 23:54:40 +00:00
Katherina Walshe-Grey eea2e5cff7 Fix typos 2025-02-12 23:49:49 +00:00
Katherina Walshe-Grey 30e14ade49 Tweak colour 2025-02-12 23:49:49 +00:00
Katherina Walshe-Grey 1cf5012db1 Add author details 2025-02-12 23:35:20 +00:00
Katherina Walshe-Grey 682ef8d1d1 Redo layout to avoid bug 2025-02-12 23:16:21 +00:00
2 changed files with 34 additions and 30 deletions
Show stats Expand all files Collapse all files

21
index.html
View file

@ -11,7 +11,7 @@
<body> <body>
<h1>The Trees of Kortirion</h1> <h1>The Trees of Kortirion</h1>
<div class="section"> <main>
<h2>Alalminórë</h2> <h2>Alalminórë</h2>
<p class="verse"> <p class="verse">
<span class="line">O ancient city on a leaguered hill!</span><br /> <span class="line">O ancient city on a leaguered hill!</span><br />
@ -61,9 +61,6 @@
<span class="line">Of mighty ships too soon, too soon, to sail</span><br /> <span class="line">Of mighty ships too soon, too soon, to sail</span><br />
<span class="line line-indented">To other days beyond these sunlit seas.</span> <span class="line line-indented">To other days beyond these sunlit seas.</span>
</p> </p>
</div>
<div class="section">
<h2 lang="qya">Narquelion</h2> <h2 lang="qya">Narquelion</h2>
<p class="verse"> <p class="verse">
<span class="line">Alalminórë! Green heart of this Isle</span><br /> <span class="line">Alalminórë! Green heart of this Isle</span><br />
@ -81,14 +78,13 @@
<p class="verse"> <p class="verse">
<span class="line">A wind in the grass! The turning of the year.</span><br /> <span class="line">A wind in the grass! The turning of the year.</span><br />
<span class="line line-indented">A shiver in the reeds beside the stream,</span><br /> <span class="line line-indented">A shiver in the reeds beside the stream,</span><br />
<span class="line">A whisper in the trees - afar they hear,</span><br /> <span class="line">A whisper in the trees &ndash; afar they hear,</span><br />
<span class="line line-indented">Piercing the heart of summer&rsquo;s tangled dream,</span><br /> <span class="line line-indented">Piercing the heart of summer&rsquo;s tangled dream,</span><br />
<span class="line">Chill music that a herald piper plays</span><br /> <span class="line">Chill music that a herald piper plays</span><br />
<span class="line">Foreseeing winter and the leafless days.</span><br /> <span class="line">Foreseeing winter and the leafless days.</span><br />
<span class="line line-indented">The late flowers trembling on the ruined walls</span><br /> <span class="line line-indented">The late flowers trembling on the ruined walls</span><br />
<span class="line">Already stoop to hear that elven-flute.</span><br /> <span class="line">Already stoop to hear that elven-flute.</span><br />
<span class="line line-indented">Through the wood&rsquo;s sunny aisles and tree-propped <span class="line line-indented">Through the wood&rsquo;s sunny aisles and tree-propped halls</span><br />
halls</span><br />
<span class="line">Winding amid the green with clear cold note</span><br /> <span class="line">Winding amid the green with clear cold note</span><br />
<span class="line">Like a thin strand of silver glass remote.</span> <span class="line">Like a thin strand of silver glass remote.</span>
</p> </p>
@ -114,9 +110,6 @@
<span class="line">In heedless winds beneath the sullen sky,</span><br /> <span class="line">In heedless winds beneath the sullen sky,</span><br />
<span class="line line-indented">And fall like dying birds among the meres.</span> <span class="line line-indented">And fall like dying birds among the meres.</span>
</p> </p>
</div>
<div class="section">
<h2 lang="qya">Hrívion</h2> <h2 lang="qya">Hrívion</h2>
<p class="verse"> <p class="verse">
<span class="line">Alas! Kortirion, Queen of Elms, alas!</span><br /> <span class="line">Alas! Kortirion, Queen of Elms, alas!</span><br />
@ -142,7 +135,7 @@
<span class="line">You dance like shimmering shadows in the wind,</span><br /> <span class="line">You dance like shimmering shadows in the wind,</span><br />
<span class="line line-indented">As once you danced upon the shining lawn</span><br /> <span class="line line-indented">As once you danced upon the shining lawn</span><br />
<span class="line">Of Elvenhome, before we were, before</span><br /> <span class="line">Of Elvenhome, before we were, before</span><br />
<span class="line">You crossed wide seas uno the mortal shore.</span> <span class="line">You crossed wide seas unto the mortal shore.</span>
</p> </p>
<p class="verse"> <p class="verse">
<span class="line">Now are your trees, old grey Kortirion,</span><br /> <span class="line">Now are your trees, old grey Kortirion,</span><br />
@ -166,9 +159,7 @@
<span class="line">And silence. Here I too will dwell;</span><br /> <span class="line">And silence. Here I too will dwell;</span><br />
<span class="line line-indented">Kortirion, I will meet the winter here.</span> <span class="line line-indented">Kortirion, I will meet the winter here.</span>
</p> </p>
</div>
<div class="section">
<h2 lang="qya">Mettanyë</h2> <h2 lang="qya">Mettanyë</h2>
<p class="verse"> <p class="verse">
<span class="line">I would not find the burning domes and sands</span><br /> <span class="line">I would not find the burning domes and sands</span><br />
@ -183,7 +174,9 @@
<span class="line">The Folk Immortal under withered elms,</span><br /> <span class="line">The Folk Immortal under withered elms,</span><br />
<span class="line">Alalminórë once in ancient realms.</span> <span class="line">Alalminórë once in ancient realms.</span>
</p> </p>
</div> </main>
<footer class="author">J. R. R. Tolkien <br /> 1962</footer>
</body> </body>
</html> </html>

41
style.css
View file

@ -24,21 +24,27 @@ html {
font-family: "EB Garamond", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif; font-family: "EB Garamond", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
font-size: 1.25rem; font-size: 1.25rem;
font-size-adjust: 0.4; font-size-adjust: 0.4;
font-variant-alternates: swash(fancy);
line-height: 1.3rem; line-height: 1.3rem;
color: #333;
background-color: #f9f9ef;
scrollbar-color: #ce5e46 #f9f9ef;
} }
body { body {
counter-reset: section; counter-reset: section;
margin: 7.8rem 1.3rem; margin: 7.8rem 1.3rem;
background-color: #f9f9ef; }
main {
max-width: 40ch;
margin: 0 auto;
} }
h1, h2 { h1, h2 {
text-align: center; text-align: center;
font-weight: normal; font-weight: normal;
margin: 1.95rem 0 0.65rem;
line-height: 2.6rem; line-height: 2.6rem;
margin: 1.95rem 0 0.65rem;
} }
h1 { h1 {
@ -49,6 +55,7 @@ h1 {
h2 { h2 {
font-size: 1.5625rem; font-size: 1.5625rem;
font-style: italic; font-style: italic;
font-variant-alternates: swash(fancy);
} }
h2::before { h2::before {
@ -57,21 +64,10 @@ h2::before {
display: block; display: block;
font-style: normal; font-style: normal;
font-variant-caps: all-small-caps; font-variant-caps: all-small-caps;
} margin-bottom: 0.65rem;
/* 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;
} }
.verse { .verse {
max-width: 47ch; /* Through the wood’s sunny aisles and tree-propped halls */
margin-left: auto;
margin-bottom: 1.3rem; margin-bottom: 1.3rem;
} }
@ -79,6 +75,21 @@ h2::before {
padding-left: 1em; padding-left: 1em;
} }
.author {
text-align: center;
font-variant-caps: all-small-caps;
font-variant-numeric: oldstyle-nums;
margin-top: 3.9rem;
}
/* Long lines: allow to overflow the column unless they would go offscreen altogether */
@media (min-width: 70ch) {
main {
text-wrap: nowrap;
}
}
.line { .line {
display: inline-block; display: inline-block;
margin-left: 2em; margin-left: 2em;