diff --git a/src/grayscale.css b/src/grayscale.css index ca04472..ac64381 100644 --- a/src/grayscale.css +++ b/src/grayscale.css @@ -1,4 +1,4 @@ -/* Grayscale CSS v:0.8.2 | MIT LICENSE | https://github.com/n2geoff/grayscale */ +/* Grayscale CSS v:0.8.3 | MIT LICENSE | https://github.com/n2geoff/grayscale */ :root { --Hsl: 207; --hSl: 50%; @@ -30,7 +30,9 @@ --fg: hsl(var(--Hsl), 20%, 90%); } -*, *:before, *:after { box-sizing: border-box; } +*,*:before,*:after { + box-sizing: border-box; +} html,body { background: var(--bg); @@ -39,17 +41,18 @@ html,body { padding: 0; font-family: var(--font); font-size: var(--size); + letter-spacing: 0.0625em; font-weight: var(--weight); line-height: var(--line); box-sizing: border-box; padding: 0; } -::placeholder { +::placeholder,small { color: var(--hint); } -:disabled::placeholder { +:disabled::placeholder,small { color: hsl(0, 0%, 50%); } @@ -62,10 +65,15 @@ img,embed,iframe,object,audio,video { main { margin: 0 auto; padding: var(--space); - height:100vh; + height: 100vh; max-width: 1140px; } +ul,ol,li { + margin: 0 calc(var(--space) *.72); + padding: 0 +} + table { background-color: var(--bg); border-collapse: collapse; @@ -73,20 +81,27 @@ table { width: 100%; } -tbody { - border-top: 2px solid var(--theme); - border-top: 2px solid var(--theme); +thead { + background: var(--theme); } -th {text-align: left;color: var(--dark)} +th { + text-align: left; + color: var(--dark); +} -th, td { +th,td { padding: calc(var(--space) / 2); - border-bottom: 1px solid var(--theme) + border-bottom: 1px solid var(--theme); } -a {color: var(--theme)} -a:hover {color: var(--fg)} +a { + color: var(--theme); +} + +a:hover { + color: var(--fg); +} blockquote { margin: var(--space) 0; @@ -97,9 +112,10 @@ blockquote { } code { + color: var(--light); + background: var(--dark); margin: 0 calc(var(--space) / 4); padding: 0 calc(var(--space) / 4); - background: var(--bg); } pre>code { @@ -113,12 +129,23 @@ hr { border: 1px solid; } -h1,h2,h3,h4,h5,h6 {text-transform: capitalize;} -h1 {font-size: calc(var(--size) * 2); color: var(--dark)} -h2 {color: var(--theme)} -h3 {border-bottom: 1px solid var(--theme);} +h1,h2,h3,h4,h5,h6 { + margin: var(--space) 0; + text-transform: capitalize; +} -small {color: var(--gray)} +h1 { + font-size: calc(var(--size) * 2); + color: var(--dark); +} + +h2 { + color: var(--theme); +} + +h3 { + border-bottom: 1px solid var(--theme); +} section { margin-bottom: var(--space); @@ -156,10 +183,10 @@ input { input:disabled { background: var(--gray); color: var(--bg); - cursor:not-allowed; + cursor: not-allowed; } -select:focus, textarea:focus, input:focus { +select:focus,textarea:focus,input:focus { border: 2px solid var(--theme); }