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
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;
|
|
}
|
|
} |