From 6ade326c8d1f4f327198978b9c0010d967f9e2b8 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Sat, 28 Jan 2023 11:44:54 -0800
Subject: [PATCH] Adding css in and formatting a little better.

---
 src/routes/+layout.svelte |  87 +++++++++++-
 src/styles/global.pcss    | 271 ++++++++++++++++++++++++++++++++++++++
 src/styles/reset.pcss     |  58 ++++++++
 src/styles/styles.pcss    |   3 +
 src/styles/theme.pcss     | 137 +++++++++++++++++++
 5 files changed, 550 insertions(+), 6 deletions(-)
 create mode 100644 src/styles/global.pcss
 create mode 100644 src/styles/reset.pcss
 create mode 100644 src/styles/styles.pcss
 create mode 100644 src/styles/theme.pcss

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index bc4eac2..3afe6a1 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,86 @@
 <script lang="ts">
-	import '../app.postcss';
 	import Header from '$lib/components/header/index.svelte';
 	import Footer from '$lib/components/footer/index.svelte';
+	import '$root/styles/styles.pcss';
 </script>
 
-<Header />
-<main>
-	<slot />
-</main>
-<Footer />
+<div class="wrapper">
+	<Header />
+	<main>
+		<slot />
+	</main>
+	<Footer />
+</div>
+
+<style lang="postcss">
+	/* .loading {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 101;
+		display: grid;
+		place-items: center;
+		gap: 1rem;
+
+		h3 {
+			color: white;
+		}
+	} */
+
+	.background {
+		background: black;
+		opacity: 0.8;
+		cursor: none;
+		inset: 0;
+		position: fixed;
+		z-index: 100;
+	}
+
+	.wrapper {
+		display: grid;
+		grid-template-rows: auto 1fr auto;
+		min-height: 100vh;
+	}
+
+	main {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		max-width: 850px;
+		margin: 0 auto;
+		padding: 2rem 0rem;
+		max-width: 80vw;
+
+		@media (min-width: 1600px) {
+			max-width: 70vw;
+		}
+
+		box-sizing: border-box;
+	}
+
+	footer {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 40px;
+	}
+
+	footer a {
+		font-weight: bold;
+	}
+
+	@media (min-width: 480px) {
+		footer {
+			padding: 40px 0;
+		}
+	}
+
+  p,
+  li {
+    word-wrap: normal;
+    font-size: var(--bodyTextSize);
+    color: var(--lightShade);
+  }
+</style>
\ No newline at end of file
diff --git a/src/styles/global.pcss b/src/styles/global.pcss
new file mode 100644
index 0000000..7966eb8
--- /dev/null
+++ b/src/styles/global.pcss
@@ -0,0 +1,271 @@
+/* Setup */
+
+/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); */
+
+:root {
+	/* Define Colors as colors */
+	--white: #ffffff;
+	--grey: #efefef;
+	--yellow: #ffc600;
+	--light: #ffffff;
+	--black: #2e2e2e;
+	--dark: #000000;
+	--lighterDark: #131415;
+	--shellYellow: #ffc850;
+	--lightGrey: #d8d8d8;
+	--lightShade: #f8f7f5;
+	--darkGrey: #272727;
+
+	/* Define Colors intentions */
+	--primary: var(--black);
+	--danger: var(--grey);
+	--background: var(--lighterDark);
+	--textColor: var(--lightGrey);
+	--buttonTextColor: var(--black);
+	--lineColor: var(--grey);
+	--cardBg: var(--darkGrey);
+	--headerBackground: var(--darkGrey);
+	--footerBackground: var(--darkGrey);
+	--linkHover: var(--shellYellow);
+	--lightHairLine: #c5c5c5;
+
+	/* Styles */
+	--line: solid 1px var(--lineColor);
+
+	/* Type */
+	--headingFont: 'Fira Code', monospace;
+	--bodyFont: 'Fira Sans', Sans-Serif;
+	--baseFontSize: 100%;
+	--h1: 3.052rem;
+	--h2: 2.441rem;
+	--h3: 1.953rem;
+	--h4: 1.563rem;
+	--h5: 1.25rem;
+	--h6: 1.8rem;
+	--bodyTextSize: 1.8rem;
+	--smallText: 1.44rem;
+	--lineHeight: 1.75;
+
+	/* Elevation */
+	--level-0: none;
+	--level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+	--level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+	--level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+	--level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+	/* Positioning */
+	--containerPadding: 2.5%;
+	--headerHeight: 8rem;
+	--borderRadius: 10px;
+	--maxWidth: 1200px;
+
+	/* Cards */
+	--cardHeightMin: 15rem;
+	--cardHeightMax: 50rem;
+	--cardWidthMin: 15rem;
+
+	/* Media Queries - Not yet supported in CSS */
+	/* 
+      --xsmall: 340px;
+      --small: 500px;
+      --large: 960px;
+      --wide: 1200px;
+    */
+}
+
+html {
+	background: var(--background) none repeat scroll 0% 0%;
+	font-size: 62.5%;
+	box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
+body {
+	line-height: var(--lineHeight);
+	color: var(--textColor);
+}
+
+/* Scrollbar Styles */
+body::-webkit-scrollbar {
+	width: 12px;
+}
+
+html {
+	scrollbar-width: thin;
+	scrollbar-color: var(--lightGrey) var(--darkGrey);
+}
+
+body::-webkit-scrollbar-track {
+	background: var(--darkGrey);
+}
+
+body::-webkit-scrollbar-thumb {
+	background-color: var(--lightGrey);
+	border-radius: 6px;
+	border: 3px solid var(--darkGrey);
+}
+
+.gatsby-image-wrapper img[src*='base64\\,'] {
+	image-rendering: -moz-crisp-edges;
+	image-rendering: pixelated;
+}
+
+::selection {
+	background: var(--white);
+	color: var(--background);
+}
+
+fieldset {
+	border-color: rgba(0, 0, 0, 0.1);
+	border-width: 1px;
+}
+
+a.button,
+button {
+	background: var(--darkAccent);
+	color: var(--lightShade);
+	border: 0;
+	padding: 0.6rem 1rem;
+	border-radius: 2px;
+	cursor: pointer;
+	--cast: 2px;
+	box-shadow: var(--cast) var(--cast) 0 var(--lightAccent);
+	text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.2);
+	transition: all 0.2s;
+	text-decoration: none;
+	&:hover {
+		--cast: 4px;
+	}
+	&:active {
+		--cast: 2px;
+	}
+}
+
+a {
+	text-decoration-color: var(--shellYellow);
+}
+
+a:hover {
+	color: var(--linkHover);
+}
+
+input,
+textarea {
+	font-size: 1.5rem;
+	padding: 0.4rem;
+}
+
+textarea {
+	resize: vertical;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-family: var(--headingFont);
+	font-weight: 400;
+	color: var(--white);
+}
+
+h1 {
+	margin-top: 0;
+	font-size: var(--h1);
+}
+
+h2 {
+	font-size: var(--h2);
+}
+
+h3 {
+	font-size: var(--h3);
+}
+
+h4 {
+	font-size: var(--h4);
+}
+
+h5 {
+	font-size: var(--h5);
+}
+
+hr {
+	border: 0;
+	height: 8px;
+}
+
+nav {
+	a::after {
+		content: '';
+		position: absolute;
+		width: 100%;
+		height: 2px;
+		bottom: -5px;
+		left: 0px;
+		background: var(--linkHover);
+		transition: transform 0.3s ease 0s;
+		transform: scale(0);
+	}
+
+	a {
+		position: relative;
+		font-size: 2rem;
+		text-decoration: none;
+
+		&[aria-current='page'],
+		&.active,
+		&.current-parent {
+			&:after {
+				transform: scale(1);
+			}
+		}
+
+		&:hover {
+			&:after {
+				transform: scale(1);
+			}
+		}
+	}
+}
+
+img {
+	max-width: 100%;
+}
+
+figure {
+	margin-inline: 2rem;
+}
+
+.emoji:hover {
+	cursor: pointer;
+}
+
+.card {
+	display: grid;
+	align-items: center;
+	padding: 1.5rem;
+	background: var(--cardBg);
+	box-shadow: var(--level-3);
+	border-radius: var(--borderRadius);
+	max-width: var(--cardWidthMax);
+	min-width: var(--cardWidthMin);
+	max-height: var(--cardHeightMax);
+	min-height: var(--cardHeightMin);
+}
+
+/* First item will never have margin top */
+.card > *:first-child {
+	margin-top: 0;
+}
+
+/* Last item will never have margin bottom */
+.card > *:last-child {
+	margin-bottom: 0;
+}
diff --git a/src/styles/reset.pcss b/src/styles/reset.pcss
new file mode 100644
index 0000000..02bf499
--- /dev/null
+++ b/src/styles/reset.pcss
@@ -0,0 +1,58 @@
+*,
+*:before,
+*:after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+iframe,
+video {
+  width: 100%;
+  border: none;
+  aspect-ratio: 16 / 9;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+button,
+input {
+  font: inherit;
+  color: inherit;
+  border: none;
+}
+
+button {
+  font: inherit;
+  background: none;
+  cursor: pointer;
+}
+
+ul,
+ol {
+  list-style: none;
+}
\ No newline at end of file
diff --git a/src/styles/styles.pcss b/src/styles/styles.pcss
new file mode 100644
index 0000000..ec5bbc2
--- /dev/null
+++ b/src/styles/styles.pcss
@@ -0,0 +1,3 @@
+@import 'reset.pcss';
+@import 'global.pcss';
+/* @import '$root/styles/theme.pcss'; */
diff --git a/src/styles/theme.pcss b/src/styles/theme.pcss
new file mode 100644
index 0000000..d272906
--- /dev/null
+++ b/src/styles/theme.pcss
@@ -0,0 +1,137 @@
+html[data-theme='🌛 Dark'] {
+	/* Global */
+	--clr-primary: hsl(173 100% 66%);
+	--clr-txt: hsl(0 0% 98%);
+	--clr-bg: hsl(210 7% 11%);
+
+	--bg: radial-gradient(hsl(173 100% 4%), var(--clr-bg));
+	--bg-opacity: 0.7;
+
+	/* Menu */
+	--clr-menu-text: hsl(0 0% 78%);
+	--clr-menu-bg: linear-gradient(180deg, hsl(180 7% 14%) 0%, hsl(216 7% 14%) 100%);
+	--clr-menu-arrow-bg: hsl(180 7% 14%);
+	--clr-menu-border: hsl(0 0% 19%);
+
+	--clr-theme-txt: hsl(177 100% 15%);
+	--clr-theme-active: hsl(177 100% 80%);
+	--clr-switch-on-bg: hsl(0 0% 24%);
+	--clr-switch-off-bg: hsl(0 0% 10%);
+
+	/* Hero */
+	--clr-hero-txt: hsl(174 27% 73%);
+	--clr-hero-bg: linear-gradient(270deg, hsl(210 15% 13%) 43%, hsl(176 19% 15%) 66%);
+	--clr-hero-divider-bg: hsl(0 0% 21%);
+	--clr-input-txt: hsl(177 100% 15%);
+	--clr-input-bg: hsl(210 13% 24%);
+	--clr-input-placeholder-txt: hsl(210 13% 50%);
+	--clr-input-border: hsl(0 0% 21%);
+
+	/* Card */
+	--clr-card-bg: linear-gradient(180deg, hsl(180 7% 14%) 0%, hsl(216 7% 14%) 100%);
+	--clr-card-txt: hsl(0 0% 78%);
+
+	/* Link */
+	--clr-link-txt: hsl(0 100% 98%);
+	--clr-link-background: hsl(0 0% 4%);
+
+	/* Footer */
+	--clr-footer-txt: hsl(0 0% 78%);
+	--clr-footer-bg: hsl(210 5% 7%);
+
+	/* Post */
+	--post-overlay-bg: radial-gradient(hsl(173 100% 4% / 80%), var(--clr-bg));
+	--post-blockquote-txt: hsl(173 100% 94%);
+	--post-blockquote-bg: hsl(173 60% 4%);
+	--post-blockquote-border: hsl(173 10% 10%);
+
+	--clr-code-bg: hsl(173 60% 4%);
+	--clr-code-title: hsl(173 100% 94%);
+	--clr-code-border: hsl(173 10% 10%);
+	--clr-code-line-number: hsl(173 20% 20%);
+	--clr-code-line-highlight: hsl(173 40% 8%);
+	--clr-code-inline-txt: hsl(173 100% 94%);
+	--clr-code-inline-bg: hsl(173 60% 4%);
+
+	--clr-token-1: hsl(173 100% 66%);
+	--clr-token-2: hsl(180 60% 80%);
+	--clr-token-3: hsl(173 100% 66%);
+	--clr-token-4: hsl(0 0% 98%);
+	--clr-token-5: hsl(173 10% 60%);
+
+	/* Input Fields */
+	--input-bg: #181a1b;
+
+	/* Button */
+	--warning: hsla(0, 75%, 60%, 0.9);
+	--warning-hover: hsla(0, 75%, 60%, 1);
+}
+
+html[data-theme='☀️ Daylight'] {
+	/* Global */
+	--clr-primary: hsl(220 100% 50%);
+	--clr-txt: hsl(220 10% 10%);
+	--clr-bg: hsl(0 0% 98%);
+
+	--bg: radial-gradient(hsl(0 0% 98%), var(--clr-bg));
+	--bg-opacity: 0.7;
+
+	/* Menu */
+	--clr-menu-text: hsl(220 10% 10%);
+	--clr-menu-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
+	--clr-menu-arrow-bg: hsl(0 0% 98%);
+	--clr-menu-border: hsl(0 0% 80%);
+
+	--clr-theme-txt: hsl(0 0% 98%);
+	--clr-theme-active: hsl(220 100% 60%);
+	--clr-switch-on-bg: hsl(220 40% 90%);
+	--clr-switch-off-bg: hsl(220 40% 80%);
+
+	/* Hero */
+	--clr-hero-txt: hsl(220 10% 40%);
+	--clr-hero-bg: linear-gradient(270deg, hsl(0 0% 94%) 43%, hsl(0 0% 98%) 66%);
+	--clr-hero-divider-bg: hsl(0 0% 80%);
+	--clr-input-txt: hsl(220 10% 98%);
+	--clr-input-bg: hsl(0 0% 98%);
+	--clr-input-placeholder-txt: hsl(220 10% 60%);
+	--clr-input-border: hsl(0 0% 80%);
+
+	/* Card */
+	--clr-card-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
+	--clr-card-txt: hsl(220 10% 40%);
+
+	/* Link */
+	--clr-link-txt: hsl(220 10% 10%);
+	--clr-link-background: hsl(0 0% 100%);
+
+	/* Footer */
+	--clr-footer-txt: hsl(220 10% 10%);
+	--clr-footer-bg: hsl(0 0% 98%);
+
+	/* Post */
+	--post-overlay-bg: radial-gradient(hsl(0 0% 100% / 60%), var(--clr-bg));
+	--post-blockquote-txt: hsl(0 0% 40%);
+	--post-blockquote-bg: hsl(0 0% 98%);
+	--post-blockquote-border: hsl(0 0% 84%);
+
+	--clr-code-bg: hsl(0 0% 98%);
+	--clr-code-title: hsl(0 0% 40%);
+	--clr-code-border: hsl(0 0% 84%);
+	--clr-code-line-number: hsl(0 0% 60%);
+	--clr-code-line-highlight: hsl(0 0% 94%);
+	--clr-code-inline-txt: hsl(0 0% 98%);
+	--clr-code-inline-bg: hsl(0 0% 20%);
+
+	--clr-token-1: hsl(220 100% 50%);
+	--clr-token-2: hsl(220 60% 50%);
+	--clr-token-3: hsl(220 100% 50%);
+	--clr-token-4: hsl(0 0% 20%);
+	--clr-token-5: hsl(0 0% 60%);
+
+	/* Input Fields */
+	--input-bg: #181a1b;
+
+	/* Button */
+	--warning: hsla(0, 75%, 60%, 0.9);
+	--warning-hover: hsla(0, 75%, 60%, 1);
+}