From 12a5979cb4376df19a4f57ce15093dc4223a1ae4 Mon Sep 17 00:00:00 2001 From: "Yann Esposito (Yogsototh)" Date: Sat, 17 Aug 2024 07:31:14 +0200 Subject: [PATCH] still minor changes --- _site/brut.min.css | 2 +- _site/h/docs.html | 6 ++---- _site/h/download.html | 2 +- _site/index.html | 2 +- bb/brut/site.clj | 5 ++--- src/general.less | 3 ++- src/grid.less | 4 ++-- 7 files changed, 11 insertions(+), 13 deletions(-) diff --git a/_site/brut.min.css b/_site/brut.min.css index c163128..0c7088d 100644 --- a/_site/brut.min.css +++ b/_site/brut.min.css @@ -1 +1 @@ -/* Copyright 2024 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 a,.b a,.info a,.g a,.ok a,.y a,.warn a,.r a,.err a,.m a,.fatal a,.o a,.v a,.c a,.alert a{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%}figure img{width:100%;margin:0;padding:0;border:solid 1px var(--bg2)}figure figcaption{text-align:centered;background:var(--bg2)}.container{padding:0 20px;width:100%}.container>*{margin:1rem 0}.center{text-align:center}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--darken);padding:10px;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}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}.content{width:100%;padding:1rem}.card{border-color:var(--nl)}.card>.inner,.block>.inner{padding:0;margin:0;border:0;width:100%}.card>h1:first-child,.block>h1:first-child,.card>.inner>h1:first-child,.block>.inner>h1:first-child,.card>h2:first-child,.block>h2:first-child,.card>.inner>h2:first-child,.block>.inner>h2:first-child,.card>h3:first-child,.block>h3:first-child,.card>.inner>h3:first-child,.block>.inner>h3:first-child,.card>h4:first-child,.block>h4:first-child,.card>.inner>h4:first-child,.block>.inner>h4:first-child,.card>h5:first-child,.block>h5:first-child,.card>.inner>h5:first-child,.block>.inner>h5:first-child,.card>h6:first-child,.block>h6:first-child,.card>.inner>h6:first-child,.block>.inner>h6:first-child{margin-top:0;margin-left: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}.start{align-self:end}.end{align-self:end}.mid{align-self:center}.stretch{align-self:stretch}.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:1em;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 2024 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 a,.b a,.info a,.g a,.ok a,.y a,.warn a,.r a,.err a,.m a,.fatal a,.o a,.v a,.c a,.alert a{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%}figure img{width:100%;margin:0;padding:0;border:solid 1px var(--bg2)}figure figcaption{text-align:centered;background:var(--bg2)}.container{padding:0 20px;width:100%}.container>*{margin:1rem 0}.center{text-align:center}@media(min-width:1380px){.container{margin:auto;max-width:1270px}}pre{background:var(--darken);padding:10px;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-left:2rem;list-style-position:outside}ul>li::marker{font-size:1.5rem}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}.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}.row{margin-bottom:1rem}.row.gapless{margin:0}}.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}.content{width:100%;padding:1rem}.card{border-color:var(--nl)}.card>.inner,.block>.inner{padding:0;margin:0;border:0;width:100%}.card>h1:first-child,.block>h1:first-child,.card>.inner>h1:first-child,.block>.inner>h1:first-child,.card>h2:first-child,.block>h2:first-child,.card>.inner>h2:first-child,.block>.inner>h2:first-child,.card>h3:first-child,.block>h3:first-child,.card>.inner>h3:first-child,.block>.inner>h3:first-child,.card>h4:first-child,.block>h4:first-child,.card>.inner>h4:first-child,.block>.inner>h4:first-child,.card>h5:first-child,.block>h5:first-child,.card>.inner>h5:first-child,.block>.inner>h5:first-child,.card>h6:first-child,.block>h6:first-child,.card>.inner>h6:first-child,.block>.inner>h6:first-child{margin-top:0;margin-left: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}.start{align-self:end}.end{align-self:end}.mid{align-self:center}.stretch{align-self:stretch}.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:1em;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/_site/h/docs.html b/_site/h/docs.html index b20197a..696f801 100644 --- a/_site/h/docs.html +++ b/_site/h/docs.html @@ -79,7 +79,7 @@ <h5 class="tight">h5 tight</h5> <h6 class="tight">h6 tight</h6> </div> -

itemization

ul

  • item 1
  • item 2
  • item 3; with a very long text that should wrap to the next line in any browser. We'll see that the wrapped text should be aligned with the text of the other items. This is due to the list-style-position: outside.
  • item 4

ol

  1. item 1
  2. item 2
  3. item 3
  4. item 4
code
+

itemization

ul

  • item 1
  • item 2
  • item 3; with a very long text that should wrap to the next line in any browser. We'll see that the wrapped text should be aligned with the text of the other items. This is due to the list-style-position: outside.
  • item 4

ol

  1. item 1
  2. item 2
  3. item 3
  4. item 4
code
   <div class="inner" id="itemize">
     <h2>itemization</h2>
     <div class="content">
@@ -93,9 +93,7 @@
         due to the <code>list-style-position: outside</code>.</li>
         <li>item 4</li>
       </ul>
-    </div>
-    <h3>ol</h3>
-    <div class="content">
+      <h3>ol</h3>
       <ol>
         <li>item 1</li>
         <li>item 2</li>
diff --git a/_site/h/download.html b/_site/h/download.html
index e0bdb90..0590f00 100644
--- a/_site/h/download.html
+++ b/_site/h/download.html
@@ -1 +1 @@
-BRUT - download
Download BRUT(8041 Bytes)

\ No newline at end of file
+BRUT - download
Download BRUT(8057 Bytes)

\ No newline at end of file
diff --git a/_site/index.html b/_site/index.html
index dd0d365..0c04523 100644
--- a/_site/index.html
+++ b/_site/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!!!
Examples
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 card:
title
textual btn

classic btn

Some message block
The same card with the class big: 
title
textual btn

classic btn

Some message block
Example
A demo of brut.css with a few forms and an error message
What a real app looks like with BRUT
Docs
Docs
Download
Download (8041 Bytes)

\ 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!!!
Examples
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 card:
title
textual btn

classic btn

Some message block
The same card with the class big: 
title
textual btn

classic btn

Some message block
Example
A demo of brut.css with a few forms and an error message
What a real app looks like with BRUT
Docs
Docs
Download
Download (8057 Bytes)

\ No newline at end of file
diff --git a/bb/brut/site.clj b/bb/brut/site.clj
index d99a231..f853475 100644
--- a/bb/brut/site.clj
+++ b/bb/brut/site.clj
@@ -230,9 +230,8 @@
                    [:li "item 3; with a very long text that should wrap to the next line in any browser."
                     " We'll see that the wrapped text should be aligned with the text of the other items."
                     " This is due to the " [:code "list-style-position: outside"] "."]
-                   [:li "item 4"]]]
-                 [:h3 "ol"]
-                 [:div.content
+                   [:li "item 4"]]
+                  [:h3 "ol"]
                   [:ol
                    [:li "item 1"]
                    [:li "item 2"]
diff --git a/src/general.less b/src/general.less
index 29b5c36..975effb 100644
--- a/src/general.less
+++ b/src/general.less
@@ -46,7 +46,8 @@ ul { list-style-type: square;
      padding-inline-start: 1.5rem;
    }
 ol {
-     padding-inline-start: 2rem;
+     padding-left: 2rem;
+     list-style-position: outside;
 }
 ul > li::marker { font-size: 1.5rem; }
 li { line-height: 1.2rem; }
diff --git a/src/grid.less b/src/grid.less
index b016de3..a52fb72 100644
--- a/src/grid.less
+++ b/src/grid.less
@@ -15,8 +15,6 @@
 .col {
 	flex-direction: column;
 }
-.col > .row { padding: 0 1rem; }
-.row > .col { padding: 1rem 0; }
 .start {
 	justify-content: flex-start;
 	align-items: flex-start;
@@ -94,6 +92,8 @@
     .no-mobile {
       display: none;
     }
+    .row { margin-bottom: 1rem; }
+    .row.gapless { margin: 0; }
 }
 
 .no-grow { flex: 0; }