-
Notifications
You must be signed in to change notification settings - Fork 1
/
fonts_page.cljs
40 lines (35 loc) · 1.42 KB
/
fonts_page.cljs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
(ns respo-ui.comp.fonts-page
(:require [respo.macros :refer [defcomp div <>]]
[respo-ui.core :as ui]
[respo.comp.space :refer [=<]]
[respo-md.comp.md :refer [comp-md-block]]))
(def style-demo {:font-size 20, :font-weight "bold", :line-height "56px"})
(defn render-font-demo [family weight]
(div
{:style (merge
style-demo
{:font-family family, :font-weight weight, :font-size 16, :line-height "32px"})}
(<> (str "This is a demo of the font, guess what you like: " family " " weight))))
(def style-section {:font-size 24, :font-family ui/font-fancy, :line-height "60px"})
(defcomp
comp-fonts-page
()
(div
{}
(div {:style style-section} (<> "Normal fonts"))
(comp-md-block "which can be used with `ui/font-normal`. It's Hind fonts." {})
(render-font-demo ui/font-normal 300)
(render-font-demo ui/font-normal 400)
(render-font-demo ui/font-normal 500)
(=< nil 32)
(div {:style style-section} (<> "Fancy fonts"))
(comp-md-block "which can be used with `ui/font-fancy`. Josefin Sans is used here." {})
(render-font-demo ui/font-fancy 100)
(render-font-demo ui/font-fancy 300)
(render-font-demo ui/font-fancy 400)
(=< nil 32)
(div {:style style-section} (<> "Code fonts"))
(comp-md-block "which can be used with `ui/font-code`." {})
(render-font-demo ui/font-code 100)
(render-font-demo ui/font-code 300)
(render-font-demo ui/font-code 400)))