From e8451b8bed906f208c9b5c029b8f0c57d9ae198a Mon Sep 17 00:00:00 2001
From: Sasha Koshka <sashakoshka@tebibyte.media>
Date: Sat, 8 Oct 2022 20:07:20 -0400
Subject: [PATCH] Move repo tabs to navbar

---
 prototype/index.html | 39 ++++++++++++++------------
 prototype/style.css  | 66 ++++++++++++++++++++++++++------------------
 2 files changed, 60 insertions(+), 45 deletions(-)

diff --git a/prototype/index.html b/prototype/index.html
index c431d71..86b9bcc 100644
--- a/prototype/index.html
+++ b/prototype/index.html
@@ -35,12 +35,27 @@ for the JavaScript code in this page.
 
 <div id=stickyWrap>
 	<nav>
-		<ul class=buttonList>
-			<li><a href="/">tebibyte</a></li>
-			<li><a href="/">dashboard</a></li>
-			<li><a href="/">profile</a></li>
-			<li><a href="/">notifications</a></li>
-		</ul>
+		<div class=buttonListWrap>
+			<ul class=buttonList>
+				<li><a href="/">tebibyte</a></li>
+				<li><a href="/">dashboard</a></li>
+				<li><a href="/">profile</a></li>
+				<li><a href="/">notifications</a></li>
+			</ul>
+		</div>
+		
+		<div class=buttonListWrap>
+			<ul class=buttonList>
+				<li><a href="/">code</a></li>
+				<li><a href="/">history</a></li>
+				<li><a href="/">tags</a></li>
+				<li><a href="/">issues</a></li>
+				<li><a href="/">pull requests</a></li>
+				<li><a href="/">projects</a></li>
+				<li><a href="/">releases</a></li>
+				<li><a href="/">settings</a></li>
+			</ul>
+		</div>
 	</nav>
 </div>
 
@@ -49,18 +64,6 @@ for the JavaScript code in this page.
 	<a href="/">owner</a>/<a href="/">repo</a>/<a href="/">branch</a> as user
 </header>
 
-<div class=tabs id=mainTabs>
-	<ul class=buttonList>
-		<li><a href="/">code</a></li>
-		<li><a href="/">history</a></li>
-		<li><a href="/">tags</a></li>
-		<li><a href="/">issues</a></li>
-		<li><a href="/">pull requests</a></li>
-		<li><a href="/">projects</a></li>
-		<li><a href="/">releases</a></li>
-		<li><a href="/">settings</a></li>
-	</ul>
-</div>
 
 <div id=contentWrap>
 	<aside>		
diff --git a/prototype/style.css b/prototype/style.css
index 63b1b24..61a4636 100644
--- a/prototype/style.css
+++ b/prototype/style.css
@@ -56,7 +56,7 @@ h3 {
 	margin: 1em 0;
 }
 
-#contentWrap, #mainTabs, header, nav, footer {
+#contentWrap, header, nav, footer {
 	max-width: 90rem;
 	margin: auto;
 }
@@ -88,7 +88,7 @@ nav {
 	display: inline;
 }
 
-.buttonList a {
+.buttonList li:not(:last-child) a {
 	margin-right: 1em;
 }
 
@@ -100,18 +100,53 @@ header {
 	padding: 1rem;
 }
 
-@media screen and not (min-width: 60rem) {
+@media screen and not (min-width: 66rem) {
 	aside {
 		margin-bottom: 1rem;
 	}
+
+	nav .buttonListWrap {
+		position: relative;
+	}
+
+	nav .buttonListWrap .buttonList {
+		overflow-x: auto;
+		white-space: nowrap;
+		scrollbar-width: thin;
+		width: 100%;
+	}
+	
+	nav .buttonListWrap::after {
+		position: absolute;
+		display: block;
+		width: 1rem;
+		height: 100%;
+		top: 0;
+		right: 0;
+		content: "";
+		background-image: linear-gradient(
+			to right,
+			transparent       0%,
+			var(--background) 100%);
+	}
 }
 
-@media screen and (min-width: 60rem) {
+@media screen and (min-width: 66rem) {
 	#contentWrap {
 		display: grid;
 		grid-gap: 1rem;
 		grid-template-columns: 24rem auto;
 	}
+	
+	nav {
+		display: grid;
+		grid-grid: 1rem;
+		grid-template-columns: auto auto;
+	}
+
+	nav > .buttonListWrap:last-child {
+		text-align: right;
+	}
 }
 
 @media screen and (min-width: 80rem) {
@@ -120,29 +155,6 @@ header {
 	}
 }
 
-.tabs {
-	padding: 1rem 1rem 0 1rem;
-	position: relative;
-}
-
-.tabs::after {
-	position: absolute;
-	display: block;
-	width: 1rem;
-	height: 100%;
-	top: 0;
-	right: 1rem;
-	content: "";
-	background-image: linear-gradient(to right, transparent 0%, var(--background) 100%);
-}
-
-.tabs ul {
-	overflow-x: auto;
-	white-space: nowrap;
-	scrollbar-width: thin;
-	width: 100%;
-}
-
 .files {
 	border-collapse:collapse;
 	border: none;