You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
1.5 KiB
CSS
96 lines
1.5 KiB
CSS
3 years ago
|
|
||
|
|
|
||
|
|
|
||
|
|
:root {
|
||
|
|
--animation-duration: 2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
#moon-watch-section{
|
||
|
|
/* padding-top: calc(var(--lh) * 1.5); */
|
||
|
|
}
|
||
|
|
|
||
|
|
.watch__date{
|
||
|
|
padding-bottom: calc(var(--lh) * 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.watch__phase > h2.phase-name{
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-size: var(--fs-display);
|
||
|
|
line-height: 0.85;
|
||
|
|
letter-spacing: -0.05em;
|
||
|
|
animation: setting_phase var(--animation-duration);
|
||
|
|
|
||
|
|
/* background: radial-gradient(circle closest-side, white, var(--c-dark));
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent; */
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes setting_phase {
|
||
|
|
0% {
|
||
|
|
font-variation-settings: "SERI"0, "slnt"0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
font-variation-settings: "SERI"inherit, "slnt"inherit;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* ------------- old */
|
||
|
|
|
||
|
|
/* MOON WATCH
|
||
|
|
============================================================================ */
|
||
|
|
|
||
|
|
/* svg scheme */
|
||
|
|
.flex-scheme-info-wrapper {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex-scheme-info-wrapper .api-info-wrapper {
|
||
|
|
display: block;
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
#current-phase-scheme {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
#current-phase-scheme .scheme-sun{
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#current-phase-scheme svg {
|
||
|
|
overflow: hidden;
|
||
|
|
width: 200px;
|
||
|
|
height: 150px;
|
||
|
|
}
|
||
|
|
|
||
|
|
svg text {
|
||
|
|
font-family: "Symbola";
|
||
|
|
}
|
||
|
|
|
||
|
|
circle {
|
||
|
|
vector-effect: non-scaling-stroke;
|
||
|
|
}
|
||
|
|
|
||
|
|
circle.svg-moon-trajectory,
|
||
|
|
circle.svg-earth-trajectory {
|
||
|
|
stroke: var(--c-dark);
|
||
|
|
stroke-width: var(--border-width);
|
||
|
|
fill: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
circle.svg-moon,
|
||
|
|
circle.svg-earth,
|
||
|
|
path.svg-sun {
|
||
|
|
fill: var(--c-dark);
|
||
|
|
}
|
||
|
|
|
||
|
|
circle.svg-moon {
|
||
|
|
/* transition: var(--animation-duration); */
|
||
|
|
}
|