diff --git a/makefile b/makefile
index eedf3cb..3da051a 100644
--- a/makefile
+++ b/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
- cp $< $@
+$(OUT_DIR)/%.css: $(ROOT_DIR)/%.css $(CSS_INCLUDES)
+ mkdir -p $(OUT_DIR)
+ python ppp/ppp.py $< $(CSS_INCLUDES) > $@
clean:
rm -r $(OUT_DIR)
diff --git a/readme.md b/readme.md
index f8e57cc..3d938fd 100644
--- a/readme.md
+++ b/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
diff --git a/src/inc_css/earth.css b/src/inc_css/earth.css
new file mode 100644
index 0000000..e915ce1
--- /dev/null
+++ b/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;
+}
diff --git a/src/inc_css/mars.css b/src/inc_css/mars.css
new file mode 100644
index 0000000..0f6aa6a
--- /dev/null
+++ b/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;
+}
diff --git a/src/inc_css/mercury.css b/src/inc_css/mercury.css
new file mode 100644
index 0000000..4132183
--- /dev/null
+++ b/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;
+}
diff --git a/src/inc_css/or_earth.css b/src/inc_css/or_earth.css
new file mode 100644
index 0000000..3d7ade1
--- /dev/null
+++ b/src/inc_css/or_earth.css
@@ -0,0 +1 @@
+400px
diff --git a/src/inc_css/or_mars.css b/src/inc_css/or_mars.css
new file mode 100644
index 0000000..2acee23
--- /dev/null
+++ b/src/inc_css/or_mars.css
@@ -0,0 +1 @@
+500px
diff --git a/src/inc_css/or_mercury.css b/src/inc_css/or_mercury.css
new file mode 100644
index 0000000..70cf68c
--- /dev/null
+++ b/src/inc_css/or_mercury.css
@@ -0,0 +1 @@
+200px
diff --git a/src/inc_css/or_venus.css b/src/inc_css/or_venus.css
new file mode 100644
index 0000000..503693e
--- /dev/null
+++ b/src/inc_css/or_venus.css
@@ -0,0 +1 @@
+300px
diff --git a/src/inc_css/planets.css b/src/inc_css/planets.css
new file mode 100644
index 0000000..b6f70b1
--- /dev/null
+++ b/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
diff --git a/src/inc_css/solposx.css b/src/inc_css/solposx.css
new file mode 100644
index 0000000..153c4d9
--- /dev/null
+++ b/src/inc_css/solposx.css
@@ -0,0 +1 @@
+90px
diff --git a/src/inc_css/solposy.css b/src/inc_css/solposy.css
new file mode 100644
index 0000000..af13e9c
--- /dev/null
+++ b/src/inc_css/solposy.css
@@ -0,0 +1 @@
+50px
diff --git a/src/inc_css/venus.css b/src/inc_css/venus.css
new file mode 100644
index 0000000..61f68cb
--- /dev/null
+++ b/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;
+}
diff --git a/src/include/header.html b/src/inc_html/header.html
similarity index 100%
rename from src/include/header.html
rename to src/inc_html/header.html
diff --git a/src/inc_html/planets.html b/src/inc_html/planets.html
new file mode 100644
index 0000000..1b9b2c6
--- /dev/null
+++ b/src/inc_html/planets.html
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/src/include/sidebar.html b/src/inc_html/sidebar.html
similarity index 100%
rename from src/include/sidebar.html
rename to src/inc_html/sidebar.html
diff --git a/src/include/planets.html b/src/include/planets.html
deleted file mode 100644
index 0ccf85c..0000000
--- a/src/include/planets.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/src/root/main.css b/src/root/main.css
index 8669ce9..d43cc25 100644
--- a/src/root/main.css
+++ b/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%;
- transform: translate(0, -50%);
+ padding-top: 5%;
}
.sidebar ul {
@@ -149,53 +150,4 @@ a.fsText:hover {
color: var(--foreground);
}
-.planets {
- 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);
-}
+#include planets.css