@schalkneethling/miyagi-core 4.4.2 → 4.4.3

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

@@ -1,7 +1,7 @@
 *,
 *::after,
 *::before {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 /* http://meyerweb.com/eric/tools/css/reset/
@@ -90,39 +90,39 @@ time,
 mark,
 audio,
 video {
-	border: 0;
-	font: inherit;
-	font-size: 100%;
-	margin: 0;
-	padding: 0;
-	vertical-align: baseline;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
 }
 
 body {
-	line-height: 1;
+  line-height: 1;
 }
 
 ol,
 ul {
-	list-style: none;
+  list-style: none;
 }
 
 blockquote,
 q {
-	quotes: none;
+  quotes: none;
 }
 
 blockquote::before,
 blockquote::after,
 q::before,
 q::after {
-	content: "";
-	content: none;
+  content: "";
+  content: none;
 }
 
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 
 /* custom */
@@ -130,60 +130,60 @@ table {
 input,
 button,
 textarea {
-	background: none;
-	border: none;
-	color: inherit;
-	font: inherit;
-	margin: 0;
-	padding: 0;
+  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;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  white-space: normal;
 }
 
 a {
-	color: inherit;
+  color: inherit;
 }
 
 ::-webkit-input-placeholder {
-	color: inherit;
-	opacity: 0.618;
+  color: inherit;
+  opacity: 0.618;
 }
 
 ::-moz-placeholder {
-	color: inherit;
-	opacity: 0.618;
+  color: inherit;
+  opacity: 0.618;
 }
 
 :-ms-input-placeholder {
-	color: inherit;
-	opacity: 0.618;
+  color: inherit;
+  opacity: 0.618;
 }
 
 ::placeholder {
-	color: inherit;
-	opacity: 0.618;
+  color: inherit;
+  opacity: 0.618;
 }
 
 input[type="search"] {
-	-webkit-appearance: textfield;
+  -webkit-appearance: textfield;
 }
 
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
-	-webkit-appearance: none;
+  -webkit-appearance: none;
 }
 
 textarea {
-	display: block;
-	resize: vertical;
+  display: block;
+  resize: vertical;
 }
 
 /* Removes touch input lag from tappable things */
@@ -193,25 +193,25 @@ input,
 textarea,
 select,
 label {
-	-ms-touch-action: manipulation;
-	touch-action: manipulation;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
 }
 
 button::-moz-focus-inner,
 input::-moz-focus-inner {
-	border: 0;
-	padding: 0;
+  border: 0;
+  padding: 0;
 }
 
 /* https://mobile.twitter.com/LeaVerou/status/1045768279753666562 */
 :focus:not(:focus-visible) {
-	outline: none;
+  outline: none;
 }
 
 @media (prefers-reduced-motion: reduce) {
-	*,
-	*::after,
-	*::before {
-		scroll-behavior: auto !important;
-	}
+  *,
+  *::after,
+  *::before {
+    scroll-behavior: auto !important;
+  }
 }

package/frontend/assets/css/main.css

@@ -4,68 +4,68 @@
 @import url("./main/menu.css");
 
 html {
-	height: 100%;
+  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%;
+  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;
+  grid-area: iframe;
 }
 
 .FrameWrapper {
-	height: 100%;
-	width: 100%;
+  height: 100%;
+  width: 100%;
 }
 
 .Frame {
-	display: block;
-	height: 100%;
-	width: 100%;
+  display: block;
+  height: 100%;
+  width: 100%;
 }
 
 @media (width <= 40rem) {
-	html {
-		--spacing-x: 1rem;
-		--spacing-y: 1rem;
-	}
+  html {
+    --spacing-x: 1rem;
+    --spacing-y: 1rem;
+  }
 
-	body {
-		grid-template:
-			"nav"
-			"iframe" 1fr;
-	}
+  body {
+    grid-template:
+      "nav"
+      "iframe" 1fr;
+  }
 }
 
 @media (width > 40rem) {
-	html {
-		--spacing-x: 2rem;
-		--spacing-y: 4rem;
-	}
+  html {
+    --spacing-x: 2rem;
+    --spacing-y: 4rem;
+  }
 
-	body {
-		grid-template-areas: "nav iframe";
-		grid-template-columns: 16rem 1fr;
-	}
+  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;
+  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

@@ -1,34 +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;
+  --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;
+  color-scheme: light;
 }
 
 @media (prefers-color-scheme: dark) {
-	html {
-		color-scheme: dark;
-	}
+  html {
+    color-scheme: dark;
+  }
 }
 
 .theme-light {
-	color-scheme: light;
+  color-scheme: light;
 }
 
 .theme-dark {
-	color-scheme: dark;
+  color-scheme: dark;
 }
 
 html[dir="ltr"] {
-	--toggle-transition-closed: translate(-75%, -50%) rotate(45deg);
-	--toggle-transition-opened: translate(-50%, -75%) rotate(135deg);
+  --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);
+  --toggle-transition-closed: translate(75%, -50%) rotate(-45deg);
+  --toggle-transition-opened: translate(50%, -75%) rotate(-135deg);
 }

package/frontend/assets/css/tokens.css

@@ -1,112 +1,113 @@
 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);
+  --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)
-	);
+  /* 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;
+  /* 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;
+  /* 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;
 }