diff --git a/src/components/Nav.vue b/src/components/Nav.vue index e1041f1..b898813 100644 --- a/src/components/Nav.vue +++ b/src/components/Nav.vue @@ -113,13 +113,15 @@ nav { li { font-size: 1.5rem; font-weight: lighter; - margin: 15px 5px 0 5px; + margin: 22px 10px 0 10px; cursor: pointer; transition: 100ms ease-in-out; &:first-child { - font-size: 1.5rem; + font-size: 2rem; font-weight: bold; + margin-top: 17px; + margin-left: 0; } &:hover { @@ -162,36 +164,50 @@ nav { @media screen and (max-width: 768px) { nav { + button { + outline: 1px solid var(--bs-primary); + + &:focus { + box-shadow: none; + outline: 1px solid var(--bs-primary); + } + } + .navbar-collapse { background: var(--bs-secondary); + border-radius: 5px; + border: 1px solid var(--bs-primary) } - ul { - display: flex; - flex-direction: column; - text-align: center; - width: 100%; + #mainNav { - li { - line-height: 1; - padding: 0 0 20px 0; - border-bottom: 1px solid rgba(255, 255, 255, .1); - } - } - - form { - label { - display: none; - } - - input[type="search"] { - margin-bottom: 15px; + ul { + display: flex; + flex-direction: column; + text-align: center; width: 100%; + + li { + line-height: 1; + padding: 0 0 20px 0; + border-bottom: 1px solid rgba(255, 255, 255, .1); + } } - button { - display: block; - margin-top: -15px; + form { + label { + display: none; + } + + input[type="search"] { + margin-bottom: 15px; + width: 100%; + } + + button { + display: block; + margin-top: -15px; + } } } }