mirror of https://github.com/n2geoff/stylelite.git
a, details, summary, nav, row auto flex
This commit is contained in:
parent
ff139e674e
commit
9f78196d8b
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +1,3 @@
|
|||
/*! Stylelite v:0.1.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */
|
||||
:root{--space:1rem;--size:1.1rem;--radius:0rem;--fg:#17202A;--bg:#FDFEFE;--mg:#ABB2B9}[data-theme=dark]{--mg:#ABB2B9;--bg:#17202A;--fg:#FDFEFE}*,:after,:before,body,html{box-sizing:border-box}body,html{color:var(--fg);margin:0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:var(--size);letter-spacing:.0625em;line-height:calc(var(--size)*1.5);padding:0}audio,embed,iframe,img,object,video{height:auto;max-width:100%;border:0}blockquote,main{padding:var(--space)}main{margin:0 auto;height:100vh;max-width:1140px}li,ol,ul{margin:0 calc(var(--space)*.72);padding:0}body,button,html,input,table{background:var(--bg)}table{border-collapse:collapse;border-spacing:0;width:100%}th{text-align:left}td,th{padding:calc(var(--space)/2.4);border-bottom:1px solid var(--mg)}blockquote{margin:var(--space) 0;border-left:calc(var(--space)/2) solid var(--fg);color:var(--fg);background:var(--mg)}code,hr{color:var(--mg)}code{font-family:monospace}blockquote code{color:var(--bg)}hr{border:1px solid}h1,h2,h3,h4,h5,h6{margin:var(--space) 0;padding-bottom:calc(var(--space)/2);text-transform:capitalize}h1{font-size:calc(var(--size)*2)}article,section{margin-top:calc(var(--space)*1.2);padding-bottom:var(--space)}button,input{outline:0;box-sizing:border-box;font-size:var(--size);height:calc(var(--size)*3);border:1px solid var(--mg);padding:clamp(.5rem,var(--space),2rem);margin-bottom:var(--space);margin-right:var(--space)}h1,input{color:var(--fg)}input{display:block;width:100%;border-radius:var(--radius)}button,input[type=reset],input[type=submit]{display:inline-block;text-transform:uppercase;border-radius:var(--radius);width:initial;background:var(--fg);color:var(--bg)}button:hover,input[type=reset]:hover,input[type=submit]:hover{background:var(--mg);color:var(--fg);cursor:pointer}input:disabled{background:var(--mg);color:var(--bg);cursor:not-allowed}input:focus,select:focus,textarea:focus{border:2px solid var(--mg)}input[type=checkbox],input[type=radio]{display:inline-block;padding:0;margin:0 .5rem;width:calc(var(--size)*.8);height:calc(var(--size)*.8)}select,textarea{display:inline-block;outline:0;font-size:var(--size);height:calc(var(--size)*3);width:100%;background:var(--bg);border-radius:var(--radius);padding:0 var(--space);margin-bottom:var(--space);border:1px solid var(--mg);color:var(--fg)}select{cursor:pointer;background:var(--bg) no-repeat 100%;padding:0 clamp(.5rem,var(--space),2rem);appearance:none;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>")}textarea{overflow:auto;resize:vertical;height:calc(var(--size)*6rem);padding:clamp(.5rem,var(--space),2rem);cursor:text}.grid{display:grid;gap:var(--space);grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.row{display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:wrap;margin:0}.col,.row>div{flex:1}.col,.col-1,.col-2,.col-3,.col-4,.col-5,.row>div{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;box-sizing:border-box;max-width:100%}.col-1{flex:1!important}.col-2{flex:2!important}.col-3{flex:3!important}.col-4{flex:4!important}.col-5{flex:5!important}.right{float:right}.left{float:left}.clear{content:'';display:table;clear:both}.full{width:100%;height:100%}.outline{background-color:transparent;color:var(--fg);border:1px solid var(--fg)}.border{border:1px solid var(--mg)}.underline{border-bottom:1px solid var(--mg)}.center{text-align:center}.content{margin:var(--space) 0}.subtitle{margin-top:calc(var(--size)*-1)}.sm{font-size:small;height:calc(var(--size)*1.5);padding:0 calc(var(--size)/.75)}.lg{font-size:x-large;height:calc(var(--size)*4.5);padding:0 calc(var(--size)/1.25)}
|
||||
/*! Stylelite v:0.5.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */
|
||||
:root{--space:1rem;--size:1.1rem;--radius:0rem;--fg:#17202A;--bg:#FDFEFE;--mg:#ABB2B9}[data-theme=dark]{--mg:#ABB2B9;--bg:#17202A;--fg:#FDFEFE}*,:after,:before{box-sizing:border-box}body,html,table{background:var(--bg)}body,html{color:var(--fg);margin:0;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:var(--size);letter-spacing:.0625em;line-height:calc(var(--size)*1.5);box-sizing:border-box;padding:0}audio,embed,iframe,img,object,video{height:auto;max-width:100%;border:0}blockquote,main{padding:var(--space)}main{margin:0 auto;height:100vh;max-width:1140px}li,ol,ul{margin:0 calc(var(--space)*.72);padding:0}table{border-collapse:collapse;border-spacing:0;width:100%}th{text-align:left}td,th{padding:calc(var(--space)/2.4);border-bottom:1px solid var(--mg)}blockquote{border-left:calc(var(--space)/2) solid var(--fg);color:var(--fg);background:var(--mg)}code{font-family:monospace}blockquote code,button,details,details code{color:var(--bg)}hr{border:1px solid}h1,h2,h3,h4,h5,h6{margin:var(--space) 0;padding-bottom:calc(var(--space)/2);text-transform:capitalize}h1{font-size:calc(var(--size)*2)}a,code,hr,nav ul li a:hover{color:var(--mg)}a:hover,h1{color:var(--fg)}article,section{margin-top:calc(var(--space)*1.2);padding-bottom:var(--space)}blockquote,details{margin:var(--space) 0}details{cursor:pointer}details[open]{margin-bottom:var(--space)}details>*{padding:calc(var(--space)/2);border-top:1px solid var(--bg)}details[open],summary{background-color:var(--mg)}button{text-transform:uppercase;width:initial;background:var(--fg)}button,input,input[type=reset],input[type=submit]{display:inline-block;border-radius:var(--radius)}button,input{outline:0;box-sizing:border-box;font-size:var(--size);background:var(--bg);height:calc(var(--size)*3);border:1px solid var(--mg);padding:clamp(.5rem,var(--space),2rem);margin-bottom:var(--space);margin-right:var(--space)}input{color:var(--fg);width:100%}input[type=reset],input[type=submit]{text-transform:uppercase;width:initial;background:var(--fg);color:var(--bg)}button:hover,input[type=reset]:hover,input[type=submit]:hover{background:var(--mg);color:var(--fg);cursor:pointer}input:disabled{background:var(--mg);color:var(--bg);cursor:not-allowed}input:focus,select:focus,textarea:focus{border:2px solid var(--mg)}input[type=checkbox],input[type=radio]{display:inline-block;padding:0;margin:0 .5rem;width:calc(var(--size)*.8);height:calc(var(--size)*.8)}select,textarea{display:inline-block;outline:0;font-size:var(--size);height:calc(var(--size)*3);width:100%;background:var(--bg);border-radius:var(--radius);padding:0 var(--space);margin-bottom:var(--space);border:1px solid var(--mg);color:var(--fg)}select{cursor:pointer;background:var(--bg) no-repeat 100%;padding:0 clamp(.5rem,var(--space),2rem);appearance:none;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>")}textarea{overflow:auto;resize:vertical;height:calc(var(--size)*6rem);padding:clamp(.5rem,var(--space),2rem);cursor:text}nav{justify-content:space-between;padding:.5rem 1rem;background-color:var(--fg);color:var(--bg)}nav ul{list-style-type:none}nav ul li a{color:var(--bg);text-decoration:none}.grid{display:grid;gap:var(--space);grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.row,nav,nav ul{display:flex}.row{flex:0 1 auto;flex-direction:row;flex-wrap:wrap;margin:0}.col,.row>*{flex:1}.col,.col-1,.col-2,.col-3,.col-4,.col-5,.row>*{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;box-sizing:border-box;max-width:100%}.col-1{flex:1!important}.col-2{flex:2!important}.col-3{flex:3!important}.col-4{flex:4!important}.col-5{flex:5!important}.right{float:right}.left{float:left}.center{text-align:center}.clear{content:'';display:table;clear:both}.fill{width:100%;height:100%}.outline{background-color:transparent;color:var(--fg);border:1px solid var(--fg)}.underline{border-bottom:1px solid var(--mg)}.border{border:1px solid var(--mg)}.content{padding:var(--space)}.subtitle{margin-top:calc(var(--size)*-1);margin-bottom:var(--space);font-size:smaller}.sm{font-size:small;height:calc(var(--size)*1.5);padding:0 calc(var(--size)/.75)}.lg{font-size:x-large;height:calc(var(--size)*4.5);padding:0 calc(var(--size)/1.25)}
|
||||
/*# sourceMappingURL=stylelite.map */
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"name": "stylelite",
|
||||
"version": "0.1.0",
|
||||
"version": "0.5.0",
|
||||
"description": "css for minimalists",
|
||||
"scripts": {
|
||||
"build": "npx csso .\\src\\stylelite.css --comments first-exclamation --output .\\dist\\stylelite.min.css -s .\\dist\\stylelite.map "
|
||||
"build": "npx csso .\\src\\stylelite.css --comments first-exclamation --output .\\dist\\stylelite.min.css -s .\\dist\\stylelite.map"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
},
|
||||
"keywords": [
|
||||
"css",
|
||||
"css3",
|
||||
"stylesheet",
|
||||
"classless",
|
||||
"classlite"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/*! Stylelite v:0.1.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */
|
||||
/*! Stylelite v:0.5.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */
|
||||
:root {
|
||||
--space: 1rem;
|
||||
--size: 1.1rem;
|
||||
|
|
@ -78,7 +78,7 @@ code {
|
|||
font-family: monospace;
|
||||
}
|
||||
|
||||
blockquote code {
|
||||
blockquote code, details code {
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
|
|
@ -98,6 +98,9 @@ h1 {
|
|||
color: var(--fg);
|
||||
}
|
||||
|
||||
a {color: var(--mg)}
|
||||
a:hover {color: var(--fg)}
|
||||
|
||||
section, article {
|
||||
margin-top: calc(var(--space) * 1.2);
|
||||
padding-bottom: var(--space);
|
||||
|
|
@ -105,8 +108,25 @@ section, article {
|
|||
|
||||
/* Forms */
|
||||
|
||||
details {
|
||||
margin: var(--space) 0;
|
||||
color: var(--bg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
details[open] {
|
||||
background-color: var(--mg);
|
||||
margin-bottom: var(--space);
|
||||
}
|
||||
|
||||
details>* {padding: calc(var(--space)/2); border-top: 1px solid var(--bg)}
|
||||
|
||||
summary {
|
||||
background-color: var(--mg);
|
||||
}
|
||||
|
||||
button, input {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
font-size: var(--size);
|
||||
|
|
@ -194,6 +214,28 @@ textarea {
|
|||
color: var(--fg);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: .5rem 1rem;
|
||||
background-color: var(--fg);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
color: var(--bg);
|
||||
text-decoration: none;
|
||||
}
|
||||
nav ul li a:hover {color: var(--mg)}
|
||||
|
||||
|
||||
/* Grid System */
|
||||
|
||||
.grid {
|
||||
|
|
@ -209,7 +251,7 @@ textarea {
|
|||
flex-wrap: wrap;
|
||||
margin:0;
|
||||
}
|
||||
.row>div, .col, .col-1, .col-2, .col-3, .col-4,.col-5 {
|
||||
.row>*, .col, .col-1, .col-2, .col-3, .col-4,.col-5 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
|
@ -229,24 +271,14 @@ textarea {
|
|||
|
||||
.right {float:right}
|
||||
.left {float:left}
|
||||
.clear {content:'';display: table;clear:both}
|
||||
.full {width: 100%; height: 100%}
|
||||
.outline {background-color: transparent; color: var(--fg); border: 1px solid var(--fg)}
|
||||
.border {border: 1px solid var(--mg)}
|
||||
.underline {border-bottom: 1px solid var(--mg)}
|
||||
.center {text-align: center;}
|
||||
.content {margin: var(--space) 0}
|
||||
.subtitle {margin-top: calc(var(--size) * -1)};
|
||||
.clear {content:'';display: table;clear:both}
|
||||
.fill {width: 100%; height: 100%}
|
||||
.outline {background-color: transparent; color: var(--fg); border: 1px solid var(--fg)}
|
||||
.underline {border-bottom: 1px solid var(--mg)}
|
||||
.border {border: 1px solid var(--mg)}
|
||||
.content {padding: var(--space)}
|
||||
.subtitle {margin-top: calc(var(--size) * -1); margin-bottom: var(--space); font-size: smaller};
|
||||
.spaceless {margin: 0; padding:0}
|
||||
|
||||
/* experiment */
|
||||
.sm {
|
||||
font-size: small;
|
||||
height: calc(var(--size) * 1.5);
|
||||
padding: 0 calc(var(--size) / .75);
|
||||
}
|
||||
.lg {
|
||||
font-size: x-large;
|
||||
height: calc(var(--size) * 4.5);
|
||||
padding: 0 calc(var(--size) / 1.25);
|
||||
}
|
||||
.sm {font-size: small;height: calc(var(--size) * 1.5);padding: 0 calc(var(--size)/ .75);}
|
||||
.lg {font-size: x-large;height: calc(var(--size) * 4.5);padding: 0 calc(var(--size) / 1.25);}
|
||||
Loading…
Reference in New Issue