update scheme and watch

theme/static/css/main.css

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

theme/static/css/moon-watch.css

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

theme/static/js/moon-watch.js

@@ -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);

theme/templates/partials/moon-watch.html

@@ -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"/>