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

Navbar icons

This commit is contained in:
Sasha Koshka 2022-10-09 14:31:26 -04:00
parent dc64be28b0
commit f4818a5a31
5 changed files with 100 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
prototype/icons/home.svg Normal file
View File

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Created with Vectornator (http://vectornator.io/) -->
<svg height="100%" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 16 16" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M15 8L15 8.00775C15 8.55576 14.5558 9 14.0078 9L13 9L13 13C13 14.1046 12.1046 15 11 15L4.98837 15C3.89022 15 3 14.1098 3 13.0116L3 9L1.999 9C1.44727 9 1 8.55273 1 8.001L1 8L8 1L15 8Z" id="Fill"/>
<path d="M8 10L8 10C9.10457 10 10 10.8954 10 12L10 15L6 15L6 12C6 10.8954 6.89543 10 8 10Z" id="Fill_2"/>
<path d="M5.5 8L10.5 8C10.7761 8 11 8.22386 11 8.5L11 8.5C11 8.77614 10.7761 9 10.5 9L5.5 9C5.22386 9 5 8.77614 5 8.5L5 8.5C5 8.22386 5.22386 8 5.5 8Z" id="Fill_3"/>
</defs>
<g id="Layer-1">
<g opacity="1">
<mask height="14" id="StrokeMask" maskUnits="userSpaceOnUse" width="14" x="1" y="1">
<rect fill="#000000" height="14" stroke="none" width="14" x="1" y="1"/>
<use fill="#ffffff" fill-rule="evenodd" stroke="none" xlink:href="#Fill"/>
</mask>
<use fill="none" mask="url(#StrokeMask)" stroke="#ff0000" stroke-linecap="round" stroke-linejoin="miter" stroke-width="2" xlink:href="#Fill"/>
</g>
<g opacity="1">
<mask height="5" id="StrokeMask_2" maskUnits="userSpaceOnUse" width="4" x="6" y="10">
<rect fill="#000000" height="5" stroke="none" width="4" x="6" y="10"/>
<use fill="#ffffff" fill-rule="evenodd" stroke="none" xlink:href="#Fill_2"/>
</mask>
<use fill="none" mask="url(#StrokeMask_2)" stroke="#ff0000" stroke-linecap="round" stroke-linejoin="miter" stroke-width="2" xlink:href="#Fill_2"/>
</g>
<g opacity="1">
<mask height="1" id="StrokeMask_3" maskUnits="userSpaceOnUse" width="6" x="5" y="8">
<rect fill="#000000" height="1" stroke="none" width="6" x="5" y="8"/>
<use fill="#ffffff" fill-rule="evenodd" stroke="none" xlink:href="#Fill_3"/>
</mask>
<use fill="none" mask="url(#StrokeMask_3)" stroke="#ff0000" stroke-linecap="round" stroke-linejoin="miter" stroke-width="2" xlink:href="#Fill_3"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

18
prototype/icons/notifications.svg Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Created with Vectornator (http://vectornator.io/) -->
<svg height="100%" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 16 16" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M2 10C6 10 2 2 8 2C14 2 10 10 14 10L14 12L2 12L2 10Z" id="Fill"/>
</defs>
<g id="Layer-1">
<g opacity="1">
<mask height="10" id="StrokeMask" maskUnits="userSpaceOnUse" width="12" x="2" y="2">
<rect fill="#000000" height="10" stroke="none" width="12" x="2" y="2"/>
<use fill="#ffffff" fill-rule="evenodd" stroke="none" xlink:href="#Fill"/>
</mask>
<use fill="none" mask="url(#StrokeMask)" stroke="#ff0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" xlink:href="#Fill"/>
</g>
<path d="M6.5 13.5L9.5 13.5" fill="none" opacity="1" stroke="#ff0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

20
prototype/icons/profile.svg Normal file
View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Created with Vectornator (http://vectornator.io/) -->
<svg height="100%" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 16 16" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M4 5C4 2.79086 5.79086 1 8 1C10.2091 1 12 2.79086 12 5C12 7.20914 10.2091 9 8 9C5.79086 9 4 7.20914 4 5Z" id="Fill"/>
</defs>
<g id="Layer-1">
<g opacity="1">
<mask height="8" id="StrokeMask" maskUnits="userSpaceOnUse" width="8" x="4" y="1">
<rect fill="#000000" height="8" stroke="none" width="8" x="4" y="1"/>
<use fill="#ffffff" fill-rule="evenodd" stroke="none" xlink:href="#Fill"/>
</mask>
<use fill="none" mask="url(#StrokeMask)" stroke="#ff0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" xlink:href="#Fill"/>
</g>
<path d="M5.125 8.96875C3.07691 10.3632 2 13.024 2 15L14 15C14 13.024 12.9231 10.3632 10.875 8.96875C10.5815 9.18187 10.3056 9.41651 9.96875 9.5625C11.4658 10.4113 12.5459 12.1342 12.8438 14C10.5784 14 5.42155 14 3.15625 14C3.45407 12.1342 4.53421 10.4113 6.03125 9.5625C5.69444 9.41651 5.41851 9.18187 5.125 8.96875Z" fill="#ff0000" fill-rule="nonzero" opacity="1" stroke="none"/>
<path d="M6.5 4L6.5 4C6.77614 4 7 4.22386 7 4.5L7 5.5C7 5.77614 6.77614 6 6.5 6L6.5 6C6.22386 6 6 5.77614 6 5.5L6 4.5C6 4.22386 6.22386 4 6.5 4Z" fill="#ff0000" fill-rule="nonzero" opacity="1" stroke="none"/>
<path d="M9.5 4L9.5 4C9.77614 4 10 4.22386 10 4.5L10 5.5C10 5.77614 9.77614 6 9.5 6L9.5 6C9.22386 6 9 5.77614 9 5.5L9 4.5C9 4.22386 9.22386 4 9.5 4Z" fill="#ff0000" fill-rule="nonzero" opacity="1" stroke="none"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

6
prototype/index.html
View File

@ -39,9 +39,9 @@ for the JavaScript code in this page.
<div class=buttonListWrap>
<ul class=buttonList>
<li><a href="/">TiBM</a></li>
<li><a href="/">dashboard</a></li>
<li><a href="/">profile</a></li>
<li><a href="/">notifications (17)</a></li>
<li><a class=dashboardButton href="/"><span class=collapse>dashboard</span></a></li>
<li><a class=profileButton href="/"><span class=collapse>profile</span></a></li>
<li><a class=notificationsButton href="/"><span class=collapse>notifications</span> (17)</a></li>
</ul>
</div>

26
prototype/style.css
View File

@ -100,6 +100,7 @@ header .buttonList {
padding: 1rem;
}
/* smallest */
@media screen and not (min-width: 67rem) {
nav .buttonListWrap {
position: relative;
@ -157,6 +158,12 @@ header .buttonList {
}
}
@media screen and not (min-width: 80rem) {
.collapse {
display: none;
}
}
@media screen and (min-width: 80rem) {
#contentWrap {
grid-template-columns: 36rem auto;
@ -201,8 +208,15 @@ header .buttonList {
color: var(--subtle-foreground);
}
.hiddenLabel {
display: none;
}
.files .file::before,
.files .directory::before,
.notificationsButton::before,
.profileButton::before,
.dashboardButton::before,
.watchButton::before,
.starButton::before,
.forkButton::before
@ -225,6 +239,18 @@ header .buttonList {
background-image: url("icons/directory.svg");
}
.dashboardButton::before {
background-image: url("icons/home.svg");
}
.profileButton::before {
background-image: url("icons/profile.svg");
}
.notificationsButton::before {
background-image: url("icons/notifications.svg");
}
.watchButton::before {
background-image: url("icons/watch.svg");
}