v0 of the reader

1 files changed, 109 insertions, 0 deletions

diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100755
index 0000000..564b08c
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,109 @@
+body {
+    background: black url(../img/shattered-island.gif) top left;
+    color: lime;
+    font-family: Abel;
+    margin: 0;
+}
+body.index > header {
+    background-color: black;
+}
+body > header {
+    background-color: grey;
+    margin: 0;
+    padding: 0.1rem 1rem 0.1rem 3rem;
+    max-width: 100%;
+}
+h1, h2, h3, h4 {
+    font-family: 'Cormorant Garamond';
+}
+header > h1  {
+    margin-bottom: 0;
+}
+header > h2 {
+    margin: 0;
+}
+header > h3 {
+    font-style: italic;
+    margin-top: 0;
+}
+main {
+    margin: 0 auto;
+    max-width: 42rem;
+}
+main > article {
+    margin-bottom: 2rem;
+}
+
+#intro h4 {
+    color: black;
+    margin: 0;
+    line-height: 0.65;
+    transform: rotate(180deg) translateX(calc(100% - 5rem));
+}
+#intro p {
+    text-align: justify;
+}
+#intro p:nth-child(2) span {
+    color: red;
+}
+#intro p:nth-child(2) {
+    /* padding: 0 1rem; */
+    max-width: 24rem;
+    color: green;
+}
+
+nav {
+    margin: 0 auto;
+    width: 42rem;
+    border-top: 2px solid black;
+}
+nav > ul {
+    list-style: none;
+    margin: 0.5rem auto;
+    padding: 0;
+}
+nav ul.concepts li {
+    font-size: smaller;
+    min-width: 7.5rem;
+}
+nav li {
+    display: inline-flex;
+    min-width: 5.5rem;
+    padding-top: 0.2rem;
+    text-align: center;
+}
+nav li:hover, nav li:focus {
+    background-color: black;
+}
+
+dt {
+    background-color: rgba(255, 255, 255, 0.25);
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+    margin-top: 1rem;
+    padding: 0.25rem 2.5rem;
+}
+
+aside {
+    font-size: smaller;
+}
+
+:link:hover, :link:focus, :active, :visited:hover, :visited:focus {
+    color: white;
+}
+:link, :visited {
+    width: 100%;
+    height: 100%;
+    color: black;
+    font-weight: bold;
+    text-decoration: none;
+}
+ul :link, ul :visited {
+    display: inline-block;
+}
+
+:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019'; }
+
+:lang(fr) {
+  quotes: '« ' ' »'; }