improved colors

build.sh

@@ -7,7 +7,7 @@ DISTCSS="brut.min.css"
 mkdir $DIST -p
 [ -f $TMPCSS ] && rm -f $TMPCSS
 
-subtypes=(colors general buttons grid headings icons forms navbar tables messages)
+subtypes=(colors general buttons grid components headings icons forms navbar tables messages)
 YEAR="$(date +"%Y")"
 echo -n "/* Copyright $YEAR Yann Esposito; MIT licensed */" >> $TMPCSS
 

index.html

@@ -18,7 +18,7 @@
 		</nav>
     <button class="btn sm btn-close">×</button>
     <div class="container">
-      <div class="hero">
+      <div class="hero bg-neutral">
         <div class="row">
           <div class="c3">
 						<div class="block">

src/colors.less

@@ -1,4 +1,4 @@
-@neutral: #888;
+@neutral: #999;
 @info: #59d;
 @ok: #494;
 @warn: #c90;
@@ -81,3 +81,14 @@
     --shadow: rgba(128,128,128,0.3);
   }
 }
+
+.neutral { color: var(--cn-0); }
+.bg-neutral { background: var(--cn-1); }
+.info { color: var(--ci0); }
+.bg-info { background: var(--ci-1); }
+.ok { color: var(--co0); }
+.bg-ok { background: var(--co-1); }
+.warn { color: var(--cw0); }
+.bg-warn { background: var(--cw-1); }
+.err { color: var(--ce0); }
+.bg-err { background: var(--ce-1); }

src/components.less

@@ -0,0 +1,22 @@
+/* card and block to put space between blocks */
+.card, .block {
+  padding: 5px;
+  border: solid 2px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.col > .card, .col > .block { height: 100%; }
+.row > .card, .row > .block { width: 100%; }
+
+.block {
+  border-color: transparent;
+}
+
+.hero {
+  padding: 2rem;
+  outline-style: double;
+  outline-width: 0.5rem;
+  margin: 1rem;
+}

src/general.less

@@ -24,34 +24,6 @@ body, textarea, input, select {
 	width: auto;
 }
 
-.card, .block {
-  padding: 5px;
-  border: solid 2px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: flex-start;
-}
-.col > .card, .col > .block { height: 100%; }
-.row > .card, .row > .block { width: 100%; }
-
-.block {
-  border-color: transparent;
-}
-
-.bot {
-  display: flex;
-  justify-content: flex-start;
-}
-
-.hero {
-  background: var(--bg2);
-  padding: 2rem;
-  outline-style: double;
-  outline-width: 0.5rem;
-  margin: 1rem;
-}
-
 @media(min-width:1310px) {
 	.container {
 		margin: auto;