From f4818a5a313b8de399cbba2eab2fcc4d82c7b595 Mon Sep 17 00:00:00 2001 From: Sasha Koshka Date: Sun, 9 Oct 2022 14:31:26 -0400 Subject: [PATCH] Navbar icons --- prototype/icons/home.svg | 33 +++++++++++++++++++++++++++++++ prototype/icons/notifications.svg | 18 +++++++++++++++++ prototype/icons/profile.svg | 20 +++++++++++++++++++ prototype/index.html | 6 +++--- prototype/style.css | 26 ++++++++++++++++++++++++ 5 files changed, 100 insertions(+), 3 deletions(-) create mode 100644 prototype/icons/home.svg create mode 100644 prototype/icons/notifications.svg create mode 100644 prototype/icons/profile.svg diff --git a/prototype/icons/home.svg b/prototype/icons/home.svg new file mode 100644 index 0000000..c4c73c9 --- /dev/null +++ b/prototype/icons/home.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/prototype/icons/notifications.svg b/prototype/icons/notifications.svg new file mode 100644 index 0000000..7b363de --- /dev/null +++ b/prototype/icons/notifications.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/prototype/icons/profile.svg b/prototype/icons/profile.svg new file mode 100644 index 0000000..b6b3924 --- /dev/null +++ b/prototype/icons/profile.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/prototype/index.html b/prototype/index.html index de6303f..9a4467c 100644 --- a/prototype/index.html +++ b/prototype/index.html @@ -39,9 +39,9 @@ for the JavaScript code in this page.
diff --git a/prototype/style.css b/prototype/style.css index 9741812..f795668 100644 --- a/prototype/style.css +++ b/prototype/style.css @@ -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"); }