still
This commit is contained in:
Yann Esposito (Yogsototh)
parent
304992fe2b
commit
94b6454dee
GPG key ID:
7B19A4C650D59646
285
bb/brut/main.clj
285
bb/brut/main.clj
|
|
@ -18,9 +18,9 @@
|
|||
[:button.btn.sn.btn-close "×"]]))
|
||||
|
||||
(defn footer []
|
||||
[:div.row
|
||||
[:div.block
|
||||
[:span "By "
|
||||
[:footer
|
||||
[:div.container
|
||||
[:p "By "
|
||||
[:a {:href "https://yannesposito.com"}
|
||||
"Yann Esposito"]]]])
|
||||
|
||||
|
|
@ -110,9 +110,284 @@
|
|||
[:pre (-> (str (h/html images))
|
||||
(string/replace #"><" ">\n<")
|
||||
)])
|
||||
img-block (conj images pre-img)]
|
||||
img-block (conj images pre-img)
|
||||
docs [:div
|
||||
[:h1 "Buttons"]
|
||||
[:h2 "Text Buttons"]
|
||||
[:h3 "Classic"]
|
||||
[:a {:class "tb"} "tb"]
|
||||
[:a {:class "tb info"} "tb info"]
|
||||
[:a {:class "tb ok"} "tb ok"]
|
||||
[:a {:class "tb warn"} "tb warn"]
|
||||
[:a {:class "tb err"} "tb err"]
|
||||
[:a {:class "tb fatal"} "tb fatal"]
|
||||
[:h3 "Sizes"]
|
||||
[:div {:class "block"} "Text"
|
||||
[:a {:class "tb sm"} "small"]
|
||||
[:a {:class "tb"} "normal"]
|
||||
[:a {:class "tb big"} "Big"]
|
||||
[:a {:class "tb huge"} "HUGE"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "col c2 gapless"}
|
||||
[:span " Text "
|
||||
[: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 {:class "col c2 gapless"}
|
||||
[:a {:class "tb"} "tb"]
|
||||
[:a {:class "tb info"} "tb"]
|
||||
[:a {:class "tb ok"} "tb"]
|
||||
[:a {:class "tb warn"} "tb"]]
|
||||
[:div {:class "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 {:class "col c5 gapless"}
|
||||
[:a {:class "tb huge err"} "tb huge"]
|
||||
[:a {:class "tb huge fatal"} "tb huge"]]]
|
||||
[:h2 "Classic"]
|
||||
[:a {:class "btn"} "btn"]
|
||||
[:a {:class "btn info"} "btn info"]
|
||||
[:a {:class "btn ok"} "btn ok"]
|
||||
[:a {:class "btn warn"} "btn warn"]
|
||||
[:a {:class "btn err"} "btn err"]
|
||||
[:a {:class "btn fatal"} "btn fatal"]
|
||||
[:pre {:class "block"} "<a class="btn btn-b">btn-b</a>"]
|
||||
[:h2 "Sizes"]
|
||||
[:a {:class "btn sm"} "btn sm"]
|
||||
[:a {:class "btn info"} "btn info"]
|
||||
[:a {:class "btn big warn"} "btn big warn"]
|
||||
[:a {:class "btn huge err"} "btn huge err"]
|
||||
[:pre {:class "block"} "<a class="btn sm info">btn sm info</a>"]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "col c4 card"}
|
||||
[:h3 "Standardized Width "
|
||||
[:code "btn std"]]
|
||||
[:div {:class "col"}
|
||||
[:a {:class "btn std"} "btn std"]
|
||||
[:a {:class "btn std info"} "btn std info"]
|
||||
[:a {:class "btn std ok"} "btn std ok"]
|
||||
[:a {:class "btn std warn"} "btn std warn"]
|
||||
[:a {:class "btn std err"} "btn std err"]
|
||||
[:a {:class "btn std fatal"} "btn std fatal"]]]
|
||||
[:div {:class "col c4 card"}
|
||||
[:h3 "Big"]
|
||||
[:div {:class "col"}
|
||||
[:a {:class "btn std big "} "btn std"]
|
||||
[:a {:class "btn std big info"} "btn std info"]
|
||||
[:a {:class "btn std big ok"} "btn std ok"]
|
||||
[:a {:class "btn std big warn"} "btn std warn"]]]
|
||||
[:div {:class "col c4 card"}
|
||||
[:h3 "Huge"]
|
||||
[:div {:class "col"}
|
||||
[:a {:class "btn std huge"} "btn std"]
|
||||
[:a {:class "btn std huge info"} "btn std info"]
|
||||
[:a {:class "btn std huge ok"} "btn std ok"]]]]
|
||||
[:h1 "Messages"]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "col c6 gapless"}
|
||||
[:h2 "Basic Messages"]
|
||||
[:br]
|
||||
[:div {:class "msg"}
|
||||
[:strong "Normal Message"]"This is a normal message with "
|
||||
[:code "msg"]".\n"]
|
||||
[:div {:class "msg info"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☞"]" Info"]"This is done by adding "
|
||||
[:code "info"]" to the class.\n"]
|
||||
[:div {:class "msg ok"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☑"]" OK"]"This is done by adding "
|
||||
[:code "ok"]" to the class.\n"]
|
||||
[:div {:class "msg warn"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☣"]" Warning"]"This is done by adding "
|
||||
[:code "warn"]" to the class.\n"]
|
||||
[:div {:class "msg err"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Error"]"This is done by adding "
|
||||
[:code "err"]" to the class.\n"]
|
||||
[:div {:class "msg fatal"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Fatal"]"This is done by adding "
|
||||
[:code "fatal"]" to the class.\n"]]
|
||||
[:div {:class "col c6 gapless"}
|
||||
[:h2 "Strong Alerts"]
|
||||
[:br]
|
||||
[:div {:class "msg alert"}
|
||||
[:strong "Alert Message"]"This is a normal message with "
|
||||
[:code "msg"]".\n"]
|
||||
[:div {:class "msg alert info"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☞"]" Alert Info"]"This is done by adding "
|
||||
[:code "info"]" to the class.\n"]
|
||||
[:div {:class "msg alert ok"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☑"]" Alert OK"]"This is done by adding "
|
||||
[:code "ok"]" to the class.\n"]
|
||||
[:div {:class "msg alert warn"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☣"]" Alert Warning"]"This is done by adding "
|
||||
[:code "warn"]" to the class.\n"]
|
||||
[:div {:class "msg alert err"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Alert Error"]"This is done by adding "
|
||||
[:code "err"]" to the class.\n"]
|
||||
[:div {:class "msg alert fatal"}
|
||||
[:strong
|
||||
[:i {:class "ico"} "☒"]" Alert Fatal"]"This is done by adding "
|
||||
[:code "fatal"]" to the class.\n"]]]
|
||||
[:pre "<div class="msg">\n <strong>Alert headline!</strong>\n Message text\n</div>"]
|
||||
[:div
|
||||
[:h1 "Forms"]
|
||||
[:input {:class "neutral", :type "text", :placeholder "input"}]
|
||||
[:br]
|
||||
[:textarea {:class "neutral", :rows "3", :placeholder "textarea"}]
|
||||
[:br]
|
||||
[:span {:class "addon bg-info"} "$"]
|
||||
[:input {:type "text"}]
|
||||
[:br]
|
||||
[:pre "<input type="text">\n"
|
||||
[:br]"<textarea rows="3">\n"
|
||||
[:br]"<span class="addon">$</span><input type="text">"]
|
||||
[:div {:class "msg"}
|
||||
[:strong "Be careful with addons!"]" If you do not want a space between the addon and the input make sure that there is no space between the "
|
||||
[:code "</span>"]" and "
|
||||
[:code "<input>"]" tags. Example: "
|
||||
[:pre "... </span> <input ..."]
|
||||
[:span {:class "addon"} "$"]
|
||||
[:input {:type "text", :class "smooth"}]
|
||||
[:pre "... </span><input ..."]
|
||||
[:span {:class "addon"} "$"]
|
||||
[:input {:type "text", :class "smooth"}]]]
|
||||
[:div {:class "navbar"}
|
||||
[:h1 "Navbars"]
|
||||
[:nav {:class "nav", :tabindex "-1", :onclick "this.focus()"}
|
||||
[:div {:class "container"}
|
||||
[:a {:class "pagename current", :href "#"} "BRUT"]
|
||||
[:a {:href "#"} "One"]
|
||||
[:a {:href "#"} "Two"]
|
||||
[:a {:href "#"} "Three"]
|
||||
[:a {:href "#"} "Four"]]]
|
||||
[:button {:class "btn-close btn sm"} "×"]
|
||||
[:br]
|
||||
[:pre "<nav class="nav" tabindex="-1" onclick="this.focus()">\n <div class="container">\n <a class="pagename current" href="#">BRUT</a>\n <a href="#">One</a>\n <a href="#">Two</a>\n <a href="#">Three</a>\n </div>\n</nav>\n<button class="btn-close btn sm">×</button>"]]
|
||||
[:div
|
||||
[:h1 "Tables"]
|
||||
[:table {:class "table"}
|
||||
[:thead
|
||||
[:tr
|
||||
[:th "#"]
|
||||
[:th "Widgets Sold"]
|
||||
[:th "Revenue (£)"]
|
||||
[:th "Profit (£)"]]]
|
||||
[:tbody
|
||||
[:tr
|
||||
[:td "1"]
|
||||
[:td "5"]
|
||||
[:td "10"]
|
||||
[:td "2"]]
|
||||
[:tr
|
||||
[:td "2"]
|
||||
[:td "10"]
|
||||
[:td "20"]
|
||||
[:td "4"]]
|
||||
[:tr
|
||||
[:td "3"]
|
||||
[:td "500"]
|
||||
[:td "1000"]
|
||||
[:td "200"]]]]
|
||||
[:br]
|
||||
[:br]
|
||||
[:pre "<table class="table">\n <thead>\n <tr>\n <th>#</th>\n <th>Widgets Sold</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>1</td>\n <td>5</td>\n </tr>\n <tr>\n <td>2</td>\n <td>10</td>\n </tr>\n <tr>\n <td>3</td>\n <td>500</td>\n </tr>\n </tbody>\n</table>\n"]]
|
||||
[:h1 "Icons"]
|
||||
[:div {:class "icons"}
|
||||
[:div {:class "row"}
|
||||
[:div {:class "c6"}
|
||||
[:div {:class "col card"}
|
||||
[:div {:class "block"}
|
||||
[:b "Android Safe"]]
|
||||
[:i {:class "ico block", :style "line-height: 1.5rem"} "☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №\n"]
|
||||
[:div {:class "msg push"} "The "Android Safe" icons work everywhere, tested on hundreds of devices.\n"]]]
|
||||
[:div {:class "c6"}
|
||||
[:div {:class "col card"}
|
||||
[:div {:class "block"}
|
||||
[:b "Total Set"]]
|
||||
[:i {:class "ico block", :style "line-height: 1.5rem"} "✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩\n"]
|
||||
[:div {:class "msg warn push"} "Although over 75% of Android devices we tested\nsupport all "Total Set" icons, if a substantial\nportion of your users use old Android devices\nyou should stick to the "Android Safe" set.\n(The "Total Set" does not include icons from the "Android Safe" set.)\n"]]]]
|
||||
[:pre "<i class="ico">Copy and paste icons from above here!</i>"]
|
||||
[:h1 "Grids"]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "dark c12"} "c12"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "dark c11"} "c11"]
|
||||
[:div {:class "light c1"} "c1"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "dark c10"} "c10"]
|
||||
[:div {:class "light c2"} "c2"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "dark c9"} "c9"]
|
||||
[:div {:class "light c3"} "c3"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "dark c8"} "c8"]
|
||||
[:div {:class "light c4"} "c4"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "dark c7"} "c7"]
|
||||
[:div {:class "light c5"} "c5"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "dark c6"} "c6"]
|
||||
[:div {:class "light c6"} "c6"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "dark c5"} "c5"]
|
||||
[:div {:class "light c7"} "c7"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "dark c4"} "c4"]
|
||||
[:div {:class "light c8"} "c8"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "dark c3"} "c3"]
|
||||
[:div {:class "light c9"} "c9"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "dark c2"} "c2"]
|
||||
[:div {:class "light c10"} "c10"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "dark c1"} "c1"]
|
||||
[:div {:class "light c11"} "c11"]]
|
||||
[:div {:class "row"}
|
||||
[:div {:class "light c12"} "c12"]]
|
||||
[:br]
|
||||
[:pre "<div class="row">"
|
||||
[:br]" <div class="c12">12</div>"
|
||||
[:br]"</div>\n"
|
||||
[:br]"<div class="row">"
|
||||
[:br]" <div class="c4">4</div>"
|
||||
[:br]" <div class="c8">8</div>"
|
||||
[:br]"</div>\n"]]
|
||||
[:h1 "Headings"]
|
||||
[:div {:class "headings"}
|
||||
[:p "By default there is some space before and after any heading:"]
|
||||
[:h1 "h1"]
|
||||
[:h2 "h2"]
|
||||
[:h3 "h3"]
|
||||
[:h4 "h4"]
|
||||
[:h5 "h5"]
|
||||
[:h6 "h6"]
|
||||
[:br]
|
||||
[:p "You can remove the space by using the class "
|
||||
[:code "tight"]" to the heading:"]
|
||||
[:h1 {:class "tight"} "h1 tight"]
|
||||
[:h2 {:class "tight"} "h2 tight"]
|
||||
[:h3 {:class "tight"} "h3 tight"]
|
||||
[:h4 {:class "tight"} "h4 tight"]
|
||||
[:h5 {:class "tight"} "h5 tight"]
|
||||
[:h6 {:class "tight"} "h6 tight"]
|
||||
[:br]
|
||||
[:pre "<h1>Level One Heading</h1>"]]]
|
||||
]
|
||||
[:div.container
|
||||
img-block]))
|
||||
img-block
|
||||
docs
|
||||
]))
|
||||
|
||||
(defn -main [& _args]
|
||||
(gen-page "index.html"
|
||||
|
|
|
|||
2
brut-nocolors.min.css
vendored
2
brut-nocolors.min.css
vendored
|
|
@ -1 +1 @@
|
|||
:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--shadow:rgba(0, 0, 0, 0.75);--cnt:#fff;--na:#333;--nb:#000}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--nl:#666666;--n0:#808080;--n1:#999999;--n2:#b3b3b3;--shadow:rgba(128, 128, 128, 0.3);--cnt:#000;--na:#eee;--nb:#fff}}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}html,body{font-size:12px;line-height:1em;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:auto}@media only screen and (min-width:1310px){.container{margin:auto;width:1270px}}pre{background:var(--bg2);padding:10px}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}.sm{font-size:.75rem}.big{font-size:2rem;line-height:2rem}.huge{font-size:3rem;line-height:3rem}.tb,.btn{text-decoration:none;display:inline-block}.tb{font-weight:700;cursor:pointer;padding:2px}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"❬"}.tb:after{content:"❭"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"❰"}.tb:active:after{content:"❱"}.btn{background:var(--n0);border:solid 2px #000;color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:2px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);text-align:center}.btn:hover{background:var(--n1);color:#fff}.btn:active,.btn:focus{color:#fff;background:var(--n2);box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:870px){.row .col{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.card,.block{padding:1rem;border:solid 1rem}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;border:double 1rem}.fill{flex-grow:1}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);border-top:solid 1rem var(--bg);border-bottom:solid 1rem var(--bg)}.tight{border:0}h1{background:var(--fg)}h2{background:var(--n2)}h2{background:var(--n1)}h3{background:var(--n0)}h4{background:var(--nl);color:var(--fg)}h5{background:var(--bg2);color:var(--fg)}h6{color:var(--fg)}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:8px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:8px 12px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--i1)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}.nav{height:50px;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-51px 10px;display:none;border:none;box-shadow:none;background:0 0}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{background:var(--nl);border-left:5px solid var(--n0);padding:1rem}
|
||||
:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#808080;--n2:#666666;--shadow:rgba(0, 0, 0, 0.75);--cnt:#fff;--na:#333;--nb:#000}@media(prefers-color-scheme:dark){:root{--bg:#000;--fg:#ccc;--bg2:#333;--darken:rgba(255, 255, 255, 0.1);--nl:#666666;--n0:#808080;--n1:#999999;--n2:#b3b3b3;--shadow:rgba(128, 128, 128, 0.3);--cnt:#000;--na:#eee;--nb:#fff}}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}html,body{font-size:12px;line-height:1em;min-height:100vh;margin:0;padding:0;border:0;outline:0}*{box-sizing:border-box}body,textarea,input,select{background:var(--bg);color:var(--fg);border-radius:0;font-family:Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:1rem;margin:0}img{max-width:100%}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1rem}.container{padding:0 20px;width:auto}@media only screen and (min-width:1310px){.container{margin:auto;width:1270px}}pre{background:var(--bg2);padding:10px}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}.sm{font-size:.75rem}.big{font-size:2rem;line-height:2rem}.huge{font-size:3rem;line-height:3rem}.tb,.btn{text-decoration:none;display:inline-block}.tb{font-weight:700;cursor:pointer;padding:2px}.tb:before,.tb:after{opacity:.3;display:inline-block}.tb:before{content:"❬"}.tb:after{content:"❭"}.tb:hover{text-decoration:underline}.tb:hover::before,.tb:hover::after{opacity:1}.tb:active:before{content:"❰"}.tb:active:after{content:"❱"}.btn{background:var(--n0);border:solid 2px #000;color:#fff;font-weight:700;cursor:pointer;display:inline-block;margin:0 4px 4px 0;padding:1rem 2rem;box-shadow:4px 4px var(--shadow);text-align:center;vertical-align:bottom}.btn:hover{background:var(--n1);color:#fff}.btn:active,.btn:focus{color:#fff;background:var(--n2);box-shadow:1px 1px #000;position:relative;top:3px;left:3px}.btn.sm{padding:.5rem 1rem}.btn.std{width:12rem}.btn.big.std{width:20rem}.btn.huge.std{width:24rem}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.middle{justify-content:center;align-item:center}.gapless{gap:0}.table,.c12{width:100%;flex:12}.c11{flex:11;width:91.66%}.c10{flex:10;width:83.33%}.c9{flex:9;width:75%}.c8{flex:8;width:66.66%}.c7{flex:7;width:58.33%}.c6{flex:6;width:50%}.c5{flex:5;width:41.66%}.c4{flex:4;width:33.33%}.c3{flex:3;width:25%}.c2{flex:2;width:16.66%}.c1{flex:1;width:8.33%}@media(max-width:870px){.row .col{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.card,.block{padding:1rem;border:solid 1rem}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover;min-height:100vh}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem;border:double 1rem}.fill{flex-grow:1}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{padding:.5rem;font-size:1rem;margin:0;outline:0;color:var(--bg);border-top:solid 1rem var(--bg);border-bottom:solid 1rem var(--bg)}.tight{border:0}h1{background:var(--fg)}h2{background:var(--n2)}h2{background:var(--n1)}h3{background:var(--n0)}h4{background:var(--nl);color:var(--fg)}h5{background:var(--bg2);color:var(--fg)}h6{color:var(--fg)}.ico{font:20px Arial Unicode MS,Lucida Sans Unicode;line-height:10px;vertical-align:top}label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:2px solid;padding:8px}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:8px 12px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--i1)}.nav{background:var(--bg2);border-bottom:solid 1px var(--darken)}footer{background:var(--bg2);border-top:solid 1px var(--darken)}.nav{height:3rem;padding:11px 0 15px}.nav a{text-decoration:none;opacity:.7;padding-right:1em;position:relative;top:-1px}.nav a:hover{opacity:1}.nav .pagename{opacity:1;font-weight:700;font-size:22px;top:1px}.btn.btn-close{float:right;font-size:25px;margin:-4.1rem 0;display:none;border:none;box-shadow:none;background:0 0;color:var(--fg)}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:var(--bg2);border-bottom:11px double;border-top:3px solid;content:'';float:right;height:.25rem;position:relative;right:0;top:8px;width:2rem}.nav a{display:block;padding:.5em 0;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:var(--bg2)}.msg{background:var(--nl);border-left:5px solid var(--n0);padding:1rem}
|
||||
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
75
h/g-docs.html
Normal file
75
h/g-docs.html
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport" /><title>BRUT - documentation</title><link href="../brut-nocolors.min.css" rel="stylesheet" type="text/css" /></head><body class="col"><div><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename" href="../index.html">BRUT</a><a href="../h/docs.html">Docs</a><a href="../h/download.html">Download</a><a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a></div></nav><button class="btn sn btn-close">×</button></div><div class="container"><div id="images"><h1>Images</h1><h2>Inside a grid</h2><div class="row"><div class="card"><p>Inside a card</p><img src="../h/img/brutalism.webp" /></div><div><p>Directly a card</p><img src="../h/img/brutalism.webp" /></div><div class="block"><p>In a block</p><img src="../h/img/brutalism.webp" /></div></div><pre><div id="images">
|
||||
<h1>Images</h1>
|
||||
<h2>Inside a grid</h2>
|
||||
<div class="row">
|
||||
<div class="card">
|
||||
<p>Inside a card</p>
|
||||
<img src="../h/img/brutalism.webp" />
|
||||
</div>
|
||||
<div>
|
||||
<p>Directly a card</p>
|
||||
<img src="../h/img/brutalism.webp" />
|
||||
</div>
|
||||
<div class="block">
|
||||
<p>In a block</p>
|
||||
<img src="../h/img/brutalism.webp" />
|
||||
</div>
|
||||
</div>
|
||||
</div></pre></div><div><h1>Buttons</h1><h2>Text Buttons</h2><h3>Classic</h3><a class="tb">tb</a><a class="tb info">tb info</a><a class="tb ok">tb ok</a><a class="tb warn">tb warn</a><a class="tb err">tb err</a><a class="tb fatal">tb fatal</a><h3>Sizes</h3><div class="block">Text<a class="tb sm">small</a><a class="tb">normal</a><a class="tb big">Big</a><a class="tb huge">HUGE</a></div><div class="row"><div class="col c2 gapless"><span> Text <a class="tb sm">tb sm</a> </span><a class="tb sm info">tb sm</a><a class="tb sm ok">tb sm</a><a class="tb sm warn">tb sm</a></div><div class="col c2 gapless"><a class="tb">tb</a><a class="tb info">tb</a><a class="tb ok">tb</a><a class="tb warn">tb</a></div><div class="col c3 gapless"><a class="tb big warn">tb big</a><a class="tb big err">tb big</a><a class="tb big fatal">tb big</a></div><div class="col c5 gapless"><a class="tb huge err">tb huge</a><a class="tb huge fatal">tb huge</a></div></div><h2>Classic</h2><a class="btn">btn</a><a class="btn info">btn info</a><a class="btn ok">btn ok</a><a class="btn warn">btn warn</a><a class="btn err">btn err</a><a class="btn fatal">btn fatal</a><pre class="block">&lt;a class=&quot;btn btn-b&quot;&gt;btn-b&lt;/a&gt;</pre><h2>Sizes</h2><a class="btn sm">btn sm</a><a class="btn info">btn info</a><a class="btn big warn">btn big warn</a><a class="btn huge err">btn huge err</a><pre class="block">&lt;a class=&quot;btn sm info&quot;&gt;btn sm info&lt;/a&gt;</pre><div class="row"><div class="col c4 card"><h3>Standardized Width <code>btn std</code></h3><div class="col"><a class="btn std">btn std</a><a class="btn std info">btn std info</a><a class="btn std ok">btn std ok</a><a class="btn std warn">btn std warn</a><a class="btn std err">btn std err</a><a class="btn std fatal">btn std fatal</a></div></div><div class="col c4 card"><h3>Big</h3><div class="col"><a class="btn std big ">btn std</a><a class="btn std big info">btn std info</a><a class="btn std big ok">btn std ok</a><a class="btn std big warn">btn std warn</a></div></div><div class="col c4 card"><h3>Huge</h3><div class="col"><a class="btn std huge">btn std</a><a class="btn std huge info">btn std info</a><a class="btn std huge ok">btn std ok</a></div></div></div><h1>Messages</h1><div class="row"><div class="col c6 gapless"><h2>Basic Messages</h2><br /><div class="msg"><strong>Normal Message</strong>This is a normal message with <code>msg</code>.
|
||||
</div><div class="msg info"><strong><i class="ico">☞</i> Info</strong>This is done by adding <code>info</code> to the class.
|
||||
</div><div class="msg ok"><strong><i class="ico">☑</i> OK</strong>This is done by adding <code>ok</code> to the class.
|
||||
</div><div class="msg warn"><strong><i class="ico">☣</i> Warning</strong>This is done by adding <code>warn</code> to the class.
|
||||
</div><div class="msg err"><strong><i class="ico">☒</i> Error</strong>This is done by adding <code>err</code> to the class.
|
||||
</div><div class="msg fatal"><strong><i class="ico">☒</i> Fatal</strong>This is done by adding <code>fatal</code> to the class.
|
||||
</div></div><div class="col c6 gapless"><h2>Strong Alerts</h2><br /><div class="msg alert"><strong>Alert Message</strong>This is a normal message with <code>msg</code>.
|
||||
</div><div class="msg alert info"><strong><i class="ico">☞</i> Alert Info</strong>This is done by adding <code>info</code> to the class.
|
||||
</div><div class="msg alert ok"><strong><i class="ico">☑</i> Alert OK</strong>This is done by adding <code>ok</code> to the class.
|
||||
</div><div class="msg alert warn"><strong><i class="ico">☣</i> Alert Warning</strong>This is done by adding <code>warn</code> to the class.
|
||||
</div><div class="msg alert err"><strong><i class="ico">☒</i> Alert Error</strong>This is done by adding <code>err</code> to the class.
|
||||
</div><div class="msg alert fatal"><strong><i class="ico">☒</i> Alert Fatal</strong>This is done by adding <code>fatal</code> to the class.
|
||||
</div></div></div><pre>&lt;div class=&quot;msg&quot;&gt;
|
||||
&lt;strong&gt;Alert headline!&lt;/strong&gt;
|
||||
Message text
|
||||
&lt;/div&gt;</pre><div><h1>Forms</h1><input class="neutral" placeholder="input" type="text" /><br /><textarea class="neutral" placeholder="textarea" rows="3"></textarea><br /><span class="addon bg-info">$</span><input type="text" /><br /><pre>&lt;input type=&quot;text&quot;&gt;
|
||||
<br />&lt;textarea rows=&quot;3&quot;&gt;
|
||||
<br />&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt;&lt;input type=&quot;text&quot;&gt;</pre><div class="msg"><strong>Be careful with addons!</strong> If you do not want a space between the addon and the input make sure that there is no space between the <code>&lt;/span&gt;</code> and <code>&lt;input&gt;</code> tags. Example: <pre>... &lt;/span&gt; &lt;input ...</pre><span class="addon">$</span><input class="smooth" type="text" /><pre>... &lt;/span&gt;&lt;input ...</pre><span class="addon">$</span><input class="smooth" type="text" /></div></div><div class="navbar"><h1>Navbars</h1><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename current" href="#">BRUT</a><a href="#">One</a><a href="#">Two</a><a href="#">Three</a><a href="#">Four</a></div></nav><button class="btn-close btn sm">×</button><br /><pre>&lt;nav class=&quot;nav&quot; tabindex=&quot;-1&quot; onclick=&quot;this.focus()&quot;&gt;
|
||||
&lt;div class=&quot;container&quot;&gt;
|
||||
&lt;a class=&quot;pagename current&quot; href=&quot;#&quot;&gt;BRUT&lt;/a&gt;
|
||||
&lt;a href=&quot;#&quot;&gt;One&lt;/a&gt;
|
||||
&lt;a href=&quot;#&quot;&gt;Two&lt;/a&gt;
|
||||
&lt;a href=&quot;#&quot;&gt;Three&lt;/a&gt;
|
||||
&lt;/div&gt;
|
||||
&lt;/nav&gt;
|
||||
&lt;button class=&quot;btn-close btn sm&quot;&gt;×&lt;/button&gt;</pre></div><div><h1>Tables</h1><table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table><br /><br /><pre>&lt;table class=&quot;table&quot;&gt;
|
||||
&lt;thead&gt;
|
||||
&lt;tr&gt;
|
||||
&lt;th&gt;#&lt;/th&gt;
|
||||
&lt;th&gt;Widgets Sold&lt;/th&gt;
|
||||
&lt;/tr&gt;
|
||||
&lt;/thead&gt;
|
||||
&lt;tbody&gt;
|
||||
&lt;tr&gt;
|
||||
&lt;td&gt;1&lt;/td&gt;
|
||||
&lt;td&gt;5&lt;/td&gt;
|
||||
&lt;/tr&gt;
|
||||
&lt;tr&gt;
|
||||
&lt;td&gt;2&lt;/td&gt;
|
||||
&lt;td&gt;10&lt;/td&gt;
|
||||
&lt;/tr&gt;
|
||||
&lt;tr&gt;
|
||||
&lt;td&gt;3&lt;/td&gt;
|
||||
&lt;td&gt;500&lt;/td&gt;
|
||||
&lt;/tr&gt;
|
||||
&lt;/tbody&gt;
|
||||
&lt;/table&gt;
|
||||
</pre></div><h1>Icons</h1><div class="icons"><div class="row"><div class="c6"><div class="col card"><div class="block"><b>Android Safe</b></div><i class="ico block" style="line-height: 1.5rem">☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №
|
||||
</i><div class="msg push">The &quot;Android Safe&quot; icons work everywhere, tested on hundreds of devices.
|
||||
</div></div></div><div class="c6"><div class="col card"><div class="block"><b>Total Set</b></div><i class="ico block" style="line-height: 1.5rem">✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩
|
||||
</i><div class="msg warn push">Although over 75% of Android devices we tested
|
||||
support all &quot;Total Set&quot; icons, if a substantial
|
||||
portion of your users use old Android devices
|
||||
you should stick to the &quot;Android Safe&quot; set.
|
||||
(The &quot;Total Set&quot; does not include icons from the &quot;Android Safe&quot; set.)
|
||||
</div></div></div></div><pre>&lt;i class=&quot;ico&quot;&gt;Copy and paste icons from above here!&lt;/i&gt;</pre><h1>Grids</h1><div class="row"><div class="dark c12">c12</div></div><div class="row"><div class="dark c11">c11</div><div class="light c1">c1</div></div><div class="row"><div class="dark c10">c10</div><div class="light c2">c2</div></div><div class="row"><div class="dark c9">c9</div><div class="light c3">c3</div></div><div class="row"><div class="dark c8">c8</div><div class="light c4">c4</div></div><div class="row"><div class="dark c7">c7</div><div class="light c5">c5</div></div><div class="row"><div class="dark c6">c6</div><div class="light c6">c6</div></div><div class="row"><div class="dark c5">c5</div><div class="light c7">c7</div></div><div class="row"><div class="dark c4">c4</div><div class="light c8">c8</div></div><div class="row"><div class="dark c3">c3</div><div class="light c9">c9</div></div><div class="row"><div class="dark c2">c2</div><div class="light c10">c10</div></div><div class="row"><div class="dark c1">c1</div><div class="light c11">c11</div></div><div class="row"><div class="light c12">c12</div></div><br /><pre>&lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;c12&quot;&gt;12&lt;/div&gt;<br />&lt;/div&gt;
|
||||
<br />&lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;c4&quot;&gt;4&lt;/div&gt;<br /> &lt;div class=&quot;c8&quot;&gt;8&lt;/div&gt;<br />&lt;/div&gt;
|
||||
</pre></div><h1>Headings</h1><div class="headings"><p>By default there is some space before and after any heading:</p><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><br /><p>You can remove the space by using the class <code>tight</code> to the heading:</p><h1 class="tight">h1 tight</h1><h2 class="tight">h2 tight</h2><h3 class="tight">h3 tight</h3><h4 class="tight">h4 tight</h4><h5 class="tight">h5 tight</h5><h6 class="tight">h6 tight</h6><br /><pre>&lt;h1&gt;Level One Heading&lt;/h1&gt;</pre></div></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body>
|
||||
|
|
@ -1 +1 @@
|
|||
<head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport" /><title>BRUT</title><link href="brut-nocolors.min.css" rel="stylesheet" type="text/css" /></head><body class="col"><div><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename" href="index.html">BRUT</a><a href="h/docs.html">Docs</a><a href="h/download.html">Download</a><a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a></div></nav><button class="btn sn btn-close">×</button></div><div class="container col"><div class="hero bg-neutral"><div class="row middle"><img alt="brutalism" class="c3 no-grow" src="h/img/brutalism.webp" /><div class="col block c6"><h1 class="title">BRUT</h1><h4>A Brutalist and Minimalist CSS Framework</h4><p>This CSS framework is ideal to be used for admin interface where youwant to make it clear, this is not for any kind of end user but onlyadvanced technical people.</p></div><img alt="brutalism" class="c3 no-grow" src="h/img/brutalism.webp" /></div></div><div class="row"><div class="col card"><h3>Docs</h3><p>Docs</p><p>Docs</p><a class="btn err big push" href="h/docs.html">Docs</a></div><div class="col card"><h3>Download</h3><div class="block"><p>Download BRUT</p></div><a class="btn err big push" href="h/download.html">Download</a></div></div></div><div class="row"><div class="block"><span>By <a href="https://yannesposito.com">Yann Esposito</a></span></div></div></body>
|
||||
<head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><meta content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" name="viewport" /><title>BRUT</title><link href="brut-nocolors.min.css" rel="stylesheet" type="text/css" /></head><body class="col"><div><nav class="nav" onclick="this.focus()" tabindex="-1"><div class="container"><a class="pagename" href="index.html">BRUT</a><a href="h/docs.html">Docs</a><a href="h/download.html">Download</a><a href="https://gitea.esy.fun/yogsototh/brutcss">Code</a></div></nav><button class="btn sn btn-close">×</button></div><div class="container col"><div class="hero bg-neutral"><div class="row middle"><img alt="brutalism" class="c3 no-grow" src="h/img/brutalism.webp" /><div class="col block c6"><h1 class="title">BRUT</h1><h4>A Brutalist and Minimalist CSS Framework</h4><p>This CSS framework is ideal to be used for admin interface where youwant to make it clear, this is not for any kind of end user but onlyadvanced technical people.</p></div><img alt="brutalism" class="c3 no-grow" src="h/img/brutalism.webp" /></div></div><div class="row"><div class="col card"><h3>Docs</h3><p>Docs</p><p>Docs</p><a class="btn err big push" href="h/docs.html">Docs</a></div><div class="col card"><h3>Download</h3><div class="block"><p>Download BRUT</p></div><a class="btn err big push" href="h/download.html">Download</a></div></div></div><footer><div class="container"><p>By <a href="https://yannesposito.com">Yann Esposito</a></p></div></footer></body>
|
||||
|
|
@ -17,10 +17,11 @@
|
|||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 2px 0;
|
||||
margin: 0 4px 4px 0;
|
||||
padding: 1rem 2rem;
|
||||
box-shadow: 4px 4px var(--shadow);
|
||||
text-align: center;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
|
||||
--shadow: rgba(0,0,0,0.75);
|
||||
|
||||
|
||||
/* alert messages */
|
||||
|
||||
--cnt: #fff;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,13 @@
|
|||
background: var(--bg2);
|
||||
border-bottom: solid 1px var(--darken);
|
||||
}
|
||||
footer {
|
||||
background: var(--bg2);
|
||||
border-top: solid 1px var(--darken);
|
||||
}
|
||||
|
||||
.nav {
|
||||
height: 50px;
|
||||
height: 3rem;
|
||||
padding: 11px 0 15px;
|
||||
/* TODO: migrate to ems (currently we don't use them because of iOS compatibility problems (has to do with unicode icon for close)) */
|
||||
/* Uncomment for animations
|
||||
|
|
@ -31,12 +35,12 @@
|
|||
.btn.btn-close {
|
||||
float: right;
|
||||
font-size: 25px;
|
||||
margin: -51px 10px;
|
||||
margin: -4.1rem 0px;
|
||||
display: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
@media (max-width:500px) {
|
||||
|
|
@ -63,11 +67,11 @@
|
|||
border-top: 3px solid;
|
||||
content: '';
|
||||
float: right;
|
||||
height: 4px;
|
||||
height: 0.25rem;
|
||||
position: relative;
|
||||
right: 3px;
|
||||
top: 14px;
|
||||
width: 20px;
|
||||
right: 0;
|
||||
top: 8px;
|
||||
width: 2rem;
|
||||
}
|
||||
.nav a {
|
||||
display: block;
|
||||
|
|
@ -75,4 +79,3 @@
|
|||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue