Make navigation mobile-friendly
This commit is contained in:
Ben Visness
parent
5f2df52e1d
commit
352a102a6a
|
|
@ -8290,6 +8290,7 @@ header {
|
|||
background-color: var(--bg-header);
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: var(--border-header);
|
||||
position: relative;
|
||||
}
|
||||
header .hmn-logo {
|
||||
font-family: "MohaveHMN", sans-serif;
|
||||
|
|
@ -8306,10 +8307,39 @@ header .avatar {
|
|||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
}
|
||||
header .header-nav {
|
||||
position: absolute;
|
||||
top: calc(100% + 1px);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: var(--bg-header);
|
||||
z-index: 100;
|
||||
}
|
||||
@media screen and (min-width: 35em) {
|
||||
header .header-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: static;
|
||||
width: auto;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: none;
|
||||
}
|
||||
}
|
||||
header .header-nav > a,
|
||||
header .header-nav > .root-item > a {
|
||||
display: block;
|
||||
padding: var(--spacing-3);
|
||||
border-bottom: var(--border-header) solid var(--border-color);
|
||||
}
|
||||
header .header-nav > a:not(.db),
|
||||
header .header-nav > .root-item > a:not(.db) {
|
||||
display: block;
|
||||
}
|
||||
@media screen and (min-width: 35em) {
|
||||
header .header-nav > a,
|
||||
header .header-nav > .root-item > a {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
header .root-item {
|
||||
position: relative;
|
||||
|
|
@ -8317,6 +8347,9 @@ header .root-item {
|
|||
header .submenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media screen and (min-width: 35em) {
|
||||
header .submenu {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
min-width: 8rem;
|
||||
|
|
@ -8326,13 +8359,21 @@ header .submenu {
|
|||
border-top-width: 0;
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
header .submenu > a {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-4);
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
border-bottom: var(--border-header) solid var(--border-color);
|
||||
}
|
||||
header .root-item:not(:hover):not(.clicked) > .submenu {
|
||||
@media screen and (min-width: 35em) {
|
||||
header .submenu > a {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
header .root-item:not(:hover):not(.clicked) .submenu {
|
||||
display: none;
|
||||
}
|
||||
header .root-item.clicked .svgicon {
|
||||
|
|
|
|||
|
|
@ -120,6 +120,7 @@ header {
|
|||
background-color: var(--bg-header);
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: var(--border-header);
|
||||
position: relative;
|
||||
|
||||
.hmn-logo {
|
||||
font-family: 'MohaveHMN', sans-serif;
|
||||
|
|
@ -141,11 +142,35 @@ header {
|
|||
}
|
||||
|
||||
.header-nav {
|
||||
position: absolute;
|
||||
top: calc(100% + 1px);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: var(--bg-header);
|
||||
z-index: 100;
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: static;
|
||||
width: auto;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
>a,
|
||||
>.root-item>a {
|
||||
&:not(.db) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
padding: var(--spacing-3);
|
||||
border-bottom: var(--border-header) solid var(--border-color);
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -156,6 +181,8 @@ header {
|
|||
.submenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
min-width: 8rem;
|
||||
|
|
@ -164,17 +191,24 @@ header {
|
|||
border-width: var(--border-header);
|
||||
border-top-width: 0;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
>a {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-4);
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
border-bottom: var(--border-header) solid var(--border-color);
|
||||
|
||||
@media screen and (min-width: 35em) {
|
||||
padding: var(--spacing-2) var(--spacing-3);
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.root-item {
|
||||
&:not(:hover):not(.clicked)>.submenu {
|
||||
&:not(:hover):not(.clicked) .submenu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(1,0,0,1,-3,-4)">
|
||||
<path d="M3,4L21,4L21,6L3,6L3,4ZM3,11L21,11L21,13L3,13L3,11ZM3,18L21,18L21,20L3,20L3,18Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 490 B |
|
|
@ -3,7 +3,7 @@
|
|||
Handmade
|
||||
</a>
|
||||
<div class="flex-grow-1 flex-shrink-1"></div>
|
||||
<div class="header-nav flex flex-row items-center lh-solid f6">
|
||||
<div class="header-nav lh-solid f6 dn" id="header_nav">
|
||||
<a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
|
||||
<a href="{{ .Header.JamsUrl }}">Jams</a>
|
||||
<div class="root-item">
|
||||
|
|
@ -38,21 +38,36 @@
|
|||
<a href="{{ .Header.AboutUrl }}">About the Team</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="root-item db dn-ns">
|
||||
<a aria-expanded="false" aria-controls="profile-submenu" class="menu-dropdown-js" href="#">
|
||||
User <div class="menu-chevron svgicon-lite">{{ svg "chevron-down" }}</div>
|
||||
</a>
|
||||
<div class="submenu" id="profile-submenu-mobile">
|
||||
<a href="{{ .Header.UserProfileUrl }}">Profile</a>
|
||||
<a href="{{ .Header.UserSettingsUrl }}">Settings</a>
|
||||
</div>
|
||||
<div class="root-item f6">
|
||||
<a class="db {{ if .User }}pv2 ph3{{ else }}pa3{{ end }} lh-solid flex f6 {{ if not .User }}bl{{ end }}" href="{{ or .Header.UserProfileUrl .LoginPageUrl }}">
|
||||
</div>
|
||||
<a class="db dn-ns" href="{{ .Header.LogoutUrl }}">Log Out</a>
|
||||
</div>
|
||||
<div class="root-item f6 {{ if not .User }}bl-ns{{ end }} flex items-stretch">
|
||||
<a class="db pl3 pr2 pr3-ns lh-solid flex items-center" href="{{ or .Header.UserProfileUrl .LoginPageUrl }}">
|
||||
{{ with .User }}
|
||||
<img class="avatar avatar-user" src="{{ .AvatarUrl }}">
|
||||
{{ else }}
|
||||
Log In
|
||||
{{ end }}
|
||||
</a>
|
||||
<a class="pl2 pr3 flex dn-ns items-center" href="#" id="mobile_menu">
|
||||
{{ svg "menu" }}
|
||||
</a>
|
||||
{{ if .User }}
|
||||
<div class="dn db-ns">
|
||||
<div class="submenu right-0" id="profile-submenu">
|
||||
<a href="{{ .Header.UserProfileUrl }}">Profile</a>
|
||||
<a href="{{ .Header.UserSettingsUrl }}">Settings</a>
|
||||
<a href="{{ .Header.LogoutUrl }}">Log Out</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -84,7 +99,9 @@
|
|||
|
||||
<script type="text/javascript">
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const header = document.querySelector('#site-header');
|
||||
const header = document.querySelector("#site-header");
|
||||
const headerNav = document.querySelector("#header_nav");
|
||||
const mobileMenuButton = document.querySelector("#mobile_menu");
|
||||
|
||||
// set up dropdown stuff for mobile / touch
|
||||
{
|
||||
|
|
@ -138,5 +155,11 @@
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
mobileMenuButton.addEventListener("click", e => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
headerNav.classList.toggle("dn");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<div class="jam-grid g3">
|
||||
<a href="{{ .VJ2024Url }}">
|
||||
<div class="overflow-hidden flex">
|
||||
<img src="{{ static "visjam2024/2024VJTwitterCard.png" }}">
|
||||
<img src="{{ static "visjam2024/TwitterCard.png" }}">
|
||||
</div>
|
||||
</a>
|
||||
<a href="{{ .LJ2024Url }}">
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
<div class="flex justify-center pa3">
|
||||
<div class="w-100 mw-site flex g3">
|
||||
<!-- Sidebar -->
|
||||
<div class="w5 flex flex-column g2 flex-shrink-0">
|
||||
<div class="w5 dn flex-ns flex-column g2 flex-shrink-0">
|
||||
{{ if .User }}
|
||||
<div class="sidebar-card bg3 link-normal">
|
||||
<div onclick="collapse(event)" class="pa3 flex justify-between items-center pointer">
|
||||
|
|
|
|||
Loading…
Reference in New Issue