From 4f1edc986321d07b94b984f3c5cf42e43109cf72 Mon Sep 17 00:00:00 2001 From: Alexander Artemenko Date: Thu, 29 Aug 2024 22:00:27 +0300 Subject: [PATCH] Now default theme looks good on mobile devices. --- full/doc.lisp | 9 +- full/themes/default.lisp | 544 ++++++++++++++++++++------------------- src/changelog.lisp | 2 + 3 files changed, 288 insertions(+), 267 deletions(-) diff --git a/full/doc.lisp b/full/doc.lisp index f76ccf3..4e195f6 100644 --- a/full/doc.lisp +++ b/full/doc.lisp @@ -754,7 +754,8 @@ See full list of changes in the 40ANTS-DOC/CHANGELOG::@CHANGELOG section. (unless theme (error "Unable to find 40ANTS-DOC-THEME-40ANTS::40ANTS-THEME symbol")) - (list :theme - (make-instance theme - :plugins (list (highlightjs) - (mathjax)))))) + ;; (list :theme + ;; (make-instance theme + ;; :plugins (list (highlightjs) + ;; (mathjax)))) + )) diff --git a/full/themes/default.lisp b/full/themes/default.lisp index c3acf48..54aa70e 100644 --- a/full/themes/default.lisp +++ b/full/themes/default.lisp @@ -40,288 +40,305 @@ (defmethod render-css ((theme default-theme)) - (lass:compile-and-write - `(body - :font-family "sans-serif" - :margin "auto" - :background-color "#FFFEFB" - :color "#000000" - - ((:or h1 h2 h3 h4 h5 h6) - :font-family "serif" - :font-weight "bold" - :text-shadow "0.05em 0.05em 0.02em #DDDDDD" - :line-height 1.2 - (a.header-link - :color "#DDD" - :padding 0 4px - :text-decoration none - :border-bottom none - :text-shadow none - :visibility hidden)) - - ((:and - (:or h1 h2 h3 h4 h5 h6) - :hover) - (a.header-link - :visibility visible) - ((:and a.header-link :hover) - :color "#777") - ((:and a.header-link ::after) - :content "¶")) + (concatenate + 'string + + ;; Default CSS + (lass:compile-and-write + `(body + :font-family "sans-serif" + :margin "auto" + :background-color "#FFFEFB" + :color "#000000" - (h1 - :font-size 250%) - (h2 - :font-size 200% - :border-bottom "0.05em solid #CCCCCC") - (h3 - :font-size 150%) - (h4 - :font-size 130%) - (h5 - :font-size 110% - :margin-top 0.75em - :margin-bottom 0.5em) - (h6 - :font-size 100% - :background-color inherit - :color "#777777" - (a - :color "#777777")) + ((:or h1 h2 h3 h4 h5 h6) + :font-family "serif" + :font-weight "bold" + :text-shadow "0.05em 0.05em 0.02em #DDDDDD" + :line-height 1.2 + (a.header-link + :color "#DDD" + :padding 0 4px + :text-decoration none + :border-bottom none + :text-shadow none + :visibility hidden)) - (hr - :height 0.2em - :border 0 - :color "#CCCCCC" - :background-color "#CCCCCC") + ((:and + (:or h1 h2 h3 h4 h5 h6) + :hover) + (a.header-link + :visibility visible) + ((:and a.header-link :hover) + :color "#777") + ((:and a.header-link ::after) + :content "¶")) - ((:or p blockquote table pre) - :line-height 1.5 - :margin "0.5em 0 0 0") + (h1 + :font-size 250%) + (h2 + :font-size 200% + :border-bottom "0.05em solid #CCCCCC") + (h3 + :font-size 150%) + (h4 + :font-size 130%) + (h5 + :font-size 110% + :margin-top 0.75em + :margin-bottom 0.5em) + (h6 + :font-size 100% + :background-color inherit + :color "#777777" + (a + :color "#777777")) - ((:or ul ol dl) - :padding-left 1.1em - :list-style-position outside) + (hr + :height 0.2em + :border 0 + :color "#CCCCCC" + :background-color "#CCCCCC") - (li - :line-height 1.5 - :margin "0 0 0 0") + ((:or p blockquote table pre) + :line-height 1.5 + :margin "0.5em 0 0 0") - (pre - :background-color "#F5F3ED" - :color "#000000" - :border "0.1em solid #CCCCCC" - :line-height 1.25em - :overflow auto - :margin "0.5em 0 0 0" - :padding 0.2em) - - (code - :color "#222222") - - (a - :color "#222222" - :text-decoration none - :border-bottom 1px solid) - - (.reference-bullet - :display flex - :flex-direction column - :margin-bottom 1rem - :margin-top 1rem - (.reference-bullet-header - :display flex - :flex-direction row - - (a :border-bottom none - :text-decoration none) - - (a.locative-type - :text-decoration underline - :white-space nowrap) - ((:and a.locative-type :before) - :content "[") - ((:and a.locative-type :after) - :content "]") - - (a.bullet-link - :color "#DDD" - :padding 0 4px - :text-shadow none - :visibility hidden) - ((:and a.bullet-link ::after) - :content "¶") - - (.locative-type - (a - :text-decoration none - :border-bottom 0 - :font-weight bold)) + ((:or ul ol dl) + :padding-left 1.1em + :list-style-position outside) - (.reference-object + (li + :line-height 1.5 + :margin "0 0 0 0") + + (pre + :background-color "#F5F3ED" + :color "#000000" + :border "0.1em solid #CCCCCC" + :line-height 1.25em + :overflow auto + :margin "0.5em 0 0 0" + :padding 0.2em) + + (code + :color "#222222") + + (a + :color "#222222" + :text-decoration none + :border-bottom 1px solid) + + (.reference-bullet + :display flex + :flex-direction column + :margin-bottom 1rem + :margin-top 1rem + (.reference-bullet-header :display flex :flex-direction row - :padding-left 0.3em - :padding-right 0.3em - :margin-left 0.2em - (a - :border-bottom none) - (.object-name - :font-weight bold + + (a :border-bottom none + :text-decoration none) + + (a.locative-type + :text-decoration underline :white-space nowrap) - (.object-args + ((:and a.locative-type :before) + :content "[") + ((:and a.locative-type :after) + :content "]") + + (a.bullet-link + :color "#DDD" + :padding 0 4px + :text-shadow none + :visibility hidden) + ((:and a.bullet-link ::after) + :content "¶") + + (.locative-type + (a + :text-decoration none + :border-bottom 0 + :font-weight bold)) + + (.reference-object :display flex :flex-direction row - :white-space nowrap - (.locative-args - :font-style italic - :margin-left 0.2em - :color "#777" - (code - :font-family sans-serif)))) - - ;; Add () around object name and it's arguments - ((:and .reference-object :before) - :content "(") - ((:and .reference-object :after) - :content ")")) - - (.bullet-content - :border-left solid "#e9e9e9" 0.5rem - :padding-left 1rem - :margin-top 0.5rem - ;; When bullet has some content, we want to make it more - ;; distanced from the next block, to make visual spacing. - :margin-bottom 1.5rem)) - - ((:and - .reference-bullet-header - :hover) - (a.bullet-link - :visibility visible) + :padding-left 0.3em + :padding-right 0.3em + :margin-left 0.2em + (a + :border-bottom none) + (.object-name + :font-weight bold + :white-space nowrap) + (.object-args + :display flex + :flex-direction row + :white-space nowrap + (.locative-args + :font-style italic + :margin-left 0.2em + :color "#777" + (code + :font-family sans-serif)))) + + ;; Add () around object name and it's arguments + ((:and .reference-object :before) + :content "(") + ((:and .reference-object :after) + :content ")")) + + (.bullet-content + :border-left solid "#e9e9e9" 0.5rem + :padding-left 1rem + :margin-top 0.5rem + ;; When bullet has some content, we want to make it more + ;; distanced from the next block, to make visual spacing. + :margin-bottom 1.5rem)) ((:and - a.bullet-link + .reference-bullet-header :hover) - :color "#777")) + (a.bullet-link + :visibility visible) + + ((:and + a.bullet-link + :hover) + :color "#777")) + + (navigation + :display block + :visibility hidden + :margin-bottom -1.5em + (a + :color "#CCCCCC" + :text-shadow none + :border-bottomi none)) - (navigation - :display block - :visibility hidden - :margin-bottom -1.5em - (a - :color "#CCCCCC" - :text-shadow none - :border-bottomi none)) - - ((:and .outer-navigation :hover) - (.navigation - :visibility visible)) - - (.highlighted - :background "#adff2f") - - ;; Content - - (.page - :margin 0 - :padding 0) - - ((.page > .content) - :margin-left 40ex - :padding-left 2.5em - :max-width 85ex) - - (.sidebar - :top 0px - :left 0px - :height 100% - :width 40ex - :max-width 33% - :position fixed - :overflow-y auto - :overflow-x hidden - :background "#333" - :box-shadow inset -5px 0 5px 0px "#000" - :color "#aaa" - (p - :padding 5px - :margin 0 - :margin-left 10px - :font-size 14px) - (ul - :margin-left 10px - :padding 0 - :list-style none) - (li - :line-height 1.0 - :padding 0 - :margin 0) - (a - :border-bottom none) - (hr - :height 0.05em - :border 0 - :background "#777") - (.toc-active - :background "#336699" - :box-shadow inset -5px 0px 10px -5px "#000")) + ((:and .outer-navigation :hover) + (.navigation + :visibility visible)) - ((.sidebar > .header) - (a - :color "#777777")) + (.highlighted + :background "#adff2f") - ((.sidebar > .footer) - :margin-left 1.5em - :margin-top 2em - :margin-bottom 1em - (a - :font-size 80% - :color "#777777")) - - (form.search - :margin-left 1.5em - :margin-top 1.5em) - - (.page-toc - (a - :color "#fff")) - - (.menu-block - :padding-left 10px - :margin-bottom 1em - (a - :color "#fff" - :border-bottom none)) - (.menu-block-title - :font-size 90%) - - (|#search-results| - (.search + ;; Content + + (.page + :margin 0 + :padding 0) + + ((.page > .content) + :margin-left 40ex + :padding-left 2.5em + :max-width 85ex) + + (.sidebar + :top 0px + :left 0px + :height 100% + :width 40ex + :max-width 33% + :position fixed + :overflow-y auto + :overflow-x hidden + :background "#333" + :box-shadow inset -5px 0 5px 0px "#000" + :color "#aaa" + (p + :padding 5px + :margin 0 + :margin-left 10px + :font-size 14px) + (ul + :margin-left 10px + :padding 0 + :list-style none) (li - :margin-bottom 1em))) - - (.rss-icon - :background ,(read-file-into-string - (asdf:system-relative-pathname :40ants-doc - "static/rss-icon.base64")) - :width 1em - :height 1em - :background-size 1em 1em !important - :margin-left 0.3em - :user-select none - :display inline-block - :text-decoration none - :border none) - - (blockquote - :border-left 0.5em solid lightgray - :padding-left 1em - :margin-bottom 1em) - - (.unresolved-reference - :color magenta)))) + :line-height 1.0 + :padding 0 + :margin 0) + (a + :border-bottom none) + (hr + :height 0.05em + :border 0 + :background "#777") + (.toc-active + :background "#336699" + :box-shadow inset -5px 0px 10px -5px "#000")) + + ((.sidebar > .header) + (a + :color "#777777")) + + ((.sidebar > .footer) + :margin-left 1.5em + :margin-top 2em + :margin-bottom 1em + (a + :font-size 80% + :color "#777777")) + + (form.search + :margin-left 1.5em + :margin-top 1.5em) + + (.page-toc + (a + :color "#fff")) + + (.menu-block + :padding-left 10px + :margin-bottom 1em + (a + :color "#fff" + :border-bottom none)) + (.menu-block-title + :font-size 90%) + + (|#search-results| + (.search + (li + :margin-bottom 1em))) + + (.rss-icon + :background ,(read-file-into-string + (asdf:system-relative-pathname :40ants-doc + "static/rss-icon.base64")) + :width 1em + :height 1em + :background-size 1em 1em !important + :margin-left 0.3em + :user-select none + :display inline-block + :text-decoration none + :border none) + + (blockquote + :border-left 0.5em solid lightgray + :padding-left 1em + :margin-bottom 1em) + + (.unresolved-reference + :color magenta))) + + + ;; Mobile + (lass:compile-and-write + '(:media "(max-width: 800px)" + (body + ;; Hide things + (.sidebar + :display none) + + ;; Fix sizes + ((.page > .content) :margin 0 1ex 0 1ex + :padding 1ex)))))) (defmethod 40ants-doc-full/themes/api:render-page ((theme default-theme) uri title @@ -341,6 +358,7 @@ (defmethod 40ants-doc-full/themes/api:render-page-header ((theme default-theme) uri title) (declare (ignore uri title))) + (defmethod 40ants-doc-full/themes/api:render-page-footer ((theme default-theme) uri) (declare (ignore uri))) diff --git a/src/changelog.lisp b/src/changelog.lisp index 1eee068..8dad500 100644 --- a/src/changelog.lisp +++ b/src/changelog.lisp @@ -153,6 +153,8 @@ "CLEAN-URLS" ;; These objects are not documented yet: "40ANTS-DOC/COMMONDOC/XREF:XREF")) + (0.18.0 2024-08-29 + "* Now default theme looks good on mobile devices.") (0.17.4 2024-05-15 "* Update 5") (0.17.3 2024-05-15