Django-LiveView/docs
1
0
Fork 0
mirror of https://github.com/Django-LiveView/docs.git synced 2024-12-23 03:15:36 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add nav mobile

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
assets/css/main.css
View File

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

BIN
assets/img/logo.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

81
onerc.el
View File

@ -1,45 +1,50 @@
(defun make-title (title) (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")) (concat (when (not (string-empty-p title)) (concat title " | ")) "Django LiveView"))
(defun render-layout-html (title description tree-content) (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."
"<!DOCTYPE html>" (let ((full-title (make-title title)))
`(:html (@ :lang "en") (jack-html
(:head "<!DOCTYPE html>"
;; Generals `(:html (@ :lang "en")
(:meta (@ :charset "utf-8")) (:head
(:link (@ :rel "icon" :type "image/png" :href "/img/favicon.png")) ;; Generals
(:meta (@ :name "viewport" :content "width=device-width,initial-scale=1.0, shrink-to-fit=no")) (:meta (@ :charset "utf-8"))
(:meta (@ :name "author" :content "Andros Fenollosa")) (:link (@ :rel "icon" :type "image/png" :href "/img/favicon.png"))
(:meta (@ :name "generator" :content "One.el")) (:meta (@ :name "viewport" :content "width=device-width,initial-scale=1.0, shrink-to-fit=no"))
;; SEO (:meta (@ :name "author" :content "Andros Fenollosa"))
(:title ,full-title) (:meta (@ :name "generator" :content "One.el"))
(:meta (@ :name "description" :content ,description)) ;; SEO
(:meta (@ :name "og:image" :content "https://django-liveview.andros.dev/img/og-image.webp")) (:title ,full-title)
;; Fonts (:meta (@ :name "description" :content ,description))
(:link (@ :rel "preconnect" :href "https://fonts.googleapis.com")) (:meta (@ :name "og:image" :content "https://django-liveview.andros.dev/img/og-image.webp"))
(:link (@ :rel "preconnect" :href "https://fonts.gstatic.com" :crossorigin t)) ;; Fonts
(:link (@ :rel "stylesheet" :href "https://fonts.googleapis.com/css2?family=Fira+Code&family=Open+Sans:wght@400;700&display=swap")) (:link (@ :rel "preconnect" :href "https://fonts.googleapis.com"))
;; CSS (:link (@ :rel "preconnect" :href "https://fonts.gstatic.com" :crossorigin t))
(:link (@ :rel "stylesheet" :type "text/css" :href "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css")) (:link (@ :rel "stylesheet" :href "https://fonts.googleapis.com/css2?family=Fira+Code&family=Open+Sans:wght@400;700&display=swap"))
(:link (@ :rel "stylesheet" :type "text/css" :href "/css/main.css"))) ;; CSS
(:body (:link (@ :rel "stylesheet" :type "text/css" :href "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"))
(:header.header (:link (@ :rel "stylesheet" :type "text/css" :href "/css/main.css")))
(:div.container (:body
(:nav.nav-main (:header.header
(:ul.nav__list.nav-main__list (:div.container
(:li.nav-main__item (:nav.nav-main
(:a.button.nav-main__link (@ :href "/docs/quickstart/") "Docs")) (:ul.nav__list.nav-main__list
(:li.nav-main__item (:li.nav-main__item
(:a.button.nav-main__link (@ :href "/tutorials/") "Tutorials")) (:a.nav-main__link.nav-main__link--logo (@ :href "/") (:img.nav-main__logo (@ :alt "Django LiveView" :src "/img/logo.webp"))))
(:li.nav-main__item (:li.nav-main__item
(:a.button.nav-main__link (@ :href "https://github.com/Django-LiveView/" :target "_blank") "Source code")) (:a.button.nav-main__link (@ :href "/docs/quickstart/") "Docs"))
(:li.nav-main__item (:li.nav-main__item
(:a.button.nav-main__link (@ :href "https://django-liveview-demo.andros.dev/" :target "_blank") "Demo")))))) (:a.button.nav-main__link (@ :href "/tutorials/") "Tutorials"))
,tree-content (:li.nav-main__item
(:footer.footer (:a.button.nav-main__link (@ :href "https://github.com/Django-LiveView/" :target "_blank") "Source code"))
(:p "Created with ❤️ by " (:a.link (@ :href "https://andros.dev/" :target "_blank") "Andros Fenollosa")) (:li.nav-main__item
(:p "🐍 " ,(format-time-string "%Y")))))))) (:a.button.nav-main__link (@ :href "https://django-liveview-demo.andros.dev/" :target "_blank") "Demo"))))))
,tree-content
(:footer.footer
(:p "Created with ❤️ by " (:a.link (@ :href "https://andros.dev/" :target "_blank") "Andros Fenollosa"))
(:p "🐍 " ,(format-time-string "%Y"))))))))
(defun one-custom-default-home (page-tree pages _global) (defun one-custom-default-home (page-tree pages _global)
"Default render function by home page." "Default render function by home page."