sashakoshka
/
mintea
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move repo tabs to navbar

This commit is contained in:
Sasha Koshka 2022-10-08 20:07:20 -04:00
parent 15d79e4d44
commit e8451b8bed
2 changed files with 60 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
prototype/index.html
View File

@ -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>

66
prototype/style.css
View File

@ -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;