geoff
/
grayscale
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

minor style tweaks

This commit is contained in:
Geoff Doty 2021-10-17 17:33:29 -04:00
parent 84201e876b
commit ae19656275
1 changed files with 48 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/grayscale.css
View File

@ -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 { :root {
--Hsl: 207; --Hsl: 207;
--hSl: 50%; --hSl: 50%;
@ -30,7 +30,9 @@
--fg: hsl(var(--Hsl), 20%, 90%); --fg: hsl(var(--Hsl), 20%, 90%);
} }
*, *:before, *:after { box-sizing: border-box; } *,*:before,*:after {
box-sizing: border-box;
}
html,body { html,body {
background: var(--bg); background: var(--bg);
@ -39,17 +41,18 @@ html,body {
padding: 0; padding: 0;
font-family: var(--font); font-family: var(--font);
font-size: var(--size); font-size: var(--size);
letter-spacing: 0.0625em;
font-weight: var(--weight); font-weight: var(--weight);
line-height: var(--line); line-height: var(--line);
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
} }
::placeholder { ::placeholder,small {
color: var(--hint); color: var(--hint);
} }
:disabled::placeholder { :disabled::placeholder,small {
color: hsl(0, 0%, 50%); color: hsl(0, 0%, 50%);
} }
@ -62,10 +65,15 @@ img,embed,iframe,object,audio,video {
main { main {
margin: 0 auto; margin: 0 auto;
padding: var(--space); padding: var(--space);
height:100vh; height: 100vh;
max-width: 1140px; max-width: 1140px;
} }
ul,ol,li {
margin: 0 calc(var(--space) *.72);
padding: 0
}
table { table {
background-color: var(--bg); background-color: var(--bg);
border-collapse: collapse; border-collapse: collapse;
@ -73,20 +81,27 @@ table {
width: 100%; width: 100%;
} }
tbody { thead {
border-top: 2px solid var(--theme); background: var(--theme);
border-top: 2px solid 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); padding: calc(var(--space) / 2);
border-bottom: 1px solid var(--theme) border-bottom: 1px solid var(--theme);
} }
a {color: var(--theme)} a {
a:hover {color: var(--fg)} color: var(--theme);
}
a:hover {
color: var(--fg);
}
blockquote { blockquote {
margin: var(--space) 0; margin: var(--space) 0;
@ -97,9 +112,10 @@ blockquote {
} }
code { code {
color: var(--light);
background: var(--dark);
margin: 0 calc(var(--space) / 4); margin: 0 calc(var(--space) / 4);
padding: 0 calc(var(--space) / 4); padding: 0 calc(var(--space) / 4);
background: var(--bg);
} }
pre>code { pre>code {
@ -113,12 +129,23 @@ hr {
border: 1px solid; border: 1px solid;
} }
h1,h2,h3,h4,h5,h6 {text-transform: capitalize;} h1,h2,h3,h4,h5,h6 {
h1 {font-size: calc(var(--size) * 2); color: var(--dark)} margin: var(--space) 0;
h2 {color: var(--theme)} text-transform: capitalize;
h3 {border-bottom: 1px solid var(--theme);} }
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 { section {
margin-bottom: var(--space); margin-bottom: var(--space);
@ -156,10 +183,10 @@ input {
input:disabled { input:disabled {
background: var(--gray); background: var(--gray);
color: var(--bg); 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); border: 2px solid var(--theme);
} }