Set up index pages

_site/assets/css/index.css

@@ -0,0 +1,173 @@
+/* ------------------- */
+/* Custom Properties   */
+/* ------------------- */
+:root {
+    --clr-body-bg: #000000;
+    --clr-body-txt: #ffffff;
+    --clr-h1: #BA6FE8;
+    --clr-link-btn-bg: #7A37A3;
+    --clr-link-btn-hover: #BA6FE8;
+
+    --fs-h1: 3.1rem;
+    --fs-body: 1rem;
+    --fs-link-btn: 2rem;
+
+    --fw-reg: 400;
+    --fw-link-btn: 600;
+}
+
+/* Tablet screen size */
+@media only screen and (min-width: 43.75rem) {
+    :root {
+        --fs-h1: 4rem;
+    }
+}
+
+/* ------------------- */
+/* CSS Reset           */
+/* ------------------- */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body, h1, h2, h3, h4, p,
+figure, blockquote, dl, dd {
+    margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+    list-style: none;
+}
+
+/* Set core body defaults */
+body {
+    min-height: 100vh;
+    line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1, h2, h3, h4,
+button, input, label {
+    line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1, h2,
+h3, h4 {
+    text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+    text-decoration-skip-ink: auto;
+    color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+    max-width: 100%;
+    display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input, button,
+textarea, select {
+    font: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+    min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+    scroll-margin-block: 5ex;
+}
+
+/* ------------------- */
+/* STYLING BEGINS      */
+/* ------------------- */
+
+body {
+    font-size: var(--clr-body-bg);
+    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+    color: #FFFFFF;
+    background: var(--clr-body-bg);
+    text-align: center;
+}
+
+body,
+main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+main {
+    max-width: 90%;
+}
+
+h1 {
+    font-size: var(--fs-h1);
+    color: var(--clr-h1);
+    font-weight: var(--fw-reg);
+    letter-spacing: 0.08em;
+    margin: 2rem 0;
+    line-height: 1;
+}
+
+p {
+    font-size: 1.5rem;
+}
+
+.index__btn-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 1.5rem 0;
+}
+
+.index__link {
+    text-decoration: none;
+    font-size: var(--fs-link-btn);
+    font-weight: var(--fw-link-btn);
+    border: none;
+    border-radius: 0.6rem;
+    padding: 1rem 1.25rem;
+    margin: 0.5rem;
+    background: var(--clr-link-btn-bg);
+    color: var(--clr-body-txt);
+    text-transform: uppercase;
+}
+
+.index__link:hover {
+    cursor: pointer;
+    background: var(--clr-link-btn-hover);
+    transition: 0.5s;
+}
+
+.index__link:focus {
+    outline-offset: 0.15em;
+    outline: 0.1em solid var(--clr-body-txt);
+}
+
+a:focus img {
+    outline: 0.2em solid var(--clr-body-txt);
+}

_site/assets/favicon/site.webmanifest

@@ -0,0 +1,20 @@
+{
+    "name": "Leilukin's Hub",
+    "short_name": "Leilukin's Hub",
+    "icons":
+        [
+            {
+                "src": "/android-chrome-192x192.png",
+                "sizes": "192x192",
+                "type": "image/png"
+            },
+            {
+                "src": "/android-chrome-512x512.png",
+                "sizes": "512x512",
+                "type": "image/png"
+            }
+        ],
+    "theme_color": "#7A37A3",
+    "background_color": "#000000",
+    "display": "standalone"
+}

_site/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+        <meta property="og:url" content="https://leilukin.neocities.org/">
+        <meta property="og:type" content="website">
+        <meta property="og:title" content="Leilukin's Hub">
+        <meta property="og:description" content="Welcome to Leilukin's personal website">
+
+        <link rel="stylesheet" href="/assets/css/index.css" type="text/css" media="all">
+
+        <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
+        <link rel="manifest" href="/assets/favicon/site.webmanifest">
+
+        <title> Leilukin's Hub</title>
+    </head>
+    <body>
+        <main>
+            <img src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Leilukin's Hub website banner">
+            <h1>Welcome to Leilukin&#39;s Hub!</h1>
+
+            
+<section class="index__btn-wrapper">
+    <a href="/home.html" class="index__link">Home Page</a>
+    <a href="/sitemap.html" class="index__link">Site Map</a>
+</section>
+
+<footer>
+    <a href="/feed.xml" target="blank" title="Leilukin's Hub RSS Feed">
+        <img src="/assets/buttons/rss-button.gif" alt="RSS feed button">
+    </a>
+</footer>
+        </main>
+    </body>
+</html>

_site/not_found/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+        <meta property="og:url" content="https://leilukin.neocities.org/">
+        <meta property="og:type" content="website">
+        <meta property="og:title" content="Leilukin's Hub">
+        <meta property="og:description" content="Welcome to Leilukin's personal website">
+
+        <link rel="stylesheet" href="/assets/css/index.css" type="text/css" media="all">
+
+        <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
+        <link rel="manifest" href="/assets/favicon/site.webmanifest">
+
+        <title> Page Not Found |  Leilukin's Hub</title>
+    </head>
+    <body>
+        <main>
+            <img src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Leilukin's Hub website banner">
+            <h1>Page Not Found</h1>
+
+            
+<p>Oops! Either the page you are looking for does not exist, or it has been moved to a diffrent part of this site.</p>
+
+<section class="index__btn-wrapper">
+    <a href="/home.html" class="index__link">🏠 Back to Home</a>
+</section>
+        </main>
+    </body>
+</html>

src/_includes/layouts/start.njk

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+        <meta property="og:url" content="https://leilukin.neocities.org/">
+        <meta property="og:type" content="website">
+        <meta property="og:title" content="Leilukin's Hub">
+        <meta property="og:description" content="Welcome to Leilukin's personal website">
+
+        <link rel="stylesheet" href="{{'/assets/css/index.css' | url | safe}}" type="text/css" media="all">
+
+        <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
+        <link rel="manifest" href="/assets/favicon/site.webmanifest">
+
+        <title>{% if title %} {{ title }} | {% endif %} Leilukin's Hub</title>
+    </head>
+    <body>
+        <main>
+            <img src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Leilukin's Hub website banner">
+            <h1>{{ h1 }}</h1>
+
+            {{ content | safe }}
+        </main>
+    </body>
+</html>

src/assets/css/index.css

@@ -0,0 +1,173 @@
+/* ------------------- */
+/* Custom Properties   */
+/* ------------------- */
+:root {
+    --clr-body-bg: #000000;
+    --clr-body-txt: #ffffff;
+    --clr-h1: #BA6FE8;
+    --clr-link-btn-bg: #7A37A3;
+    --clr-link-btn-hover: #BA6FE8;
+
+    --fs-h1: 3.1rem;
+    --fs-body: 1rem;
+    --fs-link-btn: 2rem;
+
+    --fw-reg: 400;
+    --fw-link-btn: 600;
+}
+
+/* Tablet screen size */
+@media only screen and (min-width: 43.75rem) {
+    :root {
+        --fs-h1: 4rem;
+    }
+}
+
+/* ------------------- */
+/* CSS Reset           */
+/* ------------------- */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body, h1, h2, h3, h4, p,
+figure, blockquote, dl, dd {
+    margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+    list-style: none;
+}
+
+/* Set core body defaults */
+body {
+    min-height: 100vh;
+    line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1, h2, h3, h4,
+button, input, label {
+    line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1, h2,
+h3, h4 {
+    text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+    text-decoration-skip-ink: auto;
+    color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+    max-width: 100%;
+    display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input, button,
+textarea, select {
+    font: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+    min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+    scroll-margin-block: 5ex;
+}
+
+/* ------------------- */
+/* STYLING BEGINS      */
+/* ------------------- */
+
+body {
+    font-size: var(--clr-body-bg);
+    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
+    color: #FFFFFF;
+    background: var(--clr-body-bg);
+    text-align: center;
+}
+
+body,
+main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+main {
+    max-width: 90%;
+}
+
+h1 {
+    font-size: var(--fs-h1);
+    color: var(--clr-h1);
+    font-weight: var(--fw-reg);
+    letter-spacing: 0.08em;
+    margin: 2rem 0;
+    line-height: 1;
+}
+
+p {
+    font-size: 1.5rem;
+}
+
+.index__btn-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 1.5rem 0;
+}
+
+.index__link {
+    text-decoration: none;
+    font-size: var(--fs-link-btn);
+    font-weight: var(--fw-link-btn);
+    border: none;
+    border-radius: 0.6rem;
+    padding: 1rem 1.25rem;
+    margin: 0.5rem;
+    background: var(--clr-link-btn-bg);
+    color: var(--clr-body-txt);
+    text-transform: uppercase;
+}
+
+.index__link:hover {
+    cursor: pointer;
+    background: var(--clr-link-btn-hover);
+    transition: 0.5s;
+}
+
+.index__link:focus {
+    outline-offset: 0.15em;
+    outline: 0.1em solid var(--clr-body-txt);
+}
+
+a:focus img {
+    outline: 0.2em solid var(--clr-body-txt);
+}

src/index.njk

@@ -0,0 +1,15 @@
+---
+layout: "layouts/start.njk"
+h1: Welcome to Leilukin's Hub!
+---
+
+<section class="index__btn-wrapper">
+    <a href="/home.html" class="index__link">Home Page</a>
+    <a href="/sitemap.html" class="index__link">Site Map</a>
+</section>
+
+<footer>
+    <a href="/feed.xml" target="blank" title="Leilukin's Hub RSS Feed">
+        <img src="/assets/buttons/rss-button.gif" alt="RSS feed button">
+    </a>
+</footer>

src/not_found.njk

@@ -0,0 +1,11 @@
+---
+layout: "layouts/start.njk"
+title: Page Not Found
+h1: Page Not Found
+---
+
+<p>Oops! Either the page you are looking for does not exist, or it has been moved to a diffrent part of this site.</p>
+
+<section class="index__btn-wrapper">
+    <a href="/home.html" class="index__link">🏠 Back to Home</a>
+</section>