design revamp and tabs

assets/scss/base/components.scss

@@ -0,0 +1,12 @@
+.button {
+	background: #0060ff;
+	color: white;
+	width: max-content;
+	font-size: clamp(1em,2vw,1em);
+	padding: 0.75em;
+	display: flex;
+	justify-content: center;
+	text-decoration: none;
+	border-radius: 100em;
+	font-weight: 700;
+}

assets/scss/index/hero.scss

@@ -1,29 +1,36 @@
 .hero .container {
 	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: auto auto auto;
+	grid-template-areas:
+		"img"
+		"txt"
+		"cta";
+	@media (min-width: 600px) {
 		grid-template-columns: 1fr 1fr;
 		grid-template-rows: auto auto;
+		grid-template-areas:
+			"txt img"
+			"cta img";
+	}
 	gap: 1em;
 }
 .hero img {
+	grid-area: img;
 	width: 100%;
-	grid-row: 1/3;
+	max-height: 160px;
+	@media (min-width: 600px) {max-height: unset;}
 }
-.headline {
+.hero .cta {
+	grid-area: cta;
+	align-self: start;
+}
+.hero .headline {
+	grid-area: txt;
 	font-size: clamp(1.4em, 7vw, 3em);
-	max-width: 11ch;
 	line-height: 1.2;
 	align-self: end;
+	@media (min-width: 600px) {
+		max-width: 11ch;
+	}
 }
-.button {
-	background: #0060ff;
-	color: white;
-	width: max-content;
-	font-size: clamp(0.75em,2vw,1em);
-	padding: 0.75em;
-	display: flex;
-	justify-content: center;
-	text-decoration: none;
-	border-radius: 100em;
-	font-weight: 700;
-}
-.cta {grid-column: 1; grid-row: 2; align-self: start;}

assets/scss/main.scss

@@ -2,6 +2,7 @@
 @import "base/sections.scss";
 @import "base/page.scss";
 @import "base/list.scss";
+@import "base/components.scss";
 
 @import "index/hero.scss";
 @import "index/cards.scss";

assets/scss/partials/site-header.scss

@@ -32,8 +32,9 @@ body {margin-bottom: 64px; min-height: calc(100vh - 64px)}
 		li {
 			flex: 1;
 			border-bottom: 4px solid #212121;
+			color: #999;
 			&.active {
-				font-weight: 700;
+				color: white;
 				border-bottom: 4px solid #0060ff;
 			}
 			a {

config.toml

@@ -31,9 +31,16 @@ name = "Code"
 url = "/code/"
 weight = 30
 
+[[menu.main]]
+identifier = "design"
+pre = "<i class='fa fa-desktop' aria-hidden='true'></i>"
+name = "Design"
+url = "/design/"
+weight = 40
+
 [[menu.main]]
 identifier = "blog"
 pre = "<i class='fa fa-pencil' aria-hidden='true'></i>"
 name = "Blog"
 url = "/blog/"
-weight = 40
+weight = 50

content/design/_index.md

@@ -0,0 +1,3 @@
+---
+title: "Design portfolio"
+---

layouts/index.html

@@ -3,8 +3,8 @@
 	<section class="section hero">
 		<div class="container">
 			<img src="/images/thought.svg" alt="Abstract illustration of a thought process" title="Abstract illustration of a thought process">
-			<h2 class="headline">i make order<br>out of chaos.</h1>
-			<a class="button cta" href="#projects">view my work</a>
+			<h2 class="headline">i make order out of chaos.</h1>
+			<a class="button cta" href="#projects">summary of my work</a>
 		</div>
 	</section>
 	<section class="section" id="process">

resources/_gen/assets/scss/scss/main.scss_48b060fe05b0a273d182ef83c0605941.json

@@ -1 +1 @@
-{"Target":"scss/main.min.69d4711fe0e0bb357457852f01b5350f97d301b6069516d46c11edae2910bda0.css","MediaType":"text/css","Data":{"Integrity":"sha256-adRxH+DguzV0V4UvAbU1D5fTAbYGlRbUbBHtrikQvaA="}}
+{"Target":"scss/main.min.397e9f4be3c1c6acf6a7296d927f7de2c656cb95a7be3eca73cea90a66bab151.css","MediaType":"text/css","Data":{"Integrity":"sha256-OX6fS+PBxqz2pyltkn994sZWy5Wnvj7Kc86pCma6sVE="}}