diff options
author | Trae <trae@traeblain.com> | 2020-03-13 21:09:20 -0500 |
---|---|---|
committer | Trae <trae@traeblain.com> | 2020-03-13 21:09:20 -0500 |
commit | 7cc525b2a65ce07a340562864682e663ab46bb84 (patch) | |
tree | 29d965bad36a245a40417e60755c1c8853b30e39 /app.scss | |
parent | 46fd4f4da18ed505264181cfa8f6a776abef9e2f (diff) | |
download | homer-7cc525b2a65ce07a340562864682e663ab46bb84.tar.gz homer-7cc525b2a65ce07a340562864682e663ab46bb84.tar.zst homer-7cc525b2a65ce07a340562864682e663ab46bb84.zip |
Added Hamburger Menu for small screens per Bulma spec.
Diffstat (limited to 'app.scss')
-rw-r--r-- | app.scss | 13 |
1 files changed, 9 insertions, 4 deletions
@@ -175,7 +175,7 @@ body { | |||
175 | } | 175 | } |
176 | } | 176 | } |
177 | } | 177 | } |
178 | .navbar { | 178 | .navbar, .navbar-menu { |
179 | background-color: $secondary-color; | 179 | background-color: $secondary-color; |
180 | 180 | ||
181 | a { | 181 | a { |
@@ -186,6 +186,9 @@ body { | |||
186 | } | 186 | } |
187 | } | 187 | } |
188 | } | 188 | } |
189 | .navbar-end { | ||
190 | text-align: right; | ||
191 | } | ||
189 | } | 192 | } |
190 | 193 | ||
191 | #main-section { | 194 | #main-section { |
@@ -320,7 +323,7 @@ body { | |||
320 | background-color: lighten( $secondary-color, 6% ); | 323 | background-color: lighten( $secondary-color, 6% ); |
321 | border-radius: 5px; | 324 | border-radius: 5px; |
322 | padding: 2px 12px 2px 30px; | 325 | padding: 2px 12px 2px 30px; |
323 | margin: 10px 0; | 326 | margin: 0 0 0 12px; |
324 | transition: all 100ms linear; | 327 | transition: all 100ms linear; |
325 | color: #ffffff; | 328 | color: #ffffff; |
326 | height: 30px; | 329 | height: 30px; |
@@ -337,12 +340,13 @@ body { | |||
337 | .search-label::before { | 340 | .search-label::before { |
338 | font-family: 'Font Awesome 5 Free'; | 341 | font-family: 'Font Awesome 5 Free'; |
339 | position: absolute; | 342 | position: absolute; |
340 | top: 12px; | 343 | top: 4px; |
341 | left: 8px; | 344 | left: 16px; |
342 | content: "\f002"; | 345 | content: "\f002"; |
343 | font-weight: 900; | 346 | font-weight: 900; |
344 | width: 20px; | 347 | width: 20px; |
345 | height: 20px; | 348 | height: 20px; |
349 | color: #ffffff; | ||
346 | } | 350 | } |
347 | 351 | ||
348 | &:focus-within .search-label::before { | 352 | &:focus-within .search-label::before { |
@@ -352,6 +356,7 @@ body { | |||
352 | 356 | ||
353 | .icon-button { | 357 | .icon-button { |
354 | display: inline-block; | 358 | display: inline-block; |
359 | padding: 0 12px; | ||
355 | } | 360 | } |
356 | 361 | ||
357 | .offline-message { | 362 | .offline-message { |