update installation before building

.drone.yml

@@ -6,19 +6,13 @@ steps:
 - name: submodules
   image: archlinux
   commands: 
-  - pacman -Syu --noconfirm git git-lfs >/dev/null
-  - git lfs install
+  - pacman -Sy --noconfirm git >/dev/null
   - git submodule update --init --recursive
-  - cd blog
-  - echo $(pwd)
-  - git lfs install
-  - git lfs fetch --all
-  - git lfs ls-files
 
 - name: build
   image: archlinux
   environment:
-    PYTHON_ENV: pyenv python python-pipenv python-setuptools
+    PYTHON_ENV: python python-pipenv python-setuptools
 
   commands:
     # set up python
@@ -63,6 +57,10 @@ steps:
     - delete_current_files="sudo -n rm -r $host_dir"
     - deploy_new_files="sudo -n mv $${HOST} $host_dir"
 
+    # archive old site
+    - ssh $host $make_backup_dir
+    - ssh $host $copy_backup_files
+
     # deploy new site
     - rsync -rP site/* "$host:$${HOST}"
     - ssh $host $delete_current_files

Pipfile

@@ -9,4 +9,4 @@ markdown = "*"
 [dev-packages]
 
 [requires]
-python_version = "3.11"
+python_version = "3.10"

Pipfile.lock

@@ -1,11 +1,11 @@
 {
     "_meta": {
         "hash": {
-            "sha256": "8197b62eaf2c2267235d798d625f266e606263fb3108ba131e012c8ae7814dcd"
+            "sha256": "4f4f4fc0dc77addc9a4bf6c737f31df9507ee22a83548fcff1891a4e7bc27bed"
         },
         "pipfile-spec": 6,
         "requires": {
-            "python_version": "3.11"
+            "python_version": "3.10"
         },
         "sources": [
             {
@@ -18,12 +18,11 @@
     "default": {
         "markdown": {
             "hashes": [
-                "sha256:48f276f4d8cfb8ce6527c8f79e2ee29708508bf4d40aa410fbc3b4ee832c850f",
-                "sha256:ed4f41f6daecbeeb96e576ce414c41d2d876daa9a16cb35fa8ed8c2ddfad0224"
+                "sha256:08fb8465cffd03d10b9dd34a5c3fea908e20391a2a90b88d66362cb05beed186",
+                "sha256:3b809086bb6efad416156e00a0da66fe47618a5d6918dd688f53f40c8e4cfeff"
             ],
             "index": "pypi",
-            "markers": "python_version >= '3.8'",
-            "version": "==3.6"
+            "version": "==3.4.1"
         }
     },
     "develop": {}

README.md

@@ -1,6 +1,5 @@
 # ktyl.dev
 
-
 [![Build Status](https://oven.pizzawednes.day/api/badges/ktyl/ktyl.dev/status.svg)](https://oven.pizzawednes.day/ktyl/ktyl.dev)
 
 website at https://ktyl.dev/

blog

@@ -1 +1 @@
-Subproject commit 201f3d49309a4e7a873fbf6a49872ef291e776d0
+Subproject commit d42897624f717c878b8763f8ad53a5f57ee0da4c

local

@@ -8,4 +8,3 @@ make all
 
 sudo rm -r $dest/*
 sudo cp -r $outdir/* $dest
-sudo apachectl start

makefile

@@ -1,62 +1,80 @@
+SITE_NAME 		= ktyl.dev
+# configured in ~/.ssh/config
+HOST			= pluto
+# a script on the remote server to move it on arrival
+REMOTE_SCRIPT	= ./deploy-$(SITE_NAME)
+
 SRC_DIR			= src
 IMG_DIR			= img
 OUT_DIR			= site
 
 ROOT_DIR		= $(SRC_DIR)/root
 
-BLOG_BASE_DIR	= blog/
-BLOG_BUILD_DIR	= $(BLOG_BASE_DIR)out/html/
+BLOG_SRC_DIR	= blog/blogs
 BLOG_OUT_DIR	= $(OUT_DIR)/blog
-BLOG_INDEX		= $(BLOG_BUILD_DIR)/index.html
-
-VN = src/vn/
+BLOG_TMP_DIR	= .blogtmp
 
 PAGES 			= $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.html")
 STYLES			= $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.css")
+BLOG_PAGES		= $(shell find $(BLOG_SRC_DIR) -wholename "$(BLOG_SRC_DIR)*.md")
+
 IMAGES			= $(shell find $(IMG_DIR) -wholename "$(IMG_DIR)/*.png")
 
 HTML_INCLUDES 	= $(shell find $(SRC_DIR)/inc_html -name *.html)
+CSS_INCLUDES	= $(shell find $(SRC_DIR)/inc_css -name *.css)
+
+BLOG_INDEX 			= $(OUT_DIR)/blog.html
+BLOG_RSS			= $(BLOG_OUT_DIR)/index.xml
+BLOG_INDEX_LINKS 	= $(BLOG_TMP_DIR)/blogindexlinks.html
+BLOG_TARGETS		= $(BLOG_PAGES:$(BLOG_SRC_DIR)/%.md=$(BLOG_OUT_DIR)/%.html)
 
 HTML_TARGETS 	= $(PAGES:$(ROOT_DIR)/%.html=$(OUT_DIR)/%.html)
 CSS_TARGETS 	= $(STYLES:$(ROOT_DIR)/%.css=$(OUT_DIR)/%.css)
 PNG_TARGETS		= $(IMG_DIR)/%.png=$(OUT_DIR)/%.png
 
-all: html blog vn | $(OUT_DIR)
 
-vn: $(VN) | $(OUT_DIR)
-	cp -r $(VN) $(OUT_DIR)/vn
-
-html: $(HTML_TARGETS) $(CSS_TARGETS) | $(OUT_DIR)
-	cp $(IMG_DIR)/*.ico $(OUT_DIR)/
+all: $(HTML_TARGETS) $(CSS_TARGETS) blog | $(OUT_DIR)
 	cp $(IMG_DIR)/*.png $(OUT_DIR)/
 	cp $(IMG_DIR)/*.jpg $(OUT_DIR)/
 
-$(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES) $(BLOG_INDEX) | $(OUT_DIR)
-	python ppp.py $< $(HTML_INCLUDES) $(BLOG_INDEX) > $@
+deploy: site
+	cp -r $(OUT_DIR) $(SITE_NAME)
+	rsync -rP $(SITE_NAME) $(HOST):~
+	rm -r $(SITE_NAME)
+	ssh $(HOST) "sudo $(REMOTE_SCRIPT)"
 
-$(OUT_DIR)/%.css: $(ROOT_DIR)/%.css | $(OUT_DIR)
-	cp $< $@
+$(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES) $(BLOG_INDEX_LINKS) | $(OUT_DIR)
+	python ppp/ppp.py $< $(HTML_INCLUDES) $(BLOG_INDEX_LINKS) > $@
+
+$(OUT_DIR)/%.css: $(ROOT_DIR)/%.css $(CSS_INCLUDES) | $(OUT_DIR)
+	python ppp/ppp.py $< $(CSS_INCLUDES) > $@
 
 $(OUT_DIR):
 	mkdir -p $@
 
-$(BLOG_INDEX):
-	mkdir -p $(BLOG_OUT_DIR)
-	make --directory $(BLOG_BASE_DIR) html
+blog: $(BLOG_TARGETS) $(BLOG_RSS) | $(BLOG_TMP_DIR)
 
-# make blog from submodule and apply site templating
-blog: $(HTML_INCLUDES) $(CSS_TARGETS)
-	mkdir -p $(BLOG_OUT_DIR)
-	make --directory $(BLOG_BASE_DIR) html
-	cp -r $(BLOG_BUILD_DIR)/* $(BLOG_OUT_DIR)
-	for page in `find "$(BLOG_OUT_DIR)" -wholename "*.html"`; do \
-		python ppp.py $$page $(HTML_INCLUDES) > temp ; \
-		mv temp $$page ; \
-		cp $(CSS_TARGETS) $(IMG_DIR)/*.ico `dirname $$page` ; \
-	done
+$(BLOG_RSS): $(BLOG_PAGES)
+	pipenv run python scripts/mkblogrss.py $(BLOG_PAGES) > $@
+
+$(BLOG_INDEX_LINKS): $(BLOG_TARGETS) | $(BLOG_TMP_DIR)
+	pipenv run python scripts/mkblogindex.py $(BLOG_TARGETS) > $@
+
+$(BLOG_OUT_DIR)/%.html: $(BLOG_OUT_DIR)/%.html.tmp $(HTML_INCLUDES) $(CSS_TARGETS)
+	python ppp/ppp.py $< $(HTML_INCLUDES) > $@
+	cp $(CSS_TARGETS) `dirname $@`
+	rm $<
+
+$(BLOG_OUT_DIR)/%.html.tmp: $(BLOG_SRC_DIR)/%.md | $(BLOG_TMP_DIR) 
+	pipenv run python scripts/mkblog.py $< $@
+
+$(BLOG_OUT_DIR): | $(OUT_DIR)
+	mkdir -p $@
+
+$(BLOG_TMP_DIR):
+	mkdir -p $@
 
 clean:
-	make --directory $(BLOG_BASE_DIR) clean
-	rm -rf $(OUT_DIR)
+	rm -rf $(OUT_DIR) $(BLOG_TMP_DIR)
 
-.PHONY: blog vn
+.PHONY: site

ppp

@@ -0,0 +1 @@
+Subproject commit 45fc27f1a837dfb2536e8a7c50537fc6a8b4cfa4

ppp.py

@@ -1,83 +0,0 @@
-import sys
-import os.path
-import re
-
-err = False
-paths = []
-
-def print_usage():
-    print("\nusage: python ppp.py ROOT TEMPLATES [...]")
-
-# check arguments
-argc = len(sys.argv)
-if argc < 3:
-    print_usage()
-    sys.exit(1)
-
-includes = sys.argv[2:]
-
-# figure out src dir from root argument
-sep="/"
-src_dir = sep.join(sys.argv[2].split(sep)[:-1])
-
-# regex patterns
-p_var = re.compile(r'(#.+?\.css)')
-
-def preprocess_file(path):
-    lines=0
-
-    with open(path) as f:
-        content = f.readlines()
-        content = [x.strip('\n') for x in content]
-        lines=len(content)
-
-        for l in content:
-
-            # replace lines that start with #include with the contents of a file
-            if l.startswith("#include"):
-                include_path = l.split(" ")[1]
-
-                # prepend directory
-                #include_path = "/".join([src_dir, include_path])
-                for inc in includes:
-                    if os.path.basename(inc) == include_path:
-                        include_path = inc
-                        break
-
-                preprocess_file(include_path)
-                continue
-
-            # inline replace any occurrence of #filename with the contents of that file
-            match = re.search(p_var, l)
-            if match:
-                path = "/".join([src_dir, match.group(0)[1:]])
-
-                with open(path) as var_file:
-                    var_content = var_file.read().strip()
-                    l = re.sub(p_var, var_content, l)
-
-            print(l)
-
-
-for i in range(1,argc):
-    path = sys.argv[i]
-
-    if not os.path.isfile(path):
-
-        print(path + " is not a file")
-        err = True
-        continue
-
-    if path in paths:
-        # ignore duplicates
-        continue
-
-    paths.append(path)
-
-if err:
-    print_usage()
-    sys.exit(1)
-
-preprocess_file(sys.argv[1])
-
-sys.exit(0)

scripts/mkblog.py

@@ -0,0 +1,83 @@
+#!/usr/bin/env python
+
+import os
+import sys
+import markdown
+import re
+
+#   SRC
+#   +-2022/
+#   | +-10/
+#   | +-12/
+#   |   +-25/
+#   +-2023/
+#   | +-1/
+#   |   +-26/
+#   | +-3/
+#   ... 
+
+def print_usage():
+    print("\nusage: python mkblog.py SRC DEST\n")
+    print("\n")
+    print("\t\tSRC\tinput markdown file")
+    print("\t\tDEST\tdestination html file")
+
+# check args
+if len(sys.argv) != 3:
+    print_usage()
+    sys.exit(1)
+
+src_file = sys.argv[1]
+dest_file = sys.argv[2]
+
+# check blog root exists
+if not os.path.isfile(src_file):
+    print("{blog_root} doesn't exist")
+    sys.exit(1)
+
+# make dest dir if it doesnt exist
+
+dest_dir = os.path.dirname(dest_file)
+print(dest_dir)
+if not os.path.isdir(dest_dir):
+    os.makedirs(dest_dir)
+
+# write markdown into a dummy file first so that we can add lines before it in the final output
+dummy_file = f"{dest_file}.bak"
+open(dummy_file, 'w').close()
+
+print(f"{src_file} -> {dummy_file}")
+markdown.markdownFromFile(input=src_file, output=dummy_file, extensions=["fenced_code"])
+
+print(f"{dummy_file} -> {dest_file}")
+with open(dummy_file, 'r') as read_file, open(dest_file, 'w') as write_file:
+    write_file.write("#include blogstart.html\n")
+
+    # modify the basic html to make it nicer for styling later
+    html = read_file.read()
+
+    # insert text-panel start between non-<p> and <p> elements
+    html = re.sub('((?<!</p>)\n)(<p>)', r'\1<div class="text-panel">\n\2', html)
+    # insert para-block end between <p> and non-<p> elements
+    html = re.sub('(</p>\n)((?!<p>))', r'\1</div>\n\2', html)
+
+    # insert code-panel start before <pre> elements
+    html = re.sub('(<pre>)', r'<div class="code-panel">\n\1', html)
+    # insert code-panel end after </pre> elements
+    html = re.sub('(</pre>)', r'\1\n</div>', html)
+
+    # replace horizontal rules with nice separator dot
+    html = re.sub('<hr />', r'<div class="separator"></div>', html)
+
+    lines = html.split("\n")
+
+    # tack on a closing div because we will have opened one without closing it on the final <p>
+    lines.append("</div>")
+
+    for line in lines:
+        write_file.write(line + "\n")
+
+    write_file.write("\n#include blogend.html\n")
+
+os.remove(dummy_file)
+

scripts/mkblogindex.py

@@ -0,0 +1,59 @@
+#!/usr/bin/env python3
+
+import sys
+import re
+
+# we expect the arguments to be filepaths to each blog post
+
+def print_usage():
+    print("\nusage: python mkblogindex.py POSTS\n")
+    print("\n")
+    print("\t\tPOSTS\tfilepaths of blog posts")
+
+# check args for at least one file path
+if len(sys.argv) < 2:
+    print_usage()
+    sys.exit(1)
+
+# posts are arguments from index 1 onwards
+posts = sys.argv[1:]
+
+dir_pattern = re.compile("(.+)/(blog\/.+\.html)")
+path_pattern = re.compile("(.+)\/(\d{4})\/(\d{1,2})\/(\d{1,2})\/(.+).html")
+title_pattern = re.compile("<h1>(.+)</h1>")
+
+# filter posts to just those with a date in them
+posts = [p for p in posts if path_pattern.match(p)]
+posts.reverse()
+
+links = []
+
+# for each file we want to output an <a> tag with a relative href to the site root
+for path in posts:
+    m = re.match(path_pattern, path)
+    year = m.group(2)
+    month = m.group(3).rjust(2, '0')
+    day = m.group(4).rjust(2, '0')
+
+    date = f'<span class="post-date">{year}-{month}-{day}</span>'
+
+    title = ""
+    with open(path) as f:
+        for line in f:
+            if title_pattern.match(line):
+                title = re.sub(title_pattern, r'<span class="post-title">\1</span>', line).strip()
+                break
+
+    # clean leading directories to get the relative path we'll use for the link
+    url = re.sub(dir_pattern, r"\2", path)
+
+    item = (date, f'<li><a href="{url}">{date}{title}</a></li>')
+    links.append(item)
+
+# make sure we're properly ordered in reverse date order lol
+links = sorted(links, key=lambda x: x[0])
+links.reverse()
+
+for l in links:
+    print(l[1])
+

scripts/mkblogrss.py

@@ -0,0 +1,76 @@
+#!/usr/bin/env python3
+
+import markdown
+import pathlib
+import sys
+import re
+
+def print_usage():
+    print("\nusage: python mkblogrss.py POSTS\n")
+    print("\n")
+    print("\t\tPOSTS\tfilepaths of blog posts")
+
+# check args for at least one file path
+if len(sys.argv) < 2:
+    print_usage()
+    sys.exit(1)
+    
+# posts are arguments from index 1 onwards
+posts = sys.argv[1:]
+
+# header and footer to enclose feed items
+header = """<?xml version="1.0" encoding="utf-8" ?>
+<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
+<channel>
+    <title>ktyl.dev</title>
+    <link>https://ktyl.dev/blog/index.html</link>
+    <description>mostly computer stuff!</description>
+    <atom:link href="https://ktyl.dev/blog/index.xml" rel="self" type="application/rss+xml"/>
+    """
+footer = "</channel></rss>"
+
+# regex patterns
+title_pattern = re.compile("<h1>(.+)</h1>")
+path_pattern = re.compile("(.+)\/(\d{4})\/(\d{1,2})\/(\d{1,2})\/(.+).md")
+
+def make_item(path):
+    str = "<item>\n"
+
+    # get the HTML version of the file
+    text = ""
+    with open(path) as f:
+        text = f.read()
+    html = markdown.markdown(text, extensions=["fenced_code"])
+
+    # title
+    title = ""
+    m = title_pattern.match(html)
+    title = m.group(1)
+    str += f"<title>{title}</title>\n"
+
+    # link
+    url = "/".join(pathlib.Path(path).parts[2:])
+    url = url.replace(".md", ".html")
+    link = f"https://ktyl.dev/blog/{url}"
+    str += f"<link>{link}</link>\n"
+
+    # content
+    description = html
+    description = re.sub('<', '&lt;', description)
+    description = re.sub('>', '&gt;', description)
+    str += f"<description>{description}</description>\n"
+
+    # pub date
+    date = re.sub(path_pattern, r'\2-\3-\4', path)
+    str += f"<pubDate>{date}</pubDate>\n"
+
+    str += "</item>"
+
+    return str
+
+# print everything!
+print(header)
+for p in posts:
+    print(make_item(p))
+print(footer)
+

src/inc_css/about.css

@@ -0,0 +1,24 @@
+.pfp {
+    position: relative;
+    top: 3em;
+    left: 50%;
+    width: 20em;
+    height: 20em;
+    text-align: center;
+    overflow: hidden;
+    border-color: var(--background-alt);
+    border-style: solid;
+    border-width: 3px;
+    border-radius: 50%;
+    transform: translate(-50%, 0);
+    margin-bottom: 4em;
+}
+
+.pfp img {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    height: 100%;
+    width: auto;
+    transform: translate(-50%, -50%);
+}

src/inc_css/blog.css

@@ -0,0 +1,96 @@
+.page .blog  {
+}
+
+.page .blog h1 {
+    font-size: 2.5em;
+}
+
+.page .blog .para-block {
+    color: var(--foreground-inactive);
+    font-size: 1.1em;
+
+    line-height: 1.25em;
+
+    background-color: var(--background);
+    border-color: var(--background-alt);
+    border-width: 3px;
+    border-radius: 2em;
+    border-style: solid;
+
+    padding: 1.0em 1.5em;
+}
+
+.page .blog .code-panel {
+    color: var(--background);
+    background-color: var(--foreground);
+
+    font-size 1.5em;
+    line-height: 1.3em;
+
+    border-color: var(--accent);
+    border-width: 2px;
+    border-radius: 2em;
+    border-style: solid;
+
+    padding: 1.0em 2.0em;
+    margin: 2.5em -4.0em;
+
+    overflow: hidden;
+}
+
+.page .blog .code-panel pre {
+    overflow: scroll;
+}
+.page .blog .code-panel pre::-webkit-scrollbar {
+    height: 0;
+    width: 0;
+    background: transparent;
+}
+
+.page .blog .separator {
+    margin: 2em;
+}
+
+.page .blog p code {
+    height: 0.8em;
+    padding: 0.07em 0.25em;
+    margin: 0 0.1em;
+    background-color: var(--foreground-inactive);
+    color: var(--background);
+    border-radius: .3em;
+}
+
+ul.blog-index li {
+
+    display: block;
+    margin: .2em 0;
+}
+
+ul.blog-index li a {
+    color: var(--foreground-inactive);
+    transition: none;
+    text-decoration: none;
+}
+
+.blog-index li a:hover {
+    color: var(--accent);
+}
+
+.blog-index li a:visited {
+    color: var(--foreground);
+}
+
+.page ul.blog-index li a::before {
+    content: "• "
+}
+
+.blog-index .post-date {
+    padding-right: 1em;
+}
+
+@media only screen and (max-width: 700px) {
+    .page .blog .code-panel {
+        padding: 1.0em 5.0em;
+    }
+}
+

src/inc_css/demos.css

@@ -0,0 +1,18 @@
+.demoTile {
+    opacity: 0.3;
+    transition: opacity 0.3s;
+    max-width: 15vw;
+    display: inline-block;
+}
+
+.demoTile:hover {
+    opacity: 1.0;
+}
+
+.demoTiles {
+    position: absolute;
+    background-color:white;
+    left:27.5%;
+    top: var(--title-height);
+    margin-top:40px;
+}

src/inc_css/footer.css

@@ -0,0 +1,11 @@
+.footer {
+    position: relative;
+}
+
+.footer span {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+    color: var(--foreground-inactive);
+    padding: 2em;
+}

src/inc_css/gallery.css

@@ -0,0 +1,112 @@
+.page.portfolio {
+    padding-top: 0;
+    width: 50%;
+
+    margin-left:auto;
+    margin-right:auto;
+
+    transform: translate(-50%,0);
+}
+
+.portfolio p {
+    margin: 1.2em 0 2em;
+
+    text-align: center;
+    border-style: none;
+
+    background-color: var(--clear);
+}
+
+.glass {
+    padding: 0.4em 0.6em;
+    color: var(--foreground-inactive);
+    background-color: var(--background);
+    opacity:0.9;
+
+    border-style:solid;
+    border-radius:2em;
+    border-color:var(--clear);
+}
+
+/* gallery img */
+.wrapper {
+    margin-top: 1em;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+.wrapper .imgHolder {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.wrapper img {
+    pointer-events: none;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    left: auto;
+    right: auto;
+
+    transition: all 0.2s ease-out;
+}
+
+.wrapper .imgHolder span {
+    position:absolute;
+    top:100%;
+    width:100%;
+
+    transform: translateY(-50%) scale(0.6);
+    text-align: center;
+
+    opacity: 0;
+    transition: all 0.3s;
+
+    color: var(--accent);
+}
+
+.wrapper .imgHolder span p {
+    padding:0;
+    margin:0;
+    opacity: 1;
+    color: var(--background);
+}
+
+.lightTileText {
+    color: var(--background);
+}
+
+.wrapper .imgHolder a {
+    position: absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+}
+
+@media only screen and (max-width: 600px) {
+    .page.portfolio {
+        width: 100%;
+    }
+
+    .wrapper .imgHolder {
+        overflow: hidden;
+    }
+    .wrapper .imgHolder span {
+        position: absolute;
+        top:0;
+        left:0;
+        width:100%;
+        height:100%;
+        transform: none;
+    }
+    .icon-link {
+        display: none;
+    }
+    .wrapper .imgHolder span i {
+        /*display: none;*/
+    }
+}

src/inc_css/landing.css

@@ -0,0 +1,68 @@
+.landing {
+    margin-top: 10%;
+
+    text-align: center;
+}
+
+.landing .fsText a {
+    color: var(--foreground-inactive);
+    font-size: 2em;
+    transform: translate(0,50%);
+
+    transition: all 0.3s;
+}
+.landing .fsText a:hover {
+    color: var(--accent);
+}
+
+.landing ul {
+    width: 100%;
+    padding: .5em 0 0;
+    margin: 0;
+}
+
+.landing li a {
+    position: relative;
+    font-size: 2.5em;
+    margin: 0 .2em;
+    color: var(--foreground-inactive);
+}
+.landing li a:hover {
+    transform: translateY(-10%);
+    color: var(--accent);
+}
+
+.landing .socials {
+    position: relative;
+    background-color: var(--clear);
+
+    top: 1em;
+    left: auto;
+    right: auto;
+
+    text-align: center;
+}
+
+.landing .socials i {
+    color: var(--foreground-inactive);
+    font-size: 3.5em;
+    padding: 0 .07em;
+}
+
+@media only screen and (max-width: 600px) {
+    .landing.page {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        height: 100%;
+    }
+
+    .landing.page .socials {
+        top: .5em;
+        bottom: 0;
+    }
+
+    .landing.page .socials i {
+        font-size: 3em;
+    }
+}

src/inc_css/nav.css

@@ -0,0 +1,108 @@
+.nav {
+    position: fixed;
+    width: max(11vmax, 200px);
+    top: 0;
+    bottom:0;
+
+    padding-top: 2em;
+    padding-left: 2em;
+
+    background-color: var(--background);
+    color: var(--foreground);
+}
+
+.nav-links {
+    position: relative;
+
+    padding-top: 2em;
+    padding-bottom: 1em;
+
+    padding-left:0;
+    width: 80%;
+}
+ul.nav-links {
+    margin-top: 0;
+    list-style-type: none;
+}
+
+.nav .nav-links li {
+    display: block;
+    margin-bottom: 0.8em;
+}
+
+.nav li a::before {
+    content: "/";
+}
+
+.nav li a {
+    display: block;
+    padding: 2px;
+    background-color: var(--clear);
+
+    transition: background-color 0.5s;
+}
+
+.nav li a:hover {
+    color: var(--accent);
+}
+
+@media only screen and (max-width: 1200px) {
+    .nav .socials a {
+        padding: .2em 0;
+        display: block;
+        text-align: center;
+    }
+}
+
+@media only screen and (max-width: 1000px) {
+    .nav {
+        position: fixed;
+        width: 100%;
+        padding: 0;
+        z-index: 1;
+        top: 0;
+        height: 3em;
+
+        border-bottom: 3px solid var(--background-alt);
+    }
+
+    .nav .title {
+        padding-top: .6em;
+        padding-left: .6em;
+        height: 2em;
+    }
+
+    .nav .nav-links {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: .6em .6em 0 0;
+        float: right;
+        text-align: right;
+        width: auto;
+    }
+
+    .nav .nav-links li {
+        display: inline-block;
+    }
+
+    .nav .nav-links li a::before {
+        content: "";
+    }
+
+    .nav .pageTitle {
+        display: none;
+    }
+
+    .nav .socials {
+        position: fixed;
+        left: .5em;
+        bottom: .5em;
+    }
+}
+
+@media only screen and (max-width: 700px) {
+    .nav .socials {
+        display: none;
+    }
+}

src/inc_css/or_earth.css

@@ -0,0 +1 @@
+440px

src/inc_css/or_mars.css

@@ -0,0 +1 @@
+570px

src/inc_css/or_mercury.css

@@ -0,0 +1 @@
+180px

src/inc_css/or_venus.css

@@ -0,0 +1 @@
+320px

src/inc_css/orbit_thickness.css

@@ -0,0 +1 @@
+0.2rem

src/inc_css/page.css

@@ -0,0 +1,79 @@
+.page {
+    position: absolute;
+    width: max(30vmax,500px);
+    left:50%;
+    top:0;
+    padding: 0px 0 50px;
+    padding-top: 5vh;
+
+    transform: translate(-50%, 0);
+}
+
+.page .separator {
+    position: relative;
+    background-color: var(--foreground-inactive);
+
+    width: .35em;
+    height: .35em;
+    left: 50%;
+
+    border-radius: 100%;
+
+    transform: translateX(-50%);
+}
+
+.page a {
+    color: var(--accent);
+
+    transition: all 0.1s;
+}
+.page a:hover {
+    color: var(--foreground);
+}
+
+.page .text-panel {
+    margin: 0;
+    margin-left: -1.5em;
+    padding: 1.0em 1.5em;
+    color: var(--foreground-inactive);
+
+    font-size: 1.1em;
+    /*font-weight: bold;*/
+
+    line-height: 1.25em;
+
+    background-color: var(--background);
+    border-radius: 2em;
+
+    width: 100%;
+    border-color: var(--background-alt);
+    border-width: 3px;
+    border-style: solid;
+}
+
+
+.page h1, h2 {
+    color: var(--foreground-inactive);
+
+    font-size: 1.7em;
+
+    margin-top: 1.2em;
+    padding: 0.2em 0.4em;
+
+    text-align: center;
+}
+
+@media (max-width: 700px) {
+    .page {
+        margin-top: 2.5em;
+        width: 100%;
+        padding: 0;
+
+        overflow: hidden;
+    }
+
+    .page .text-panel p {
+        padding: 0 .5em;
+        margin-right: .5em;
+    }
+}

src/inc_css/planets.css

@@ -0,0 +1,234 @@
+.planets {
+    overflow: hidden;
+    position: fixed;
+    height: 80vmax;
+    width: 80vmax;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+
+    /*background-color: var(--background);*/
+    background-color: transparent;
+}
+@media only screen and (max-width: 600px) {
+    .planets {
+        height: 200vmax;
+        width: 200vmax;
+
+        transform: scale(0.5) translate(50%, 50%);
+    }
+}
+
+.planet {
+    position: absolute;
+    border-radius: 50%;
+    display: inline-block;
+
+    width: var(--radius);
+    height: var(--radius);
+}
+
+.orbit {
+    position: absolute;
+
+    /*border: #orbit_thickness.css solid var(--foreground-inactive);*/
+    border-radius: 100%;
+    background-color: transparent;
+
+    z-index:-1;
+}
+
+@-webkit-keyframes orbit_mercury {
+    from    { -webkit-transform: rotate(360deg) translateX(#or_mercury.css) rotate(360deg); }
+    to      { -webkit-transform: rotate(0deg) translateX(#or_mercury.css) rotate(0deg); }
+}
+@-moz-keyframes orbit_mercury {
+    from    { -moz-transform: rotate(360deg) translateX(#or_mercury.css) rotate(360deg); }
+    to      { -moz-transform: rotate(0deg) translateX(#or_mercury.css) rotate(0deg); }
+}
+@-o-keyframes orbit_mercury {
+    from    { -o-transform: rotate(360deg) translateX(#or_mercury.css) rotate(360deg); }
+    to      { -o-transform: rotate(0deg) translateX(#or_mercury.css) rotate(0deg); }
+}
+@keyframes orbit_mercury {
+    from    { transform: rotate(360deg) translateX(#or_mercury.css) rotate(360deg); }
+    to      { transform: rotate(0deg) translateX(#or_mercury.css) rotate(0deg); }
+}
+#mercury {
+    --period: 4.82s;
+    --radius: 30px;
+    --color: var(--background-alt);
+
+    width: var(--radius);
+    height: var(--radius);
+
+    background-color: var(--color);
+    right: #solposx.css;
+    bottom: #solposy.css;
+
+    -webkit-animation:  orbit_mercury var(--period) linear infinite;
+    -moz-animation:     orbit_mercury var(--period) linear infinite;
+    -o-animation:       orbit_mercury var(--period) linear infinite;
+    animation:          orbit_mercury var(--period) linear infinite;
+}
+#mercury-orbit {
+    --orbit-radius: #or_mercury.css;
+    --planet-radius: #pr_mercury.css;
+    --orbit-thickness: #orbit_thickness.css;
+    --diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
+
+    right:      #solposx.css;
+    bottom:     #solposy.css;
+    transform:  translate(#or_mercury.css, #or_mercury.css);
+
+    width:  var(--diameter);
+    height: var(--diameter);
+
+    border: #orbit_thickness.css solid var(--background-alt);
+}
+
+@-webkit-keyframes orbit_venus {
+    from    { -webkit-transform: rotate(360deg) translateX(#or_venus.css) rotate(360deg); }
+    to      { -webkit-transform: rotate(0deg) translateX(#or_venus.css) rotate(0deg); }
+}
+@-moz-keyframes orbit_venus {
+    from    { -moz-transform: rotate(360deg) translateX(#or_venus.css) rotate(360deg); }
+    to      { -moz-transform: rotate(0deg) translateX(#or_venus.css) rotate(0deg); }
+}
+@-o-keyframes orbit_venus {
+    from    { -o-transform: rotate(360deg) translateX(#or_venus.css) rotate(360deg); }
+    to      { -o-transform: rotate(0deg) translateX(#or_venus.css) rotate(0deg); }
+}
+@keyframes orbit_venus {
+    from    { transform: rotate(360deg) translateX(#or_venus.css) rotate(360deg); }
+    to      { transform: rotate(0deg) translateX(#or_venus.css) rotate(0deg); }
+}
+#venus {
+    --period: 12.3s;
+    --radius: #pr_venus.css;
+    --color: var(--background-alt);
+
+    width: var(--radius);
+    height: var(--radius);
+
+    background-color: var(--color);
+    right: #solposx.css;
+    bottom: #solposy.css;
+
+    -webkit-animation:  orbit_venus var(--period) linear infinite;
+    -moz-animation:     orbit_venus var(--period) linear infinite;
+    -o-animation:       orbit_venus var(--period) linear infinite;
+    animation:          orbit_venus var(--period) linear infinite;
+}
+#venus-orbit {
+    --orbit-radius: #or_venus.css;
+    --planet-radius: #pr_venus.css;
+    --orbit-thickness: #orbit_thickness.css;
+    --diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
+
+    right:      #solposx.css;
+    bottom:     #solposy.css;
+    transform:  translate(#or_venus.css, #or_venus.css);
+
+    width:  var(--diameter);
+    height: var(--diameter);
+    border: #orbit_thickness.css solid var(--background-alt);
+}
+
+@-webkit-keyframes orbit_earth {
+    from    { -webkit-transform: rotate(360deg) translateX(#or_earth.css) rotate(360deg); }
+    to      { -webkit-transform: rotate(0deg) translateX(#or_earth.css) rotate(0deg); }
+}
+@-moz-keyframes orbit_earth {
+    from    { -moz-transform: rotate(360deg) translateX(#or_earth.css) rotate(360deg); }
+    to      { -moz-transform: rotate(0deg) translateX(#or_earth.css) rotate(0deg); }
+}
+@-o-keyframes orbit_earth {
+    from    { -o-transform: rotate(360deg) translateX(#or_earth.css) rotate(360deg); }
+    to      { -o-transform: rotate(0deg) translateX(#or_earth.css) rotate(0deg); }
+}
+@keyframes orbit_earth {
+    from    { transform: rotate(360deg) translateX(#or_earth.css) rotate(360deg); }
+    to      { transform: rotate(0deg) translateX(#or_earth.css) rotate(0deg); }
+}
+#earth {
+    --period: 20s;
+    --radius: #pr_earth.css;
+    --color: var(--background-alt);
+
+    width: var(--radius);
+    height: var(--radius);
+
+    background-color: var(--color);
+    right: #solposx.css;
+    bottom: #solposy.css;
+
+    -webkit-animation:  orbit_earth var(--period) linear infinite;
+    -moz-animation:     orbit_earth var(--period) linear infinite;
+    -o-animation:       orbit_earth var(--period) linear infinite;
+    animation:          orbit_earth var(--period) linear infinite;
+}
+#earth-orbit {
+    --orbit-radius: #or_earth.css;
+    --planet-radius: #pr_earth.css;
+    --orbit-thickness: #orbit_thickness.css;
+    --diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
+
+    right:      #solposx.css;
+    bottom:     #solposy.css;
+    transform:  translate(#or_earth.css, #or_earth.css);
+
+    width:  var(--diameter);
+    height: var(--diameter);
+
+    border: #orbit_thickness.css solid var(--background-alt);
+}
+
+@-webkit-keyframes orbit_mars {
+    from    { -webkit-transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); }
+    to      { -webkit-transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
+}
+@-moz-keyframes orbit_mars {
+    from    { -moz-transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); }
+    to      { -moz-transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
+}
+@-o-keyframes orbit_mars{
+    from    { -o-transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); }
+    to      { -o-transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
+}
+@keyframes orbit_mars {
+    from    { transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); }
+    to      { transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
+}
+#mars {
+    --period: 37.6s;
+    --radius: #pr_mars.css;
+    --color: var(--background-alt);
+
+    width: var(--radius);
+    height: var(--radius);
+
+    background-color: var(--color);
+    right: #solposx.css;
+    bottom: #solposy.css;
+
+    -webkit-animation:  orbit_mars var(--period) linear infinite;
+    -moz-animation:     orbit_mars var(--period) linear infinite;
+    -o-animation:       orbit_mars var(--period) linear infinite;
+    animation:          orbit_mars var(--period) linear infinite;
+}
+#mars-orbit {
+    --orbit-radius: #or_mars.css;
+    --planet-radius: #pr_mars.css;
+    --orbit-thickness: #orbit_thickness.css;
+    --diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
+
+    right:      #solposx.css;
+    bottom:     #solposy.css;
+    transform:  translate(#or_mars.css, #or_mars.css);
+
+    width:  var(--diameter);
+    height: var(--diameter);
+
+    border: #orbit_thickness.css solid var(--background-alt);
+}

src/inc_css/pr_earth.css

@@ -0,0 +1 @@
+30px

src/inc_css/pr_mars.css

@@ -0,0 +1 @@
+30px

src/inc_css/pr_mercury.css

@@ -0,0 +1 @@
+30px

src/inc_css/pr_venus.css

@@ -0,0 +1 @@
+30px

src/inc_css/socials.css

@@ -0,0 +1,25 @@
+.socials {
+    position: absolute;
+
+    background-color:var(--background);
+
+    bottom: 1.6em;
+}
+
+.socials i {
+    font-size: 2.0em;
+    padding-right: .1em;
+    color: var(--foreground-inactive);
+    transition: color 0.3s;
+}
+.socials i:hover {
+
+    color: var(--accent);
+}
+
+.socials a {
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+

src/inc_css/solposx.css

@@ -0,0 +1 @@
+0

src/inc_css/solposy.css

@@ -0,0 +1 @@
+0

src/inc_css/title.css

@@ -0,0 +1,24 @@
+.title {
+    font-size: 1em;
+}
+
+.title h1 {
+    padding-bottom: 0;
+    margin-bottom:0;
+    margin-top:0;
+}
+
+.title a {
+    transition: all 0.1s ease-in;
+    color: var(--foreground-active);
+}
+
+.title a:hover {
+    color: var(--accent);
+    transform: translateY(50%);
+}
+
+.pageTitle {
+    margin-left: -0.15em;
+    color: var(--foreground-inactive);
+}

src/inc_html/blogend.html

@@ -1,4 +1,7 @@
 </div>
+
+#include footer.html
+
 </div>
 
 #include planets.html

src/inc_html/footer.html

@@ -0,0 +1,3 @@
+<div class="footer">
+<span>© Cat Flynn 2021-2022</span>
+</div>

src/inc_html/header.html

@@ -6,7 +6,6 @@
     <meta name="keywords" content="Cat Flynn, Ktyl, Portfolio, Showreel, Blog, Gallery"/> <!-- blog, gallery -->
     <link rel="canonical" href="https://ktyl.dev/">
     <link rel="stylesheet" href="styles.css" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
 
     <script src="https://kit.fontawesome.com/ad50bb2e16.js" crossorigin="anonymous"></script>
     <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->

src/inc_html/nav.html

@@ -1,5 +1,5 @@
 <ul class="nav-links">
-    <li><a href="/blog.html">blog</a></li>
-    <li><a href="/gallery.html">gallery</a></li>
-    <li><a href="/vn/books.html">vn</a></li>
+    <li><a href="/about.html" class="fsText">about</a></li>
+    <li><a href="/blog.html" class="fsText">blog</a></li>
+    <li><a href="/gallery.html" class="fsText">gallery</a></li>
 </ul>

src/inc_html/titlestart.html

@@ -1,2 +1,2 @@
 <div class="title">
-    <h1><a href="https://ktyl.dev/">ktyl.dev</a><span class="pageTitle">
+    <h1 class="fsText"><a href="https://ktyl.dev/">ktyl.dev</a><span class="pageTitle">

src/root/about.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html>
+
+#include header.html
+
+<body>
+<title>ktyl ~ about</title>
+
+<div class="nav">
+#include titlestart.html
+/about
+#include titleend.html
+#include nav.html
+
+#include socials.html
+</div>
+
+<div class="page">
+
+<div class="pfp">
+<img src="pfp.jpg"></img>
+</div>
+
+<h1>Hi, I'm Cat</h1>
+
+<div class="text-panel">
+
+<p>
+I am an engineer/artist exploring human technology.
+</p>
+
+<div class="separator"></div>
+
+<p>
+In my day job I find novel uses for interactive, immersive and games technology for training and simulation.
+I am passionate about free and open source software, and the importance of developing tools that serve everyone.
+</p>
+
+<p>
+I tinker for fun and when I can, make things inspired by physics, the universe and boundaries, physical, imagined or otherwise.
+I am currently most enamoured by optics, orbital mechanics and relativity.
+</p>
+
+<p>
+Besides computing, I like caring for my plants, photography, and studying language, culture and philosophy. 
+I explore fashion, makeup, gender expression and regularly see live music.
+</p>
+
+<div class="separator"></div>
+
+<p>
+For inquiries, professional or otherwise, please <a href="mailto:me@ktyl.dev">send me an email</a>!
+</p>
+
+</div>
+
+#include footer.html
+
+</div>
+
+#include planets.html
+
+</body>
+
+</html>

src/root/blog.html

@@ -19,17 +19,15 @@
 <h1>Just Testing</h1>
 
 <div class="text-panel">
-<p><span>Hello, World! Opinions are my own. Content subject to change. Updates published to my <a href="https://ktyl.dev/blog/index.xml">RSS feed</a>!</span></p>
-</div>
 
-<div class="separator"></div>
-
-<div class="text-panel">
 <ul class="blog-index">
-#include index.html
+#include blogindexlinks.html
 </ul>
 
 </div>
+
+#include footer.html
+
 </div>
 
 #include planets.html

src/root/colors.css

@@ -1,4 +1,12 @@
 :root {
+    /* Special */
+    --background: #eee;
+    --background-alt: #b8b8b8;
+    --foreground: #444;
+    --foreground-inactive: #777;
+    --accent: #ff369a;
+    --clear: rgba(0,0,0,0);
+
     /* Colors */
     --color0: #0000ff;
     --color1: #00ff00;
@@ -6,24 +14,4 @@
     --color3: #ff00ff;
     --color4: #ffff00;
     --color5: #00ffff;
-    --clear: rgba(0,0,0,0);
-    --error: #f0f;
-
-    --dblue: #211953;
-    --lblue: #748FE8;
-    --lpink: #F8C8DC;
-    --pink: #eeafbd;
-    --purple: #330e39;
-    --white: var(--lpink);
-
-    /* Special */
-    --background: var(--lpink);
-    --background-alt: var(--dblue);
-    --foreground: var(--lblue);
-    --foreground-inactive: var(--dblue);
-    --accent: var(--lblue);
-
-    /* TODO: extract general varibles file ? */
-    /* Text */
-    --font-size: 1.4em;
 }

src/root/contact

@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+
+#include header.html
+
+<body>
+
+#include titlestart.html
+/contact
+#include titleend.html
+
+#include sidebar.html
+#include planets.html
+
+</body>
+
+</html>

src/root/gallery.html

@@ -156,6 +156,9 @@
 </div>
 
 </div>
+
+#include footer.html
+
 </div>
 
 #include planets.html

src/root/styles.css

@@ -1,847 +1,48 @@
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400&display=swap');
 @import 'colors.css';
 
 :root {
     --title-height: min(20vmin, 90px);
-
-    --orbit-thickness: 0.2em;
-    --sol-pos-x: 0;
-    --sol-pos-y: 0;
 }
+
 body {
-    font-family: sans-serif;
+    font-family: 'Ubuntu', sans-serif;
     margin: 0;
 
     background-color: var(--background);
 }
 
-.title {
-    font-size: 1em;
-}
-
-.title h1 {
-    font-size: 1.4em;
-    padding-bottom: 0;
-    margin-bottom:0;
-    margin-top:0;
-}
-
-.title a {
-    transition: all 0.1s ease-in;
-    color: var(--foreground-active);
-}
-
-.title a:hover {
-    color: var(--lblue);
-    transform: translateY(50%);
-}
-
-.pageTitle {
-    margin-left: -0.15em;
-    color: var(--foreground-inactive);
-}
-
-.nav {
-    position: fixed;
-    width: max(11vmax, 200px);
-    top: 0;
-    bottom:0;
-
-    padding-top: 2em;
-    padding-left: 2em;
-
-    background-color: var(--background);
-    color: var(--foreground);
-}
-
-.nav-links {
-    position: relative;
-
-    padding-top: 2em;
-    padding-bottom: 1em;
-
-    padding-left:0;
-    width: 80%;
-}
-ul.nav-links {
-    margin-top: 0;
-    list-style-type: none;
-}
-
-.nav .nav-links li {
-    display: block;
-    margin-bottom: 0.8em;
-}
-
-.nav .nav-links li a {
-    color: var(--foreground-inactive);
-    font-size: 1.4em;
-    display: block;
-}
-
-.nav li a::before {
-    content: "/";
-}
-
-.nav li a {
-    display: block;
-    padding: 2px;
-    background-color: var(--clear);
-
-    transition: background-color 0.5s;
-}
-
-.nav li a:hover {
-    color: var(--lblue);
-}
-
-@media only screen and (max-width: 1200px) {
-    .nav .socials a {
-        padding: .2em 0;
-        display: block;
-        text-align: center;
-    }
-}
-
-@media only screen and (max-width: 1000px) {
-    .nav {
-        position: fixed;
-        width: 100%;
-        padding: 0;
-        z-index: 1;
-        top: 0;
-        height: 3em;
-
-        border-bottom: 3px solid var(--background-alt);
-    }
-
-    .nav .title {
-        padding-top: .6em;
-        padding-left: .6em;
-        height: 2em;
-    }
-
-    .nav .nav-links {
-        position: absolute;
-        top: 0;
-        right: 0;
-        padding: .6em .6em 0 0;
-        float: right;
-        text-align: right;
-        width: auto;
-    }
-
-    .nav .nav-links li {
-        display: inline-block;
-    }
-
-    .nav .nav-links li a::before {
-        content: "";
-    }
-
-    .nav .pageTitle {
-        display: none;
-    }
-
-    .nav .socials {
-        position: fixed;
-        left: .5em;
-        bottom: .5em;
-    }
-}
-
-@media only screen and (max-width: 700px) {
-    .nav .socials {
-        display: none;
-    }
-}
-
-
-.page {
-    position: absolute;
-    width: max(30vmax,500px);
-    left:50%;
-    top:0;
-    padding: 0px 0 50px;
-    padding-top: 5vh;
-
-    transform: translate(-50%, 0);
-}
-
-.page .separator {
-    position: relative;
-    background-color: var(--foreground-inactive);
-
-    width: .35em;
-    height: .35em;
-    left: 50%;
-
-    border-radius: 100%;
-
-    transform: translateX(-50%);
-}
-
-.page a {
-    color: var(--accent);
-
-    transition: all 0.1s;
-}
-.page a:hover {
-    color: var(--lpink);
-}
-
-.page .text-panel {
-    margin: 0;
-    margin-left: -1.5em;
-    padding: .2em 1.3em;
-    color: var(--white);
-
-    font-size: 1.1em;
-
-    line-height: 1.25em;
-
-    background-color: var(--purple);
-    border-radius: 1.5em;
-
-    width: 100%;
-    border-color: var(--clear);
-    border-width: 3px;
-    border-style: solid;
-}
-
-
-.page h1, h2 {
-    color: var(--foreground-inactive);
-
-    font-size: 1.7em;
-
-    margin-top: 1.2em;
-    padding: 0.2em 0.4em;
-
-    text-align: center;
-}
-
-@media (max-width: 700px) {
-    .page {
-        margin-top: 2.5em;
-        width: 100%;
-        padding: 0;
-
-        overflow: hidden;
-    }
-
-    .page .text-panel p {
-        padding: 0 .5em;
-        margin-right: .5em;
-    }
-}
-
-
-.landing {
-    margin-top: 10%;
-
-    text-align: center;
-}
-
-.landing a {
-    color: var(--foreground-inactive);
-    font-size: 2em;
-    transform: translate(0,50%);
-
-    transition: all 0.3s;
-}
-.landing a:hover {
-    color: var(--accent);
-}
-
-.landing ul {
-    width: 100%;
-    padding: .5em 0 0;
-    margin: 0;
-}
-
-.landing li a {
-    position: relative;
-    font-size: 2.5em;
-    margin: 0 .2em;
-    color: var(--foreground-inactive);
-}
-.landing li a:hover {
-    transform: translateY(-10%);
-    color: var(--accent);
-}
-
-.landing .socials {
-    position: relative;
-    background-color: var(--clear);
-
-    top: 1em;
-    left: auto;
-    right: auto;
-
-    text-align: center;
-}
-
-.landing .socials i {
-    color: var(--foreground-inactive);
-    padding: 0 .07em;
-}
-
-@media only screen and (max-width: 600px) {
-    .landing.page {
-        position: fixed;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-    }
-
-    .landing.page .socials {
-        top: .5em;
-        bottom: 0;
-    }
-
-    .landing.page .socials i {
-        font-size: 3em;
-    }
-}
-
-
-.page .blog  {
-}
-
-.page .blog h1 {
-    font-size: 2.5em;
-}
-
-.page .blog .para-block {
-
-    color: var(--foreground-inactive);
-    font-size: 1.1em;
-
-    line-height: 1.25em;
-
-    background-color: var(--background);
-    border-color: var(--background-alt);
-    border-width: 3px;
-    border-radius: 2em;
-    border-style: solid;
-
-    padding: 1.0em 1.5em;
-}
-
-.page .blog .text-panel ul li {
-    display: block;
-}
-.page .blog .text-panel ul li::before {
-    content: "• "
-}
-
-.page .blog .code-panel {
-    color: var(--background);
-    background-color: var(--foreground);
-
-    font-size 1.5em;
-    line-height: 1.3em;
-
-    border-color: var(--accent);
-    border-width: 2px;
-    border-radius: 2em;
-    border-style: solid;
-
-    padding: 1.0em 2.0em;
-    margin: 2.5em -4.0em;
-
-    overflow: hidden;
-}
-
-.page .blog .code-panel pre {
-    overflow: scroll;
-}
-.page .blog .code-panel pre::-webkit-scrollbar {
-    height: 0;
-    width: 0;
-    background: transparent;
-}
-
-.page .blog p code {
-    height: 0.8em;
-    padding: 0.07em 0.25em;
-    margin: 0 0.1em;
-    background-color: var(--foreground-inactive);
-    color: var(--background);
-    border-radius: .3em;
-}
-
-ul.blog-index li {
-
-    display: block;
-    margin: .2em 0;
-}
-
-ul.blog-index li a {
-    color: var(--lblue);
-    transition: none;
-    text-decoration: none;
-}
-
-.blog-index li a:hover {
-    color: var(--lpink);
-}
-
-.blog-index li a:visited {
-    color: var(--lpink);
-}
-
-.page ul.blog-index li a::before {
-    content: "• "
-}
-
-.blog-index .post-date {
-    padding-right: 1em;
-}
-
-.page .blog .img-panel
-{
-    margin-top: 2em;
-    margin-bottom: 2em;
-}
-
-.page .blog .img-panel img {
-    position: relative;
-
-    width: 120%;
-    max-width: 100vw;
-    left: -10%;
-
-    border-radius: 2em;
-}
-
-@media only screen and (max-width: 700px) {
-    .page .blog .code-panel {
-        padding: 1.0em 5.0em;
-    }
-
-    .page .blog .img-panel img {
-        width: 100%;
-        left: 0;
-        border-radius: 0;
-    }
-}
-
-
-.pfp {
-    position: relative;
-    top: 3em;
-    left: 50%;
-    width: 20em;
-    height: 20em;
-    text-align: center;
-    overflow: hidden;
-    border-color: var(--background-alt);
-    border-style: solid;
-    border-width: 3px;
-    border-radius: 50%;
-    transform: translate(-50%, 0);
-    margin-bottom: 4em;
-}
-
-.pfp img {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    height: 100%;
-    width: auto;
-    transform: translate(-50%, -50%);
-}
+#include title.css
+#include nav.css
+#include page.css
+#include landing.css
+#include blog.css
+#include about.css
 
 li {
     display:inline;
 }
 
-a {
+a.fsText {
+    text-decoration: none;
+    color: var(--foreground-inactive);
+    transform: scale(1);
+    transition: background-color 0.2s, color 0.2s, transform 0.2s;
+}
+
+.fsText a {
     text-decoration: none;
     color: var(--foreground);
 }
 
-.separator {
-    margin-top: 2em;
-    margin-bottom: 2em;
-}
-
-.socials {
-    position: absolute;
-
-    background-color:var(--background);
-
-    bottom: 1.6em;
-}
-
-.socials i {
-    font-size: 2.0em;
-    padding-right: .1em;
-    color: var(--foreground-inactive);
-    transition: color 0.3s;
-}
-.socials i:hover {
-    color: var(--lblue);
-}
-
-.socials a {
-    text-decoration: none;
-    transition: color 0.3s;
-}
-
-.page.portfolio {
-    padding-top: 0;
-    width: 50%;
-
-    margin-left:auto;
-    margin-right:auto;
-
-    transform: translate(-50%,0);
-}
-
-.portfolio p {
-    margin: 1.2em 0 2em;
-
-    text-align: center;
-    border-style: none;
-
-    background-color: var(--clear);
-}
-
-.glass {
-    padding: 0.4em 0.6em;
-    color: var(--foreground-inactive);
-    background-color: var(--background);
-    opacity:0.9;
-
-    border-style:solid;
-    border-radius:2em;
-    border-color:var(--clear);
-}
-
-/* gallery img */
-.wrapper {
-    margin-top: 1em;
-    width: 100%;
-    height: 100%;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-}
-.wrapper .imgHolder {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-
-.wrapper img {
-    pointer-events: none;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    left: auto;
-    right: auto;
-
-    transition: all 0.2s ease-out;
-}
-
-.wrapper .imgHolder span {
-    position:absolute;
-    top:100%;
-    width:100%;
-
-    transform: translateY(-50%) scale(0.6);
-    text-align: center;
-
-    opacity: 0;
-    transition: all 0.3s;
-
-    color: var(--accent);
-}
-
-.wrapper .imgHolder span p {
-    padding:0;
-    margin:0;
-    opacity: 1;
-    color: var(--background);
-}
-
-.lightTileText {
-    color: var(--background);
-}
-
-.wrapper .imgHolder a {
-    position: absolute;
-    top:0;
-    left:0;
-    width:100%;
-    height:100%;
-}
-
-@media only screen and (max-width: 600px) {
-    .page.portfolio {
-        width: 100%;
-    }
-
-    .wrapper .imgHolder {
-        overflow: hidden;
-    }
-    .wrapper .imgHolder span {
-        position: absolute;
-        top:0;
-        left:0;
-        width:100%;
-        height:100%;
-        transform: none;
-    }
-    .icon-link {
-        display: none;
-    }
-    .wrapper .imgHolder span i {
-        /*display: none;*/
-    }
-}
-
-.planets {
-    overflow: hidden;
-    position: fixed;
-    height: 80vmax;
-    width: 80vmax;
-    right: 0;
-    bottom: 0;
-    z-index: -1;
-
-    /*background-color: var(--background);*/
-    background-color: transparent;
-}
-@media only screen and (max-width: 600px) {
-    .planets {
-        height: 200vmax;
-        width: 200vmax;
-
-        transform: scale(0.5) translate(50%, 50%);
-    }
-}
-
-.planet {
-    position: absolute;
-    border-radius: 50%;
-    display: inline-block;
-
-    width: var(--radius);
-    height: var(--radius);
-}
-
-.orbit {
-    position: absolute;
-
-    border-radius: 100%;
-    background-color: transparent;
-
-    z-index:-1;
-}
-
-:root {
-    --mercury-orbit-radius: 180px;
-    --venus-orbit-radius: 320px;
-    --earth-orbit-radius: 440px;
-    --mars-orbit-radius: 570px;
-
-    --planet-radius: 30px;
-}
-
-@-webkit-keyframes orbit_mercury {
-    from    { -webkit-transform: rotate(360deg) translateX(var(--mercury-orbit-radius)) rotate(360deg); }
-    to      { -webkit-transform: rotate(0deg) translateX(var(--mercury-orbit-radius)) rotate(0deg); }
-}
-@-moz-keyframes orbit_mercury {
-    from    { -moz-transform: rotate(360deg) translateX(var(--mercury-orbit-radius)) rotate(360deg); }
-    to      { -moz-transform: rotate(0deg) translateX(var(--mercury-orbit-radius)) rotate(0deg); }
-}
-@-o-keyframes orbit_mercury {
-    from    { -o-transform: rotate(360deg) translateX(var(--mercury-orbit-radius)) rotate(360deg); }
-    to      { -o-transform: rotate(0deg) translateX(var(--mercury-orbit-radius)) rotate(0deg); }
-}
-@keyframes orbit_mercury {
-    from    { transform: rotate(360deg) translateX(var(--mercury-orbit-radius)) rotate(360deg); }
-    to      { transform: rotate(0deg) translateX(var(--mercury-orbit-radius)) rotate(0deg); }
-}
-#mercury {
-    --period: 4.82s;
-    --radius: 30px;
-    --color: var(--background-alt);
-
-    width: var(--radius);
-    height: var(--radius);
-
-    background-color: var(--color);
-
-    right: var(--sol-pos-x);
-    bottom: var(--sol-pos-y);
-
-    -webkit-animation:  orbit_mercury var(--period) linear infinite;
-    -moz-animation:     orbit_mercury var(--period) linear infinite;
-    -o-animation:       orbit_mercury var(--period) linear infinite;
-    animation:          orbit_mercury var(--period) linear infinite;
-}
-#mercury-orbit {
-    --orbit-radius: var(--mercury-orbit-radius);
-    --diameter: calc(2 * var(--orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
-
-    right:      var(--sol-pos-x);
-    bottom:     var(--sol-pos-y);
-    transform:  translate(var(--mercury-orbit-radius), var(--mercury-orbit-radius));
-
-    width:  var(--diameter);
-    height: var(--diameter);
-
-    border: var(--orbit-thickness) solid var(--background-alt);
-}
-
-@-webkit-keyframes orbit_venus {
-    from    { -webkit-transform: rotate(360deg) translateX(var(--venus-orbit-radius)) rotate(360deg); }
-    to      { -webkit-transform: rotate(0deg) translateX(var(--venus-orbit-radius)) rotate(0deg); }
-}
-@-moz-keyframes orbit_venus {
-    from    { -moz-transform: rotate(360deg) translateX(var(--venus-orbit-radius)) rotate(360deg); }
-    to      { -moz-transform: rotate(0deg) translateX(var(--venus-orbit-radius)) rotate(0deg); }
-}
-@-o-keyframes orbit_venus {
-    from    { -o-transform: rotate(360deg) translateX(var(--venus-orbit-radius)) rotate(360deg); }
-    to      { -o-transform: rotate(0deg) translateX(var(--venus-orbit-radius)) rotate(0deg); }
-}
-@keyframes orbit_venus {
-    from    { transform: rotate(360deg) translateX(var(--venus-orbit-radius)) rotate(360deg); }
-    to      { transform: rotate(0deg) translateX(var(--venus-orbit-radius)) rotate(0deg); }
-}
-#venus {
-    --period: 12.3s;
-    --color: var(--background-alt);
-
-    width: var(--planet-radius);
-    height: var(--planet-radius);
-
-    background-color: var(--color);
-    right:  var(--sol-pos-x);
-    bottom: var(--sol-pos-y);
-
-    -webkit-animation:  orbit_venus var(--period) linear infinite;
-    -moz-animation:     orbit_venus var(--period) linear infinite;
-    -o-animation:       orbit_venus var(--period) linear infinite;
-    animation:          orbit_venus var(--period) linear infinite;
-}
-#venus-orbit {
-    --diameter: calc(2 * var(--venus-orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
-
-    right:      var(--sol-pos-x);
-    bottom:     var(--sol-pos-y);
-    transform:  translate(var(--venus-orbit-radius), var(--venus-orbit-radius));
-
-    width:  var(--diameter);
-    height: var(--diameter);
-    border: var(--orbit-thickness) solid var(--background-alt);
-}
-
-@-webkit-keyframes orbit_earth {
-    from    { -webkit-transform: rotate(360deg) translateX(var(--earth-orbit-radius)) rotate(360deg); }
-    to      { -webkit-transform: rotate(0deg) translateX(var(--earth-orbit-radius)) rotate(0deg); }
-}
-@-moz-keyframes orbit_earth {
-    from    { -moz-transform: rotate(360deg) translateX(var(--earth-orbit-radius)) rotate(360deg); }
-    to      { -moz-transform: rotate(0deg) translateX(var(--earth-orbit-radius)) rotate(0deg); }
-}
-@-o-keyframes orbit_earth {
-    from    { -o-transform: rotate(360deg) translateX(var(--earth-orbit-radius)) rotate(360deg); }
-    to      { -o-transform: rotate(0deg) translateX(var(--earth-orbit-radius)) rotate(0deg); }
-}
-@keyframes orbit_earth {
-    from    { transform: rotate(360deg) translateX(var(--earth-orbit-radius)) rotate(360deg); }
-    to      { transform: rotate(0deg) translateX(var(--earth-orbit-radius)) rotate(0deg); }
-}
-#earth {
-    --period: 20s;
-    --color: var(--background-alt);
-
-    width: var(--planet-radius);
-    height: var(--planet-radius);
-
-    background-color: var(--color);
-    right:  var(--sol-pos-x);
-    bottom: var(--sol-pos-y);
-
-    -webkit-animation:  orbit_earth var(--period) linear infinite;
-    -moz-animation:     orbit_earth var(--period) linear infinite;
-    -o-animation:       orbit_earth var(--period) linear infinite;
-    animation:          orbit_earth var(--period) linear infinite;
-}
-#earth-orbit {
-    --diameter: calc(2 * var(--earth-orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
-
-    right:  var(--sol-pos-x);
-    bottom: var(--sol-pos-y);
-    transform:  translate(var(--earth-orbit-radius), var(--earth-orbit-radius));
-
-    width:  var(--diameter);
-    height: var(--diameter);
-
-    border: var(--orbit-thickness) solid var(--background-alt);
+.fsText {
+    --font-size: 1.4em;
+    font-size: var(--font-size);
+    color: var(--foreground);
 }
 
 
-@-webkit-keyframes orbit_mars {
-    from    { -webkit-transform: rotate(360deg) translateX(var(--mars-orbit-radius)) rotate(360deg); }
-    to      { -webkit-transform: rotate(0deg) translateX(var(--mars-orbit-radius)) rotate(0deg); }
-}
-@-moz-keyframes orbit_mars {
-    from    { -moz-transform: rotate(360deg) translateX(var(--mars-orbit-radius)) rotate(360deg); }
-    to      { -moz-transform: rotate(0deg) translateX(var(--mars-orbit-radius)) rotate(0deg); }
-}
-@-o-keyframes orbit_mars{
-    from    { -o-transform: rotate(360deg) translateX(var(--mars-orbit-radius)) rotate(360deg); }
-    to      { -o-transform: rotate(0deg) translateX(var(--mars-orbit-radius)) rotate(0deg); }
-}
-@keyframes orbit_mars {
-    from    { transform: rotate(360deg) translateX(var(--mars-orbit-radius)) rotate(360deg); }
-    to      { transform: rotate(0deg) translateX(var(--mars-orbit-radius)) rotate(0deg); }
-}
-#mars {
-    --period: 37.6s;
-    --color: var(--background-alt);
-
-    width: var(--planet-radius);
-    height: var(--planet-radius);
-
-    background-color: var(--color);
-    right:  var(--sol-pos-x);
-    bottom: var(--sol-pos-y);
-
-    -webkit-animation:  orbit_mars var(--period) linear infinite;
-    -moz-animation:     orbit_mars var(--period) linear infinite;
-    -o-animation:       orbit_mars var(--period) linear infinite;
-    animation:          orbit_mars var(--period) linear infinite;
-}
-#mars-orbit {
-    --diameter: calc(2 * var(--mars-orbit-radius) + (var(--planet-radius) - var(--orbit-thickness)) / 2);
-
-    right:  var(--sol-pos-x);
-    bottom: var(--sol-pos-y);
-    transform:  translate(var(--mars-orbit-radius), var(--mars-orbit-radius));
-
-    width:  var(--diameter);
-    height: var(--diameter);
-
-    border: var(--orbit-thickness) solid var(--background-alt);
-}
-
-.footer {
-    position: relative;
-}
-
-.footer span {
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, 0);
-    color: var(--foreground-inactive);
-    padding: 2em;
-}
+#include socials.css
+#include gallery.css
+#include planets.css
+#include footer.css

src/vn/books.html

@@ -1,24 +0,0 @@
-<head>
-    <meta charset="UTF-8"/>
-    <link rel="stylesheet" href="styles.css" />
-</head>
-<html>
-<body onload="advance()">
-<div class="column">
-
-<div class=img-container>
-<img id="portrait" src="img/frog.png"></img>
-</div>
-
-<div class="text-box">
-    <p id="text-box-content">SET_DIALOGUE_TEXT</p>
-</div>
-
-<div id="button" onclick="advance()">
-    <a id="button-text" class="centre" href="#">SET_BUTTON_TEXT</a>
-</div>
-
-</div>
-</body>
-</html>
-<script src="main.js"></script>