flex to the maximum
This commit is contained in:
Yann Esposito (Yogsototh)
parent
19bfebecb9
commit
323d47c77c
GPG key ID:
7B19A4C650D59646
18
bb.edn
18
bb.edn
|
|
@ -2,9 +2,15 @@
|
|||
:deps {hiccup/hiccup {:mvn/version "1.0.5"}}
|
||||
:min-bb-version "0.4.0"
|
||||
:tasks
|
||||
{:requires ([babashka.fs :as fs])
|
||||
tst (prn "TST")
|
||||
clean (do (fs/delete-tree "_build")
|
||||
(fs/delete "brut.min.css")
|
||||
(fs/delete "brut-nocolors.min.css"))
|
||||
build (do (shell "./build.sh"))}}
|
||||
{clean {:doc "clean temporary assets"
|
||||
:requires ([babashka.fs :as fs])
|
||||
:task (do (fs/delete-tree "_build")
|
||||
(fs/delete "brut.min.css")
|
||||
(fs/delete "brut-nocolors.min.css"))}
|
||||
build-site {:doc "build the HTML"
|
||||
:requires ([brut.main])
|
||||
:task (brut.main/-main)}
|
||||
build-css {:doc "build the CSS"
|
||||
:task (shell "./build.sh")}
|
||||
build {:doc "Build everything"
|
||||
:depends [build-css build-site]}}}
|
||||
|
|
|
|||
|
|
@ -18,44 +18,47 @@
|
|||
[:a {:href "https://yannesposito.com"}
|
||||
"Yann Esposito"]]]])
|
||||
|
||||
(defn index []
|
||||
(defn mk-page [title 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.min.css" :rel "stylesheet" :type "text/css"}]]
|
||||
[:link {:href "brut-nocolors.min.css" :rel "stylesheet" :type "text/css"}]]
|
||||
[:body
|
||||
(nav)
|
||||
[:div.container
|
||||
[:div.hero.bg-neutral
|
||||
[:div.row
|
||||
[:div.col.c3 [:img {:src "h/img/brutalism.webp" :alt "brutalism"}]]
|
||||
[:div.col.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.c3 [:img {:src "h/img/brutalism.webp" :alt "brutalism"}]]]]
|
||||
[:div.row
|
||||
[:div.col.c4
|
||||
[:div.card
|
||||
[:h3 "Docs"]
|
||||
[:div.block
|
||||
[:p "Docs"]]
|
||||
[:a.btn.err.big.push {:href "h/docs.html"}
|
||||
"Docs"]]]
|
||||
[:div.col.c4
|
||||
[:div.card
|
||||
[:h3 "Download"]
|
||||
[:div.block
|
||||
[:p "Download BRUT"]]
|
||||
[:a.btn.err.big.push {:href "h/download.html"}
|
||||
"Download"]]
|
||||
|
||||
]]
|
||||
content
|
||||
(footer)]]))
|
||||
|
||||
(defn index []
|
||||
(let [hero [:div.hero.bg-neutral
|
||||
[:div.row
|
||||
[:div.col.block.c3 [:img {:src "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"}]]]]
|
||||
cards [:div.row
|
||||
[:div.col.block
|
||||
[:div.card
|
||||
[:h3 "Docs"]
|
||||
[:p "Docs"]
|
||||
[:p "Docs"]
|
||||
[:a.btn.err.big.push {:href "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"}
|
||||
"Download"]]]]]
|
||||
(mk-page "BRUT" [:div hero cards])))
|
||||
|
||||
(defn -main [& _args]
|
||||
(spit "gen-index.html" (index)))
|
||||
(println "Generate index.html")
|
||||
(spit "index.html" (index)))
|
||||
|
|
|
|||
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:#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(--cn-0)}.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}.row{display:flex;justify-content:space-evenly;align-items:stretch;flex-wrap:wrap}.col{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;flex-wrap:wrap}.col>*,.row>*{padding:5px}.col.no-padding>*,.row.no-padding>*{padding:0}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}.card,.block{padding:5px;border:solid 2px;display:flex;flex-direction:column;justify-content:start;align-items:flex-start}.col>.card,.col>.block{height:100%}.row>.card,.row>.block{width:100%}.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}h1{font-size:2rem}h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{opacity:.3;font-size:1rem}h1:before{content:"# "}h2:before{content:"## "}h3:before{content:"### "}h4:before{content:"#### "}h5:before{content:"##### "}h6:before{content:"###### "}.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}
|
||||
: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(--cn-0)}.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-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}h1{font-size:2rem}h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{opacity:.3;font-size:1rem}h1:before{content:"# "}h2:before{content:"## "}h3:before{content:"### "}h4:before{content:"#### "}h5:before{content:"##### "}h6:before{content:"###### "}.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}
|
||||
2
brut.min.css
vendored
2
brut.min.css
vendored
File diff suppressed because one or more lines are too long
71
index.html
71
index.html
|
|
@ -1,70 +1 @@
|
|||
<!DOCTYPE html>
|
||||
<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</title>
|
||||
<link href="brut.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||||
<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 sm btn-close">×</button>
|
||||
<div class="container">
|
||||
<div class="hero bg-neutral">
|
||||
<div class="row">
|
||||
<div class="col c3">
|
||||
<img src="h/img/brutalism.webp" alt="brutalism"/>
|
||||
</div>
|
||||
<div class="col c6">
|
||||
<h1 class="title">BRUT</h1>
|
||||
<h4 class="mobileonly">A <em>Brutalist</em> and <em>Minimalist</em> CSS framework</h4>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col c3">
|
||||
<img src="h/img/brutalism.webp" alt="brutalisme" style="transform:scaleX(-1)"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="c4 col">
|
||||
<div class="card">
|
||||
<h3>Documentation</h3>
|
||||
<div class="block">
|
||||
<p>Don't worry it will be quick and straightforward.</p>
|
||||
<p>Just a test</p>
|
||||
</div>
|
||||
<a href="h/docs.html" class="btn info big push">Docs</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c4 col">
|
||||
<div class="card">
|
||||
<h3>Download</h3>
|
||||
<div class="block">
|
||||
<p>Download BRUT</p>
|
||||
</div>
|
||||
<a href="h/download.html" class="btn err big push">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="block">
|
||||
<br/>
|
||||
<br/>
|
||||
<span>By: <a href="https://yannesposito.com">Yann Esposito</a></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<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><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><div class="hero bg-neutral"><div class="row"><div class="col block c3"><img alt="brutalism" src="h/img/brutalism.webp" /></div><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><div class="col block c3"><img alt="brutalism" src="h/img/brutalism.webp" /></div></div></div><div class="row"><div class="col block"><div class="card"><h3>Docs</h3><p>Docs</p><p>Docs</p><a class="btn err big push" href="h/docs.html">Docs</a></div></div><div class="col block"><div class="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><div class="row"><div class="block"><span>By<a href="https://yannesposito.com">Yann Esposito</a></span></div></div></div></body>
|
||||
|
|
@ -2,18 +2,10 @@
|
|||
.card, .block {
|
||||
padding: 5px;
|
||||
border: solid 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.col > .card, .col > .block { height: 100%; }
|
||||
.row > .card, .row > .block { width: 100%; }
|
||||
|
||||
.card { border-color: var(--nl); }
|
||||
.block {
|
||||
border-color: transparent;
|
||||
}
|
||||
.block { border-color: transparent; }
|
||||
|
||||
/* To be used as main image for presentation */
|
||||
.central {
|
||||
|
|
|
|||
|
|
@ -1,74 +1,82 @@
|
|||
/* Grid system responsive code is in general.less */
|
||||
|
||||
.row {
|
||||
.col, .row {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-direction: row;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.row > * { flex: 1; }
|
||||
.col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.col > *, .row > * { padding: 5px; }
|
||||
.col.no-padding > *, .row.no-padding > * { padding: 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%;
|
||||
}
|
||||
|
||||
/* For smaller screens, change all columns to 100% width */
|
||||
@media (max-width:870px) {
|
||||
.row .col {
|
||||
flex: 0 1 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue