rob/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use fontawesome icon for menu

Browse source
This commit is contained in:
Robert Marshall 2020-04-13 08:03:42 +01:00
parent c9649000ea
commit ed1d322bac
2 changed files with 13 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Website/Views/Shared/_Layout.cshtml
View file

@ -21,7 +21,7 @@
@RenderBody() @RenderBody()
</main> </main>
<nav> <nav>
<label for="menu-toggle"><img class="nav-open" src="/images/menu.svg" /></label> <label for="menu-toggle"></label>
<input type="checkbox" id="menu-toggle" /> <input type="checkbox" id="menu-toggle" />
<div class="nav-container"> <div class="nav-container">
@await Component.InvokeAsync("BlogNavigation") @await Component.InvokeAsync("BlogNavigation")

18
src/Website/wwwroot/css/style.scss
View file

@ -42,7 +42,6 @@ a {
color: $primary; color: $primary;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
background: linear-gradient(to bottom, $primary 0%, $primary 0%); background: linear-gradient(to bottom, $primary 0%, $primary 0%);
background-position: 0 100%; background-position: 0 100%;
background-size: 0px 0px; background-size: 0px 0px;
@ -154,9 +153,18 @@ h6 {
margin: 20px 0; margin: 20px 0;
padding: 0 10px; padding: 0 10px;
#menu-toggle, #menu-toggle {
display: none;
}
[for="menu-toggle"] { [for="menu-toggle"] {
display: none; display: none;
&::after {
@extend .fas;
content: fa-content($fa-var-bars);
font-size: 32px;
}
} }
.nav-list { .nav-list {
@ -231,12 +239,6 @@ form {
margin: 0; margin: 0;
padding: 30px; padding: 30px;
.nav-open {
filter: invert(100%);
width: 32px;
height: 32px;
}
#menu-toggle:checked + .nav-container { #menu-toggle:checked + .nav-container {
max-height: 1000px; max-height: 1000px;
margin-top: 20px; margin-top: 20px;