@schalkneethling/miyagi-core 4.0.2

package/frontend/assets/css/main/menu/title.css

@@ -0,0 +1,40 @@
+/** @define Title; */
+
+.Title {
+	display: flex;
+	justify-content: center;
+	margin-inline-start: calc(var(--menu-spacing) + var(--bar-size));
+	margin-inline-end: var(--menu-spacing);
+}
+
+.Title-link {
+	display: inline-block;
+	font-size: 0.875em;
+	font-weight: 500;
+}
+
+.Title-link:focus-visible {
+	outline-offset: var(--outline-offset);
+}
+
+.Title-logo img {
+	max-inline-size: 100%;
+	min-inline-size: 50%;
+	vertical-align: middle;
+}
+
+.Title-logo + .Title-name {
+	display: none;
+}
+
+@media (width <= 40rem) {
+	.Title-logo img {
+		block-size: 2rem;
+	}
+}
+
+@media (width > 40rem) {
+	.Title {
+		margin-block: 1.5rem;
+	}
+}

package/frontend/assets/css/main/menu.css

@@ -0,0 +1,114 @@
+@import url("./menu/config-switchers.css");
+@import url("./menu/goto.css");
+@import url("./menu/nav.css");
+@import url("./menu/search.css");
+@import url("./menu/title.css");
+
+/** @define Menu; */
+
+.Menu {
+	--bar-size: 2rem;
+	--bar-background: var(--color-Menu-background)
+		linear-gradient(
+			to right,
+			var(--color-MenuBar-background) var(--bar-size),
+			transparent var(--bar-size)
+		);
+	--menu-spacing: 0.5rem;
+	--outline: 0.1875rem solid var(--color-Text);
+	--outline-offset: 0.125rem;
+
+	display: flex;
+	background: var(--bar-background);
+	grid-area: nav;
+	font-size: 0.875em;
+	position: relative;
+}
+
+.Menu :where(:focus-visible) {
+	outline: var(--outline);
+}
+
+.Menu-content {
+	display: flex;
+	flex-direction: column;
+}
+
+.Menu-nav {
+	flex: 1;
+	overflow-y: auto;
+}
+
+@media (width <= 40rem) {
+	.Menu {
+		--toggle-size: 4rem;
+
+		align-items: center;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+
+	.Menu-content {
+		flex: 0 0 100%;
+		block-size: calc(100dvb - var(--toggle-size));
+		position: fixed;
+		inset-block-start: var(--toggle-size);
+		inset-inline: 0;
+		background: var(--bar-background);
+	}
+
+	.Menu-search {
+		position: relative;
+	}
+
+	.Menu-toggleMobileMenu {
+		display: block;
+		block-size: var(--toggle-size);
+		padding: 1rem;
+		position: relative;
+		inline-size: var(--toggle-size);
+	}
+
+	.Menu-toggleMobileMenu[aria-expanded="false"] ~ .Menu-content {
+		display: none;
+	}
+
+	.Menu-toggleMobileMenu::after {
+		border: var(--toggle-border);
+		border-top-width: var(--toggle-borderWidth);
+		border-inline-end-width: var(--toggle-borderWidth);
+		content: "";
+		display: block;
+		font-size: 0.75em;
+		block-size: var(--toggle-height);
+		position: absolute;
+		inset-block-start: 50%;
+		inset-inline-start: 50%;
+		transition: var(--toggle-transition);
+		inline-size: var(--toggle-width);
+	}
+
+	.Menu-toggleMobileMenu[aria-expanded="false"]::after {
+		transform: var(--toggle-transition-closed);
+	}
+
+	.Menu-toggleMobileMenu[aria-expanded="true"]::after {
+		transform: var(--toggle-transition-opened);
+	}
+}
+
+@media (width > 40rem) {
+	.Menu {
+		flex-direction: column;
+		block-size: 100vh;
+	}
+
+	.Menu-toggleMobileMenu {
+		display: none;
+	}
+
+	.Menu-content {
+		flex: 1;
+		overflow: hidden;
+	}
+}

package/frontend/assets/css/main/reset.css

@@ -0,0 +1,217 @@
+*,
+*::after,
+*::before {
+	box-sizing: border-box;
+}
+
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+	border: 0;
+	font: inherit;
+	font-size: 100%;
+	margin: 0;
+	padding: 0;
+	vertical-align: baseline;
+}
+
+body {
+	line-height: 1;
+}
+
+ol,
+ul {
+	list-style: none;
+}
+
+blockquote,
+q {
+	quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+	content: "";
+	content: none;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/* custom */
+
+input,
+button,
+textarea {
+	background: none;
+	border: none;
+	color: inherit;
+	font: inherit;
+	margin: 0;
+	padding: 0;
+}
+
+button,
+[type="button"],
+[type="submit"],
+[type="reset"] {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	white-space: normal;
+}
+
+a {
+	color: inherit;
+}
+
+::-webkit-input-placeholder {
+	color: inherit;
+	opacity: 0.618;
+}
+
+::-moz-placeholder {
+	color: inherit;
+	opacity: 0.618;
+}
+
+:-ms-input-placeholder {
+	color: inherit;
+	opacity: 0.618;
+}
+
+::placeholder {
+	color: inherit;
+	opacity: 0.618;
+}
+
+input[type="search"] {
+	-webkit-appearance: textfield;
+}
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+textarea {
+	display: block;
+	resize: vertical;
+}
+
+/* Removes touch input lag from tappable things */
+a,
+button,
+input,
+textarea,
+select,
+label {
+	-ms-touch-action: manipulation;
+	touch-action: manipulation;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}
+
+/* https://mobile.twitter.com/LeaVerou/status/1045768279753666562 */
+:focus:not(:focus-visible) {
+	outline: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::after,
+	*::before {
+		scroll-behavior: auto !important;
+	}
+}

package/frontend/assets/css/main.css

@@ -0,0 +1,71 @@
+@import url("./tokens.css");
+@import url("./shared.css");
+@import url("./main/reset.css");
+@import url("./main/menu.css");
+
+html {
+	height: 100%;
+}
+
+body {
+	background: var(--color-Menu-background);
+	color: var(--color-Text);
+	display: grid;
+	font-family: var(--font-family);
+	font-size: var(--font-size);
+	line-height: var(--line-height);
+	min-height: 100%;
+}
+
+.Content {
+	grid-area: iframe;
+}
+
+.FrameWrapper {
+	height: 100%;
+	width: 100%;
+}
+
+.Frame {
+	display: block;
+	height: 100%;
+	width: 100%;
+}
+
+@media (width <= 40rem) {
+	html {
+		--spacing-x: 1rem;
+		--spacing-y: 1rem;
+	}
+
+	body {
+		grid-template:
+			"nav"
+			"iframe" 1fr;
+	}
+}
+
+@media (width > 40rem) {
+	html {
+		--spacing-x: 2rem;
+		--spacing-y: 4rem;
+	}
+
+	body {
+		grid-template-areas: "nav iframe";
+		grid-template-columns: 16rem 1fr;
+	}
+}
+
+.u-hiddenVisually {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	border: 0;
+	padding: 0;
+	clip-path: inset(100%);
+	/* stylelint-disable-next-line */
+	clip: rect(0 0 0 0);
+	overflow: hidden;
+}

package/frontend/assets/css/shared.css

@@ -0,0 +1,34 @@
+html {
+	--toggle-border: 0 solid var(--color-Icon);
+	--toggle-borderWidth: 0.25em;
+	--toggle-fontSize: 0.5em;
+	--toggle-height: 1em;
+	--toggle-transition: transform 0.15s ease;
+	--toggle-width: 1em;
+
+	color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+	html {
+		color-scheme: dark;
+	}
+}
+
+.theme-light {
+	color-scheme: light;
+}
+
+.theme-dark {
+	color-scheme: dark;
+}
+
+html[dir="ltr"] {
+	--toggle-transition-closed: translate(-75%, -50%) rotate(45deg);
+	--toggle-transition-opened: translate(-50%, -75%) rotate(135deg);
+}
+
+html[dir="rtl"] {
+	--toggle-transition-closed: translate(75%, -50%) rotate(-45deg);
+	--toggle-transition-opened: translate(50%, -75%) rotate(-135deg);
+}

package/frontend/assets/css/tokens.css

@@ -0,0 +1,112 @@
+html {
+	--font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto",
+		"Helvetica", "Arial", sans-serif;
+	--font-size: 1rem;
+	--line-height: 1.5;
+	--divider: 0.0625rem solid var(--color-Divider);
+
+	/* colors */
+	--color-Code-background: light-dark(
+		var(--color-Code-background--light),
+		var(--color-Code-background--dark)
+	);
+	--color-Divider: light-dark(
+		var(--color-Divider--light),
+		var(--color-Divider--dark)
+	);
+	--color-Icon: light-dark(var(--color-Icon--light), var(--color-Icon--dark));
+	--color-Iframe-background: light-dark(
+		var(--color-Iframe-background--light),
+		var(--color-Iframe-background--dark)
+	);
+	--color-Iframe-link: light-dark(
+		var(--color-Iframe-link--light),
+		var(--color-Iframe-link--dark)
+	);
+	--color-Iframe-text-secondary: light-dark(
+		var(--color-Iframe-text-secondary--light),
+		var(--color-Iframe-text-secondary--dark)
+	);
+	--color-Iframe-text-tertiary: light-dark(
+		var(--color-Iframe-text-tertiary--light),
+		var(--color-Iframe-text-tertiary--dark)
+	);
+	--color-Iframe-text: light-dark(
+		var(--color-Iframe-text--light),
+		var(--color-Iframe-text--dark)
+	);
+	--color-Link-active-background: light-dark(
+		var(--color-Link-active-background--light),
+		var(--color-Link-active-background--dark)
+	);
+	--color-Link: light-dark(var(--color-Link--light), var(--color-Link--dark));
+	--color-Menu-background: light-dark(
+		var(--color-Menu-background--light),
+		var(--color-Menu-background--dark)
+	);
+	--color-MenuBar-background: light-dark(
+		var(--color-MenuBar-background--light),
+		var(--color-MenuBar-background--dark)
+	);
+	--color-Negative: light-dark(
+		var(--color-Negative--light),
+		var(--color-Negative--dark)
+	);
+	--color-Outline: light-dark(
+		var(--color-Outline--light),
+		var(--color-Outline--dark)
+	);
+	--color-Positive: light-dark(
+		var(--color-Positive--light),
+		var(--color-Positive--dark)
+	);
+	--color-Text: light-dark(var(--color-Text--light), var(--color-Text--dark));
+	--color-Tooltip-background: light-dark(
+		var(--color-Tooltip-background--light),
+		var(--color-Tooltip-background--dark)
+	);
+	--color-Tooltip-outline: light-dark(
+		var(--color-Tooltip-outline--light),
+		var(--color-Tooltip-outline--dark)
+	);
+
+	/* light */
+	--color-Code-background--light: hsl(0deg 0% 96%);
+	--color-Divider--light: rgb(0 0 0 / 10%);
+	--color-Icon--light: hsl(0deg 0% 56%);
+	--color-Iframe-background--light: #fff;
+	--color-Iframe-link--light: hsl(0deg 0% 12%);
+	--color-Iframe-text--light: hsl(0deg 0% 12%);
+	--color-Iframe-text-secondary--light: hsl(0deg 0% 36%);
+	--color-Iframe-text-tertiary--light: hsl(0deg 0% 56%);
+	--color-Link--light: hsl(0deg 0% 12%);
+	--color-Link-active-background--light: #fff;
+	--color-Menu-background--light: hsl(0deg 0% 96%);
+	--color-MenuBar-background--light: rgb(0 0 0 / 5%);
+	--color-Negative--light: #d9173e;
+	--color-Outline--light: hsl(0deg 0% 86%);
+	--color-Positive--light: hsl(80deg 100% 25%);
+	--color-Text--light: hsl(0deg 0% 36%);
+	--color-Tooltip-background--light: #f5f5f5;
+	--color-Tooltip-outline--light: #ddd;
+
+	/* dark */
+	--color-Code-background--dark: hsl(0deg 0% 16%);
+	--color-Divider--dark: rgb(255 255 255 / 5%);
+	--color-Icon--dark: hsl(0deg 0% 60%);
+	--color-Iframe-background--dark: hsl(0deg 0% 12%);
+	--color-Iframe-link--dark: hsl(0deg 0% 100%);
+	--color-Iframe-text--dark: hsl(0deg 0% 100%);
+	--color-Iframe-text-secondary--dark: hsl(0deg 0% 80%);
+	--color-Iframe-text-tertiary--dark: hsl(0deg 0% 60%);
+	--color-Link--dark: hsl(0deg 0% 100%);
+	--color-Link-active-background--dark: hsl(0deg 0% 12%);
+	--color-Menu-background--dark: hsl(0deg 0% 16%);
+	--color-MenuBar-background--dark: rgb(255 255 255 / 2.5%);
+	--color-Negative--dark: #ff305a;
+	--color-Outline--dark: hsl(0deg 0% 26%);
+	--color-Positive--dark: #8dd203;
+	--color-Text--dark: hsl(0deg 0% 80%);
+	--color-Tooltip-background--dark: #333;
+	--color-Tooltip-outline--dark: #444;
+}