feat: Basic subpages implemented

README.md

@@ -8,7 +8,11 @@ SSGs are amazing, if you want a full-fledged site. But if you just want to dumb
 
 ## What
 
-This repo simply looks for any `{template_name.html}` in the body of the `pages/page_name.html`, and replaces it with the content of `templates/template_name.html`, and writes it to `public/page_name.html` with that new content. Nice and simple, who needs Gatsby.
+This repo simply looks for any `{template_name.html}` in the body of the `pages/page_name.html`, and replaces it with the content of `templates/template_name.html`, and writes it to `public/page_name.html` with that new content.
+
+It also does a few other little things, like looking for `{page}` and replacing it with the `page_name` (for uses like `class="home"` and setting the `<title>`).
+
+Nice and simple, who needs Gatsby.
 
 ## How
 

assets/styles.css

@@ -37,6 +37,89 @@ p:last-child {
   padding-bottom: 0;
 }
 
+nav {
+  padding: 40px;
+  background: #333;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+@media only screen and (max-width: 600px) {
+  nav {
+    text-align: center;
+    flex-direction: column;
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  nav {
+    padding: 30px 10px;
+  }
+}
+
+nav a {
+  color: #fff;
+  text-decoration: none;
+  transition: 0.3s transform ease-in-out;
+}
+
+nav ul {
+  font-family: "Fredoka One", cursive;
+  letter-spacing: 0.1em;
+  margin-top: 20px;
+}
+
+nav ul li {
+  display: inline-block;
+  padding-right: 20px;
+  padding-bottom: 10px;
+}
+
+@media only screen and (max-width: 600px) {
+  nav ul li {
+    padding-right: 10px;
+  }
+}
+
+nav a:hover {
+  transform: translateX(20px);
+}
+
+nav h2 {
+  margin-top: 30px;
+  font-size: 2.5em;
+}
+
+nav.coding {
+  background: rgb(105, 0, 97);
+}
+
+nav.coding a.coding {
+  padding-left: 5px;
+  border-left: 2px solid #fff;
+}
+
+nav.thoughts {
+  background: rgb(0, 105, 79);
+}
+
+nav.thoughts a.thoughts {
+  padding-left: 5px;
+  border-left: 2px solid #fff;
+}
+
+nav.profile {
+  background: rgb(30, 77, 207);
+}
+
+nav.profile a.profile {
+  padding-left: 5px;
+  border-left: 2px solid #fff;
+}
+
 main {
   background: #333;
   padding: 40px;
@@ -70,6 +153,10 @@ main a:hover {
   transform: translateX(20px);
 }
 
+main.error {
+  min-height: 30vh;
+}
+
 main.hello {
   background: rgb(255, 145, 0);
 }

nodemon.json

@@ -0,0 +1,9 @@
+{
+  "watch": [
+    "pages",
+    "assets",
+    "templates"
+  ],
+  "ext": "html,css",
+  "exec": "npm run build"
+}