Seth/clock-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show Seth/Gregorian astronomy columns and dual-date lunar event list

Browse Source
This commit is contained in:
Seth
2026-03-09 02:36:56 +00:00
parent 9bd245d870
commit 196cf7557f
2 changed files with 109 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
astro.html
+38 -13
View File
@@ -35,16 +35,28 @@
color: var(--muted);
margin-top: 0.2rem;
}
.astro-head {
display: grid;
grid-template-columns: 130px 1fr 1fr;
gap: 0.35rem 0.9rem;
font-size: 0.72rem;
color: #808892;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 0.35rem;
}
.astro-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.4rem 1rem;
font-size: 0.92rem;
grid-template-columns: 130px 1fr 1fr;
gap: 0.35rem 0.9rem;
font-size: 0.9rem;
color: var(--muted);
margin: 1.2rem 0;
margin: 0.45rem 0 1.1rem;
}
.astro-label {
color: var(--text);
font-weight: 600;
}
.astro-grid p { margin: 0; }
.astro-grid strong { color: var(--text); }
.date-nav {
display: flex;
align-items: center;
@@ -92,10 +104,19 @@
border-bottom: 1px solid #2a2a2a;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
}
.event-list li:last-child { border-bottom: none; }
.event-name { color: var(--text); }
.event-dual {
display: flex;
flex-direction: column;
text-align: right;
gap: 0.04rem;
font-size: 0.77rem;
}
.event-dual span:first-child { color: var(--text); }
</style>
</head>
<body>
@@ -117,19 +138,23 @@
<div class="moon-pct" id="moonPct">—</div>
</div>
<div class="astro-head">
<div></div><div>Seth</div><div>Gregorian</div>
</div>
<div class="section-head">Sun</div>
<div class="astro-grid">
<p><strong>Sunrise:</strong> <span id="sunrise">—</span></p>
<p><strong>Sunset:</strong> <span id="sunset">—</span></p>
<p><strong>Day length:</strong> <span id="dayLen">—</span></p>
<p><strong>Solar noon:</strong> <span id="solarNoon">—</span></p>
<div class="astro-label">Sunrise</div><div id="sunriseSeth">—</div><div id="sunriseGreg">—</div>
<div class="astro-label">Sunset</div><div id="sunsetSeth">—</div><div id="sunsetGreg">—</div>
<div class="astro-label">Day length</div><div id="dayLenSeth">—</div><div id="dayLenGreg">—</div>
<div class="astro-label">Solar noon</div><div id="solarNoonSeth">—</div><div id="solarNoonGreg">—</div>
</div>
<div class="section-head">Moon</div>
<div class="astro-grid">
<p><strong>Age:</strong> <span id="moonAge">—</span></p>
<p><strong>Next new moon:</strong> <span id="nextNew">—</span></p>
<p><strong>Next full moon:</strong> <span id="nextFull">—</span></p>
<div class="astro-label">Age</div><div id="moonAgeSeth">—</div><div id="moonAgeGreg">—</div>
<div class="astro-label">Next new moon</div><div id="nextNewSeth">—</div><div id="nextNewGreg">—</div>
<div class="astro-label">Next full moon</div><div id="nextFullSeth">—</div><div id="nextFullGreg">—</div>
</div>
<ul class="event-list" id="yearEvents" style="margin-top:1rem;"></ul>