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.

41 lines
1.3 KiB
HTML

<section id="moon-watch-section" class="data-section" data-box-title="{{ multilang.watch }}">
<!-- <div class="watch__date mono" datetime="">
Today is the <span></span>
</div> -->
<div class="watch__phase">
<h2 class="phase-name"
title="The typography of this website varies slightly under the influence of the moon">
</h2>
</div>
<div class="watch__scheme mono">
<svg viewBox="-100 -75 200 150" preserveAspectRatio="xMidYMid meet">
<defs>
<linearGradient id="moon-light-gradient" x1="0" x2="0" y1="0" y2="1">
<stop class="stop-light" offset="0%"/>
<stop class="stop-light" offset="50%"/>
<stop class="stop-dark" offset="50%"/>
<stop class="stop-dark" offset="100%"/>
</linearGradient>
</defs>
<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="-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"/>
</svg>
</div>
</section>