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 {
--period: 20s;
--radius: 80px;
--radius: #pr_earth.css;
--color: #87ceeb;
width: var(--radius);
@ -31,3 +31,16 @@
-o-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); }
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); }
to { -o-transform: rotate(0deg) translateX(#or_mars.css) rotate(0deg); }
}
@ -16,7 +16,7 @@
}
#mars {
--period: 37.6s;
--radius: 40px;
--radius: #pr_mars.css;
--color: #ff5349;
width: var(--radius);
@ -31,3 +31,16 @@
-o-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 {
--period: 4.82s;
--radius: 40px;
--radius: #pr_mercury.css;
--color: #c89d7c;
width: var(--radius);
@ -31,3 +31,16 @@
-o-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;
z-index: -1;
background-color: var(--background);
/*background-color: var(--background);*/
background-color: transparent;
}
.planet {
@ -16,6 +17,17 @@
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 earth.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 {
--period: 12.3s;
--radius: 70px;
--radius: #pr_venus.css;
--color: #eed053;
width: var(--radius);
@ -31,3 +31,16 @@
-o-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">
<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>

6
src/root/main.css
View File

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