Add an index page for pages

2021-08-11 21:34:39 +03:00 · 2021-08-11 21:34:39 +03:00 · ad71d6bd8c
parent 625f20ac0c
commit ad71d6bd8c
2 changed files with 87 additions and 0 deletions
--- a/main/css/pagelist.css
+++ b/main/css/pagelist.css
@ -0,0 +1,52 @@
+@font-face {
+    font-family: 'Crimson Text';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("../fonts/CrimsonText.woff2") format('woff2');
+}
+
+body {
+    margin: auto;
+    margin-top: 5vh;
+    max-width: 500px;
+}
+
+div.contents, .navigation {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+}
+
+.navigation li {
+    display: block;
+}
+
+#header-icon {
+    width: 10em;
+    /* this should really just be a background image but that's even messier so here we are */
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+#header-text {
+    filter: drop-shadow(4px 4px 10px #78557c);
+    font-size: 2em;
+}
+
+h1, h2 {
+    color: #f3c3f7;
+    font-family: "Wenceslas", serif;
+}
+
+p, ul {
+    font-family: 'Crimson Text', serif;
+    font-size: 1.2rem;
+    color: #e5adea;
+    max-width: 1000px;
+}
+
+@media only screen and (max-width: 300px) {
+    #header-text {
+        margin-left: -3em;
+    }
+}
--- a/main/pages/index.njk
+++ b/main/pages/index.njk
@ -0,0 +1,35 @@
+---
+title: List of Pages
+icon: /assets/flompy.png
+---
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/css/common.css">
+    <link rel="stylesheet" href="/css/pagelist.css">
+
+    <meta name="author" content="Agatha">
+    <meta name="description" content="{{ title }}">
+    <meta name="theme-color" content="#7a495b">
+    <meta property="og:image" itemprop="image" content="{{ icon }}">
+
+    <link rel="icon" type="image/svg" href="{{ icon }}" />
+    <title>{{ title }}</title>
+</head>
+
+<body>
+    <div class="contents">
+        <div style="display: flex; align-items: center; padding-bottom: 1em">
+            <img id="header-icon" src="/assets/kitties.png" alt="A silhouette of two cats sitting near eachother">
+            <h1 id="header-text">{{ title }}</h1>
+        </div>
+    </div>
+    {{ collections.all | eleventyNavigation | eleventyNavigationToHtml({
+    listClass: "navigation"
+    }) | safe }}
+</body>
+
+</html>