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
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 class="date"></span> and the moon is in:
|
|
</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="-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>
|
|
|
|
<circle class="svg-moon" cx="0" cy="0" r="5"/>
|
|
<circle class="svg-earth" cx="0" cy="0" r="5"/>
|
|
|
|
</svg>
|
|
</div>
|
|
|
|
</section>
|