vowel 0.2.4 → 0.3.0

package/stylesheets/DefaultStyles.css

@@ -3,331 +3,397 @@
 			Barebones, Basic.css, Pico, Typeplate, Simple.css, and more
 		*/
 
-:root {
-	--text-color: hsl(0, 0%, 13%);
-	--accent-color: hsl(215, 100%, 35%);
-	--accent-color-hover: hsl(215, 76%, 49%);
-	--border-color: hsl(0, 0%, 73%);
-	--main-background: hsl(0, 0%, 100%);
-	--code-background: hsl(0, 0%, 95%);
-	/* --soft-background: hsl(0, 0%, 95%); */
-	--soft-background: #00000005;
-}
+@layer reset, typography, default;
+
 
-@media (prefers-color-scheme: dark) {
+@layer default {
 	:root {
-		--text-color: hsl(0, 0%, 80%);
-		--accent-color: hsl(194, 76%, 49%);
-		--accent-color-hover: hsl(194, 86%, 57%);
-		--border-color: hsl(0, 0%, 27%);
-		--main-background: hsl(0, 0%, 12%);
-		--code-background: hsl(0, 0%, 5%);
-		/* --soft-background: hsl(0, 0%, 14%); */
-		--soft-background: #ffffff07;
+		--text-color: hsl(0, 0%, 13%);
+		--accent-color: hsl(215, 100%, 35%);
+		--accent-color-hover: hsl(215, 76%, 49%);
+		--border-color: hsl(0, 0%, 73%);
+		--main-background: hsl(0, 0%, 100%);
+		--code-background: hsl(0, 0%, 95%);
+		--soft-background: hsl(0, 0%, 95%);
+		/* --soft-background: #00000005; */
 	}
-}
-
-/* Layout */
 
-.page {
-	font-family: var(--font-sans);
-	max-width: 60ch;
-	margin: auto;
-	display: flex;
-	flex-direction: column;
-	padding: 1rem;
-}
-
-main,
-article.thumbnail {
-	margin-bottom: auto;
-	padding-bottom: 4rem;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: baseline;
-	column-gap: 0.5rem;
-}
-
-:is(main, article.thumbnail)>* {
-	flex-basis: 100%;
-}
-
-:is(main, article.thumbnail) :is(time, dl:not(.link)) {
-	flex-basis: 0;
-	display: inline !important;
-	font-size: 0.9em;
-	opacity: 0.8;
-}
+	@media (prefers-color-scheme: dark) {
+		:root {
+			--text-color: hsl(0, 0%, 80%);
+			--accent-color: hsl(194, 76%, 49%);
+			--accent-color-hover: hsl(194, 86%, 57%);
+			--border-color: hsl(0, 0%, 27%);
+			--main-background: hsl(0, 0%, 12%);
+			--code-background: hsl(0, 0%, 5%);
+			--soft-background: hsl(0, 0%, 14%);
+			/* --soft-background: #ffffff07; */
+		}
+	}
 
-dt {
-	display: none;
-}
+	/* Layout */
+
+	body {
+		overflow-y: scroll;
+		font-family: var(--font-sans);
+		max-width: min(100ch, 100vi - 10vw);
+		margin-inline: auto;
+		margin-bottom: 5em;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 4rem 1rem;
+
+		main {
+			width: 95vw;
+			max-width: 80ch;
+		}
+	}
 
-dd {
-	display: inline;
-}
+	main,
+	article {
+		margin-bottom: auto;
+		padding-bottom: 4rem;
+		display: grid;
+		gap: 1rem;
+		flex-wrap: wrap;
+		align-items: baseline;
+		column-gap: 0.5rem;
+	}
 
-.page>main> :first-child {
-	margin-top: 2.5rem;
-}
+	@media (width >=700px) {
 
-/* Colors */
+		body:not(.home) main {
+			grid-template-columns: 3fr 1fr;
+		}
+	}
 
-body {
-	color: var(--text-color);
-	background: var(--main-background);
-}
+	main>*:not(nav[aria-label=Contents]) {
+		grid-column: 1;
+	}
 
-a {
-	color: var(--accent-color);
-}
+	:is(main, article)>* {
+		flex-basis: 100%;
+	}
 
-a:hover {
-	color: var(--accent-color-hover);
-}
+	:is(main, article) :is(time, dl:not(.link)) {
+		/* flex-basis: 0; */
+		/* display: inline !important; */
+		font-size: 0.9em;
+		opacity: 0.8;
+	}
 
-code,
-pre {
-	background: var(--code-background);
-}
+	/* Colors */
 
-blockquote {
-	border-left: 5px solid var(--border-color);
-}
+	html {
+		color: var(--text-color);
+		background: var(--main-background);
+	}
 
-article {
-	border: 1px solid var(--border-color);
-	background: var(--soft-background);
-	padding: 1.8rem 2rem 1.5rem;
-	border-radius: 0.5rem;
-	display: flex;
-	flex-direction: column;
-}
+	a:where(:not([rel=home])) {
+		color: var(--accent-color);
 
-th,
-td {
-	border-bottom: 1px solid var(--border-color-softer);
-}
+		&:hover {
+			color: var(--accent-color-hover);
+		}
+	}
 
-hr {
-	border-top: 1px solid var(--text-color);
-}
+	code,
+	pre {
+		background: var(--code-background);
+	}
 
-/* Frontmatter */
+	blockquote {
+		border-left: 5px solid var(--border-color);
+	}
 
-main>img {
-	margin-bottom: 2.5rem;
-}
+	article {
+		border: 1px solid var(--border-color);
+		background: var(--soft-background);
+		padding: 2rem 2rem 2rem;
+		border-radius: calc(1rem + 5px);
+		display: flex;
+		flex-direction: column;
+	}
 
-dt {
-	font-size: 1.1em;
-}
+	th,
+	td {
+		border-bottom: 1px solid var(--border-color-softer);
+	}
 
-dl.link dt {
-	display: none;
-}
+	hr {
+		border-top: 1px solid var(--text-color);
+	}
 
-dl.link {
-	order: calc(Infinity);
-	margin-top: 2.5rem;
-	margin-bottom: 0;
-}
+	/* Frontmatter */
 
-dl.tags,
-time {
-	font-size: 1.1em;
-}
+	main>img {
+		margin-bottom: 2.5rem;
+	}
 
-dl.tags dt {
-	display: none;
-}
+	nav[aria-label=Contents]:has(>ol:empty),
+	nav[aria-label=Contents]:has(>ol>li:only-of-type>a) {
+		display: none;
+	}
 
-dl.tags :is(dd, ul, li) {
-	padding-inline: 0;
-	display: inline;
-}
 
-dl.tags li {
-	margin-inline: 0.2em;
-}
+	@media (width >=700px) {
+		nav[aria-label=Contents] {
+			grid-column: 2;
+			grid-row-start: 3;
+			height: 0px;
+			overflow: visible;
+		}
+	}
 
-dl.tags li:before {
-	content: '#';
-}
 
-dl.contents ul {
-	list-style: none;
-	padding: 0;
-}
 
-dl.contents .depth-2 {
-	font-weight: 500;
-}
+	nav[aria-label=Contents] {
+		min-width: max-content;
+		flex-basis: 30%;
+		max-width: 100%;
 
-dl.contents .depth-3 {
-	font-size: 0.95em;
-	padding-left: 0.5em;
-}
+		&:before {
+			content: "Contents";
+			font-weight: 600;
+			margin-bottom: 0.5em;
+			display: block;
+			width: max-content;
+		}
 
-/* Header */
+		& ol {
+			list-style: none;
+			width: max-content;
+			margin: 0;
+			padding: 0;
 
-header {
-	margin-top: 4rem;
-}
+			& ol {
+				margin-left: 1em;
+			}
+		}
+	}
 
-nav.primary {
-	border: 1px solid var(--border-color);
-	padding: 6px 10px;
-	margin-inline: -3px;
-	border-radius: 5px;
-	display: flex;
-	column-gap: 2rem;
-	row-gap: 0.5rem;
-	flex-wrap: wrap;
-	justify-content: flex-start;
-	background: var(--soft-background);
-}
+	/* Header */
+
+	header {
+		margin-top: 4rem;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-items: center;
+		column-gap: 1em;
+
+		p.tagline {
+			margin-left: auto;
+			align-self: flex-end;
+			margin-bottom: 0.5em;
+			font-size: 1.5em;
+		}
+
+		nav {
+			border: 1px solid var(--border-color);
+			padding: 0px 6px;
+			width: 100%;
+
+			&:first-of-type {
+				padding-top: 7px;
+			}
+
+			&:last-of-type {
+				padding-bottom: 7px;
+			}
+
+			margin-inline: -3px;
+			border-radius: 5px;
+			display: flex;
+			column-gap: 2rem;
+			flex-wrap: wrap;
+			justify-content: flex-start;
+			background: var(--soft-background);
+		}
+
+		nav:has(+ nav) {
+			border-bottom: none;
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+
+			&:after {
+				display: block;
+				content: '';
+				border-bottom: 1px solid var(--border-color);
+				flex-basis: 100%;
+				margin-block: 0.7rem;
+			}
+		}
+
+		nav+nav {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+			border-top: none;
+			margin-top: 0;
+		}
+	}
 
-nav.primary:has(+ nav.primary) {
-	border-bottom: none;
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
-}
+	nav[aria-label=Breadcrumbs]>a:only-child {
+		display: none;
+	}
 
-nav.primary:has(+ nav.primary):after {
-	display: block;
-	content: '';
-	border-bottom: 1px solid var(--border-color);
-	flex-basis: 100%;
-	margin-top: 0.7rem;
-}
+	nav[aria-label=Breadcrumbs] {
+		text-transform: uppercase;
+		color: var(--border-color);
 
-nav.primary+nav.primary {
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
-	border-top: none;
-	margin-top: 0;
-}
+		a {
+			color: unset;
+		}
+	}
 
-header .breadcrumbs>a:only-child {
-	display: none;
-}
+	/* Sidebar */
+
+	aside nav {
+		margin-inline: auto;
+
+		&>ul {
+			display: flex;
+			flex-direction: row;
+			gap: 2em;
+			justify-content: center;
+		}
+
+		ul {
+			list-style: none;
+			padding-left: 0;
+		}
+
+		li {
+			margin: 0;
+			line-height: 1.7em;
+		}
+
+		&>ul>li {
+			&>a {
+				font-weight: 500;
+			}
+
+			&>ul {
+				font-size: 0.9em;
+				line-height: 1.2em;
+
+				ul {
+					padding-left: 1em;
+				}
+			}
+		}
+	}
 
-header .breadcrumbs {
-	margin-block: 4rem 1rem;
-}
+	/* Footer */
 
-/* Sidebar */
+	footer {
+		text-align: center;
+	}
 
-.secondary {
-	margin-inline: auto;
-}
+	/* Main */
 
-/* Footer */
+	p:where([itemprop=description]) {
+		font-size: 1.3em;
+	}
 
-footer {
-	text-align: center;
-	margin-block: 6rem 8rem;
-}
+	article a {
+		display: flex;
+		flex-direction: column;
+		row-gap: 1em;
 
-/* Pages */
+		&>* {
+			margin: 0;
+		}
+	}
 
-.page.home>main>h1 {
-	display: none;
-}
+	article img {
+		order: -1;
+	}
 
-.page.home>.content>p:first-child {
-	font-size: 1.2em;
-}
+	article a,
+	article a:hover {
+		color: unset;
+	}
 
-section[class*='$'] {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-	grid-auto-rows: auto;
-	grid-gap: 2rem;
+	article h1 {
+		grid-area: title;
+		font-size: 1.6rem;
+	}
 
-	& article {
-		margin: 0;
+	article p {
+		font-size: 1.6rem;
 	}
-}
 
-article.item {
-	display: grid;
-	flex-direction: column;
-	grid-template-areas:
-		'title icon'
-		'description description';
-	align-content: start;
-}
+	article dl.icon {
+		grid-area: icon;
+		font-size: 1.5em;
+	}
 
-article.item h1 {
-	grid-area: title;
-	font-size: 1.6rem;
-}
+	article dl.icon dd {
+		text-align: right;
+	}
 
-article.item dl.icon {
-	grid-area: icon;
-	font-size: 1.5em;
-}
+	article .description {
+		grid-area: description;
+	}
 
-article.item dl.icon dd {
-	text-align: right;
-}
+	article dt {
+		display: none;
+	}
 
-article.item .description {
-	grid-area: description;
-}
+	article dl.icon {
+		order: -1;
+	}
 
-article.item dt {
-	display: none;
-}
+	aside.alert.note {
+		--icon: 'ℹ️';
+		--rgb: 71, 139, 230;
+	}
 
-article.item dl.icon {
-	order: -1;
-}
+	aside.alert.tip {
+		--icon: '💡';
+		--rgb: 87, 171, 90;
+	}
 
-aside.alert.note {
-	--icon: 'ℹ️';
-	--rgb: 71, 139, 230;
-}
+	aside.alert.important {
+		--icon: '💬';
+		--rgb: 152, 110, 226;
+	}
 
-aside.alert.tip {
-	--icon: '💡';
-	--rgb: 87, 171, 90;
-}
+	aside.alert.warning {
+		--icon: '⚠️';
+		--rgb: 198, 144, 38;
+	}
 
-aside.alert.important {
-	--icon: '💬';
-	--rgb: 152, 110, 226;
-}
+	aside.alert.caution {
+		--icon: '⛔️';
+		--rgb: 229, 83, 75;
+	}
 
-aside.alert.warning {
-	--icon: '⚠️';
-	--rgb: 198, 144, 38;
-}
+	aside.alert {
+		border-left: 3px solid rgb(var(--rgb));
+		padding: 1.5rem 2rem;
+		background: rgba(var(--rgb), 0.04);
+	}
 
-aside.alert.caution {
-	--icon: '⛔️';
-	--rgb: 229, 83, 75;
-}
+	aside.alert h2 {
+		color: rgb(var(--rgb));
+	}
 
-aside.alert {
-	border-left: 3px solid rgb(var(--rgb));
-	padding: 1.5rem 2rem;
-	background: rgba(var(--rgb), 0.04);
-}
+	aside.alert h2:before {
+		font-size: 0.8em;
+		margin-right: 0.7rem;
+		opacity: 0.9;
+	}
 
-aside.alert h2 {
-	color: rgb(var(--rgb));
+	aside.alert h2:before {
+		content: var(--icon);
+	}
 }
 
-aside.alert h2:before {
-	font-size: 0.8em;
-	margin-right: 0.7rem;
-	opacity: 0.9;
-}
+/* Elements */
 
-aside.alert h2:before {
-	content: var(--icon);
+img {
+	border-radius: 5px;
 }