Merge pull request #4 from cipherdothost/alan/fix-styling-issues

Alan/fix styling issues

Author: jamesponddotco

static/assets/scss/global/_index.scss

@@ -57,22 +57,25 @@ main {
 	width: 100%;
 	max-width: none;
 	justify-content: center;
+	padding: 0;
 	border-bottom: 1px solid $borderSecondary;
 	background: $bgPrimary;
-	padding-block: 12px;
+	padding-block: 0.75rem;
 
 	&__inner {
 		display: flex;
 		width: 100%;
 		max-width: $layoutWidth;
 		align-items: center;
-		gap: 16px;
+		gap: 1rem;
 		padding-inline: $layoutPadding;
 	}
 
 	&__logo {
 		position: relative;
+		z-index: 1;
 		display: block;
+		aspect-ratio: 1/1;
 		color: $fgPrimary;
 
 		&::after {
@@ -151,33 +154,42 @@ main {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
+	font-size: 1rem;
 	gap: 1rem;
 	padding-block: 1rem;
-
-	&__link {
-
-		@extend %link;
-	}
 }
 
 .pageDescription {
-	padding-left: 16px;
-	border-radius: 8px;
-	border-left: 12px solid $fgPrimary;
-	margin-bottom: $layoutPadding;
-	padding-block: 6px;
 
-	&__title {
+	&__text:not(:last-child) {
+		margin-bottom: #{calc($layoutPadding / 2)};
+	}
 
-		@extend %h1;
+	&.mNoCard {
+		padding-left: 1rem;
+		border-radius: 0.5rem;
+		border-left: 0.75rem solid $fgPrimary;
+		margin-bottom: $layoutPadding;
+		padding-block: 0.25rem;
 	}
 
-	&__text {
-		color: $fgPrimary;
-		font-size: 1.125rem;
+	&.mCard {
+
+		@extend %uSurface;
+		position: relative;
+		padding-left: 2.5rem;
+		margin-bottom: calc($layoutPadding / 2);
+		padding-block: 1rem;
 
-		&:not(:last-child) {
-			margin-bottom: #{calc($layoutPadding / 2)};
+		&::before {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 1rem;
+			height: 100%;
+			border-radius: 1rem 0 0 1rem;
+			background: $fgPrimary;
+			content: "";
 		}
 	}
 }
@@ -186,6 +198,7 @@ main {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
+	font-size: 1rem;
 
 	&__item {
 		display: flex;
@@ -228,23 +241,22 @@ main {
 	&__links {
 		display: flex;
 		flex-wrap: wrap;
-
-		@include media("<tablet") {
-			column-gap: 1em;
-		}
+		gap: 0 1em;
 	}
 
 	&__link {
 		position: relative;
 		padding: 0.5em;
 		border: 1px solid transparent;
 		border-radius: 8px;
+		margin: -0.5em;
 		text-decoration: underline;
-		--_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M9.75 4h.516A3.74 3.74 0 0 1 14 7.75c0 2.003-1.565 3.641-3.53 3.745l-.197.005l-.516.005a.75.75 0 0 1-.115-1.493l.101-.007l.523-.005A2.24 2.24 0 0 0 12.5 7.75c0-1.192-.92-2.166-2.081-2.245l-.153-.005H9.75a.75.75 0 0 1-.102-1.493zh.516zM5.752 4h.498a.75.75 0 0 1 .102 1.493L6.25 5.5h-.498a2.252 2.252 0 0 0-.154 4.5l.154.005h.498a.75.75 0 0 1 .102 1.493l-.102.007h-.498a3.752 3.752 0 0 1-.199-7.5zh.497zM5.75 7h4.5a.75.75 0 0 1 .102 1.493l-.102.007h-4.5a.75.75 0 0 1-.102-1.493zh4.5z'/%3E%3C/svg%3E");
 		transition: border-color 0.12s, background-color 0.12s, color 0.12s;
+		--_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M9.75 4h.516A3.74 3.74 0 0 1 14 7.75c0 2.003-1.565 3.641-3.53 3.745l-.197.005l-.516.005a.75.75 0 0 1-.115-1.493l.101-.007l.523-.005A2.24 2.24 0 0 0 12.5 7.75c0-1.192-.92-2.166-2.081-2.245l-.153-.005H9.75a.75.75 0 0 1-.102-1.493zh.516zM5.752 4h.498a.75.75 0 0 1 .102 1.493L6.25 5.5h-.498a2.252 2.252 0 0 0-.154 4.5l.154.005h.498a.75.75 0 0 1 .102 1.493l-.102.007h-.498a3.752 3.752 0 0 1-.199-7.5zh.497zM5.75 7h4.5a.75.75 0 0 1 .102 1.493l-.102.007h-4.5a.75.75 0 0 1-.102-1.493zh4.5z'/%3E%3C/svg%3E");
 
 		@include media("<tablet") {
-			padding-inline: 0;
+			padding: 0;
+			margin: 0;
 		}
 
 		@include media(">tablet") {

static/assets/scss/global/_reset.scss

@@ -8,15 +8,13 @@
 *::before,
 *::after {
 	box-sizing: border-box;
-	padding: 0;
 	border: none;
 	border-radius: 0;
 	margin: 0;
 	background: transparent;
 	font-family: inherit;
 	font-size: inherit;
 	line-height: inherit;
-	list-style: none;
 	text-align: inherit;
 	text-transform: inherit;
 }
@@ -54,6 +52,16 @@ a:where([class]:visited) {
 	text-decoration: none;
 }
 
+/* Reset styles on lists with classes. */
+ul:where([class]),
+ol:where([class]) {
+	padding: 0;
+}
+
+li:where([class]) {
+	list-style: none;
+}
+
 /* Add the correct font size in all browsers. */
 small {
 	font-size: 80%;

static/assets/scss/global/_text.scss

@@ -6,10 +6,10 @@
 
 @use "variables" as *;
 
-html {
+body {
 	color: $fgSecondary;
 	font-family: system-ui, sans-serif;
-	font-size: 1rem;
+	font-size: 1.125rem;
 	line-height: 1.5;
 }
 
@@ -27,23 +27,46 @@ h6,
 .h6 {
 	margin-bottom: 0.25em;
 	color: $fgPrimary;
-	line-height: 1.1;
+	line-height: 1;
 	text-wrap: balance;
 }
 
+h1,
+.h1,
+%h1 {
+	font-size: 2rem;
+}
+
+h2,
+.h2,
+%h2 {
+	font-size: 1.5rem;
+}
+
+h3,
+.h3,
+%h3 {
+	font-size: 1.25rem;
+}
+
 .uRichText {
-	max-width: 65ch;
 	line-height: 1.5;
 	text-wrap: pretty;
 
-	:where(p),
-	:where(img),
-	:where(picture) {
-		margin-bottom: 1em;
+	:where(p) {
+		margin-top: 0.75em;
+	}
 
-		&:last-child {
-			margin-bottom: 0;
-		}
+	:where(ul, ol, pre, img, picture) {
+		margin-top: 0.25em;
+	}
+
+	:where(h1, h2, h3, h4, h5, h6) {
+		margin-top: 1.5em;
+	}
+
+	> :where(:first-child) {
+		margin-top: 0;
 	}
 }
 
@@ -61,23 +84,11 @@ code {
 }
 
 a:where(:not([class])),
-%link {
-	color: $fgSecondary;
+.a {
+	color: $fgPrimary;
 	text-decoration: underline;
 
 	&:hover {
-		color: $fgPrimary;
+		color: $fgSecondary;
 	}
 }
-
-%h1 {
-	font-size: 2rem;
-}
-
-%h2 {
-	font-size: 1.5rem;
-}
-
-%h3 {
-	font-size: 1.25rem;
-}

static/assets/scss/global/_utility.scss

@@ -34,3 +34,11 @@
 .uDisabled {
 	pointer-events: none;
 }
+
+%uSurface,
+.uSurface {
+	padding: 1.5rem;
+	border: 1px solid $borderPrimary;
+	border-radius: 1rem;
+	background: $bgPrimary;
+}

static/assets/scss/global/_variables.scss

@@ -5,7 +5,7 @@
  */
 
 $layoutWidth: 750px;
-$layoutPadding: 32px;
+$layoutPadding: min(5%, 2rem);
 
 $fgPrimary: hsl(0deg 0% 14%);
 $fgSecondary: hsl(0deg 0% 30%);

static/assets/scss/highlight.scss

@@ -6,8 +6,7 @@
 
 .chroma code {
 	width: 100%;
-	border-radius: 8px;
-	margin-bottom: 1rem;
+	border-radius: 6px;
 	background-color: #242424;
 	color: #fff;
 	padding-block: 0.5em;

static/assets/scss/main.scss

@@ -5,7 +5,5 @@
  */
 
 @use "./pages/index";
-@use "./pages/package";
-@use "./pages/privacy";
 @use "./pages/search";
 @use "./pages/404" as *;

static/assets/scss/pages/_404.scss

@@ -40,8 +40,6 @@
 	}
 
 	&__link {
-
-		@extend %link;
 		display: block;
 		margin-top: 1rem;
 	}

static/assets/scss/pages/_index.scss

@@ -49,6 +49,7 @@
 	}
 
 	&__description {
-		margin-bottom: 1em;
+		margin-bottom: 1.5em;
+		font-size: 1rem;
 	}
 }