grid generation and minor updates
This commit is contained in:
Yann Esposito (Yogsototh)
parent
479cb7834a
commit
e3ba853504
GPG key ID:
7B19A4C650D59646
126
bb/brut/site.clj
126
bb/brut/site.clj
|
|
@ -113,8 +113,12 @@
|
|||
", " [:strong "strong"]
|
||||
", " [:i "italic"]
|
||||
", " [:em "emphasis"]
|
||||
", " [:code "code"]
|
||||
", and if you really want something to be extremly visible use the class " [:code.hl "hl"] "."]
|
||||
", " [:code "code"] ". "
|
||||
"If you really want something to be extremly visible, "
|
||||
[:strong.hl "use the class "[:code.hl "hl"]]
|
||||
"."]
|
||||
[:p "Links will looks like this into text: "
|
||||
[:a {:href "#"} "This is a link inside a paragraph."]]
|
||||
[:p "The text should be " [:strong.hl "very dense"] " on purpose."
|
||||
" Forget your lessons about nice space in design here."
|
||||
" The goal of this design is to produce " [:em "professional"] " UI applications."
|
||||
|
|
@ -213,26 +217,7 @@
|
|||
[:a {:class "tb sm info"} "Info"]
|
||||
[:a {:class "tb ok"} "OK"]
|
||||
[:a {:class "tb big warn"} "Warn"]
|
||||
[:a {:class "tb huge err"} "ERR"]]
|
||||
[:h4 "In a grid"]
|
||||
[:div.row.gapless
|
||||
[:div.col.c2.gapless
|
||||
[:a {:class "tb sm"} "tb sm"]
|
||||
[:a {:class "tb sm info"} "tb sm"]
|
||||
[:a {:class "tb sm ok"} "tb sm"]
|
||||
[:a {:class "tb sm warn"} "tb sm"]]
|
||||
[:div.col.c2.gapless
|
||||
[:a {:class "tb"} "tb"]
|
||||
[:a {:class "tb info"} "tb"]
|
||||
[:a {:class "tb ok"} "tb"]
|
||||
[:a {:class "tb warn"} "tb"]]
|
||||
[:div.col.c3.gapless
|
||||
[:a {:class "tb big warn"} "tb big"]
|
||||
[:a {:class "tb big err"} "tb big"]
|
||||
[:a {:class "tb big fatal"} "tb big"]]
|
||||
[:div.col.c5.gapless
|
||||
[:a {:class "tb huge err"} "tb huge"]
|
||||
[:a {:class "tb huge fatal"} "tb huge"]]]]
|
||||
[:a {:class "tb huge err"} "ERR"]]]
|
||||
buttons [:div {:id "buttons"}
|
||||
[:h2 "Classic"]
|
||||
[:a {:class "btn"} "btn"]
|
||||
|
|
@ -374,8 +359,12 @@
|
|||
[:a {:href "#"} "Four"]]]
|
||||
[:button {:class "btn-close btn sm"} "×"]]
|
||||
navbar-section {:title "Navbar"
|
||||
:cards [navbar]
|
||||
}
|
||||
:cards [navbar]}
|
||||
footer [:footer
|
||||
[:div.container
|
||||
[:p "Made by " [:a {:href "https://yannesposito.com"} "Yann Esposito"]]]]
|
||||
footer-section {:title "Footer"
|
||||
:cards [footer]}
|
||||
table [:table {:class "table"}
|
||||
[:thead
|
||||
[:tr
|
||||
|
|
@ -409,7 +398,7 @@
|
|||
"The \"Android Safe\" icons work everywhere, tested on hundreds of devices."]
|
||||
[:p
|
||||
(mapcat (fn [w i]
|
||||
[w " " [:i.ico i] " "])
|
||||
[ [:span w " "] [:i.ico i] " "])
|
||||
(string/split
|
||||
(str "Inserting in the middle of some text to check the size."
|
||||
" Now this should give an idea about the size relatively "
|
||||
|
|
@ -430,46 +419,52 @@
|
|||
"\"Android Safe\" set.)"]]
|
||||
icons-section {:title "icons"
|
||||
:cards [basic-icons full-icons]}
|
||||
grid [:div
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c12"} "c12"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c11"} "c11"]
|
||||
[:div {:class "light c1"} "c1"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c10"} "c10"]
|
||||
[:div {:class "light c2"} "c2"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c9"} "c9"]
|
||||
[:div {:class "light c3"} "c3"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c8"} "c8"]
|
||||
[:div {:class "light c4"} "c4"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c7"} "c7"]
|
||||
[:div {:class "light c5"} "c5"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c6"} "c6"]
|
||||
[:div {:class "light c6"} "c6"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c5"} "c5"]
|
||||
[:div {:class "light c7"} "c7"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c4"} "c4"]
|
||||
[:div {:class "light c8"} "c8"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c3"} "c3"]
|
||||
[:div {:class "light c9"} "c9"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c2"} "c2"]
|
||||
[:div {:class "light c10"} "c10"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "bg-neutral c1"} "c1"]
|
||||
[:div {:class "light c11"} "c11"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "light c12"} "c12"]]]
|
||||
grid
|
||||
[:div
|
||||
[:h3 "With default gap"]
|
||||
[:div
|
||||
(for [i (range 12 -1 -1)]
|
||||
(let [cl (str "c" i)
|
||||
co-cl (str "c" (- 12 i))]
|
||||
[:div.row
|
||||
(when (> i 0)
|
||||
[:div.bg-neutral {:class cl} cl])
|
||||
(when (> (- 12 i) 0)
|
||||
[:div.y {:class co-cl} co-cl])]))]]
|
||||
grid-gapless
|
||||
[:div
|
||||
[:h3 "Gapless"]
|
||||
[:div
|
||||
(for [i (range 12 -1 -1)]
|
||||
(let [cl (str "c" i)
|
||||
co-cl (str "c" (- 12 i))]
|
||||
[:div.row.gapless
|
||||
(when (> i 0)
|
||||
[:div.bg-neutral {:class cl} cl])
|
||||
(when (> (- 12 i) 0)
|
||||
[:div.y {:class co-cl} co-cl])]))]]
|
||||
grid-3col
|
||||
[:div
|
||||
[:h3 "3 columns"]
|
||||
[:div
|
||||
(for [i (range 11 0 -1)
|
||||
j (range (- 11 i) -1 -1)]
|
||||
(let [k (- 12 i j)
|
||||
cli (str "c" i)
|
||||
clj (str "c" j)
|
||||
clk (str "c" k)]
|
||||
(if (= j 0)
|
||||
[:br]
|
||||
[:div.row
|
||||
(when (> j 0)
|
||||
[:div.b {:class clj} clj])
|
||||
(when (> i 0)
|
||||
[:div.bg-neutral {:class cli} cli])
|
||||
(when (> k 0)
|
||||
[:div.r {:class clk} clk])
|
||||
])))]]
|
||||
grid-section {:title "Grid"
|
||||
:cards [grid]}]
|
||||
:cards [grid grid-gapless grid-3col]}]
|
||||
[:div.container
|
||||
(for [{:keys [title cards]} [textual-section
|
||||
grid-section
|
||||
|
|
@ -479,7 +474,8 @@
|
|||
tables-section
|
||||
buttons-section
|
||||
messages-section
|
||||
navbar-section]]
|
||||
navbar-section
|
||||
footer-section]]
|
||||
[:div.col
|
||||
[:h2 {:id title}
|
||||
[:a {:href (str "#" title)} [:i.ico "§"]] " "
|
||||
|
|
|
|||
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
931
h/docs.html
931
h/docs.html
File diff suppressed because one or more lines are too long
|
|
@ -14,6 +14,7 @@
|
|||
|
||||
--shadow: rgba(0,0,0,0.65);
|
||||
|
||||
/* rainbow colors */
|
||||
--y: #b58900;
|
||||
--o: #cb4b16;
|
||||
--r: #dc322f;
|
||||
|
|
@ -23,7 +24,7 @@
|
|||
--c: #2aa198;
|
||||
--g: #859900;
|
||||
|
||||
--accent: var(--y);
|
||||
--accent: var(--b);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -41,8 +42,11 @@ a { color: var(--fg); }
|
|||
p > a, li > a { color: var(--accent); }
|
||||
|
||||
.msg, .btn { background-color: var(--bg2) }
|
||||
.info { color: var(--bg); background-color: var(--b); }
|
||||
.ok { color: var(--bg); background-color: var(--g); }
|
||||
.warn { color: var(--bg); background-color: var(--y); }
|
||||
.err { color: var(--bg); background-color: var(--r); }
|
||||
.fatal { color: var(--bg); background-color: var(--m); }
|
||||
.b, .info { color: var(--bg); background-color: var(--b); }
|
||||
.g, .ok { color: var(--bg); background-color: var(--g); }
|
||||
.y, .warn { color: var(--bg); background-color: var(--y); }
|
||||
.r, .err { color: var(--bg); background-color: var(--r); }
|
||||
.m, .fatal { color: var(--bg); background-color: var(--m); }
|
||||
.o { color: var(--bg); background-color: var(--o); }
|
||||
.v { color: var(--bg); background-color: var(--v); }
|
||||
.c { color: var(--bg); background-color: var(--c); }
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ ol {
|
|||
padding-inline-start: 2rem;
|
||||
}
|
||||
ul > li::marker { font-size: 1.5rem; }
|
||||
summary:hover { cursor: pointer; }
|
||||
summary:hover { cursor: pointer; background: var(--bg2);}
|
||||
table { font-size: 1rem; }
|
||||
|
||||
.sm { font-size: 0.75rem; line-height: 0.65rem; }
|
||||
|
|
|
|||
Loading…
Reference in a new issue