combine planets css

This commit is contained in:
ktyl 2022-01-14 01:57:47 +00:00
parent a02e28c171
commit 7089da7e1a
6 changed files with 199 additions and 195 deletions

View File

@ -1,48 +0,0 @@
@-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: #pr_earth.css;
--color: var(--background-alt);
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;
}
#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);
border: #orbit_thickness.css solid var(--background-alt);
}

View File

@ -1,48 +0,0 @@
@-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: #pr_mars.css;
--color: var(--background-alt);
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;
}
#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);
border: #orbit_thickness.css solid var(--background-alt);
}

View File

@ -1,48 +0,0 @@
@-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: 30px;
--color: var(--background-alt);
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;
}
#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);
border: #orbit_thickness.css solid var(--background-alt);
}

View File

@ -23,8 +23,12 @@
} }
.page a { .page a {
/*
color: #dd2570;
text-decoration: none; text-decoration: none;
*/
color: var(--accent); color: var(--accent);
transition: all 0.1s; transition: all 0.1s;
} }
.page a:hover { .page a:hover {
@ -47,6 +51,7 @@
width: 100%; width: 100%;
border-color: var(--background-alt); border-color: var(--background-alt);
border-color: var(--accent);
border-width: 3px; border-width: 3px;
border-style: solid; border-style: solid;
} }

View File

@ -38,7 +38,197 @@
z-index:-1; z-index:-1;
} }
#include mercury.css @-webkit-keyframes orbit_mercury {
#include earth.css from { -webkit-transform: rotate(360deg) translateX(#or_mercury.css) rotate(360deg); }
#include venus.css to { -webkit-transform: rotate(0deg) translateX(#or_mercury.css) rotate(0deg); }
#include mars.css }
@-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: 30px;
--color: var(--background-alt);
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;
}
#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);
border: #orbit_thickness.css solid var(--background-alt);
}
@-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: #pr_venus.css;
--color: var(--background-alt);
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;
}
#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);
border: #orbit_thickness.css solid var(--background-alt);
}
@-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: #pr_earth.css;
--color: var(--background-alt);
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;
}
#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);
border: #orbit_thickness.css solid var(--background-alt);
}
@-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: #pr_mars.css;
--color: var(--background-alt);
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;
}
#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);
border: #orbit_thickness.css solid var(--background-alt);
}

View File

@ -1,47 +0,0 @@
@-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: #pr_venus.css;
--color: var(--background-alt);
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;
}
#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);
border: #orbit_thickness.css solid var(--background-alt);
}