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");
}