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

Compare commits

base: qenya:10bd0ca9d43054b23538f4c3362616651f3bd889
Branches Tags
qenya:main
...
compare: qenya:e37281a666c97eba7c967cd4d5ca93f9e3e1849a
Branches Tags
qenya:main

3 commits
10bd0ca9d4 ... e37281a666

Author SHA1 Message Date
Katherina Walshe-Grey e37281a666 Correct typo 2024-06-07 21:10:09 +01:00
Katherina Walshe-Grey 6ba2e26707 Move CSS to separate file 2024-06-07 21:10:00 +01:00
Katherina Walshe-Grey 1b8dcbf110 Improve typesetting on smaller screens 2024-06-07 21:08:43 +01:00
2 changed files with 48 additions and 38 deletions
Show stats Expand all files Collapse all files

43
index.html
View file

@ -4,42 +4,8 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>The Trees of Kortirion</title> <title>The Trees of Kortirion</title>
<style> <meta name="viewport" content="width=device-width, initial-scale=1" />
body { <link rel="stylesheet" href="./style.css" />
counter-reset: section;
margin: 5rem 0;
}
h1,
h2 {
text-align: center;
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 1rem 0;
}
h2::before {
counter-increment: section;
content: counter(section, upper-roman);
display: block;
font-style: normal;
margin: 1rem 0;
}
.section {
width: 36rem;
margin: 2rem auto;
}
.verse {
margin-left: 6rem;
}
.line-indented {
margin-left: 1em;
}
</style>
</head> </head>
<body> <body>
@ -118,10 +84,11 @@
<span class="line">A whisper in the trees - afar they hear,</span><br /> <span class="line">A whisper in the trees - 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 halls</span><br /> <span class="line line-indented">Through the wood&rsquo;s sunny aisles and tree-propped
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>

43
style.css Normal file
View file

@ -0,0 +1,43 @@
body {
counter-reset: section;
margin: 5rem 1rem;
}
h1,
h2 {
text-align: center;
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 1rem 0;
}
h2::before {
counter-increment: section;
content: counter(section, upper-roman);
display: block;
font-style: normal;
margin: 1rem 0;
}
.section {
max-width: 36rem;
margin: 2rem auto;
}
.verse {
max-width: 30rem;
margin-left: auto;
}
.line-indented {
padding-left: 1em;
}
@media screen and (max-width: 32rem) {
.line {
display: inline-block;
margin-left: 2em;
text-indent: -2em;
}
}