include ppp as submodule, planet boye

wip planets

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "ppp"]
+	path = ppp
+	url = https://github.com/ktyldev/ppp

makefile

@@ -15,7 +15,7 @@ run: $(HTML_TARGETS) $(CSS_TARGETS)
 
 $(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES)
 	mkdir -p $(OUT_DIR)
-	python ppp.py $< $(HTML_INCLUDES) > $@
+	python ppp/ppp.py $< $(HTML_INCLUDES) > $@
 
 $(OUT_DIR)/%.css: $(ROOT_DIR)/%.css
 	cp $< $@

ppp

@@ -0,0 +1 @@
+Subproject commit e50671d1cddd6f109c4a1a14dae0a9dffb29d290

ppp.py

@@ -1,66 +0,0 @@
-import sys
-import os.path
-
-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)
-
-# figure out src dir from first include shader path root argument
-sep="/"
-inc_start_idx = 2
-inc_end_idx = argc - 1
-src_dir = sep.join(sys.argv[2].split(sep)[:-1])
-
-def preprocess_file(path):
-    lines=0
-
-    with open(path) as f:
-        content = f.readlines()
-        content = [x.strip() for x in content]
-        lines=len(content)
-
-        for line in content:
-
-            directive = "#include"
-            if line.startswith(directive):
-                include_path = line.split(" ")[1]
-
-                # prepend directory
-                include_path = "/".join([src_dir, include_path])
-
-                preprocess_file(include_path)
-                continue
-
-            print(line)
-
-
-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)

src/include/planets.html

@@ -1 +1,3 @@
-<div class="planets"></div>
+<div class="planets">
+    <span id="earth" class="planet"></span>
+</div>

src/root/main.css

@@ -73,10 +73,8 @@ a.fsText:hover {
     width: max(30vmax,500px);
     left:50%;
     top:var(--title-height);
-    bottom:0;
+    padding: 10px 0 50px;
-    padding: 10px 0 0;
+    background-color: var(--foreground);
-    background-color: var(--color0);
-    opacity: 0.7;
 
     transform: translate(-50%, 0);
 }
@@ -84,7 +82,8 @@ a.fsText:hover {
 .column p {
     margin: 0 40px;
     padding-top: 20px;
-    color: #ffffff;
+    color: var(--background);
+    opacity: 1.0;
 }
 
 .column h1 {
@@ -159,6 +158,44 @@ a.fsText:hover {
     z-index: -1;
 
     background-color: var(--color2);
-
+}
-
+
+@-webkit-keyframes orbit {
+    from    { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
+    to      { -webkit-transform: rotate(360deg) translateX(150px) rotate(360deg); }
+}
+@-moz-keyframes orbit {
+    from    { -moz-transform: rotate(0deg) translateX(150px) rotate(0deg); }
+    to      { -moz-transform: rotate(360deg) translateX(150px) rotate(360deg); }
+}
+@-o-keyframes orbit {
+    from    { -o-transform: rotate(0deg) translateX(150px) rotate(0deg); }
+    to      { -o-transform: rotate(360deg) translateX(150px) rotate(360deg); }
+}
+@keyframes orbit {
+    from    { transform: rotate(0deg) translateX(150px) rotate(0deg); }
+    to      { transform: rotate(360deg) translateX(150px) rotate(360deg); }
+}
+
+.planet {
+    position: absolute;
+    width: 25px;
+    height: 25px;
+
+    border-radius: 50%;
+
+    display: inline-block;
+
+    -moz-animation:     orbit 4s linear infinite;
+    animation:          orbit 4s linear infinite;
+}
+
+#earth {
+
+    background-color: var(--color4);
+    left: 150px;
+    top: 150px;
+
+    /* first rotate is orbital angle, second rotation undoes it to keep the planet upright */
+    transform: rotate(45deg) translateX(100px) rotate(-45deg);
 }