GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-24 05:14:06 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

add collapsible header in mobile view

Browse Source
This commit is contained in:
Matthew Wong 2022-05-05 01:03:27 -04:00
parent f59e257a73
commit 831effc781
2 changed files with 43 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
assets/styles/header.scss
View File

@ -22,7 +22,7 @@
padding-right: 0px; padding-right: 0px;
// padding: 0px; // padding: 0px;
} }
/* Change the background color on mouse-over */ /* Change the background color on mouse-over */
.header a:hover { .header a:hover {
background-color: #ddd; background-color: #ddd;
@ -39,15 +39,36 @@
.header-right { .header-right {
float: right; float: right;
} }
/* Hide the link that should open and close the topnav on small screens */
.header .menu {
display: none;
font-size: 1.5em;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.header-right a {display: none;}
.header a.menu {
float: left;
display: block;
}
}
/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */ /* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.header a { .header.responsive {position: relative;}
.header.responsive a.menu {
position: absolute;
left: 0;
top: 0;
}
.header.responsive a {
float: none; float: none;
display: block; display: block;
text-align: left; text-align: center;
} }
.header-right { .header-right.responsive {
float: none; float: none;
} }
} }

21
layouts/partials/header.html
View File

@ -1,8 +1,9 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header> <header>
<div class="header"> <div id="myTopnav" class="header">
<a href="javascript:void(0);" class="menu" onclick="myFunction()"><i class="fa fa-bars"></i></a>
<a href="/" class="logo">Fleeting Notes</a> <a href="/" class="logo">Fleeting Notes</a>
<div class="header-right"> <div id="headerRight" class="header-right">
<a href="/download">Downloads</a> <a href="/download">Downloads</a>
<a href="/pricing">Pricing</a> <a href="/pricing">Pricing</a>
<a href="/posts">Blog</a> <a href="/posts">Blog</a>
@ -14,4 +15,18 @@
<i class="fa fa-sun-o" id="darkmode-icon" for="darkmode-toggle" tabindex="-1"></i> <i class="fa fa-sun-o" id="darkmode-icon" for="darkmode-toggle" tabindex="-1"></i>
</a> </a>
</div> </div>
</header> </header>
<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
var y = document.getElementById("headerRight")
if (x.className === "header") {
x.className += " responsive";
y.className += " responsive"
} else {
x.className = "header";
y.className = "header-right";
}
}
</script>