From bce23d1ccaf89389b4eac000c09d3f857d9e7d97 Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Tue, 15 Nov 2022 12:50:33 +0100 Subject: [PATCH] improved card/block --- bb/brut/site.clj | 86 ++++++++++++++++++++++----------------------- brut.min.css | 2 +- index.html | 2 +- src/components.less | 6 ++-- 4 files changed, 48 insertions(+), 48 deletions(-) diff --git a/bb/brut/site.clj b/bb/brut/site.clj index d767e10..d7971c1 100644 --- a/bb/brut/site.clj +++ b/bb/brut/site.clj @@ -68,50 +68,48 @@ {:style (format "background: url(%s)" (to brutalism-img))} [:div.container.col.middle [:div.row.middle - [:div.c3] - [:div.c6.block.bg-neutral - [:div.col - [:h1.tight.huge "BRUT"] - [:h4 "A Brutalist and Minimalist CSS Framework"] - [:p "This CSS framework is ideal to be used for " - [:strong "private admin interfaces"] - "."] - [:p " Just by the look of it, it will scream: " - [:span.hl "THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!"]]]] - [:div.c3]]]] - cards [:div.container.row - [:div.col.card - [:h3 "Docs"] - [:p "A few quick examples to show every components. " - "This should be quick and straightforward."] - [:p "This CSS framework makes its best to respect some expected composability accross classes." - " Here are a few examples:"] - [:div.row - [:div.block - [:p.tight "A block: "] - [:div.card - [:div.tb "textual btn"] - [:br] - [:div.btn "classic btn"] - [:br] - [:div.msg "Some message block"]]] - [:div.block - [:p.tight "Then add the class " [:code "big"] ": "] - [:div.card.big - [:div.tb "textual btn"] - [:br] - [:div.btn "classic btn"] - [:br] - [:div.msg "Some message block"]]]] - [:a.btn.big.push {:href (to "h/docs.html")} - "Docs"]] - [:div.col.card - [:h3 "Download"] - [:div.block - [:p "Download BRUT"]] - [:a.btn.warn.big.push {:href (to "h/download.html")} - "Download"]]]] - [:div.col + [:div.c2] + [:div.c8.col.block.bg-neutral + [:h1.tight.huge "BRUT"] + [:h4 "A Brutalist and Minimalist CSS Framework"] + [:p "This CSS framework is ideal to be used for " + [:strong "private admin interfaces"] + "."] + [:p " Just by the look of it, it will scream: " + [:span.hl "THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!"]]] + [:div.c2]]]] + cards [:div.container + [:div.row + [:div.card + [:h3 "Docs"] + [:p "A few quick examples to show every components. " + "This should be quick and straightforward."] + [:p "This CSS framework makes its best to respect some expected composability accross classes." + " Here are a few examples:"] + [:div.row + [:div + [:p.tight "A block: "] + [:div.card + [:div.tb "textual btn"] + [:br] + [:div.btn "classic btn"] + [:br] + [:div.msg "Some message block"]]] + [:div + [:p.tight "Then add the class " [:code "big"] ": "] + [:div.card.big + [:div.tb "textual btn"] + [:br] + [:div.btn "classic btn"] + [:br] + [:div.msg "Some message block"]]]] + [:a.btn.big.push {:href (to "h/docs.html")} + "Docs"]] + [:div.col.card + [:h3 "Download"] + [:p "Download BRUT"] + [:a.btn.warn.big.push {:href (to "h/download.html")} "Download"]]]]] + [:div hero cards])) diff --git a/brut.min.css b/brut.min.css index 72a22b6..709a3a0 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;--y:#b58900;--o:#cb4b16;--r:#dc322f;--m:#d33682;--v:#6c71c4;--b:#268bd2;--c:#2aa198;--g:#859900;--accent:var(--b)}body.soft{filter:brightness(85%)sepia(25%)}html{background:var(--bg);color:var(--fg)}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}p>a,li>a{color:var(--accent)}.msg,.btn{background-color:var(--bg2);color:var(--fg)}.hl,.msg,.btn,.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{border-color:var(--fg)}.hl,.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{color:var(--bg)}.hl{background-color:var(--fg)}.b,.info{background-color:var(--b)}.g,.ok{background-color:var(--g)}.y,.warn{background-color:var(--y)}.r,.err{background-color:var(--r)}.m,.fatal{background-color:var(--m)}.o{background-color:var(--o)}.v{background-color:var(--v)}.c{background-color:var(--c)}@media(prefers-color-scheme:dark){body{filter:invert(100%)hue-rotate(180deg)}body.soft{filter:brightness(85%)sepia(25%)invert(100%)hue-rotate(180deg)}img,.fill{filter:brightness(80%)invert(100%)}.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{filter:brightness(90%)invert(100%)hue-rotate(180deg)}}html,body{font-size:12px;line-height:1.5em;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%}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:0;margin:0;line-height:1rem;overflow:scroll}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}blockquote{margin:1rem 0;padding-left:1rem;border-left:solid 1rem var(--nl)}ul{list-style-type:square;list-style-position:outside;padding-inline-start:1.5rem}ol{padding-inline-start:2rem}ul>li::marker{font-size:1.5rem}ul{padding:0;margin:0 1.5rem 0 0}li{line-height:1.2rem}.action,summary:hover{cursor:pointer;background:var(--bg2)}table{font-size:1rem}.sm{font-size:.75rem}.big{font-size:2rem;line-height:1.5em}.huge{font-size:4rem;line-height:1.5em}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1em}.hl{border-color:var(--fg)}p>.hl,li>.hl{border:solid 1px var(--fg);padding:1px}.tb,.btn,.tag{text-decoration:none;display:inline-block;text-align:center}.tb{font-weight:700;cursor:pointer;padding:2px;vertical-align:baseline}.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{border:solid 2px var(--fg);font-weight:700;cursor:pointer;display:inline-block;margin:0 .25em .25em 0;padding:.5rem 1rem;box-shadow:.25em .25em var(--nl);vertical-align:bottom}.btn:hover{box-shadow:.25em .25em var(--n1)}.btn:active,.btn:focus{box-shadow:.05em .05em var(--n2);position:relative;top:.2em;left:.2em}.btn.sm{padding:.5rem 1rem}.btn.std{width:12em}.tag{padding:2px;font-size:.875rem;border:solid 1px var(--fg);margin:0 1px}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1;max-height:100%}.col>*{flex:0;max-width:100%}.col{flex-direction:column}.col>.row{padding:0 1rem}.row>.col{padding:1rem 0}.start{justify-content:flex-start;align-items:flex-start}.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:960px){.row>*{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.fixed{flex-grow:0;flex-shrink:0}.card,.block{padding:0;border:solid 1rem;overflow:hidden}.card>ul>li>a{width:100%;display:inline-block}.card>ul>li>a:hover{background:var(--accent);color:var(--bg)}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.card>*:first-child{margin-top:0}.block{border-color:transparent}.block>*:first-child{margin-top:0}.central{display:flex;align-items:center;justify-content:center;background-size:cover}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem}.fill{flex-grow:1}footer,.push{justify-self:flex-end;margin-top:auto}.doc{max-width:65ch;font-size:1.25rem;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;text-align:justify;line-height:1.5em}.doc p{text-indent:3rem}.col.card,.row.card,.col.block,.row.block{padding:0}h1,h2,h3,h4,h5,h6{display:block;padding:0;font-size:1rem;outline:0;color:var(--bg);width:100%;margin:0 0 1rem}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:var(--bg)}.tight{margin:0}h1{background:var(--fg)}h2{background:var(--n2)}h3{background:var(--n1)}h4{color:var(--fg);background:var(--nl)}h5{color:var(--fg);background:var(--bg2)}h6{color:var(--fg)}h1:before{content:"≡ ";opacity:.3}h2:before{content:"= ";opacity:.3}h3:before{content:"- ";opacity:.3}h4:before{content:": ";opacity:.3}h5:before{content:"⋅ ";opacity:.3}h6{padding-left:1.25rem}.ico{font-family:Arial Unicode MS,Lucida Sans Unicode;font-style:normal}.big.ico,.huge.ico{vertical-align:middle}label>*{display:inline}form>*{display:block}textarea,input,select{border:2px solid;padding:2px;margin:0}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:2px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--accent)}.form-block:focus-within .addon{border-color:var(--accent)}.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:640px){.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{border-left:5px solid var(--darken);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;--y:#b58900;--o:#cb4b16;--r:#dc322f;--m:#d33682;--v:#6c71c4;--b:#268bd2;--c:#2aa198;--g:#859900;--accent:var(--b)}body.soft{filter:brightness(85%)sepia(25%)}html{background:var(--bg);color:var(--fg)}.neutral{color:var(--n0)}.bg-neutral{background:var(--nl)}a{color:var(--fg)}p>a,li>a{color:var(--accent)}.msg,.btn{background-color:var(--bg2);color:var(--fg)}.hl,.msg,.btn,.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{border-color:var(--fg)}.hl,.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{color:var(--bg)}.hl{background-color:var(--fg)}.b,.info{background-color:var(--b)}.g,.ok{background-color:var(--g)}.y,.warn{background-color:var(--y)}.r,.err{background-color:var(--r)}.m,.fatal{background-color:var(--m)}.o{background-color:var(--o)}.v{background-color:var(--v)}.c{background-color:var(--c)}@media(prefers-color-scheme:dark){body{filter:invert(100%)hue-rotate(180deg)}body.soft{filter:brightness(85%)sepia(25%)invert(100%)hue-rotate(180deg)}img,.fill{filter:brightness(80%)invert(100%)}.b,.info,.g,.ok,.y,.warn,.r,.err,.m,.fatal,.o,.v,.c,.alert{filter:brightness(90%)invert(100%)hue-rotate(180deg)}}html,body{font-size:12px;line-height:1.5em;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%}.container{padding:0 20px;width:100%}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--bg2);padding:0;margin:0;line-height:1rem;overflow:scroll}code{background:var(--darken);border:solid 1px var(--darken);padding:1px}blockquote{margin:1rem 0;padding-left:1rem;border-left:solid 1rem var(--nl)}ul{list-style-type:square;list-style-position:outside;padding-inline-start:1.5rem}ol{padding-inline-start:2rem}ul>li::marker{font-size:1.5rem}ul{padding:0;margin:0 1.5rem 0 0}li{line-height:1.2rem}.action,summary:hover{cursor:pointer;background:var(--bg2)}table{font-size:1rem}.sm{font-size:.75rem}.big{font-size:2rem;line-height:1.5em}.huge{font-size:4rem;line-height:1.5em}.addon,.sm,.nav,textarea,input,select{outline:0;line-height:1em}.hl{border-color:var(--fg)}p>.hl,li>.hl{border:solid 1px var(--fg);padding:1px}.tb,.btn,.tag{text-decoration:none;display:inline-block;text-align:center}.tb{font-weight:700;cursor:pointer;padding:2px;vertical-align:baseline}.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{border:solid 2px var(--fg);font-weight:700;cursor:pointer;display:inline-block;margin:0 .25em .25em 0;padding:.5rem 1rem;box-shadow:.25em .25em var(--nl);vertical-align:bottom}.btn:hover{box-shadow:.25em .25em var(--n1)}.btn:active,.btn:focus{box-shadow:.05em .05em var(--n2);position:relative;top:.2em;left:.2em}.btn.sm{padding:.5rem 1rem}.btn.std{width:12em}.tag{padding:2px;font-size:.875rem;border:solid 1px var(--fg);margin:0 1px}.col,.row{display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;flex-wrap:wrap;gap:1rem}.row>*{flex:1;max-height:100%}.col>*{flex:0;max-width:100%}.col{flex-direction:column}.col>.row{padding:0 1rem}.row>.col{padding:1rem 0}.start{justify-content:flex-start;align-items:flex-start}.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:960px){.row>*{flex:0 1 100%;width:100%}.no-mobile{display:none}}.no-grow{flex:0}.fixed{flex-grow:0;flex-shrink:0}.card,.block{padding:0;border:solid 1rem;overflow:hidden}.card>ul>li>a{width:100%;display:inline-block}.card>ul>li>a:hover{background:var(--accent);color:var(--bg)}.col.card,.col.block{justify-content:flex-start;align-items:flex-start}.card{border-color:var(--nl)}.card>*,.block>*{margin:1rem}.card>h1:first-child,.block>h1:first-child,.card>h2:first-child,.block>h2:first-child,.card>h3:first-child,.block>h3:first-child,.card>h4:first-child,.block>h4:first-child,.card>h5:first-child,.block>h5:first-child,.card>h6:first-child,.block>h6:first-child{margin-top:0}.card>h1,.block>h1,.card>h2,.block>h2,.card>h3,.block>h3,.card>h4,.block>h4,.card>h5,.block>h5{margin-left:0;margin-right:0}.block{border-color:transparent}.central{display:flex;align-items:center;justify-content:center;background-size:cover}button~.central{min-height:calc(100vh - 50px)}.hero{padding:2rem}.fill{flex-grow:1}footer,.push{justify-self:flex-end;margin-top:auto}.doc{max-width:65ch;font-size:1.25rem;font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;text-align:justify;line-height:1.5em}.doc p{text-indent:3rem}.col.card,.row.card,.col.block,.row.block{padding:0}h1,h2,h3,h4,h5,h6{display:block;padding:0;font-size:1rem;outline:0;color:var(--bg);width:100%;margin:0 0 1rem}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:var(--bg)}.tight{margin:0}h1{background:var(--fg)}h2{background:var(--n2)}h3{background:var(--n1)}h4{color:var(--fg);background:var(--nl)}h5{color:var(--fg);background:var(--bg2)}h6{color:var(--fg)}h1:before{content:"≡ ";opacity:.3}h2:before{content:"= ";opacity:.3}h3:before{content:"- ";opacity:.3}h4:before{content:": ";opacity:.3}h5:before{content:"⋅ ";opacity:.3}h6{padding-left:1.25rem}.ico{font-family:Arial Unicode MS,Lucida Sans Unicode;font-style:normal}.big.ico,.huge.ico{vertical-align:middle}label>*{display:inline}form>*{display:block}textarea,input,select{border:2px solid;padding:2px;margin:0}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0;border:2px solid}.addon{padding:2px;border-width:2px;border-style:solid none solid solid}textarea:focus,input:focus,select:focus{border-color:var(--accent)}.form-block:focus-within .addon{border-color:var(--accent)}.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:640px){.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{border-left:5px solid var(--darken);padding:1rem} \ No newline at end of file diff --git a/index.html b/index.html index 4125b53..7b98d38 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -BRUT

BRUT

A Brutalist and Minimalist CSS Framework

This CSS framework is ideal to be used for private admin interfaces.

Just by the look of it, it will scream: THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!

Docs

A few quick examples to show every components. This should be quick and straightforward.

This CSS framework makes its best to respect some expected composability accross classes. Here are a few examples:

A block:

textual btn

classic btn

Some message block

Then add the class big:

textual btn

classic btn

Some message block
Docs

Download

Download BRUT

Download
\ No newline at end of file +BRUT

BRUT

A Brutalist and Minimalist CSS Framework

This CSS framework is ideal to be used for private admin interfaces.

Just by the look of it, it will scream: THIS IS NOT FOR NON-TECHNICAL PEOPLE!!!

Docs

A few quick examples to show every components. This should be quick and straightforward.

This CSS framework makes its best to respect some expected composability accross classes. Here are a few examples:

A block:

textual btn

classic btn

Some message block

Then add the class big:

textual btn

classic btn

Some message block
Docs

Download

Download BRUT

Download
\ No newline at end of file diff --git a/src/components.less b/src/components.less index 063e676..b1ca580 100644 --- a/src/components.less +++ b/src/components.less @@ -15,9 +15,11 @@ .card { border-color: var(--nl); } -.card > *:first-child { margin-top: 0; } +.card > *, .block > * { margin: 1rem; } +.card,.block { + & > h1:first-child, & > h2:first-child, & > h3:first-child, & > h4:first-child, & > h5:first-child, & > h6:first-child { margin-top: 0; } + & > h1, & > h2, & > h3, & > h4, & > h5 { margin-left: 0; margin-right: 0; } } .block { border-color: transparent; } -.block > *:first-child { margin-top: 0; } /* To be used as main image for presentation */ .central {