Add mobile nav
Pure CSS, baby!
This commit is contained in:
parent
28b79acd1f
commit
05e2d5abd2
GPG Key ID:
9F88009D31D99C72
@ -534,6 +534,54 @@ p + p, p + ul {
|
||||
color: rgb(14 165 233 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
input#mobile-nav-is-open + div > a svg:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input#mobile-nav-is-open:checked + div > a svg:first-of-type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input#mobile-nav-is-open:checked + div > a svg:last-of-type {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input#mobile-nav-is-open + div > div.backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input#mobile-nav-is-open:checked + div > div.backdrop {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input#mobile-nav-is-open + div > nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input#mobile-nav-is-open:checked + div > nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.top-20 {
|
||||
top: 5rem;
|
||||
}
|
||||
|
||||
.left-0 {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.bottom-0 {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@ -567,20 +615,24 @@ p + p, p + ul {
|
||||
margin-top: -0.125rem;
|
||||
}
|
||||
|
||||
.mr-1 {
|
||||
margin-right: 0.25rem;
|
||||
.mr-1\.5 {
|
||||
margin-right: 0.375rem;
|
||||
}
|
||||
|
||||
.-mt-0 {
|
||||
margin-top: -0px;
|
||||
}
|
||||
|
||||
.mr-1 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.ml-16 {
|
||||
margin-left: 4rem;
|
||||
}
|
||||
|
||||
.mr-1\.5 {
|
||||
margin-right: 0.375rem;
|
||||
.-mr-2 {
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
@ -595,6 +647,10 @@ p + p, p + ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
@ -627,6 +683,10 @@ p + p, p + ul {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.max-w-5xl {
|
||||
max-width: 64rem;
|
||||
}
|
||||
@ -635,8 +695,8 @@ p + p, p + ul {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.grow-0 {
|
||||
flex-grow: 0;
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.transform {
|
||||
@ -659,6 +719,14 @@ p + p, p + ul {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
@ -667,6 +735,14 @@ p + p, p + ul {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-items-stretch {
|
||||
justify-items: stretch;
|
||||
}
|
||||
@ -687,6 +763,16 @@ p + p, p + ul {
|
||||
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.border-b-2 {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
@ -701,6 +787,14 @@ p + p, p + ul {
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bg-zinc-800\/70 {
|
||||
background-color: rgb(39 39 42 / 0.7);
|
||||
}
|
||||
|
||||
.bg-\[url\(\'\/img\/lagoon-close-02\.jpg\'\)\] {
|
||||
background-image: url('/img/lagoon-close-02.jpg');
|
||||
}
|
||||
@ -717,6 +811,10 @@ p + p, p + ul {
|
||||
background-position: center top 30rem;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.py-8 {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
@ -727,6 +825,14 @@ p + p, p + ul {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.pt-2 {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.pb-8 {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
@ -771,11 +877,45 @@ p + p, p + ul {
|
||||
color: rgb(113 113 122 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-black {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.\!text-black {
|
||||
--tw-text-opacity: 1 !important;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
|
||||
}
|
||||
|
||||
.hover\:bg-zinc-100:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(244 244 245 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.focus\:outline-none:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.focus\:ring-2:focus {
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
}
|
||||
|
||||
.focus\:ring-white:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
.focus\:ring-offset-2:focus {
|
||||
--tw-ring-offset-width: 2px;
|
||||
}
|
||||
|
||||
.focus\:ring-offset-zinc-400:focus {
|
||||
--tw-ring-offset-color: #a1a1aa;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sm\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@ -791,18 +931,22 @@ p + p, p + ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.md\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.md\:shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.md\:grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.md\:grow-0 {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.md\:grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<header class="max-w-5xl mx-auto px-8 text-left">
|
||||
<div class="w-full flex items-center justify-items-stretch h-20">
|
||||
<div class="grow-0 shrink-0">
|
||||
<div class="w-full h-20 flex items-center justify-items-stretch">
|
||||
<div class="grow md:grow-0 shrink-0">
|
||||
<svg class="inline-block align-top -mt-0.5 mr-1.5 w-auto h-6" width="65.364" height="55.773" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 65.364 55.773" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g id="layer1" transform="translate(28.868 20.259)" fill="#000"><path id="path2" d="m22.81-9.2546-0.0137-0.0072c-0.0445-0.0196-0.0895-0.04052-0.13335-0.06078l-23.822-10.937s2.0034 9.219 2.914 11.778c0 0-27.292-8.1582-30.623-8.9354 1.0916 4.2618 20.006 40.848 20.006 40.848 3.8225 7.7608 12.677 12.083 21.912 12.083 12.949 0 23.446-10.497 23.446-23.446 6.6e-4 -9.4655-5.609-17.62-13.685-21.323z" fill="#000" stroke-width=".65365"/></g></svg>
|
||||
<h1 class="inline-block uppercase font-bold">{{ .Site.Title }}</h1>
|
||||
</div>
|
||||
@ -8,10 +8,9 @@
|
||||
<ul class="ml-16 flex items-baseline space-x-8">
|
||||
{{ $currentPage := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
<li class="{{ if $currentPage.IsMenuCurrent "main" . }}border-b-2 border-teal-500{{ end }}">
|
||||
<li>
|
||||
<a href="{{ .URL }}" class="font-bold">
|
||||
{{ .Pre }}
|
||||
<span>{{ .Name }}</span>
|
||||
<span class="{{ if $currentPage.IsMenuCurrent "main" . }}border-b-2 border-teal-500{{ end }}">{{ .Name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
@ -43,5 +42,39 @@
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<label class="-mr-2 block md:hidden" aria-hidden="true">
|
||||
<input id="mobile-nav-is-open" type="checkbox" class="hidden" />
|
||||
<div>
|
||||
<a id="toggle-mobile-nav" tabindex="0" title="Open menu"
|
||||
class="inline-flex items-center justify-center p-2 text-black
|
||||
rounded-md bg-transparent hover:bg-zinc-100
|
||||
focus:outline-none focus:ring-2 focus:ring-offset-2
|
||||
focus:ring-offset-zinc-400 focus:ring-white">
|
||||
<!-- Heroicon name: outline/menu -->
|
||||
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
<!-- Heroicon name: outline/x -->
|
||||
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</a>
|
||||
<div class="backdrop absolute top-20 left-0 right-0 bottom-0 bg-zinc-800/70"></div>
|
||||
<nav class="absolute top-20 left-0 right-0 bg-white px-8 pt-2 pb-8">
|
||||
<ul class="flex flex-col items-start items-stretch space-y-6">
|
||||
{{ $currentPage := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
<li>
|
||||
<a href="{{ .URL }}" class="block font-bold">
|
||||
<span class="{{ if $currentPage.IsMenuCurrent "main" . }}border-b-2 border-teal-500{{ end }}">{{ .Name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -38,4 +38,14 @@
|
||||
.content a:hover { @apply text-sky-700 border-b border-zinc-400; }
|
||||
.content a:visited { @apply text-indigo-600 }
|
||||
.content a:active { @apply text-sky-500; }
|
||||
|
||||
input#mobile-nav-is-open + div > a svg:last-of-type { @apply hidden; }
|
||||
input#mobile-nav-is-open:checked + div > a svg:first-of-type { @apply hidden; }
|
||||
input#mobile-nav-is-open:checked + div > a svg:last-of-type { @apply block; }
|
||||
|
||||
input#mobile-nav-is-open + div > div.backdrop { @apply hidden; }
|
||||
input#mobile-nav-is-open:checked + div > div.backdrop { @apply block; }
|
||||
|
||||
input#mobile-nav-is-open + div > nav { @apply hidden; }
|
||||
input#mobile-nav-is-open:checked + div > nav { @apply block }
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user