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

Put in adaptive layout for mobile. Introduce JavaScript free nav menu toggle.

Browse source
This commit is contained in:
Robert Marshall 2020-03-15 10:21:14 +00:00
parent 4b6f5e74bc
commit 8d91abd3ae
2 changed files with 64 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

14
Website/Views/Shared/_Layout.cshtml
View file

@ -20,10 +20,16 @@
@RenderBody() @RenderBody()
</main> </main>
<nav> <nav>
@await Component.InvokeAsync("ProjectNavigation") <label for="menu-toggle"><img class="nav-open" src="/images/menu.svg" /></label>
@await Component.InvokeAsync("BlogNavigation") <input type="checkbox" id="menu-toggle" />
<iframe height='160' width='250' frameborder='0' allowtransparency='true' scrolling='no' src='https://www.strava.com/athletes/8892667/activity-summary/df1a6e21a9947dbe7a9dd36f86b1c17185002d22'></iframe> <div class="nav-container">
<iframe height='454' width='250' frameborder='0' allowtransparency='true' scrolling='no' src='https://www.strava.com/athletes/8892667/latest-rides/df1a6e21a9947dbe7a9dd36f86b1c17185002d22'></iframe> @await Component.InvokeAsync("ProjectNavigation")
@await Component.InvokeAsync("BlogNavigation")
</div>
<div class="strava">
<iframe height='160' width='250' frameborder='0' allowtransparency='true' scrolling='no' src='https://www.strava.com/athletes/8892667/activity-summary/df1a6e21a9947dbe7a9dd36f86b1c17185002d22'></iframe>
<iframe height='454' width='250' frameborder='0' allowtransparency='true' scrolling='no' src='https://www.strava.com/athletes/8892667/latest-rides/df1a6e21a9947dbe7a9dd36f86b1c17185002d22'></iframe>
</div>
</nav> </nav>
</div> </div>
<footer> <footer>

54
Website/wwwroot/css/style.less
View file

@ -110,6 +110,10 @@ h1, h2, h3, h4, h5, h6 {
margin: 20px 0; margin: 20px 0;
padding: 0 10px; padding: 0 10px;
#menu-toggle {
display: none;
}
.nav-list{ .nav-list{
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@ -164,3 +168,53 @@ form {
} }
@import "blog.less"; @import "blog.less";
@media screen and (max-width: 992px) {
#content {
flex-direction: column-reverse;
main {
padding-top: 0;
}
nav {
flex: 1 1 auto;
border:none;
margin: 0;
padding: 30px;
.nav-open {
filter: invert(100%);
width: 32px;
height: 32px;
}
#menu-toggle:checked + .nav-container{
max-height: 1000px;
margin-top: 20px;
opacity: 1;
}
.nav-container{
max-height: 0;
overflow: hidden;
transition:all 0.5s ease-out;
opacity: 0;
}
.strava {
display: none;
}
}
}
.header{
&__headshot{
width: 40vw;
height: 40vw;
max-width: 200px;
max-height: 200px;
}
}
}