Fixing typeography, footer icons, and footer styles.

package.json

@@ -30,7 +30,8 @@
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"iconify-icon": "^1.0.3",
-		"postcss": "^8.4.14",
+		"postcss": "^8.4.21",
+		"postcss-import": "^15.1.0",
 		"postcss-load-config": "^4.0.1",
 		"postcss-nested": "^6.0.0",
 		"postcss-preset-env": "^8.0.1",

pnpm-lock.yaml

@@ -17,7 +17,8 @@ specifiers:
   eslint-config-prettier: ^8.5.0
   eslint-plugin-svelte3: ^4.0.0
   iconify-icon: ^1.0.3
-  postcss: ^8.4.14
+  postcss: ^8.4.21
+  postcss-import: ^15.1.0
   postcss-load-config: ^4.0.1
   postcss-nested: ^6.0.0
   postcss-preset-env: ^8.0.1
@@ -52,6 +53,7 @@ devDependencies:
   eslint-plugin-svelte3: 4.0.0_tmo5zkisvhu6htudosk5k7m6pu
   iconify-icon: 1.0.3
   postcss: 8.4.21
+  postcss-import: 15.1.0_postcss@8.4.21
   postcss-load-config: 4.0.1_postcss@8.4.21
   postcss-nested: 6.0.0_postcss@8.4.21
   postcss-preset-env: 8.0.1_postcss@8.4.21
@@ -2633,6 +2635,11 @@ packages:
     engines: {node: '>=8.6'}
     dev: true
 
+  /pify/2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /playwright-core/1.29.2:
     resolution: {integrity: sha512-94QXm4PMgFoHAhlCuoWyaBYKb92yOcGVHdQLoxQ7Wjlc7Flg4aC/jbFW7xMR52OfXMVkWicue4WXE7QEegbIRA==}
     engines: {node: '>=14'}
@@ -2796,6 +2803,18 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /postcss-import/15.1.0_postcss@8.4.21:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.21
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.1
+    dev: true
+
   /postcss-initial/4.0.1_postcss@8.4.21:
     resolution: {integrity: sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==}
     peerDependencies:
@@ -3067,6 +3086,12 @@ packages:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
 
+  /read-cache/1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+    dependencies:
+      pify: 2.3.0
+    dev: true
+
   /readable-stream/1.1.14:
     resolution: {integrity: sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==}
     dependencies:

postcss.config.cjs

@@ -1,8 +1,9 @@
 const autoprefixer = require('autoprefixer');
+const atImport = require('postcss-import');
 const postcssNested = require('postcss-nested');
 
 const config = {
-	plugins: [autoprefixer, postcssNested]
+	plugins: [autoprefixer(), atImport(), postcssNested]
 };
 
 module.exports = config;

src/lib/components/contactHub/index.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+	import email from '@iconify-icons/material-symbols/mail';
+	import github from '@iconify-icons/radix-icons/github-logo';
+	import linkedin from '@iconify-icons/radix-icons/linkedin-logo';
+	import twitter from '@iconify-icons/radix-icons/twitter-logo';
+  
+	export let showFacebook: boolean = false;
+	export let showInstagram: boolean = false;
+	export let showTwitter: boolean = false;
+	export let showLinkedIn: boolean = false;
+	export let showReddit: boolean = false;
+	export let showGithub: boolean = false;
+	export let showYoutube: boolean = false;
+	export let showEmail: boolean = false;
+	export let userNames: Record<string, string>;
+	export let showText: boolean = false;
+	export let justify: boolean = false;
+</script>
+
+{#if showText}
+	<h3>Contact Information</h3>
+{/if}
+<div class:justifyCenter={justify}>
+	{#if showTwitter && userNames?.twitter}
+		<span>
+			<a
+				href={`https://www.twitter.com/${userNames.twitter}`}
+				target="_blank"
+				title="Contact through Twitter"
+				aria-label="Contact through Twitter"
+				rel="noreferrer"
+			>
+				<iconify-icon icon={github} class="twitter-contact" width="24" height="24" />
+			</a>
+		</span>
+	{/if}
+	{#if showLinkedIn && userNames?.linkedIn}
+		<span>
+			<a
+				href={`https://www.linkedin.com/in/${userNames.linkedIn}`}
+				target="_blank"
+				title="Contact through LinkedIn"
+				aria-label="Contact through LinkedIn"
+				rel="noreferrer"
+			>
+				<iconify-icon icon={linkedin} class="linkedin-contact" width="24" height="24" />
+			</a>
+		</span>
+  {/if}
+	{#if github && userNames?.github}
+		<span>
+			<a
+				href={`https://www.github.com/${userNames.github}`}
+				target="_blank"
+				title="View Github"
+				aria-label="View Github"
+				rel="noreferrer"
+			>
+			<iconify-icon icon={github} class="github-contact" width="24" height="24" />
+			</a>
+		</span>
+  {/if}
+	{#if email && userNames?.email}
+		<span>
+			<a
+				href={`mailto:${userNames.email}`}
+				target="_blank"
+				title="Contact by email"
+				aria-label="Contact by email"
+				rel="noreferrer"
+			>
+				<iconify-icon icon={email} class="email-contact" width="24" height="24" />
+			</a>
+		</span>
+  {/if}
+</div>
+
+<style lang="postcss">
+	div {
+		display: flex;
+		flex-wrap: wrap;
+		/* margin-top: 1rem; */
+		align-items: center;
+
+		&.justifyCenter {
+			justify-content: center;
+		}
+
+		--facebookColor: #3b5999;
+		--instagramColor: #8e37b8;
+		--redditColor: #ff4500;
+		--twitterColor: #1da1f2;
+		--linkedInColor: #0a66c2;
+		--youTubeColor: #ff0000;
+		--githubColor: #72757e;
+		--emailColor: var(--linkHover);
+	}
+
+  iconify-icon {
+    transition: transform 0.2s cubic-bezier(0.65, 0, 0.35, 1);
+    &:hover {
+      transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
+      transform: translateY(-4px);
+    }
+  }
+
+  a {
+    font-size: 4rem;
+    margin: 1.5rem;
+
+    @media (max-width: 550px) {
+      font-size: 3.55rem;
+    }
+  }
+  .facebook-contact {
+    color: var(--textColor);
+    &:hover {
+      color: var(--facebookColor);
+    }
+  }
+  .instagram-contact {
+    color: var(--textColor);
+    &:hover {
+      color: var(--instagramColor);
+    }
+  }
+  .reddit-contact {
+    color: var(--textColor);
+    &:hover {
+      color: var(--redditColor);
+    }
+  }
+  .twitter-contact {
+    color: var(--textColor);
+    &:hover {
+      color: var(--twitterColor);
+    }
+  }
+  .linkedin-contact {
+    color: var(--textColor);
+    &:hover {
+      color: var(--linkedInColor);
+    }
+  }
+  .youtube-contact {
+    color: var(--textColor);
+    &:hover {
+      color: var(--youTubeColor);
+    }
+  }
+  .github-contact {
+    color: var(--textColor);
+    &:hover {
+      color: var(--githubColor);
+    }
+  }
+  .email-contact {
+    color: var(--textColor);
+    &:hover {
+      color: var(--linkHover);
+    }
+  }
+</style>

src/lib/components/footer/index.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import github from '@iconify-icons/radix-icons/github-logo';
-	import linkedin from '@iconify-icons/radix-icons/linkedin-logo';
-	import email from '@iconify-icons/material-symbols/mail';
+	import ContactHub from '$lib/components/contactHub/index.svelte';
 	const userNames = {
     github: 'BradNut',
     linkedIn: 'bradley-shellnut',
@@ -11,11 +9,7 @@
 </script>
 
 <footer>
-	<div>
-		<iconify-icon icon={github} width="24" height="24" />
-		<iconify-icon icon={linkedin} width="24" height="24" />
-		<iconify-icon icon={email} width="24" height="24" />
-	</div>
+	<ContactHub showGithub showLinkedIn showEmail justify {userNames} />
 	<nav class="footer-list" aria-label="footer navigation">
 		<a class:active={$page.url.pathname === '/'} href="/">Home</a>
 		<a class:active={$page.url.pathname === '/about'} href="/about">About</a>
@@ -29,21 +23,20 @@
 		Bradley Shellnut &copy; 2012 - {new Date().getFullYear()}
 	</p>
 </footer>
-<!-- 
-<style lang="postcss">
-	display: grid;
-  grid-template-rows: repeat(2, 1fr);
-  background: var(--footerBackground);
-  align-items: center;
-  align-content: center;
-  gap: 1rem;
 
-  margin-top: 6rem;
+<style lang="postcss">
+	footer {
+		display: grid;
+		grid-template-rows: repeat(3, 1fr);
+		background: var(--footerBackground);
+		place-content: center;
+		place-items: center;
 		padding: 2rem;
 
 		@media (max-width: 800px) {
 			margin-top: 2rem;
 		}
+	}
 
   hr {
     display: block;
@@ -54,15 +47,16 @@
     width: 100%;
     border-width: thin 0 0 0;
     transition: inherit;
-    /* border-color: var(--lightShade);
-    color: var(--lightShade); */
+    border-color: var(--lightShade);
+    color: var(--lightShade);
   }
 
   p {
     margin: 0;
     padding: 0.2rem;
     font-weight: 600;
-    /* color: var(--lightShade); */
+		text-align: center;
+    color: var(--lightShade);
   }
 
   ul {
@@ -81,4 +75,4 @@
 		margin: 1rem;
 		line-height: 1rem;
 	}
-</style> -->
+</style>

src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import 'iconify-icon';
 	import Header from '$lib/components/header/index.svelte';
 	import Footer from '$lib/components/footer/index.svelte';
 	import '$root/styles/styles.pcss';
@@ -13,7 +14,7 @@
 </div>
 
 <style lang="postcss">
-	/* .loading {
+	.loading {
 		position: fixed;
 		top: 50%;
 		left: 50%;
@@ -26,7 +27,7 @@
 		h3 {
 			color: white;
 		}
-	} */
+	}
 
 	.background {
 		background: black;

src/styles/styles.pcss

@@ -1,3 +1,4 @@
 @import 'reset.pcss';
 @import 'global.pcss';
 /* @import '$root/styles/theme.pcss'; */
+@import 'typeography.pcss';

src/styles/typeography.pcss

@@ -0,0 +1,73 @@
+@font-face {
+	font-family: 'Fira Code';
+	src: url('/fonts/Fira_Code/static/FiraCode-SemiBold.ttf') format('ttf');
+	font-weight: 600;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Fira Sans';
+	src: url('/fonts/Fira_Sans/FiraSans-Regular.ttf') format('ttf');
+	font-weight: normal;
+	font-style: normal;
+}
+
+html {
+	font-family: 'Fira Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
+	/* TODO: Change to theme value of light or dark */
+	font-weight: normal;
+	color: var(--white);
+}
+
+p,
+li {
+	letter-spacing: 0.5px;
+	font-size: 1.5rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-family: 'Fira Code', monospace, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+		Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
+	color: var(--white);
+	font-weight: 600;
+	margin: 1rem 0;
+}
+
+h1 {
+	font-size: var(--h1);
+}
+
+h2 {
+	font-size: var(--h2);
+}
+
+h3 {
+	font-size: var(--h3);
+}
+
+h4 {
+	font-size: var(--h4);
+}
+
+h5 {
+	font-size: var(--h5);
+}
+
+body {
+	font-family: 'Fira Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
+}
+
+a {
+	color: var(--white);
+}
+
+.center {
+	text-align: center;
+}

svelte.config.js

@@ -1,16 +1,11 @@
 import adapter from '@sveltejs/adapter-auto';
-// import { vitePreprocess } from '@sveltejs/kit/vite';
-import preprocess from 'svelte-preprocess';
+import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: [
-		preprocess({
-			postcss: true
-		})
-	],
+	preprocess: [vitePreprocess()],
 	kit: {
 		adapter: adapter(),
 		alias: {