source ⟩ hypertext ⟩ public ⟩ orrery ⟩ en.pug

//- meta
	slug: "orrery"
	lang: en
	title: Orrery
	pageCreated: "1977-02-18"

extends ../../views/layout.pug

append presets
	- hasComments = false
	- hasSidenotes = false

append head
	script(type="module", src="/orrery/orrery.js")
	style.
		:root {
			--background: white;
			--text: black;
			--accent: black;
		}

		.sr-only,
		#orr-date-input {
			position: absolute;
			inline-size: 1px;
			block-size: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			border: 0;
			white-space: nowrap;
		}

		.sr-only:not(#orr-date-input) {
			position: absolute;
		}

block body
	nav#toolbar(aria-label="Orrery controls and settings")
		div#toolbar-inner

			//- Date display (mobile layer 1)
			section.strip.datestrip
				div.datestrip-centre-container
					div.datestrip-central
						input#datestrip-central-year(type="text" inputmode="numeric" pattern="-?[0-9]*" size="4" value="1969" aria-label="Year")
						|  
						input#datestrip-central-month(type="text" size="3" maxlength="3" value="JUL" aria-label="Month")
						|  
						input#datestrip-central-day(type="text" inputmode="numeric" pattern="[0-9]*" size="2" maxlength="2" value="21" aria-label="Day")
						|  
						input#datestrip-central-hour(type="text" inputmode="numeric" pattern="[0-9]*" size="2" maxlength="2" value="02" aria-label="Hour")
						| :
						input#datestrip-central-minute(type="text" inputmode="numeric" pattern="[0-9]*" size="2" maxlength="2" value="56" aria-label="Minute")
				div.datestrip-centre-label Universal Coördinated Time


			//- Panel toggles (mobile layer 3)
			section.oor-strip.oor-strip--panels
				div.oor-button-group(role="group" aria-label="Open panels")
					button#oor-settings-open(
						type="button"
						aria-expanded="false"
						aria-controls="orrery-settings-panel"
					)
						svg(viewBox="0 0 24 24" aria-hidden="true")
							path(
								d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z " +
								   "M12 1v4M1 12h4m14 0h4M12 19v4m-7.8-2.2l2.8 2.8m8.5-8.5l2.8 2.8"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
							)
						span Settings
					button#oor-layers-open(
						type="button"
						aria-expanded="false"
						aria-controls="orrery-layers-panel"
					)
						svg(viewBox="0 0 24 24" aria-hidden="true")
							path(
								d="M12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm9-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
								fill="currentColor"
							)
						span Objects
					button#oor-mission-open(
						type="button"
						aria-expanded="false"
						aria-controls="orrery-mission-panel"
					)
						svg(viewBox="0 0 24 24" aria-hidden="true")
							path(
								d="M12 2s3 5 3 11v3H9v-3c0-6 3-11 3-11ZM12 17v4M7 21h10"
								fill="none"
								stroke="currentColor"
								stroke-width="2"
							)
						span Mission