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.

150 lines
3.0 KiB
CSS

:root {
--animation-duration: 2s;
}
#moon-watch-section{
/* padding-bottom: calc(var(--lh) * 1); */
}
.watch__date{
padding-bottom: calc(var(--lh) * 0.5);
}
.watch__phase{
/* padding-left: calc(var(--lh) * 1); */
}
.watch__phase > h2.phase-name,
.all-phases > h2{
text-transform: uppercase;
font-size: var(--fs-display);
line-height: 0.85;
/* with the accent */
line-height: 1.05;
letter-spacing: -0.04em;
animation: setting_phase var(--animation-duration);
/* Note: The overflow-wrap property acts in the same way as the non-standard property word-wrap.
The word-wrap property is now treated by browsers as an alias of the standard property. */
/* Note: In contrast to word-break, overflow-wrap will only create a break
if an entire word cannot be placed on its own line without overflowing. */
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
/* background: radial-gradient(circle closest-side, white, var(--c-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
min-height: 1.6em;
text-align: center;
/* border-left: var(--border);
padding-left: var(--lh);
border-style: dotted;
padding-top: calc(var(--lh) * 0.5); */
margin-bottom: calc(var(--lh) * 0.5);
}
body.projects .watch__phase > h2.phase-name{
border-left: none;
margin-bottom: calc(var(--lh) * 1);
}
@keyframes setting_phase {
0% {
font-variation-settings: "SERI"0, "slnt"0;
}
100% {
font-variation-settings: "SERI"inherit, "slnt"inherit;
}
}
/* SVG SCHEME
============================================================================ */
.watch__scheme{
display: flex;
justify-content: center;
position: relative;
}
.watch__scheme svg{
height: 200px;
width: 100%;
max-width: 500px;
}
.watch__scheme::before{
content: "new";
position: absolute;
left: calc(50% + 1em);
top: 0;
}
.watch__scheme::after{
content: "full";
position: absolute;
left: calc(50% + 1em);
bottom: 0;
}
.watch__scheme svg circle{
vector-effect: non-scaling-stroke;
}
.watch__scheme svg line{
vector-effect: non-scaling-stroke;
stroke: var(--clr-text);
}
circle.svg-moon-trajectory,
circle.svg-earth-trajectory {
stroke: var(--clr-soft-text);
stroke-width: var(--border-width);
stroke-dasharray: 2;
fill: none;
}
circle.svg-earth{
fill: var(--clr-text);
}
.stop-light{
stop-color: white;
}
.stop-dark{
stop-color: var(--clr-text);
}
circle.svg-moon {
--moon-rotation: 0deg;
/* stroke: var(--clr-text);
stroke-width: var(--border-width); */
/* fill: url(#moon-light-gradient); */
fill: white;
transform:
rotate(calc(-1 * var(--moon-rotation)))
translateY(-50px)
rotate(var(--moon-rotation))
;
transition: transform var(--animation-duration);
}
/* RESPONSIVE
============================================================================ */
/* 1 column break */
@media only screen and (max-width: 1050px) {
.watch__phase > h2.phase-name{
padding-left: 0;
border: none;
text-align: center;
}
}