ktyl
/
ktyl.dev
1
0
Fork 0
Code Issues 18 Pull Requests 1 Packages Projects 1 Releases Wiki Activity

add planets

This commit is contained in:
ktyl 2021-09-14 00:30:16 +01:00
parent 4a639f5b63
commit ceed11d454
18 changed files with 187 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
makefile
View File

@ -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)

7
readme.md
View File

@ -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

33
src/inc_css/earth.css Normal file
View File

@ -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;
}

33
src/inc_css/mars.css Normal file
View File

@ -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;
}

33
src/inc_css/mercury.css Normal file
View File

@ -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;
}

1
src/inc_css/or_earth.css Normal file
View File

@ -0,0 +1 @@
400px

1
src/inc_css/or_mars.css Normal file
View File

@ -0,0 +1 @@
500px

1
src/inc_css/or_mercury.css Normal file
View File

@ -0,0 +1 @@
200px

1
src/inc_css/or_venus.css Normal file
View File

@ -0,0 +1 @@
300px

22
src/inc_css/planets.css Normal file
View File

@ -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

1
src/inc_css/solposx.css Normal file
View File

@ -0,0 +1 @@
90px

1
src/inc_css/solposy.css Normal file
View File

@ -0,0 +1 @@
50px

33
src/inc_css/venus.css Normal file
View File

@ -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;
}

0
src/include/header.html → src/inc_html/header.html
View File

6
src/inc_html/planets.html Normal file
View File

@ -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>

0
src/include/sidebar.html → src/inc_html/sidebar.html
View File

3
src/include/planets.html
View File

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

62
src/root/main.css
View File

@ -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