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

Redo layout to avoid bug

Browse source
This commit is contained in:
Katherina Walshe-Grey 2025-02-12 23:16:21 +00:00
parent a920fcb98a
commit 682ef8d1d1
2 changed files with 20 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
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 />
@ -114,9 +111,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 />
@ -166,9 +160,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 +175,7 @@
<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>
</body> </body>
</html> </html>

29
style.css
View file

@ -57,21 +57,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 +68,22 @@ h2::before {
padding-left: 1em; 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 { .line {
display: inline-block; display: inline-block;
margin-left: 2em; margin-left: 2em;