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.
@@ -49,18 +64,6 @@ for the JavaScript code in this page.
owner /repo /branch as user
-
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;