draw planet orbits and line them up nicely :)
This commit is contained in:
parent
ceed11d454
commit
39aa57de1f
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -1 +1 @@
|
|||
400px
|
||||
420px
|
||||
|
|
|
@ -1 +1 @@
|
|||
500px
|
||||
560px
|
||||
|
|
|
@ -1 +1 @@
|
|||
200px
|
||||
180px
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
0.2rem
|
|
@ -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
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
70px
|
|
@ -0,0 +1 @@
|
|||
50px
|
|
@ -0,0 +1 @@
|
|||
40px
|
|
@ -0,0 +1 @@
|
|||
60px
|
|
@ -1 +1 @@
|
|||
90px
|
||||
0
|
||||
|
|
|
@ -1 +1 @@
|
|||
50px
|
||||
0
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue