Implement mobile menu
This commit is contained in:
parent
66c75f1ab2
commit
e5341a79ad
3 changed files with 241 additions and 15 deletions
221
assets/style.css
221
assets/style.css
|
|
@ -607,6 +607,37 @@ video {
|
|||
position: static;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.inset-0 {
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.top-0 {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.top-4 {
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.right-6 {
|
||||
right: 1.5rem;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
@ -629,6 +660,10 @@ video {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.mr-auto {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mt-auto {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
|
@ -641,8 +676,20 @@ video {
|
|||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.mt-12 {
|
||||
margin-top: 3rem;
|
||||
.ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.-ml-2 {
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.-ml-4 {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
|
|
@ -673,10 +720,24 @@ video {
|
|||
max-width: 1024px;
|
||||
}
|
||||
|
||||
.translate-x-0 {
|
||||
--tw-translate-x: 0px;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.translate-x-full {
|
||||
--tw-translate-x: 100%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -689,6 +750,39 @@ video {
|
|||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-x-6 {
|
||||
-moz-column-gap: 1.5rem;
|
||||
column-gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-y-2 {
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-y-4 {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.self-start {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.self-end {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.overflow-x-hidden {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -704,6 +798,15 @@ video {
|
|||
background-color: rgb(185 28 28 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gray-900 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.p-6 {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.px-6 {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
|
|
@ -719,6 +822,21 @@ video {
|
|||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.py-8 {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.py-12 {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.pt-4 {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
|
@ -755,6 +873,12 @@ video {
|
|||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.transition-transform {
|
||||
transition-property: transform;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: Spline Sans;
|
||||
font-size: 1.5rem;
|
||||
|
|
@ -899,12 +1023,99 @@ code {
|
|||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:mr-auto {
|
||||
margin-right: auto;
|
||||
@media not all and (min-width: 1024px) {
|
||||
.max-lg\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.max-lg\:items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.max-lg\:bg-gray-200 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.max-lg\:bg-gray-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.lg\:container {
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.lg\:container {
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:container {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.lg\:container {
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.lg\:container {
|
||||
max-width: 1536px;
|
||||
}
|
||||
}
|
||||
|
||||
.lg\:static {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.lg\:mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.lg\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lg\:translate-x-0 {
|
||||
--tw-translate-x: 0px;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.lg\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.lg\:bg-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.lg\:p-0 {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.lg\:px-6 {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,24 +13,31 @@
|
|||
</head>
|
||||
|
||||
<body
|
||||
x-data="{ colorScheme: $persist('sync') }"
|
||||
x-bind:class="`color-scheme--${colorScheme}`"
|
||||
class="overflow-x-hidden"
|
||||
x-data="{ colorScheme: $persist('sync'), menuOpen: false }"
|
||||
x-bind:class="`color-scheme--${colorScheme} ${menuOpen ? 'overflow-hidden' : ''}`"
|
||||
>
|
||||
<header class="pt-4 pb-6">
|
||||
<div class="container mx-auto px-6 flex items-center mb-4 gap-2">
|
||||
<a href="{{ "/" | relLangURL }}" title="Home" rel="home" class="md:mr-auto">
|
||||
<div class="container mx-auto px-6 flex items-center mb-4 gap-6">
|
||||
<a href="{{ "/" | relLangURL }}" title="Home" rel="home" class="mr-auto">
|
||||
<img src="{{ "/images/logo.png" | relURL }}" width="60" alt="{{ site.Title }}" />
|
||||
</a>
|
||||
{{ partial "language-selector.html" . }}
|
||||
{{ partial "theme-selector.html" . }}
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="max-lg:hidden">{{ partial "language-selector.html" . }}</span>
|
||||
{{ partial "theme-selector.html" . }}
|
||||
<button class="button lg:hidden" x-on:click="menuOpen = true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32">
|
||||
<path fill="none" d="M0 0h24v24H0z"/>
|
||||
<path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{ partial "menu.html" . }}
|
||||
</header>
|
||||
|
||||
{{ block "main" . }}{{ end }}
|
||||
|
||||
{{ if $.Param "sidebar" }}{{ partial "sidebar.html" . }}{{ end -}}
|
||||
|
||||
<footer class="mt-6 text-gray-500 mt-auto">
|
||||
<div class="container mx-auto px-6 py-6">
|
||||
{{ if $.Param "feedlinks" }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
<nav class="container mx-auto px-6">
|
||||
<nav
|
||||
class="lg:container lg:mx-auto lg:px-6 bg-gray-900 lg:bg-transparent fixed overflow-y-auto lg:static inset-0 transition-transform px-6 py-12 lg:p-0 max-lg:bg-gray-100"
|
||||
x-bind:class="menuOpen ? 'translate-x-0' : 'translate-x-full lg:translate-x-0'">
|
||||
<h2 class="sr-only">{{ i18n "menu_title" }}</h2>
|
||||
<ul class="flex gap-6">
|
||||
<button class="button block mb-6 lg:hidden absolute top-4 right-6" x-on:click="menuOpen = false">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
|
||||
</button>
|
||||
<ul class="flex gap-x-6 gap-y-4 flex-col lg:flex-row">
|
||||
{{ range site.Menus.main }}
|
||||
{{ $isActive := false }} {{/* TODO fix */}}
|
||||
<li>
|
||||
|
|
@ -13,5 +18,8 @@
|
|||
>{{ .Name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
<li class="lg:hidden self-start -ml-2 mt-4">
|
||||
{{ partial "language-selector.html" . }}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Reference in a new issue