0.1.3

extras/forms-inputs/general.css

@@ -0,0 +1,174 @@
+
+label {
+	display: block;
+	color: var(--theme-text-body);
+	font-family: var(--font-body);
+	font-size: 1rem;
+	margin-block-start: 1rem;
+}
+
+label:not(:first-of-type) {
+	margin-block-start: 2rem;
+}
+
+label.radio {
+	display: flex;
+	margin-block: 1rem;
+	justify-content: flex-start;
+}
+
+input,
+textarea {
+	display: block;
+	margin-block-start: 0.35rem;
+	margin-block-end: 1rem;
+	border: 0.125rem var(--theme-border-input) solid;
+	border-radius: 0.25rem;
+	color: var(--theme-text-body);
+	background-color: var(--theme-bg-input);
+	padding: 0.5rem;
+	font-family: var(--font-body);
+	font-size: 1rem;
+	width: 20rem;
+}
+
+input[disabled],
+textarea[disabled] {
+	opacity: 0.4;
+	cursor: default;
+	pointer-events: none;
+}
+
+input[type='text']:invalid,
+input[type='password']:invalid,
+textarea:invalid {
+	border-color: var(--theme-border-input-invalid);
+}
+
+input[type='text'][readonly] {
+	color: var(--theme-text-light);
+	border-color: var(--theme-line);
+}
+
+input[type='checkbox'] {
+	width: 1rem;
+	height: 1rem;
+	padding: 0;
+}
+
+input[type='checkbox'] + label {
+	margin-inline-start: 0.5rem;
+	margin-inline-end: 2rem;
+}
+
+input[type='radio'] {
+	flex: 0 0 2rem;
+	margin: 0.2rem;
+}
+
+textarea {
+	line-height: 1.7rem;
+	font-family: var(--font-monospace);
+}
+
+::-webkit-input-placeholder {
+	color: var(--theme-text-light);
+}
+
+button {
+	padding: 0.5rem 1.5rem;
+	border-radius: 0.5rem;
+	font-size: 1rem;
+	margin-block-start: 1rem;
+	margin-inline-end: 1rem;
+	cursor: pointer;
+	user-select: none;
+	appearance: none;
+	color: var(--theme-text-button-primary);
+	background: var(--theme-bg-button-primary);
+	text-decoration: none;
+	font-size: 1rem;
+	font-family: var(--font-body);
+	font-weight: 700;
+	line-height: 2rem;
+	display: flex;
+	align-items: center;
+}
+
+button.icon-only {
+	padding: 0.5rem;
+}
+
+button svg.icon {
+	--icon-size: 2rem;
+}
+
+button:not(.icon-only) svg.icon:first-child {
+	margin-inline-end: 0.5rem;
+}
+
+button:not(.icon-only) svg.icon:last-child {
+	margin-inline-start: 0.5rem;
+}
+
+button[data-style='secondary'] {
+	color: var(--theme-text-button-secondary);
+	background: var(--theme-bg-button-secondary);
+}
+
+button:not([disabled]):hover {
+	background: var(--theme-bg-button-primary-hover);
+}
+
+button[data-style='secondary']:not([disabled]):hover {
+	background: var(--theme-bg-button-secondary-hover);
+}
+
+button[disabled] {
+	opacity: 0.4;
+	cursor: default;
+	pointer-events: none;
+}
+
+select {
+	display: block;
+	margin-block-start: 0.35rem;
+	margin-block-end: 1rem;
+	border: 0.125rem var(--theme-border-input) solid;
+	border-radius: 0.25rem;
+	color: var(--theme-text-body);
+	background-color: var(--theme-bg-input);
+	padding: 0.5rem;
+	font-family: var(--font-body);
+	font-size: 1rem;
+	width: 20rem;
+	cursor: pointer;
+}
+
+select[disabled] {
+	opacity: 0.4;
+	cursor: default;
+	pointer-events: none;
+}
+
+select option {
+	color: var(--theme-text-body);
+	background-color: var(--theme-bg-input);
+	padding: 0.5rem;
+	font-family: var(--font-body);
+	font-size: 1rem;
+}
+
+:is(table, .table) :is(input, select) {
+	margin-block: 0;
+}
+
+p.error-box {
+	margin: 0;
+	padding: 0.5rem;
+	border-radius: 0.25rem;
+	color: var(--theme-text-error-box);
+	background: var(--theme-bg-error-box);
+	border: 0.1rem solid var(--theme-border-error-box);
+}
+

extras/theme-animation.css

@@ -0,0 +1,112 @@
+
+/* todo: is there a better way to handle defining these animations? despite efforts,
+   this implementation still has some degree of transition stacking / delays in nested
+   svg contexts in chrome */
+
+/* BG Color Only */
+body[data-color-transition-enabled],
+body[data-color-transition-enabled] :is(
+	[data-bg-transition]:not([data-color-transition]):not([data-border-transition]),
+	button
+) {
+	transition: background linear .5s;
+}
+
+/* Border Color Only */
+body[data-color-transition-enabled] :is(
+	[data-border-transition]:not([data-bg-transition]):not([data-color-transition])
+) {
+	transition: border-color linear .5s;
+}
+
+/* Color Only */
+body[data-color-transition-enabled] :is(
+	[data-color-transition]:not([data-bg-transition]):not([data-border-transition]),
+	p,
+	a:not(h1 a),
+	span:not(p span),
+	time:not(p time),
+	li:not([role='doc-footnote']), dt, dd,
+	h1, h2, h3, h4, h5, h6,
+	td, th
+) {
+	transition: color linear .5s;
+}
+
+/* BG and Color */
+body[data-color-transition-enabled] :is(
+	[data-bg-transition][data-color-transition]:not([data-border-transition]),
+	pre,
+	code:not(pre code),
+	samp:not(pre samp),
+	mark,
+	[role='doc-footnote']
+) {
+	transition:
+		color linear .5s,
+		background linear .5s;
+}
+
+/* BG and Border */
+body[data-color-transition-enabled] :is(
+	[data-bg-transition][data-border-transition]:not([data-color-transition]),
+	#root > footer,
+	p.error-box,
+	.popup form,
+	#outline
+) {
+	transition:
+		background linear .5s,
+		border-color linear .5s;
+}
+
+/** Color and Border */
+body[data-color-transition-enabled] :is(
+	[data-color-transition][data-border-transition]:not([data-bg-transition]),
+	tbody tr,
+	.tbody .tr
+) {
+	transition:
+		color linear .5s,
+		border-color linear .5s;
+}
+
+/* BG, Color, and Border */
+body[data-color-transition-enabled] :is(
+	[data-bg-transition][data-border-transition][data-color-transition],
+	input, textarea, select,
+	blockquote,
+	:is(section, aside):is([role='note'], .info, .highlight, .warning, .problem)
+) {
+	transition:
+		color linear .5s,
+		background linear .5s,
+		border-color linear .5s;
+}
+
+/* Fill and Stroke */
+body[data-color-transition-enabled] svg :is(
+	[fill^='var('][stroke^='var(']:not([fill^='var('][stroke^='var('] *),
+	[style*='fill:'][style*='stroke:']:not([style*='fill:'][style*='stroke:'] *)
+) {
+	transition:
+		fill linear .5s,
+		stroke linear .5s;
+}
+
+/* Fill Only */
+body[data-color-transition-enabled] svg :is(
+	[fill^='var(']:not([stroke^='var(']):not([fill^='var('] *),
+	[style*='fill:']:not([style*='stroke:']):not([style*='fill:'] *)
+) {
+	transition: fill linear .5s;
+}
+
+/* Stroke Only */
+body[data-color-transition-enabled] :is(
+	svg [stroke^='var(']:not([fill^='var(']):not([stroke^='var('] *),
+	svg [style*='stroke:']:not([style*='fill:']):not([style*='stroke:'] *)
+	svg.icon
+ ) {
+	transition: stroke linear .5s;
+}

extras/typography/dense.css

@@ -0,0 +1,54 @@
+
+:root {
+	font-size: 14px;
+}
+
+@media (max-width: 400px) {
+	:root {
+		font-size: 12px;
+	}
+}
+
+@media (min-width: 1600px) or (min-height: 1600px) {
+	:root {
+		font-size: calc(12px + 80vw / 400);
+	}
+}
+
+@media print {
+	:root {
+		font-size: 12px;
+	}
+}
+
+
+
+
+/* ===== Headings ===== */
+
+h2 {
+	margin-block: 2.5rem 1rem;
+}
+
+
+
+
+
+/* ===== Paragraphs ===== */
+
+p {
+	line-height: 1.5;
+	margin-block: 1rem;
+}
+
+
+
+
+
+
+/* ===== Lists ===== */
+
+li {
+	line-height: 1.5;
+	margin-block: 0.25rem;
+}

extras/typography/general.css

@@ -0,0 +1,404 @@
+
+/* ===== Headings ===== */
+
+h1, h2, h3, h4, h5, h6 {
+	font-family: var(--font-heading);
+	line-height: 1;
+	color: var(--theme-text-heading);
+}
+
+h1 {
+	font-size: 2rem;
+	font-weight: 300;
+	margin-block-end: 1rem;
+}
+
+h2 {
+	font-size: 2rem;
+	font-weight: 500;
+}
+
+h3 {
+	font-size: 1.17rem;
+}
+
+h3, h4, h5, h6 {
+	margin-block: 3rem 1rem;
+}
+
+h5, h6 {
+	font-size: 0.9rem;
+	font-weight: 600;
+}
+
+h6 {
+	font-weight: 500;
+}
+
+:not(li) > :is(h1, h2, h3, h4, h5, h6),
+li > :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
+	padding-block-start: 1rem;
+}
+
+:is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3),
+:is(h1, h2, h3):first-child {
+	margin-block-start: 1rem;
+}
+
+:is(h1, h2, h3, h4, h5, h6) + :is(h4, h5, h6),
+:is(h4, h5, h6):first-child {
+	margin-block-start: 0;
+}
+
+a.heading-anchor {
+	color: var(--theme-text-light);
+	opacity: 0.3;
+	margin-inline-start: 0.5rem;
+}
+
+:is(h1, h2, h3, h4, h5, h6):hover > a.heading-anchor {
+	opacity: 1;
+}
+
+:is(h1, h2, h3, h4, h5, h6) svg.icon:not(.heading-anchor > svg) {
+	--icon-size: 1em;
+}
+
+
+
+
+
+
+/* ===== Paragraphs ===== */
+
+p {
+	margin-inline: 0;
+	font-size: 1rem;
+	font-family: var(--font-body);
+	color: var(--theme-text-body);
+}
+
+
+
+
+/* ===== Links ===== */
+
+a {
+	font-family: inherit;
+	color: var(--theme-text-link);
+}
+
+a:active,
+a:hover,
+a:focus {
+	color: var(--theme-text-link-active);
+}
+
+a:visited {
+	color: var(--theme-text-link-visited);
+}
+
+a.icon-link {
+	display: inline-flex;
+	column-gap: 0.3rem;
+	align-items: center;
+}
+
+a.icon-link svg.icon {
+	--icon-size: 1rem;
+}
+
+
+
+
+
+
+/* ===== Lists ===== */
+
+ul, ol {
+	padding-inline-start: 2.5rem;
+}
+
+li, dt, dd {
+	font-family: var(--font-body);
+	color: var(--theme-text-body);
+}
+
+li {
+	font-size: 1rem;
+}
+
+ul[role='doc-endnotes'] {
+	list-style: none;
+	padding-inline-start: 1rem;
+}
+
+[role='doc-footnote']:target {
+	background: var(--theme-bg-heavy);
+}
+
+dl {
+	padding: 1rem;
+}
+
+dt, dd {
+	/*  */
+}
+
+dt {
+	font-weight: 700;
+}
+
+dt p {
+	margin-block-end: 1rem;
+}
+
+dt:not(:first-of-type) {
+	margin-block-start: 2rem;
+}
+
+/* dd {
+	margin-inline-start: 1rem;
+	padding-inline-start: 1rem;
+	padding-block: 0.125rem;
+	border-inline-start: 0.5rem var(--theme-line) solid;
+	background: var(--theme-bg-heavy)
+} */
+
+dd p {
+	margin-block: 1rem;
+}
+
+.cite-label {
+	font-weight: 600;
+}
+
+
+
+
+
+/* ===== Mark / Highlight ===== */
+
+mark {
+	color: var(--theme-text-highlight);
+	background-color: var(--theme-bg-text-highlight);
+	padding: 0.2rem;
+}
+
+
+
+
+
+
+/* ===== User Selection ===== */
+
+::selection {
+	fill: var(--theme-text-selection) !important;
+	color: var(--theme-text-selection) !important;
+	background-color: var(--theme-bg-text-selection) !important;
+}
+
+
+
+
+
+
+/* ===== Tables ===== */
+
+table, .table, td, .td {
+	color: var(--theme-text-body);
+	font-family: var(--font-body);
+}
+
+table, .table {
+	display: table;
+	margin-block: 2rem;
+	border-collapse: collapse;
+}
+
+table, th, td,
+.table, .th, .td {
+	font-size: 1rem;
+	line-height: 1.75;
+}
+
+thead, .thead {
+	display: table-header-group;
+}
+
+tbody, .tbody {
+	display: table-row-group;
+}
+
+tbody tr,
+.tbody .tr {
+	border-top: 1px var(--theme-line) solid;
+}
+
+tr, .tr {
+	display: table-row;
+}
+
+th, .th {
+	text-align: center;
+	font-weight: 700;
+	color: var(--theme-text-heading);
+}
+
+th, .th,
+td, .td {
+	padding-block: 0.5rem;
+	padding-inline: 1rem;
+	display: table-cell;
+}
+
+td, .td {
+	display: table-cell;
+	font-weight: 300;
+	vertical-align: top;
+}
+
+:is(td, .td):not(:last-of-type) {
+	border-inline-end: 0.1rem solid var(--theme-line);
+}
+
+:is(table, .table) :is(input, select) {
+	margin-block: 0;
+}
+
+table dl {
+	padding: 0;
+}
+
+
+
+
+
+
+/* ===== Pre-formatted Blocks ===== */
+
+pre {
+	color: var(--theme-code-normal);
+	font-family: var(--font-monospace);
+	margin-block: 3rem;
+	margin-inline: 2rem;
+	padding-block: 0.5rem;
+	padding-inline: 1rem;
+	border: 0.1rem solid var(--theme-line);
+	border-radius: 1rem;
+	font-size: 1rem;
+	overflow: auto;
+	background: var(--theme-bg-light);
+}
+
+
+
+
+/* ===== Code / Sample Output ===== */
+
+code, samp {
+	font-size: 1rem;
+	color: var(--theme-code-normal);
+	font-family: var(--font-monospace);
+}
+
+:not(pre) > :is(code, samp) {
+	color: inherit;
+	background: var(--theme-bg-light);
+	padding-inline: 0.25rem;
+	border: 0.1rem solid var(--theme-line);
+}
+
+
+
+
+
+/* ===== Note Blocks ===== */
+
+:is(aside, section):is([role='note'], .info, .highlight, .warning, .problem) {
+	font-size: 1rem;
+	color: var(--theme-text-light);
+	padding-block: 0.6rem;
+	padding-inline-start: 1rem;
+	margin: 1rem;
+	border-inline-start: 0.8rem solid var(--theme-line);
+	background: var(--theme-bg-light);
+}
+
+:is(aside, section).info {
+	border-inline-start-color: var(--theme-accent-info);
+}
+
+:is(aside, section).highlight {
+	border-inline-start-color: var(--theme-accent-highlight);
+}
+
+:is(aside, section).warning {
+	border-inline-start-color: var(--theme-accent-warning);
+}
+
+:is(aside, section).problem {
+	border-inline-start-color: var(--theme-accent-problem);
+}
+
+
+
+
+
+/* ===== Figure Captions ===== */
+
+figcaption {
+	font-family: var(--font-body);
+	text-align: center;
+	font-size: 0.85rem;
+	margin-block-start: 1rem;
+	color: var(--theme-text-light);
+	max-width: 60vw;
+	margin-inline: auto;
+}
+
+
+
+
+
+/* ===== Block Quotes ===== */
+
+blockquote {
+	margin-block: 2rem;
+	margin-inline: 1rem;
+	padding-block: 0.5rem;
+	padding-inline: 1.5rem;
+	border-inline-start: 0.25rem var(--theme-line) solid;
+}
+
+blockquote p {
+	margin: 0;
+}
+
+
+
+
+
+
+/* ===== Small Spans ===== */
+
+small {
+	font-size: 0.8rem;
+	font-family: var(--font-body);
+	color: var(--theme-text-body);
+}
+
+
+
+
+
+/* ===== Horizontal Rules ===== */
+
+hr {
+	border-block-start-width: 0.1rem;
+	border-style: solid;
+	border-color: var(--theme-line);
+	width: 90%;
+	margin-block: 4rem 6rem;
+}
+

extras/typography/spacious.css

@@ -0,0 +1,54 @@
+
+:root {
+	font-size: 16px;
+}
+
+@media (max-width: 400px) {
+	:root {
+		font-size: 14px;
+	}
+}
+
+@media (min-width: 1600px) or (min-height: 1600px) {
+	:root {
+		font-size: calc(12px + 100vw / 400);
+	}
+}
+
+@media print {
+	:root {
+		font-size: 12px;
+	}
+}
+
+
+
+
+/* ===== Headings ===== */
+
+h2 {
+	margin-block: 4rem 1rem;
+}
+
+
+
+
+
+/* ===== Paragraphs ===== */
+
+p {
+	line-height: 1.75;
+	margin-block: 1.25rem;
+}
+
+
+
+
+
+
+/* ===== Lists ===== */
+
+li {
+	line-height: 1.75;
+	margin-block: 0.5rem;
+}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@doc-utils/docs2website",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@doc-utils/docs2website",
-      "version": "0.1.2",
+      "version": "0.1.3",
       "dependencies": {
         "@doc-utils/color-themes": "^0.1.14",
         "@doc-utils/jsonschema2markdown": "^0.1.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doc-utils/docs2website",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "publishConfig": {
     "registry": "https://gitea.home.jbrumond.me/api/packages/doc-utils/npm/"
   },

src/template.ts

@@ -42,6 +42,13 @@ export async function load_extras() {
 		'components/outline-button.js',
 		'components/outline-inline.js',
 		'prism.css',
+		'typography/spacious.css',
+		'typography/dense.css',
+		'typography/general.css',
+		'theme-animation.css',
+		'forms-inputs/spacious.css',
+		'forms-inputs/dense.css',
+		'forms-inputs/general.css',
 	];
 
 	const promises = extras_files.map((file) => load_from_dir(extras_dir, file));