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

draw planet orbits and line them up nicely :)

This commit is contained in:
ktyl 2021-09-15 01:41:51 +01:00
parent ceed11d454
commit 39aa57de1f
17 changed files with 97 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/inc_css/earth.css
View File

@ -16,7 +16,7 @@
} }
#earth { #earth {
--period: 20s; --period: 20s;
--radius: 80px; --radius: #pr_earth.css;
--color: #87ceeb; --color: #87ceeb;
width: var(--radius); width: var(--radius);
@ -31,3 +31,16 @@
-o-animation: orbit_earth var(--period) linear infinite; -o-animation: orbit_earth var(--period) linear infinite;
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);
}

17
src/inc_css/mars.css
View File

@ -6,7 +6,7 @@
from { -moz-transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); } from { -moz-transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); }
to { -moz-transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); } to { -moz-transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
} }
@-o-keyframes orbit_mars { @-o-keyframes orbit_mars{
from { -o-transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); } from { -o-transform: rotate(360deg) translateX(#or_mars.css) rotate(360deg); }
to { -o-transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); } to { -o-transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
} }
@ -16,7 +16,7 @@
} }
#mars { #mars {
--period: 37.6s; --period: 37.6s;
--radius: 40px; --radius: #pr_mars.css;
--color: #ff5349; --color: #ff5349;
width: var(--radius); width: var(--radius);
@ -31,3 +31,16 @@
-o-animation: orbit_mars var(--period) linear infinite; -o-animation: orbit_mars var(--period) linear infinite;
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);
}

15
src/inc_css/mercury.css
View File

@ -16,7 +16,7 @@
} }
#mercury { #mercury {
--period: 4.82s; --period: 4.82s;
--radius: 40px; --radius: #pr_mercury.css;
--color: #c89d7c; --color: #c89d7c;
width: var(--radius); width: var(--radius);
@ -31,3 +31,16 @@
-o-animation: orbit_mercury var(--period) linear infinite; -o-animation: orbit_mercury var(--period) linear infinite;
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);
}

2
src/inc_css/or_earth.css
View File

@ -1 +1 @@
400px 420px

2
src/inc_css/or_mars.css
View File

@ -1 +1 @@
500px 560px

2
src/inc_css/or_mercury.css
View File

@ -1 +1 @@
200px 180px

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

@ -0,0 +1 @@
0.2rem

14
src/inc_css/planets.css
View File

@ -7,7 +7,8 @@
bottom: 0; bottom: 0;
z-index: -1; z-index: -1;
background-color: var(--background); /*background-color: var(--background);*/
background-color: transparent;
} }
.planet { .planet {
@ -16,6 +17,17 @@
display: inline-block; display: inline-block;
} }
.orbit {
position: absolute;
border: #orbit_thickness.css solid var(--foreground-inactive);
border-radius: 100%;
background-color: transparent;
opacity: 0.2;
z-index:-1;
}
#include mercury.css #include mercury.css
#include earth.css #include earth.css
#include venus.css #include venus.css

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

@ -0,0 +1 @@
70px

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

@ -0,0 +1 @@
50px

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

@ -0,0 +1 @@
40px

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

@ -0,0 +1 @@
60px

2
src/inc_css/solposx.css
View File

@ -1 +1 @@
90px 0

2
src/inc_css/solposy.css
View File

@ -1 +1 @@
50px 0

15
src/inc_css/venus.css
View File

@ -16,7 +16,7 @@
} }
#venus { #venus {
--period: 12.3s; --period: 12.3s;
--radius: 70px; --radius: #pr_venus.css;
--color: #eed053; --color: #eed053;
width: var(--radius); width: var(--radius);
@ -31,3 +31,16 @@
-o-animation: orbit_venus var(--period) linear infinite; -o-animation: orbit_venus var(--period) linear infinite;
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);
}

18
src/inc_html/planets.html
View File

@ -1,6 +1,16 @@
<div class="planets"> <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 id="mercury" class="planet"></div>
<div id="mercury-orbit" class="orbit"></div>
<div id="venus" class="planet"></div>
<div id="venus-orbit" class="orbit"></div>
<div id="earth" class="planet"></div>
<div id="earth-orbit" class="orbit"></div>
<div id="mars" class="planet"></div>
<div id="mars-orbit" class="orbit"></div>
</div> </div>

6
src/root/main.css
View File

@ -73,6 +73,7 @@ a.fsText:hover {
width: max(30vmax,500px); width: max(30vmax,500px);
left:50%; left:50%;
top:var(--title-height); top:var(--title-height);
margin-top: 40px;
padding: 10px 0 50px; padding: 10px 0 50px;
background-color: var(--foreground-inactive); background-color: var(--foreground-inactive);
@ -99,7 +100,7 @@ a.fsText:hover {
position: absolute; position: absolute;
left: 15px; left: 15px;
width: max(11vmax, 180px); width: max(11vmax, 180px);
top:var(--title-height); top: max(var(--title-height), 25%);
bottom:0; bottom:0;
background-color: var(--background); background-color: var(--background);
@ -109,7 +110,6 @@ a.fsText:hover {
.sidebarContent { .sidebarContent {
position: relative; position: relative;
background-color: var(--background); background-color: var(--background);
padding-top: 5%;
} }
.sidebar ul { .sidebar ul {
@ -120,7 +120,7 @@ a.fsText:hover {
.sidebar li { .sidebar li {
display: block; display: block;
margin: 5px 0 0 0; margin: 15px 0 0 0;
} }
.sidebar li a { .sidebar li a {