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-soft: hsl(54, 32%, 78%);
--clr-back: hsl(66, 18%, 82%); */ --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-back: hsl(82, 16%, 84%);
/* --clr-soft: hsl(60, 32%, 78%); /* --clr-soft: hsl(60, 32%, 78%);
@ -164,7 +164,7 @@ section.data-section{
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
border-top: var(--border); 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{ section.data-section::after{
font-family: 'Inconsolata', monospace; font-family: 'Inconsolata', monospace;

@ -3,7 +3,7 @@
} }
#moon-watch-section{ #moon-watch-section{
padding-bottom: calc(var(--lh) * 1); /* padding-bottom: calc(var(--lh) * 1); */
} }
.watch__date{ .watch__date{
@ -34,15 +34,19 @@
overflow-wrap: break-word; overflow-wrap: break-word;
hyphens: auto; hyphens: auto;
/* text-align: center; */
/* background: radial-gradient(circle closest-side, white, var(--c-dark)); /* background: radial-gradient(circle closest-side, white, var(--c-dark));
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; */ -webkit-text-fill-color: transparent; */
min-height: 1.6em; min-height: 1.6em;
border-left: var(--border);
text-align: center;
/* border-left: var(--border);
padding-left: var(--lh); padding-left: var(--lh);
border-style: dotted;
padding-top: calc(var(--lh) * 0.5); */
margin-bottom: 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%; width: 100%;
max-width: 500px; max-width: 500px;
} }
.watch__scheme::after{ .watch__scheme::before{
content: "↓ sunlights"; content: "new";
position: absolute; position: absolute;
left: calc(50% + 1em); left: calc(50% + 1em);
top: 0; top: 0;
} }
.watch__scheme::after{
content: "full";
position: absolute;
left: calc(50% + 1em);
bottom: 0;
}
.watch__scheme svg circle{ .watch__scheme svg circle{
vector-effect: non-scaling-stroke; vector-effect: non-scaling-stroke;
@ -95,7 +105,7 @@ circle.svg-moon-trajectory,
circle.svg-earth-trajectory { circle.svg-earth-trajectory {
stroke: var(--clr-soft-text); stroke: var(--clr-soft-text);
stroke-width: var(--border-width); stroke-width: var(--border-width);
stroke-dasharray: 4; stroke-dasharray: 2;
fill: none; fill: none;
} }

@ -15,7 +15,6 @@ function updateCurrentMoonWatch(date){
let phase_name = moon["name_"+lang]; let phase_name = moon["name_"+lang];
phase_name = phase_name.split(" ").join(" <br>"); phase_name = phase_name.split(" ").join(" <br>");
// sunset // sunset
// let distance = moon["distance"]; // let distance = moon["distance"];
// let sun_calc = SunCalc.getTimes(date, lat, long); // 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 }}"> <section id="moon-watch-section" class="data-section" data-box-title="{{ multilang.watch }}">
<!-- <div class="watch__date mono" datetime=""> <!-- <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> -->
<div class="watch__phase"> <div class="watch__phase">
@ -26,10 +26,10 @@
<circle class="svg-moon-trajectory" cx="0" cy="0" r="50"/> <circle class="svg-moon-trajectory" cx="0" cy="0" r="50"/>
<circle class="svg-earth-trajectory" cx="0" cy="-500" r="500"/> <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="-25"></line>
<line x1="0" y1="75" x2="0" y2="40"></line> <line x1="0" y1="75" x2="0" y2="25"></line>
<line x1="-75" y1="0" x2="-40" y2="0"></line> <line x1="-75" y1="0" x2="-25" y2="0"></line>
<line x1="75" y1="0" x2="40" 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-moon" cx="0" cy="0" r="5"/>
<circle class="svg-earth" cx="0" cy="0" r="5"/> <circle class="svg-earth" cx="0" cy="0" r="5"/>

Loading…
Cancel
Save