fix(css): reduce mobile header height

- disable line break for site title
- remove menu button label
- increase size of menu button
This commit is contained in:
MDLeom 2020-03-20 04:21:29 +00:00
parent 96ad03e681
commit 5a79bf82a8
No known key found for this signature in database
GPG Key ID: 5D9DB57A25D34EE3
2 changed files with 13 additions and 2 deletions

View File

@ -24,9 +24,9 @@
</nav> </nav>
<%/* Nav menu for mobile */%> <%/* Nav menu for mobile */%>
<nav class="mobile-nav"> <nav class="mobile-nav">
<h1><a href="<%- url_for(theme.menu['Home']) %>"><%= config.title %></a></h1> <h1 class="site-title"><a href="<%- url_for(theme.menu['Home']) %>"><%= config.title %></a></h1>
<ul class="mobile-nav-menu"> <ul class="mobile-nav-menu">
<label for="mobile-menu-toggle"><a class="no-underline">&#9776; Menu</a></label> <label for="mobile-menu-toggle"><a class="menu-button no-underline">&#9776;</a></label>
<input id="mobile-menu-toggle" type="checkbox"/> <input id="mobile-menu-toggle" type="checkbox"/>
<ul class="mobile-nav-link"> <ul class="mobile-nav-link">
<div class="searchContainer"> <div class="searchContainer">

View File

@ -59,6 +59,11 @@ h1 {
margin: 0.5em 0; margin: 0.5em 0;
} }
/* Disable line break for site title */
h1.site-title {
white-space: nowrap;
}
h2 { h2 {
font-size: 1.3em; font-size: 1.3em;
} }
@ -638,6 +643,10 @@ td {
text-align: center; text-align: center;
} }
.menu-button {
font-size: 2em;
}
/* search bar */ /* search bar */
.searchContainer { .searchContainer {
border-radius: 5px; border-radius: 5px;
@ -732,6 +741,8 @@ svg#link {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
/* reduce height of mobile header */
height: 1.5em;
} }
/* display links when menu button is clicked */ /* display links when menu button is clicked */