From 6e69d5218d68932c93184de36d28db23a6551d28 Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Thu, 6 Oct 2022 13:16:25 +0200 Subject: [PATCH] major update using flex --- bb/brut/main.clj | 78 ++++++++++++++++++++++++++++--------------- brut-nocolors.min.css | 1 - brut.min.css | 1 - h/download.html | 25 +------------- index.html | 2 +- src/buttons.less | 1 + src/components.less | 1 + src/general.less | 15 +++------ src/navbar.less | 1 + 9 files changed, 60 insertions(+), 65 deletions(-) delete mode 100644 brut-nocolors.min.css delete mode 100644 brut.min.css diff --git a/bb/brut/main.clj b/bb/brut/main.clj index e70bd9f..1b3788f 100644 --- a/bb/brut/main.clj +++ b/bb/brut/main.clj @@ -1,15 +1,18 @@ (ns brut.main - (:require [hiccup.core :as h])) + (:require [hiccup.core :as h] + [babashka.fs :as fs] + )) -(defn nav [] - [:div - [:nav.nav {:tabindex "-1" :onclick "this.focus()"} - [:div.container - [:a.pagename {:href "index.html"} "BRUT"] - [:a {:href "h/docs.html"} "Docs"] - [:a {:href "h/download.html"} "Download"] - [:a {:href "https://gitea.esy.fun/yogsototh/brutcss"} "Code"]]] - [:button.btn.sn.btn-close "×"]]) +(defn nav [rel-pref] + (let [to (fn [path] (str rel-pref path))] + [:div + [:nav.nav {:tabindex "-1" :onclick "this.focus()"} + [:div.container + [:a.pagename {:href (to "index.html")} "BRUT"] + [:a {:href (to "h/docs.html")} "Docs"] + [:a {:href (to "h/download.html")} "Download"] + [:a {:href "https://gitea.esy.fun/yogsototh/brutcss"} "Code"]]] + [:button.btn.sn.btn-close "×"]])) (defn footer [] [:div.row @@ -18,47 +21,68 @@ [:a {:href "https://yannesposito.com"} "Yann Esposito"]]]]) -(defn mk-page [title content] +(defn mk-page [rel-pref {:keys [title] :as _metas} content] (h/html [:head [:meta {:http-equiv "Content-Type" :content "text/html; charset=UTF-8"}] [:meta {:name "viewport" :content "width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"}] - [:title "BRUT"] - [:link {:href "brut-nocolors.min.css" :rel "stylesheet" :type "text/css"}]] - [:body - (nav) - [:div.container - content - (footer)]])) + [:title title] + [:link {:href (str rel-pref "brut-nocolors.min.css") :rel "stylesheet" :type "text/css"}]] + [:body.col + (nav rel-pref) + content + (footer)])) -(defn index [] - (let [hero [:div.hero.bg-neutral +(defn gen-page [file-path metas content-fn] + (let [{:keys [title]} metas + depth (or (some-> file-path + fs/parent + fs/components + count) + 0) + rel-pref (apply str (repeat depth "../")) + html (mk-page rel-pref metas (content-fn rel-pref metas))] + (println "Generates: " file-path) + (spit file-path html))) + +(defn index-content [rel-pref _metas] + (let [to (fn [path] (str rel-pref path)) + hero [:div.hero.bg-neutral [:div.row - [:div.col.block.c3 [:img {:src "h/img/brutalism.webp" :alt "brutalism"}]] + [:div.col.block.c3 [:img {:src (to "h/img/brutalism.webp") :alt "brutalism"}]] [:div.col.block.c6 [:h1.title "BRUT"] [:h4 "A Brutalist and Minimalist CSS Framework"] [:p (str "This CSS framework is ideal to be used for admin interface where you" "want to make it clear, this is not for any kind of end user but only" "advanced technical people.")]] - [:div.col.block.c3 [:img {:src "h/img/brutalism.webp" :alt "brutalism"}]]]] + [:div.col.block.c3 [:img {:src (to "h/img/brutalism.webp") :alt "brutalism"}]]]] cards [:div.row [:div.col.block [:div.card [:h3 "Docs"] [:p "Docs"] [:p "Docs"] - [:a.btn.err.big.push {:href "h/docs.html"} + [:a.btn.err.big.push {:href (to "h/docs.html")} "Docs"]]] [:div.col.block [:div.card [:h3 "Download"] [:div.block [:p "Download BRUT"]] - [:a.btn.err.big.push {:href "h/download.html"} + [:a.btn.err.big.push {:href (to "h/download.html")} "Download"]]]]] - (mk-page "BRUT" [:div hero cards]))) + [:div hero cards])) + +(defn download-content [rel-pref _metas] + (let [to (fn [path] (str rel-pref path))] + [:div.central.fill + {:style (str "background:url('" (to "h/img/brutalism.webp") "')")} + [:a.btn.warn.huge {:href (to "brut.min.css")} + "Download BRUT"]]) + ) (defn -main [& _args] - (println "Generate index.html") - (spit "index.html" (index))) + (gen-page "index.html" "BRUT" index-content) + (gen-page "h/download.html" "BRUT - download" download-content) + ) diff --git a/brut-nocolors.min.css b/brut-nocolors.min.css deleted file mode 100644 index 08f1f3e..0000000 --- a/brut-nocolors.min.css +++ /dev/null @@ -1 +0,0 @@ -:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#8c8c8c;--n2:#808080;--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:#8c8c8c;--n2:#999999;--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{font-size:12px}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}*{box-sizing:border-box}.addon,.sm,.nav,textarea,input,select{outline:0;font-size:10px}.tb,.btn,.nav a{text-decoration:none}.container{padding:0 20px;width:auto}@media(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}img{max-width:100%}.big{font-size:2em}.huge{font-size:3em}.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}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.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%}}.card,.block{padding:5px;border:solid 2px}.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;outline-style:double;outline-width:.5rem;margin:1rem}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:table;padding:.25rem;font-size:1rem;margin:0;border:0;outline:0}h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{content:"== "}h1:after,h2:after,h3:after,h4:after,h5:after,h6:after{content:" =="}h1{background:var(--fg);color:var(--bg)}h2{background:var(--n0);color:var(--bg)}h3{text-decoration:underline}h4{text-decoration:underline;text-decoration-color:var(--n0)}.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{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:1.5em} \ No newline at end of file diff --git a/brut.min.css b/brut.min.css deleted file mode 100644 index f4b4f66..0000000 --- a/brut.min.css +++ /dev/null @@ -1 +0,0 @@ -/* Copyright 2022 Yann Esposito; MIT licensed */:root{--bg:#fff;--fg:#000;--bg2:#eee;--darken:rgba(0, 0, 0, 0.1);--nl:#d9d9d9;--n0:#999;--n1:#8c8c8c;--n2:#808080;--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:#8c8c8c;--n2:#999999;--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)}:root{--il:#b8d9fa;--i0:#59d;--i1:#408cd9;--i2:#2a7fd5;--ol:#7fdd7f;--o0:#494;--o1:#3c873c;--o2:#347634;--wl:#ffd24d;--w0:#c90;--w1:#b38600;--w2:#997300;--el:#fa9595;--e0:#d33;--e1:#d32323;--e2:#bd2020;--fl:#dc95fa;--f0:#a3d;--f1:#9e23d3;--f2:#8e20bd;--ia:#0b7ff4;--ib:#3399ff;--oa:#1f8b1f;--ob:#1dc01d;--wa:#997300;--wb:#cc9900;--ea:#d90404;--eb:#ff1111;--fa:#9904d9;--fb:#b811ff}@media(prefers-color-scheme:dark){:root{--il:#2266aa;--i0:#2a7fd5;--i1:#408cd9;--i2:#4b99e7;--ol:#255225;--o0:#347634;--o1:#3c873c;--o2:#39a439;--wl:#664d00;--w0:#997300;--w1:#b38600;--w2:#cc9900;--el:#921818;--e0:#bd2020;--e1:#d32323;--e2:#e92727;--fl:#6d1892;--f0:#8e20bd;--f1:#9e23d3;--f2:#af27e9}}.info{color:var(--i0)}.bg-info{background:var(--il)}.ok{color:var(--o0)}.bg-ok{background:var(--ol)}.warn{color:var(--w0)}.bg-warn{background:var(--wl)}.err{color:var(--e0)}.bg-err{background:var(--el)}.fatal{color:var(--f0)}.bg-fatal{background:var(--fl)}.msg.info{color:var(--fg);background:var(--il);border-color:var(--i0)}.msg.ok{color:var(--fg);background:var(--ol);border-color:var(--o0)}.msg.warn{color:var(--fg);background:var(--wl);border-color:var(--w0)}.msg.err{color:var(--fg);background:var(--el);border-color:var(--e0)}.msg.fatal{color:var(--fg);background:var(--fl);border-color:var(--f0)}.msg.alert,.msg.alert *{color:var(--cnt);background:var(--na);border-color:var(--nb)}.msg.alert.info,.msg.alert.info *{color:#fff;background:var(--ia);border-color:var(--ib)}.msg.alert.ok,.msg.alert.ok *{color:#fff;background:var(--oa);border-color:var(--ob)}.msg.alert.warn,.msg.alert.warn *{color:#fff;background:var(--wa);border-color:var(--wb)}.msg.alert.err,.msg.alert.err *{color:#fff;background:var(--ea);border-color:var(--eb)}.msg.alert.fatal,.msg.alert.fatal *{color:#fff;background:var(--fa);border-color:var(--fb)}.tb.info{color:var(--i0)}.tb.info:hover{color:var(--i1)}.tb.info:active{color:var(--i2)}.tb.ok{color:var(--o0)}.tb.ok:hover{color:var(--o1)}.tb.ok:active{color:var(--o2)}.tb.warn{color:var(--w0)}.tb.warn:hover{color:var(--w1)}.tb.warn:active{color:var(--w2)}.tb.err{color:var(--e0)}.tb.err:hover{color:var(--e1)}.tb.err:active{color:var(--e2)}.tb.fatal{color:var(--f0)}.tb.fatal:hover{color:var(--f1)}.tb.fatal:active{color:var(--f2)}.btn.info{background:var(--i0)}.btn.info:hover{background:var(--i1)}.btn.info:active,.btn.info:focus{background:var(--i2)}.btn.ok{background:var(--o0)}.btn.ok:hover{background:var(--o1)}.btn.ok:active,.btn.ok:focus{background:var(--o2)}.btn.warn{background:var(--w0)}.btn.warn:hover{background:var(--w1)}.btn.warn:active,.btn.warn:focus{background:var(--w2)}.btn.err{background:var(--e0)}.btn.err:hover{background:var(--e1)}.btn.err:active,.btn.err:focus{background:var(--e2)}.btn.fatal{background:var(--f0)}.btn.fatal:hover{background:var(--f1)}.btn.fatal:active,.btn.fatal:focus{background:var(--f2)}html{font-size:12px}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}*{box-sizing:border-box}.addon,.sm,.nav,textarea,input,select{outline:0;font-size:10px}.tb,.btn,.nav a{text-decoration:none}.container{padding:0 20px;width:auto}@media(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}img{max-width:100%}.big{font-size:2em}.huge{font-size:3em}.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}.row>*{flex:1}.col>*{flex:0}.col{flex-direction:column}.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%}}.card,.block{padding:5px;border:solid 2px}.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;outline-style:double;outline-width:.5rem;margin:1rem}.push{justify-self:flex-end;margin-top:auto}h1,h2,h3,h4,h5,h6{display:table;padding:.25rem;font-size:1rem;margin:0;border:0;outline:0}h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{content:"== "}h1:after,h2:after,h3:after,h4:after,h5:after,h6:after{content:" =="}h1{background:var(--fg);color:var(--bg)}h2{background:var(--n0);color:var(--bg)}h3{text-decoration:underline}h4{text-decoration:underline;text-decoration-color:var(--n0)}.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{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:1.5em} \ No newline at end of file diff --git a/h/download.html b/h/download.html index c848eb0..64706a5 100644 --- a/h/download.html +++ b/h/download.html @@ -1,24 +1 @@ - - - - - - - BRUT - download - - - - - -
- Download BRUT -
- - +
Download BRUT
ByYann Esposito
\ No newline at end of file diff --git a/index.html b/index.html index ad8449c..622a224 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -BRUT
brutalism

BRUT

A Brutalist and Minimalist CSS Framework

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.

brutalism

Docs

Docs

Docs

Docs

Download

Download BRUT

Download
ByYann Esposito
\ No newline at end of file +
brutalism

BRUT

A Brutalist and Minimalist CSS Framework

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.

brutalism

Docs

Docs

Docs

Docs

Download

Download BRUT

Download
ByYann Esposito
\ No newline at end of file diff --git a/src/buttons.less b/src/buttons.less index 83eb647..451dc99 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -1,3 +1,4 @@ +.tb, .btn { text-decoration: none; } .tb { font-weight: bold; cursor: pointer; padding: 2px; } diff --git a/src/components.less b/src/components.less index 9caaf86..25952c4 100644 --- a/src/components.less +++ b/src/components.less @@ -28,4 +28,5 @@ button ~ .central { margin: 1rem; } +.fill { flex-grow: 1; } .push { justify-self: flex-end; margin-top: auto;} diff --git a/src/general.less b/src/general.less index 1f76363..5383ff5 100644 --- a/src/general.less +++ b/src/general.less @@ -1,4 +1,5 @@ -html { font-size: 12px; } +html,body { font-size: 12px; 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); @@ -7,16 +8,10 @@ body, textarea, input, select { font-size: 1rem; margin: 0; } - -* { box-sizing: border-box; } +img { max-width: 100%; } .addon, .sm, .nav, textarea, input, select { outline: 0; - font-size: 10px; -} - -.tb, .btn, .nav a { - text-decoration: none; } .container { @@ -24,7 +19,7 @@ body, textarea, input, select { width: auto; } -@media(min-width:1310px) { +@media only screen and (min-width:1310px) { .container { margin: auto; width: 1270px; @@ -39,7 +34,5 @@ code { background: var(--darken); padding: 1px; } -img { max-width: 100%; } - .big { font-size: 2em; } .huge { font-size: 3em; } diff --git a/src/navbar.less b/src/navbar.less index 4490241..8d497f0 100644 --- a/src/navbar.less +++ b/src/navbar.less @@ -13,6 +13,7 @@ } .nav a { + text-decoration: none; opacity: 0.7; padding-right: 1em; position: relative;