From 276512841fe5e612fb7500f89fd1152ec8e60f1a Mon Sep 17 00:00:00 2001 From: Franklin Date: Mon, 13 Mar 2023 09:16:47 -0400 Subject: [PATCH] Made navbar fixed position --- css/body.css | 3 ++ css/navbar.css | 28 ++++++++++++------- dist/body-1dfd5cf65077c12.css | 3 ++ dist/index.html | 3 +- ...c0918b7.css => navbar-c70cbfee705a9cf.css} | 28 ++++++++++++------- index.html | 1 + 6 files changed, 45 insertions(+), 21 deletions(-) create mode 100644 css/body.css create mode 100644 dist/body-1dfd5cf65077c12.css rename dist/{navbar-3dafbc875c0918b7.css => navbar-c70cbfee705a9cf.css} (87%) diff --git a/css/body.css b/css/body.css new file mode 100644 index 0000000..b036c34 --- /dev/null +++ b/css/body.css @@ -0,0 +1,3 @@ +body { + margin: 0; /* Remove body margins */ +} \ No newline at end of file diff --git a/css/navbar.css b/css/navbar.css index f44b11b..1f93ce3 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -1,18 +1,16 @@ -body { - margin: 0; /* Remove body margins */ -} + /* Mobile View */ .navbar-background { + position: fixed; + width: 100%; display: flex; flex-direction: row; justify-content: end; align-items: center; align-items: stretch; background-color: #252631; - padding: 15px; - padding-right: 40px; min-height: 44px; } .navbar-container { @@ -21,14 +19,26 @@ body { justify-content: flex-start; align-items: stretch; flex-grow: 1; + padding: 15px; } .navbar-hamburger { font-size: 20pt; color: white; display: flex; - align-items: start; - margin-top: 10px; + justify-content: center; + align-items: center; + margin-top: 5px; max-height: 35px; + min-width: 30px; + padding: 15px; +} +.navbar-hamburger:hover { + background-color: #ffffff14; + font-size: 22pt; + font-weight: bold; + border-radius: 3px; + transition-duration: 0.3s; + cursor: pointer; } .navbar-closed{ display: flex; @@ -47,9 +57,8 @@ body { .navbar-item { color: white; font-size: 12pt; - padding-left: 20px; - padding-right: 20px; padding-top: 10px; + padding-left: 5px; padding-bottom: 10px; font-family: Source Sans Pro; } @@ -64,7 +73,6 @@ body { .navbar-title { color: white; font-size: 15pt; - padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; diff --git a/dist/body-1dfd5cf65077c12.css b/dist/body-1dfd5cf65077c12.css new file mode 100644 index 0000000..b036c34 --- /dev/null +++ b/dist/body-1dfd5cf65077c12.css @@ -0,0 +1,3 @@ +body { + margin: 0; /* Remove body margins */ +} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index c545bf5..1357e5a 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,7 +1,8 @@ Yew App - + + diff --git a/dist/navbar-3dafbc875c0918b7.css b/dist/navbar-c70cbfee705a9cf.css similarity index 87% rename from dist/navbar-3dafbc875c0918b7.css rename to dist/navbar-c70cbfee705a9cf.css index f44b11b..1f93ce3 100644 --- a/dist/navbar-3dafbc875c0918b7.css +++ b/dist/navbar-c70cbfee705a9cf.css @@ -1,18 +1,16 @@ -body { - margin: 0; /* Remove body margins */ -} + /* Mobile View */ .navbar-background { + position: fixed; + width: 100%; display: flex; flex-direction: row; justify-content: end; align-items: center; align-items: stretch; background-color: #252631; - padding: 15px; - padding-right: 40px; min-height: 44px; } .navbar-container { @@ -21,14 +19,26 @@ body { justify-content: flex-start; align-items: stretch; flex-grow: 1; + padding: 15px; } .navbar-hamburger { font-size: 20pt; color: white; display: flex; - align-items: start; - margin-top: 10px; + justify-content: center; + align-items: center; + margin-top: 5px; max-height: 35px; + min-width: 30px; + padding: 15px; +} +.navbar-hamburger:hover { + background-color: #ffffff14; + font-size: 22pt; + font-weight: bold; + border-radius: 3px; + transition-duration: 0.3s; + cursor: pointer; } .navbar-closed{ display: flex; @@ -47,9 +57,8 @@ body { .navbar-item { color: white; font-size: 12pt; - padding-left: 20px; - padding-right: 20px; padding-top: 10px; + padding-left: 5px; padding-bottom: 10px; font-family: Source Sans Pro; } @@ -64,7 +73,6 @@ body { .navbar-title { color: white; font-size: 15pt; - padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; diff --git a/index.html b/index.html index 298ad1a..a47d27c 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ Yew App +