add planets

makefile

@@ -2,13 +2,15 @@ SRC_DIR			= src
 OUT_DIR			= site
 
 ROOT_DIR		= $(SRC_DIR)/root
-INCLUDE_DIR		= $(SRC_DIR)/include
+INC_HTML		= $(SRC_DIR)/inc_html
+INC_CSS 		= $(SRC_DIR)/inc_css
 
 PAGES 			= $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.html")
-HTML_INCLUDES 	= $(shell find $(INCLUDE_DIR) -name *.html)
+HTML_INCLUDES 	= $(shell find $(INC_HTML) -name *.html)
 HTML_TARGETS 	= $(PAGES:$(ROOT_DIR)/%.html=$(OUT_DIR)/%.html)
 
 STYLES			= $(shell find $(ROOT_DIR) -wholename "$(ROOT_DIR)*.css")
+CSS_INCLUDES	= $(shell find $(INC_CSS) -name *.css)
 CSS_TARGETS 	= $(STYLES:$(ROOT_DIR)/%.css=$(OUT_DIR)/%.css)
 
 run: $(HTML_TARGETS) $(CSS_TARGETS)
@@ -17,8 +19,9 @@ $(OUT_DIR)/%.html: $(ROOT_DIR)/%.html $(HTML_INCLUDES)
 	mkdir -p $(OUT_DIR)
 	python ppp/ppp.py $< $(HTML_INCLUDES) > $@
 
-$(OUT_DIR)/%.css: $(ROOT_DIR)/%.css
+$(OUT_DIR)/%.css: $(ROOT_DIR)/%.css $(CSS_INCLUDES)
-	cp $< $@
+	mkdir -p $(OUT_DIR)
+	python ppp/ppp.py $< $(CSS_INCLUDES) > $@
 
 clean: 
 	rm -r $(OUT_DIR)

readme.md

@@ -9,3 +9,10 @@
 * [ ] graphics
     * [ ] a few planets orbit the cursor, or flat color otherwise
         when you click on the planets they turn into a context menu !
+
+[orbital data](https://nssdc.gsfc.nasa.gov/planetary/factsheet/planet_table_ratio.html)
+
+.241
+.615
+1
+1.88

src/inc_css/earth.css

@@ -0,0 +1,33 @@
+@-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: 80px;
+    --color: #87ceeb;
+
+    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;
+}

src/inc_css/mars.css

@@ -0,0 +1,33 @@
+@-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: 40px;
+    --color: #ff5349;
+
+    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;
+}

src/inc_css/mercury.css

@@ -0,0 +1,33 @@
+@-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: 40px;
+    --color: #c89d7c;
+
+    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;
+}

src/inc_css/or_earth.css

@@ -0,0 +1 @@
+400px

src/inc_css/or_mars.css

@@ -0,0 +1 @@
+500px

src/inc_css/or_mercury.css

@@ -0,0 +1 @@
+200px

src/inc_css/or_venus.css

@@ -0,0 +1 @@
+300px

src/inc_css/planets.css

@@ -0,0 +1,22 @@
+.planets {
+    overflow: hidden;
+    position: absolute;
+    height: 80vmax;
+    width: 80vmax;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+
+    background-color: var(--background);
+}
+
+.planet {
+    position: absolute;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+#include mercury.css
+#include earth.css
+#include venus.css
+#include mars.css

src/inc_css/solposx.css

@@ -0,0 +1 @@
+90px

src/inc_css/solposy.css

@@ -0,0 +1 @@
+50px

src/inc_css/venus.css

@@ -0,0 +1,33 @@
+@-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: 70px;
+    --color: #eed053;
+
+    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;
+}

src/inc_html/planets.html

@@ -0,0 +1,6 @@
+<div class="planets">
+    <span id="mercury" class="planet"></span>
+    <span id="venus" class="planet"></span>
+    <span id="earth" class="planet"></span>
+    <span id="mars" class="planet"></span>
+</div>

src/include/planets.html

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

src/root/main.css

@@ -74,7 +74,7 @@ a.fsText:hover {
     left:50%;
     top:var(--title-height);
     padding: 10px 0 50px;
-    background-color: var(--foreground);
+    background-color: var(--foreground-inactive);
 
     transform: translate(-50%, 0);
 }
@@ -87,10 +87,12 @@ a.fsText:hover {
 }
 
 .column h1 {
-    padding-left: 30px;
+    color: var(--background);
+
+    padding-left: 60px;
     padding-top: 10px;
-    left: 50%;
     font-size: 1.3em;
+    font-weight: bold;
 }
 
 .sidebar {
@@ -107,8 +109,7 @@ a.fsText:hover {
 .sidebarContent {
     position: relative;
     background-color: var(--background);
-    top: 50%;
+    padding-top: 5%;
-    transform: translate(0, -50%);
 }
 
 .sidebar ul {
@@ -149,53 +150,4 @@ a.fsText:hover {
     color: var(--foreground);
 }
 
-.planets {
+#include planets.css
-    position: absolute;
-    height: 60vmax;
-    width: 60vmax;
-    right: 0;
-    bottom: 0;
-    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);
-}