Move CSS to separate file
This commit is contained in:
parent
1b8dcbf110
commit
6ba2e26707
2 changed files with 44 additions and 45 deletions
46
index.html
46
index.html
|
@ -5,51 +5,7 @@
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>The Trees of Kortirion</title>
|
<title>The Trees of Kortirion</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<style>
|
<link rel="stylesheet" href="./style.css" />
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
43
style.css
Normal file
43
style.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Add table
Add a link
Reference in a new issue