update scheme and watch

main
Dorian 3 years ago
parent a821bb1b57
commit 68c14af46c

@ -39,7 +39,7 @@ body{
/* --clr-soft: hsl(54, 32%, 78%);
--clr-back: hsl(66, 18%, 82%); */
--clr-soft: hsl(54, 32%, 82%);
--clr-soft: hsl(54, 40%, 82%);
--clr-back: hsl(82, 16%, 84%);
/* --clr-soft: hsl(60, 32%, 78%);
@ -164,7 +164,7 @@ section.data-section{
position: relative;
box-sizing: border-box;
border-top: var(--border);
padding: calc(var(--lh) * 2) 0 calc(var(--lh) * 3);
padding: calc(var(--lh) * 2) 0 calc(var(--lh) * 2);
}
section.data-section::after{
font-family: 'Inconsolata', monospace;

@ -3,7 +3,7 @@
}
#moon-watch-section{
padding-bottom: calc(var(--lh) * 1);
/* padding-bottom: calc(var(--lh) * 1); */
}
.watch__date{
@ -33,16 +33,20 @@
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
/* text-align: center; */
/* background: radial-gradient(circle closest-side, white, var(--c-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
min-height: 1.6em;
border-left: var(--border);
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);
}
@ -76,12 +80,18 @@ body.projects .watch__phase > h2.phase-name{
width: 100%;
max-width: 500px;
}
.watch__scheme::after{
content: "↓ sunlights";
.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;
@ -95,7 +105,7 @@ circle.svg-moon-trajectory,
circle.svg-earth-trajectory {
stroke: var(--clr-soft-text);
stroke-width: var(--border-width);
stroke-dasharray: 4;
stroke-dasharray: 2;
fill: none;
}

@ -15,7 +15,6 @@ function updateCurrentMoonWatch(date){
let phase_name = moon["name_"+lang];
phase_name = phase_name.split(" ").join(" <br>");
// sunset
// let distance = moon["distance"];
// let sun_calc = SunCalc.getTimes(date, lat, long);

@ -2,7 +2,7 @@
<section id="moon-watch-section" class="data-section" data-box-title="{{ multilang.watch }}">
<!-- <div class="watch__date mono" datetime="">
Today is the <span class="date"></span> and the moon is in:
Today is the <span></span>
</div> -->
<div class="watch__phase">
@ -26,10 +26,10 @@
<circle class="svg-moon-trajectory" cx="0" cy="0" r="50"/>
<circle class="svg-earth-trajectory" cx="0" cy="-500" r="500"/>
<line x1="0" y1="-75" x2="0" y2="-40"></line>
<line x1="0" y1="75" x2="0" y2="40"></line>
<line x1="-75" y1="0" x2="-40" y2="0"></line>
<line x1="75" y1="0" x2="40" y2="0"></line>
<line x1="0" y1="-75" x2="0" y2="-25"></line>
<line x1="0" y1="75" x2="0" y2="25"></line>
<line x1="-75" y1="0" x2="-25" y2="0"></line>
<line x1="75" y1="0" x2="25" y2="0"></line>
<circle class="svg-moon" cx="0" cy="0" r="5"/>
<circle class="svg-earth" cx="0" cy="0" r="5"/>

Loading…
Cancel
Save