diff --git a/bb/brut/main.clj b/bb/brut/main.clj index 1425ba0..b17d6e5 100644 --- a/bb/brut/main.clj +++ b/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" diff --git a/brut-nocolors.min.css b/brut-nocolors.min.css index d41a1f1..90c781b 100644 --- a/brut-nocolors.min.css +++ b/brut-nocolors.min.css @@ -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} \ No newline at end of file +: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} \ No newline at end of file diff --git a/brut.min.css b/brut.min.css index 766dcb8..32c4246 100644 --- a/brut.min.css +++ b/brut.min.css @@ -1 +1 @@ -/* 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:#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)}: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,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} \ No newline at end of file +/* 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:#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)}: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,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} \ No newline at end of file diff --git a/h/g-docs.html b/h/g-docs.html new file mode 100644 index 0000000..49fb818 --- /dev/null +++ b/h/g-docs.html @@ -0,0 +1,75 @@ +BRUT - documentation

Images

Inside a grid

Inside a card

Directly a card

In a block

<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>

Buttons

Text Buttons

Classic

tbtb infotb oktb warntb errtb fatal

Sizes

TextsmallnormalBigHUGE
Text tb sm tb smtb smtb sm
tbtbtbtb
tb bigtb bigtb big
tb hugetb huge

Classic

btnbtn infobtn okbtn warnbtn errbtn fatal
&lt;a class=&quot;btn btn-b&quot;&gt;btn-b&lt;/a&gt;

Sizes

btn smbtn infobtn big warnbtn huge err
&lt;a class=&quot;btn sm info&quot;&gt;btn sm info&lt;/a&gt;

Standardized Width btn std

btn stdbtn std infobtn std okbtn std warnbtn std errbtn std fatal

Big

btn stdbtn std infobtn std okbtn std warn

Huge

btn stdbtn std infobtn std ok

Messages

Basic Messages


Normal MessageThis is a normal message with msg. +
☞ InfoThis is done by adding info to the class. +
☑ OKThis is done by adding ok to the class. +
☣ WarningThis is done by adding warn to the class. +
☒ ErrorThis is done by adding err to the class. +
☒ FatalThis is done by adding fatal to the class. +

Strong Alerts


Alert MessageThis is a normal message with msg. +
☞ Alert InfoThis is done by adding info to the class. +
☑ Alert OKThis is done by adding ok to the class. +
☣ Alert WarningThis is done by adding warn to the class. +
☒ Alert ErrorThis is done by adding err to the class. +
☒ Alert FatalThis is done by adding fatal to the class. +
&lt;div class=&quot;msg&quot;&gt;
+  &lt;strong&gt;Alert headline!&lt;/strong&gt;
+  Message text
+&lt;/div&gt;

Forms



$
&lt;input type=&quot;text&quot;&gt;
+
&lt;textarea rows=&quot;3&quot;&gt;
+
&lt;span class=&quot;addon&quot;&gt;$&lt;/span&gt;&lt;input type=&quot;text&quot;&gt;
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 &lt;/span&gt; and &lt;input&gt; tags. Example: 
... &lt;/span&gt; &lt;input ...
$
... &lt;/span&gt;&lt;input ...
$

Navbars


&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;

Tables

#Widgets SoldRevenue (£)Profit (£)
15102
210204
35001000200


&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;
+

Icons

Android Safe
☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € № +
The &quot;Android Safe&quot; icons work everywhere, tested on hundreds of devices. +
Total Set
✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩ +
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.) +
&lt;i class=&quot;ico&quot;&gt;Copy and paste icons from above here!&lt;/i&gt;

Grids

c12
c11
c1
c10
c2
c9
c3
c8
c4
c7
c5
c6
c6
c5
c7
c4
c8
c3
c9
c2
c10
c1
c11
c12

&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;c12&quot;&gt;12&lt;/div&gt;
&lt;/div&gt;
+
&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;c4&quot;&gt;4&lt;/div&gt;
    &lt;div class=&quot;c8&quot;&gt;8&lt;/div&gt;
&lt;/div&gt;
+

Headings

By default there is some space before and after any heading:

h1

h2

h3

h4

h5
h6

You can remove the space by using the class tight to the heading:

h1 tight

h2 tight

h3 tight

h4 tight

h5 tight
h6 tight

&lt;h1&gt;Level One Heading&lt;/h1&gt;
\ No newline at end of file diff --git a/index.html b/index.html index 20a07c5..cebcbb3 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
By Yann Esposito
\ No newline at end of file +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
\ No newline at end of file diff --git a/src/buttons.less b/src/buttons.less index c4fca29..eb9e1d3 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -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 { diff --git a/src/colors.less b/src/colors.less index 3b355f1..3226c2f 100644 --- a/src/colors.less +++ b/src/colors.less @@ -14,7 +14,6 @@ --shadow: rgba(0,0,0,0.75); - /* alert messages */ --cnt: #fff; diff --git a/src/navbar.less b/src/navbar.less index 8d497f0..84fa852 100644 --- a/src/navbar.less +++ b/src/navbar.less @@ -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%; } } -