Add nav mobile

This commit is contained in:
Andros Fenollosa 2024-02-29 18:41:29 +01:00
parent 413c3a6102
commit 3daefee7dd
3 changed files with 79 additions and 41 deletions

View File

@ -20,6 +20,14 @@ body {
margin-top: 6rem;
}
@media (width < 600px) {
body {
margin-top: 0;
margin-bottom: 6rem;
}
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
@ -67,6 +75,23 @@ a:hover, .link:hover {
grid-gap: 1rem;
}
.nav-main__logo {
width: 80px;
margin-bottom: calc(var(--gap-m) * -1);
}
.nav-main__link--logo {
padding-bottom: 0;
position: absolute;
bottom: 0;
}
@media (width < 600px) {
.nav-main__link--logo {
display: none;
}
}
.image {
display: block;
width: 100%;
@ -105,10 +130,18 @@ a:hover, .link:hover {
overflow-x: auto;
}
@media (width < 600px) {
.header {
top: initial;
bottom: 0;
border-bottom: none;
border-top: 2px solid var(--color-brown);
}
}
.header .nav__list {
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
display: grid;
grid-template-columns: 1fr repeat(4, auto);
}
@media (width < 600px) {

BIN
assets/img/logo.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

View File

@ -1,8 +1,11 @@
(defun make-title (title)
"If title is empty, return the website name. Otherwise, return the title with the website name."
(concat (when (not (string-empty-p title)) (concat title " | ")) "Django LiveView"))
(defun render-layout-html (title description tree-content)
(let ((full-title (make-title title))) (jack-html
"Render the HTML layout with the given title, description and content."
(let ((full-title (make-title title)))
(jack-html
"<!DOCTYPE html>"
`(:html (@ :lang "en")
(:head
@ -28,6 +31,8 @@
(:div.container
(:nav.nav-main
(:ul.nav__list.nav-main__list
(:li.nav-main__item
(:a.nav-main__link.nav-main__link--logo (@ :href "/") (:img.nav-main__logo (@ :alt "Django LiveView" :src "/img/logo.webp"))))
(:li.nav-main__item
(:a.button.nav-main__link (@ :href "/docs/quickstart/") "Docs"))
(:li.nav-main__item