refactoring to move split up styles, move them to docs2website extras

docs/_assets/breadcrumb.css

@@ -0,0 +1,23 @@
+
+nav[aria-label="breadcrumbs"] {
+	/*  */
+}
+
+nav[aria-label="breadcrumbs"] ol {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+}
+
+nav[aria-label="breadcrumbs"] li {
+	padding: 0.25rem;
+}
+
+nav[aria-label="breadcrumbs"] li:not(:first-of-type) ::before {
+	display: inline-block;
+	content: '/';
+	padding-inline-end: 0.25rem;
+	color: var(--theme-text-body);
+}
+

docs/_assets/figures.css

@@ -0,0 +1,160 @@
+
+figure {
+	margin-block: 2rem;
+    margin-inline: 1rem;
+    padding-bottom: 1.5rem;
+}
+
+figure > :not(figcaption) {
+	margin-block: 0rem;
+}
+
+figure pre {
+	margin-inline: 0;
+}
+
+figure[data-lang] {
+	margin-block: 2rem;
+}
+
+figure[data-lang] svg {
+	display: block;
+	margin-inline: auto;
+}
+
+figure[data-size='small'] svg {
+	max-width: 40rem;
+	max-height: min(20rem, 50vw);
+}
+
+figure[data-size='medium'] svg {
+	max-width: 60rem;
+	max-height: min(40rem, 50vw);
+	margin-block-start: 4rem;
+}
+
+figure[data-size='large'] svg {
+	max-height: min(60rem, 80vw);
+	margin-block-start: 6rem;
+}
+
+/* figure[data-lang].big {
+	background: var(--theme-bg-main);
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 1000;
+	display: flex;
+	border: 0.25rem var(--theme-line) solid;
+	margin: 3rem;
+}
+
+figure[data-lang].big svg {
+	max-width: none !important;
+	max-height: none !important;
+} */
+
+figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text {
+	fill: var(--theme-text-body);
+}
+
+figure:is([data-lang='pikchr'], [data-lang='nomnoml'], [data-lang='bytefield']) svg text:not([font-family~='Courier']) {
+	font-family: var(--font-body);
+}
+
+[data-lang='bash:samp'] samp {
+	display: block;
+	margin-block-start: 0.5rem;
+	padding-block-start: 0.5rem;
+	border-block-start: 0.1rem solid var(--theme-line);
+}
+
+/* === KaTeX === */
+
+.katex-display {
+	color: var(--theme-text-body);
+}
+
+.katex-display .katex {
+	font-size: 1.4rem;
+}
+
+/* using "body" here to add specificity, to override styles from katex.min.css */
+body .katex-display {
+	margin: 2rem;
+}
+
+body figure.align-left .katex-display > .katex {
+	text-align: left;
+}
+
+body figure.align-right .katex-display > .katex {
+	text-align: right;
+}
+
+:not(.katex-display) > .katex {
+	font-size: inherit;
+	margin-inline: 0.5rem;
+}
+
+.katex span[style~='color:transparent;'] {
+	user-select: none;
+}
+
+/* === Pikchr */
+
+/* boxes */
+.rendered-pikchr svg path[style*='fill:none;'] {
+	fill: var(--theme-bg-light) !important;
+	transition: fill linear .5s;
+}
+
+/* lines and boxes */
+.rendered-pikchr svg path[style*='stroke:rgb(0,0,0);'] {
+	stroke: var(--theme-text-body) !important;
+}
+
+/* circles */
+.rendered-pikchr svg circle[style*='stroke:rgb(0,0,0);'] {
+	stroke: var(--theme-text-body) !important;
+}
+
+/* arrow heads */
+.rendered-pikchr svg polygon[style='fill:rgb(0,0,0)'] {
+	fill: var(--theme-text-body) !important;
+	transition: fill linear .5s;
+}
+
+/* === Bytefield === */
+
+figure[data-lang='clojure:bytefield'] svg line[stroke-width='1'] {
+	stroke-width: 2;
+}
+
+figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-size='11'] {
+	font-size: 14px;
+}
+
+figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-size='18'] {
+	font-size: 16px;
+}
+
+figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-family~='Courier'] {
+	font-family: var(--font-monospace);
+}
+
+figure[data-lang='clojure:bytefield'] svg :is(text, tspan)[font-family~='Times'] {
+	font-family: var(--font-body);
+}
+
+figure[data-lang='clojure:bytefield'] svg line[stroke-dasharray='1,1'] {
+	stroke-dasharray: 4px, 3px;
+}
+
+figure[data-lang='clojure:bytefield'] svg line[stroke-dasharray='1,3'] {
+	stroke-dasharray: 2px, 3px;
+}
+
+

docs/_assets/forms-inputs.css

@@ -0,0 +1,4 @@
+
+{{> .extras/forms-inputs/general.css }}
+
+{{> .extras/forms-inputs/spacious.css }}

docs/_assets/structure.css

@@ -0,0 +1,212 @@
+
+* {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	box-sizing: border-box;
+}
+
+html, body {
+	min-height: 100vh;
+}
+
+body {
+	position: relative;
+	padding: 1rem;
+	padding-block-end: 5rem;
+	z-index: 1;
+	background: var(--theme-bg-main);
+}
+
+@media screen and (min-width: 60rem) {
+	body {
+		padding-inline: 2rem;
+	}
+}
+
+@media print {
+	body {
+		padding-block: 0.5rem;
+	}
+}
+
+body > nav,
+body > main {
+	max-width: 100rem;
+	margin-inline: auto;
+}
+
+
+
+
+/* ===== Footer ===== */
+
+body > footer {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 2.5rem;
+	background: var(--theme-bg-light);
+	border-block-start: 0.1rem solid var(--theme-line);
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: center;
+	overflow: hidden;
+}
+
+body > footer :is(.left, .right) {
+	min-width: 22rem;
+}
+
+body > footer :is(.left, .center, .right) {
+	flex: 1 1 calc(100% / 3);
+}
+
+body > footer .left {
+	text-align: left;
+	padding-inline-start: 1.5rem;
+}
+
+body > footer .center {
+	text-align: center;
+}
+
+body > footer .right {
+	text-align: right;
+	padding-inline-end: 1.5rem;
+}
+
+body > footer ul {
+	padding: 0;
+}
+
+body > footer p {
+	font-size: 0.8rem;
+	margin: 0;
+	padding-block: 0.5rem;
+}
+
+
+@media (max-width: 1199px) {
+	body > footer {
+		margin-block-start: 8rem;
+		padding-block-end: 2rem;
+		background: transparent;
+		border: 0;
+		position: static;
+		flex-direction: column;
+		height: auto;
+	}
+
+	body > footer > div,
+	body > footer :is(p, .left, .center, .right) {
+		font-size: 0.8rem;
+		text-align: center;
+		padding-inline: 0;
+	}
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+color-scheme-toggle-button,
+outline-button {
+	position: fixed;
+	top: 0.5rem;
+	right: 0.5rem;
+	display: block;
+	z-index: 2;
+}
+
+outline-button {
+	top: 0.5rem;
+	right: 3rem;
+}
+
+
+
+
+
+
+
+
+
+#outline-panel {
+	position: fixed;
+	top: 4rem;
+	right: 2rem;
+	width: min(30rem, 80vw);
+	max-height: 80vh;
+	overflow-y: auto;
+	background: var(--theme-bg-light);
+	border: 0.2rem solid var(--theme-line);
+	display: none;
+	z-index: 10;
+}
+
+[data-show-outline] #outline-panel {
+	display: block;
+}
+
+#outline-panel h2 {
+	margin-block: 1rem;
+	margin-inline: 1rem;
+	padding: 0;
+	font-size: 1.4rem;
+}
+
+#outline-panel ol {
+	list-style: none;
+	padding: 0;
+}
+
+#outline-panel li[data-depth='h1'] {
+	font-size: 1.2rem;
+	font-weight: 700;
+	margin-inline-start: 1rem;
+}
+
+#outline-panel li[data-depth='h2'] {
+	font-size: 1.1rem;
+	font-weight: 600;
+	margin-inline-start: 2rem;
+}
+
+#outline-panel li[data-depth='h3'] {
+	margin-inline-start: 3rem;
+}
+
+#outline-panel li[data-depth='h4'] {
+	font-size: 0.9rem;
+	margin-inline-start: 4rem;
+}
+
+#outline-panel li[data-depth='h5'] {
+	font-size: 0.9rem;
+	margin-inline-start: 5rem;
+}
+
+#outline-panel li[data-depth='h6'] {
+	font-size: 0.9rem;
+	margin-inline-start: 6rem;
+}
+
+@media print {
+	color-scheme-toggle-button,
+	outline-button,
+	#outline-panel {
+		display: hidden !important;
+	}
+}
+

docs/_assets/theme-animation.css

@@ -0,0 +1 @@
+{{> .extras/theme-animation.css }}

docs/_assets/typography.css

@@ -0,0 +1,29 @@
+
+:root {
+	--font-heading: 'Open Sans', sans-serif;
+	--font-body: 'Open Sans', sans-serif;
+	--font-monospace: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+}
+
+{{> .extras/typography/spacious.css }}
+
+{{> .extras/typography/general.css }}
+
+
+.markdown-example-output {
+	padding: 1rem;
+	margin-block-start: 0;
+	margin-block-end: 1.5rem;
+	margin-inline: 1rem;
+	border-radius: 1rem;
+	background: var(--theme-bg-light);
+	transition: background linear .5s;
+}
+
+.markdown-example-output > :first-child {
+	margin-block-start: 0;
+}
+
+.markdown-example-output > :last-child {
+	margin-block-end: 0;
+}

docs/color-themes/schema/v1.yaml

@@ -6,7 +6,7 @@ breadcrumb:
 - '[color-themes](color-themes/index.html)'
 ---
 $schema: http://json-schema.org/draft-07/schema
-$id: https://gitea.jbrumond.me/doc-utils/color-themes/v1.json
+$id: https://doc-utils.jbrumond.me/color-themes/schema/v1.json
 type: object
 title: Color Theme
 required:

layouts/main.html

@@ -6,8 +6,13 @@
 	<link rel="stylesheet" href="/_vendor/open-sans/open-sans-v34.css">
 	<link rel="stylesheet" href="/_vendor/katex/katex.min.css">
 	<link rel="stylesheet" href="/_assets/colors.css">
-	<link rel="stylesheet" href="/_assets/base.css">
+	<link rel="stylesheet" href="/_assets/theme-animation.css">
+	<link rel="stylesheet" href="/_assets/typography.css">
+	<link rel="stylesheet" href="/_assets/structure.css">
+	<link rel="stylesheet" href="/_assets/forms-inputs.css">
+	<link rel="stylesheet" href="/_assets/figures.css">
 	<link rel="stylesheet" href="/_assets/prism.css">
+	<link rel="stylesheet" href="/_assets/breadcrumb.css">
 </head>
 <body>
 
@@ -18,7 +23,6 @@
 <outline-button content-root="#root"></outline-button>
 {{/ page.outline_button }}
 
-<div id="root">
 {{> breadcrumb.html }}
 
 <main>
@@ -29,7 +33,6 @@
 	<p class="left">Built with docs2website at <time datetime="{{ build_time.iso }}">{{ build_time.rfc2822 }}</time></p>
 	<p class="right">Copyright 2023 James Brumond</p>
 </footer>
-</div>
 
 </body>
 </html>

layouts/preview-color-themes.html

@@ -6,8 +6,13 @@
 	<link rel="stylesheet" href="/_vendor/open-sans/open-sans-v34.css">
 	<link rel="stylesheet" href="/_vendor/katex/katex.min.css">
 	<link rel="stylesheet" href="/_assets/colors.css">
-	<link rel="stylesheet" href="/_assets/base.css">
+	<link rel="stylesheet" href="/_assets/theme-animation.css">
+	<link rel="stylesheet" href="/_assets/typography.css">
+	<link rel="stylesheet" href="/_assets/structure.css">
+	<link rel="stylesheet" href="/_assets/forms-inputs.css">
+	<link rel="stylesheet" href="/_assets/figures.css">
 	<link rel="stylesheet" href="/_assets/prism.css">
+	<link rel="stylesheet" href="/_assets/breadcrumb.css">
 	<link rel="stylesheet" href="/_assets/color-theme-preview.css">
 </head>
 <body>