Bigger navbar, bettter home button, background

_data/navigation.yml

@@ -1,5 +1,3 @@
-- name: Home
-  link: /
 - name: Test
   link: /
 - name: Test

_includes/navigation.html

@@ -1,7 +1,12 @@
 <nav>
+	<a class="home" href="/">
+		<img alt="Home" width="28" height="28" src="/assets/debuggy.svg">
+		<span>Debuggy</span>
+	</a>
+
 	{% for item in site.data.navigation %}
 	{% capture htmllink %} {{item.link}}.html {% endcapture %}
-	<a href="{{item.link}}" {% if page.url==item.link or page.url==htmllink %} class="current" {%endif%}>
+	<a class="button" href="{{item.link}}" {% if page.url==item.link or page.url==htmllink %} class="current" {%endif%}>
 		{{item.name}}
 	</a>
 	{% endfor %}

_sass/colors.scss

@@ -1,22 +1,21 @@
 :root {
-    /* Common colors */
-    --debuggy-dark-blue: rgb(42, 48, 163);
-    --debuggy-blue: rgb(49, 56, 188);
-    --debuggy-light-blue: rgb(52, 59, 201);
-
     /* Main site colors */
-    --background-color: hsl(0, 0%, 100%);
+    --background-color: rgb(34, 39, 133);
     --navbar-color: rgb(49, 56, 188, .8);
     --navbar-border-color: rgb(42, 48, 163, .8);
 
     /* Text and links */
     --link-color: hsl(240, 100%, 50%);
     --link-color-hover: hsl(177, 70%, 41%);
-    --text-color: hsl(0, 0%, 0%);
+    --text-color: rgb(192, 195, 248);
 
     /* Miscellaneous Colors */
-    --debuggy-team: hsl(237, 100%, 79%);
-    --debuggy-team-border: hsl(237, 84%, 64%);
+    --debuggy-dark-blue: rgb(42, 48, 163);
+    --debuggy-blue: rgb(49, 56, 188);
+    --debuggy-light-blue: rgb(52, 59, 201);
+
+    --card-color: hsl(237, 100%, 79%);
+    --card-border-color: hsl(237, 84%, 64%);
 
     --debuggy-moderation: hsl(9, 69%, 68%);
     --debuggy-moderation-border: hsl(9, 64%, 55%);

_sass/navigation.scss

@@ -7,29 +7,54 @@ nav {
 
 	display: flex;
 	flex-direction: row;
+	min-height: 3.25rem;
 
 	border-bottom: 3pt solid var(--navbar-border-color);
 	background-color: var(--navbar-color);
 
-	li {
-		display: inline;
+	.home {
+		align-items: center;
+		justify-content: center;
+		display: flex;
+		min-width: 7rem;
+		margin: 0px 10px;
+		text-decoration: none;
+
+		box-shadow: rgba(0, 0, 0, 0.58) 0px 0px 9pt;
+		transition: all 250ms ease 0s;
+		background-color: var(--debuggy-dark-blue);
+		border-radius: 3px;
+		color: var(--text-color);
+
+		&:hover {
+			box-shadow: rgba(69, 69, 70, 0.47) 0px 0px 12pt;
+			background-color: var(--debuggy-light-blue);
+		}
+
+		span {
+			padding-left: 0.5rem;
+		}
 	}
 
-	a {
+	.button {
+		align-items: center;
+		justify-content: center;
+		display: flex;
+		min-width: 5rem;
+
 		padding: 10.6px;
 		box-shadow: rgba(0, 0, 0, 0.58) 0px 0px 9pt;
 		border: 0px;
 		outline: 0px;
 		border-radius: 3px;
 		margin: 0px 10px;
 		transition: all 250ms ease 0s;
-		color: white;
+		color: var(--text-color);
 		background-color: var(--debuggy-dark-blue);
 		text-decoration: none;
 
 		&:hover {
 			box-shadow: rgba(69, 69, 70, 0.47) 0px 0px 12pt;
-			color: white;
 			background-color: var(--debuggy-light-blue);
 		}
 	}

assets/css/style.scss

@@ -11,6 +11,7 @@
 
 h1, h2, p, li, a {
 	font-family: var(--font);
+	text-rendering: optimizeLegibility;
 }
 
 p {
@@ -27,7 +28,6 @@ a {
 
 main {
 	min-height: 100%;
-	max-width: 90em;
 	margin-inline: auto;
 	text-align: center;
 }
@@ -40,30 +40,50 @@ main {
 /** Fix annoying padding */
 body {
 	margin: 0;
-}
 
-/** Lists don't play super well with being centered */
-ul, ol {
-	max-width: 80ch;
-	margin-inline: auto;
-	text-align: left;
+	background-color: var(--background-color);
+	background-image: url("../background.png");
+	background-repeat: repeat;
+	background-size: 500px;
 }
 
-.home {
+.section {
 
-	justify-content: center;
+	display: block;
 	padding: 3rem;
 
-	.dev-team-text {
-		margin-top: 10%;
-	}
+}
+
+.solid {
+
+	box-shadow: rgba(0, 0, 0, 0.58) 0px 0px 9pt;
+	background-color: var(--debuggy-dark-blue);
+	color: var(--text-color);
+	border: 12px solid var(--background-color);
+	border-radius: 8px;
+	margin-left: 100px;
+	margin-right: 100px;
 
 }
 
+.below {
+
+	margin-top: 7rem;
+
+}
+
+/** Lists don't play super well with being centered */
+ul, ol {
+	max-width: 80ch;
+	margin-inline: auto;
+	text-align: left;
+}
+
 .home-card {
 
-	background-color: var(--debuggy-team);
-	border: 3px solid var(--debuggy-team-border);
+	box-shadow: rgba(0, 0, 0, 0.58) 0px 0px 9pt;
+	background-color: var(--card-color);
+	border: 3px solid var(--card-border-color);
 
 	max-width: 30rem;
 	margin-left: auto;
@@ -74,6 +94,8 @@ ul, ol {
 
 .profiles {
 
+	color: black;
+
 	h1 {
 		margin: 0;
 		font-size: 28px;
@@ -148,15 +170,15 @@ ul, ol {
 	}
 
 	.profile-card {
-		background-color: var(--debuggy-team);
-		border: 3px solid var(--debuggy-team-border);
+		background-color: var(--card-color);
+		border: 3px solid var(--card-border-color);
 
-		margin: 5rem 0.5rem 0;
-		height: 80%;
+		margin: 5rem 2rem 0;
+		height: 23rem;
 	}
 
 	.profile-picture {
-		border: 3px solid var(--debuggy-team-border);
+		border: 3px solid var(--card-border-color);
 	}
 }
 
@@ -189,7 +211,7 @@ ul, ol {
 	border: none;
 	padding: 15px 32px;
 	color: var(--text-color);
-	background-color: var(--debuggy-team);
+	background-color: var(--card-color);
 
 	&:hover {
 		filter: saturate(200%);