marcuskammer/dev.metalisp.sbt
1
1
Fork 0
Code Issues 1 Pull requests Projects 1 Releases Packages Wiki Activity Actions

Apply dark theme properties

Browse source
This commit is contained in:
Marcus Kammer 2023-07-20 21:26:14 +02:00
parent 8db0657245
commit 9e8d66b922
Signed by: marcuskammer
GPG key ID: C374817BE285268F
2 changed files with 25 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
examples/album.lisp
View file

@ -103,9 +103,10 @@ Additional content can be added to the header by passing it as BODY arguments
to the macro. The BODY content will be included in the header after the to the macro. The BODY content will be included in the header after the
predefined content." predefined content."
`(spinneret:with-html `(spinneret:with-html
(:header (collapsible *navbar-header-id* (:header :data-bs-theme "dark"
,@body) (collapsible *navbar-header-id* (:color (:text "bg-dark"))
(navbar (:fluid nil) ,@body)
(navbar (:fluid nil :dark t)
(brand () "Album") (brand () "Album")
(toggler *navbar-header-id*))))) (toggler *navbar-header-id*)))))
@ -131,8 +132,7 @@ a short paragraph about Bootstrap.
Example usage: Example usage:
(footer (:color (:text :primary :background :light) (footer (:color (:text :primary :background :light)
:spacing (:property :p :side :y :size 4)) :spacing (:property :p :side :y :size 4))
:copyright \"Copyright 2023\" :copyright \"Copyright 2023\")
(:p :class \"custom-class\" \"Custom content here\"))
; This will generate a footer with primary color text and light background ; This will generate a footer with primary color text and light background
; with a top/bottom padding of size 4. A copyright notice is set. Additionally, ; with a top/bottom padding of size 4. A copyright notice is set. Additionally,
; a paragraph with class 'custom-class' and text 'Custom content here' will ; a paragraph with class 'custom-class' and text 'Custom content here' will
@ -166,9 +166,12 @@ This macro generates a hero unit with the given title, leading text, and call
to action button. The generated hero unit uses Bootstrap classes for styling." to action button. The generated hero unit uses Bootstrap classes for styling."
`(spinneret:with-html `(spinneret:with-html
,@(destructuring-bind (&key title lead cta) rest ,@(destructuring-bind (&key title lead cta) rest
`((:h1 :class "fw-light" ,title) `((con nil
(lead-p () ,lead) (row nil
(:p (btn-primary ,cta)))))) (col nil
(:h1 :class "fw-light" ,title)
(lead-p () ,lead)
(:p (btn-primary ,cta)))))))))
(defmacro lead-p ((&key (color '(:text "body-secondary"))) &body body) (defmacro lead-p ((&key (color '(:text "body-secondary"))) &body body)
`(spinneret:with-html `(spinneret:with-html

23
src/component/navbar.lisp
View file

@ -113,19 +113,22 @@ Example:
:aria-label "Toggle navigation" :aria-label "Toggle navigation"
(:span :class "navbar-toggler-icon")))) (:span :class "navbar-toggler-icon"))))
(defmacro collapsible (id &body body) (defmacro collapsible (id (&key (color nil)) &body body)
`(spinneret:with-html `(spinneret:with-html
(:div :id ,id (:div :id ,id
:class "collapse" :class ,(concatenate 'string
"collapse "
(if (null color) ""
(apply #'cl-sbt/utility:color color)))
(cl-sbt/grid:con () (cl-sbt/grid:con ()
(cl-sbt/grid:row () (cl-sbt/grid:row ()
,@body))))) ,@body)))))
(defmacro navbar ((&key (fluid t) (classes "")) &body body) (defmacro navbar ((&key (fluid t) (dark nil)) &body body)
"This macro generates a Bootstrap navbar. "This macro generates a Bootstrap navbar.
FLUID: Specifies whether the navbar should be full width. Defaults to true. FLUID: Specifies whether the navbar should be full width. Defaults to true.
CLASSES: Specifies additional CSS classes for the navbar. DARK: Specifies additional CSS classes for the navbar.
BODY: Specifies the content to be displayed in the navbar. BODY: Specifies the content to be displayed in the navbar.
Example: Example:
@ -133,8 +136,10 @@ Example:
(brand \"My Website\") (brand \"My Website\")
(nav \"Home\" \"About\" \"Contact\"))" (nav \"Home\" \"About\" \"Contact\"))"
`(spinneret:with-html `(spinneret:with-html
(:nav :class (format nil "navbar ~a" ,classes) (:nav :class ,(concatenate 'string "navbar " (if (null dark)
(:div :class ,(if fluid "bg-light"
"container-fluid" "navbar-dark bg-dark"))
"container") (:div :class ,(if fluid
,@body)))) "container-fluid"
"container")
,@body))))