Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Reactive font size and grid
(page "index.html")
(defc t "Grumpy wizards make toxic brew for the evil Queen and Jack.")
(defc size 16)
(defn r [size] (range 1 size))
(defc= make-grid
(str "background-size: " size "px, " size "px; background-image:repeating-linear-gradient(0deg, #000, #000 1px, transparent 1px, transparent "
size "px); height:100%; width:100%; position:absolute;z-index: 1"))
(html
(head
(link :rel "stylesheet" :type "text/css" :href "css/normalize.css")
(link :rel "stylesheet" :type "text/css" :href "css/main.css"))
(body
(button :on-click #(swap! size inc) "increase font")
(button :on-click #(swap! size dec) "decrease font")
(div
(div :id "grid" :style make-grid)
#_(div :id "container" :style "position: absolute; z-index: 2"
(map (fn [i]
(div :class "line"
:style (cell= (str "font-size:" size "px")) @t))
(r 10)))
(div :id "container" :style "position: absolute; z-index: 2"
(map (fn [i]
(div :class "line"
:css (cell= {"font-size" (str size "px")}) @t))
(r 10))))))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment