From 92ad65fe1999b3257613b100c0910b7e045243e1 Mon Sep 17 00:00:00 2001 From: Jenil Gogari Date: Fri, 31 Mar 2017 20:03:36 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=86=99=20update=20to=20base=20code,pre=20?= =?UTF-8?q?styles=20and=20font=20variable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/chota.css | 551 ++++++++++++++++++++++++++++++++++++++++++++- dist/chota.min.css | 2 +- src/_base.css | 6 +- 3 files changed, 553 insertions(+), 6 deletions(-) diff --git a/dist/chota.css b/dist/chota.css index 46964b2..7b48cd2 100644 --- a/dist/chota.css +++ b/dist/chota.css @@ -1 +1,550 @@ -:root{--primary-color:#1a9f60;--lightGrey-color:#ddd;--grid-maxWidth:120rem;--grid-gutter:1.5rem}*,html{box-sizing:border-box}html{font-size:62.5%;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{letter-spacing:.01em;line-height:1.6;font-size:1.6rem;font-weight:400;font-family:-apple-system,BlinkMacSystemFont,Avenir,Avenir Next,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:600}h1{font-size:2em;margin:.67em 0}a{color:var(--primary-color)}a:hover:not(.button){opacity:.6}p{margin-top:0}blockquote{background-color:#f3f3f3;padding:1.5rem 2rem;border-left:3px solid var(--lightGrey-color)}dl dt{font-weight:700}hr{background-color:var(--lightGrey-color);height:1px;margin:1rem 0}hr,table{border:none}table{width:100%;border-collapse:collapse;border-spacing:0;text-align:left}td,th{vertical-align:middle;padding:1.2rem .4rem}thead{border-bottom:2px solid var(--lightGrey-color)}tfoot{border-top:2px solid var(--lightGrey-color)}code,kbd,pre,samp,tt{font-family:monaco,Consolas,Lucida Console,monospace}code,kbd{padding:0 .4rem;font-size:90%;white-space:nowrap;color:#d00939;border:1px solid var(--lightGrey-color);border-radius:4px}pre{font-size:1em;background-color:#f3f3f3;padding:1rem}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}img{max-width:100%}fieldset,iframe{border:1px solid var(--lightGrey-color)}.container{max-width:var(--grid-maxWidth);margin:0 auto;width:90%}.row{display:flex;flex-flow:row wrap;justify-content:flex-start;margin-top:var(--grid-gutter);margin-bottom:var(--grid-gutter)}.row>:first-child{margin-left:0}.col{flex:1}.col,[class*=" col-"],[class^=col-]{margin-left:var(--grid-gutter)}.col-1{width:calc((100% - var(--grid-gutter)*11)/12)}.col-2{width:calc((100% - var(--grid-gutter)*5)/6)}.col-3{width:calc((100% - var(--grid-gutter)*3)/4)}.col-4{width:calc((100% - var(--grid-gutter)*2)/3)}.col-5{width:calc((100% - var(--grid-gutter)*1.4)/2.4)}.col-6{width:calc((100% - var(--grid-gutter)*1)/2)}.col-7{width:calc((100% - var(--grid-gutter)*0.714285714285714)/1.714285714285714)}.col-8{width:calc((100% - var(--grid-gutter)*0.5)/1.5)}.col-9{width:calc((100% - var(--grid-gutter)*0.333333333333333)/1.333333333333333)}.col-10{width:calc((100% - var(--grid-gutter)*0.2)/1.2)}.col-11{width:calc((100% - var(--grid-gutter)*0.090909090909091)/1.090909090909091)}.col-12{width:calc((100% - var(--grid-gutter)*0)/1)}@media screen and (max-width:768px){.col,[class*=" col-"],[class^=col-]{margin:var(--grid-gutter) 0;width:100%}}fieldset{padding:.5rem 2rem}legend{text-transform:uppercase;font-size:.8em;letter-spacing:.1rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),select,textarea,textarea[type=text]{font-family:inherit;padding:.7rem 1rem;border-radius:4px;border:1px solid var(--lightGrey-color);font-size:1em;transition:all .2s ease;display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,select:hover,textarea:hover,textarea[type=text]:hover{border-color:#aaa}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,select:focus,textarea:focus,textarea[type=text]:focus{outline:none;border-color:var(--primary-color)}select{-webkit-appearance:none;background-color:#fafafa;border:1px solid var(--lightGrey-color);background-position:100%;background-repeat:no-repeat;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,")}[type=checkbox],[type=radio]{-webkit-appearance:none;width:1.6rem;height:1.6rem;margin:-.2rem .2rem;border:1px solid #aaa}[type=radio]{border-radius:50%;box-shadow:inset 0 0 0 3px #fff}[type=radio]:checked{background-color:var(--primary-color)}[type=checkbox]:checked{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC") var(--primary-color) no-repeat 50%;background-size:1rem}.button,[type=button],[type=reset],[type=submit],button{padding:1rem 2.5rem;color:#333;background:#e6e6e6;border-radius:4px;border:none;font-size:1.5rem;line-height:1;transition:all .2s ease;text-decoration:none;transform:scale(1);transition:all .3s;display:inline-block}.button+.button{margin-left:1rem}.button:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{opacity:.8}.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{transform:scale(.98)}input[disabled]{opacity:.4;cursor:not-allowed}.button.primary,[type=submit]{color:#fff;background:var(--primary-color)}.button.outline{background-color:transparent;border:1px solid var(--lightGrey-color)}.button.outline.primary{border-color:var(--primary-color);color:var(--primary-color)}.button.clear{background-color:transparent;border-color:transparent;color:var(--primary-color)}.nav{min-height:5rem;align-items:stretch}.nav,.nav>.container{display:flex}.container>.nav{padding-left:var(--grid-gutter);padding-right:var(--grid-gutter)}.nav-center,.nav-left,.nav-right{display:flex;flex-basis:0;flex-grow:1;flex-shrink:0}.nav-left{justify-content:flex-start}.nav-right{justify-content:flex-end}.nav-center{justify-content:center}@media screen and (max-width:480px){.nav,.nav>.container{flex-direction:column}.nav-center,.nav-left,.nav-right{flex-basis:100%;justify-content:center;flex-shrink:1;flex-grow:0;flex-wrap:wrap}}.nav .brand{margin:0;font-weight:300}.nav .brand,.nav a{display:flex;align-items:center}.nav a{text-decoration:none;cursor:pointer}.card,.nav a{padding:1rem 2rem}.card{border-radius:4px;box-shadow:0 0 2px rgba(0,0,0,.4)}.card header>*{margin-top:0;margin-bottom:1rem}.tabs{display:flex}.tabs a{text-decoration:none}.tabs>a{padding:1rem 2rem;flex:1;color:#555;border-bottom:2px solid var(--lightGrey-color);text-align:center}.tabs>a.active,.tabs>a:hover{border-bottom:2px solid #555}.tabs>a.active{border-color:var(--primary-color)}.pull-right{float:right}.pull-left{float:left}.is-text-center{text-align:center}.is-text-left{text-align:left}.is-text-right{text-align:right}.is-text-uppercase{text-transform:uppercase}.is-text-lowercase{text-transform:lowercase}.is-text-capitalize{text-transform:capitalize}.is-full-screen{width:100%;min-height:100vh}.is-full-width{width:100%}.is-vertical-align{display:flex;align-items:center}.is-center,.is-horizontal-align{display:flex;justify-content:center}.is-center{align-items:center}.is-right{justify-content:flex-end}.is-left,.is-right{display:flex;align-items:center}.is-left{justify-content:flex-start}.is-fixed{position:fixed;width:100%}.clearfix{content:"";display:table;clear:both}@media screen and (max-width:480px){.hide-phone{display:none}}@media screen and (max-width:768px){.hide-tablet{display:none}} \ No newline at end of file +:root { + --primary-color: #1a9f60; + --lightGrey-color: #ddd; + --grid-maxWidth: 120rem; + --grid-gutter: 1.5rem; + --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; +} + +* { + box-sizing: border-box; +} + +html { + box-sizing: border-box; + font-size: 62.5%; + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +body { + letter-spacing: 0.01em; + line-height: 1.6; + font-size: 1.6rem; + font-weight: 400; + font-family: var(--font-family); + margin: 0; + padding: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 600; +} + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +a { + color: var(--primary-color); +} + +a:hover:not(.button) { + opacity: 0.6; +} + +p { + margin-top: 0; +} + +blockquote { + background-color: #f3f3f3; + padding: 1.5rem 2rem; + border-left: 3px solid var(--lightGrey-color); +} + +dl dt { + font-weight: bold; +} + +hr { + border: none; + background-color: var(--lightGrey-color); + height: 1px; + margin: 1rem 0; +} + +table { + width: 100%; + border: none; + border-collapse: collapse; + border-spacing: 0; + text-align: left; +} + +td, +th { + vertical-align: middle; + padding: 1.2rem 0.4rem; +} + +thead { + border-bottom: 2px solid var(--lightGrey-color); +} + +tfoot { + border-top: 2px solid var(--lightGrey-color); +} + +code, +kbd, +pre, +samp, +tt { + font-family: monaco, "Consolas", "Lucida Console", monospace; +} + +code, +kbd { + padding: 0 0.4rem; + font-size: 90%; + white-space: nowrap; + border-radius: 4px; +} + +pre { + font-size: 1em; + padding: 1rem; +} + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} + +img { + max-width: 100%; +} + +fieldset, +iframe { + border: 1px solid var(--lightGrey-color); +} + +.container { + max-width: var(--grid-maxWidth); + margin: 0 auto; + width: 90%; +} + +.row { + display: flex; + flex-flow: row wrap; + justify-content: flex-start; + margin-top: var(--grid-gutter); + margin-bottom: var(--grid-gutter); +} + +.row > :first-child { + margin-left: 0; +} + +.col { + flex: 1; +} + +.col, +[class*=" col-"], +[class^='col-'] { + margin-left: var(--grid-gutter); +} + +.col-1 { + width: calc((100% - var(--grid-gutter)*((12/1) - 1))/(12/1)); +} + +.col-2 { + width: calc((100% - var(--grid-gutter)*((12/2) - 1))/(12/2)); +} + +.col-3 { + width: calc((100% - var(--grid-gutter)*((12/3) - 1))/(12/3)); +} + +.col-4 { + width: calc((100% - var(--grid-gutter)*((12/4) - 1))/(12/4)); +} + +.col-5 { + width: calc((100% - var(--grid-gutter)*((12/5) - 1))/(12/5)); +} + +.col-6 { + width: calc((100% - var(--grid-gutter)*((12/6) - 1))/(12/6)); +} + +.col-7 { + width: calc((100% - var(--grid-gutter)*((12/7) - 1))/(12/7)); +} + +.col-8 { + width: calc((100% - var(--grid-gutter)*((12/8) - 1))/(12/8)); +} + +.col-9 { + width: calc((100% - var(--grid-gutter)*((12/9) - 1))/(12/9)); +} + +.col-10 { + width: calc((100% - var(--grid-gutter)*((12/10) - 1))/(12/10)); +} + +.col-11 { + width: calc((100% - var(--grid-gutter)*((12/11) - 1))/(12/11)); +} + +.col-12 { + width: calc((100% - var(--grid-gutter)*((12/12) - 1))/(12/12)); +} + +@media screen and (max-width: 768px) { + .col, + [class*=" col-"], + [class^='col-'] { + margin: var(--grid-gutter) 0; + width: 100%; + } +} + +fieldset { + padding: 0.5rem 2rem; +} + +legend { + text-transform: uppercase; + font-size: 0.8em; + letter-spacing: 0.1rem; +} + +input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]), +select, +textarea, +textarea[type=text] { + font-family: inherit; + padding: 0.7rem 1rem; + border-radius: 4px; + border: 1px solid var(--lightGrey-color); + font-size: 1em; + transition: all 0.2s ease; + display: block; + width: 100%; +} + +input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover, +select:hover, +textarea:hover, +textarea[type=text]:hover { + border-color: #aaa; +} + +input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus, +select:focus, +textarea:focus, +textarea[type=text]:focus { + outline: none; + border-color: var(--primary-color); +} + +select { + -webkit-appearance: none; + background-color: #fafafa; + border: 1px solid var(--lightGrey-color); + background-position: right center; + background-repeat: no-repeat; + background-size: 1ex; + background-origin: content-box; + background-image: url("data:image/svg+xml;utf8,"); +} + +[type="checkbox"], +[type="radio"] { + -webkit-appearance: none; + width: 1.6rem; + height: 1.6rem; + margin: -0.2rem 0.2rem; + border: 1px solid #aaa; +} + +[type="radio"] { + border-radius: 50%; + box-shadow: inset 0 0 0 3px white; +} + +[type="radio"]:checked { + background-color: var(--primary-color); +} + +[type="checkbox"]:checked { + background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC") var(--primary-color) no-repeat center; + background-size: 1rem; +} + +/* BUTTONS */ + +.button, +[type=button], +[type=reset], +[type=submit], +button { + padding: 1rem 2.5rem; + color: #333; + background: #e6e6e6; + border-radius: 4px; + border: none; + font-size: 1.5rem; + line-height: 1; + transition: all 0.2s ease; + text-decoration: none; + transform: scale(1); + transition: all 300ms; + display: inline-block; +} + +.button + .button { + margin-left: 1rem; +} + +.button:hover, +[type=button]:hover, +[type=reset]:hover, +[type=submit]:hover, +button:hover { + opacity: 0.8; +} + +.button:active, +[type=button]:active, +[type=reset]:active, +[type=submit]:active, +button:active { + transform: scale(0.98); +} + +input[disabled] { + opacity: 0.4; + cursor: not-allowed; +} + +.button.primary, +[type=submit] { + color: #fff; + background: var(--primary-color); +} + +.button.outline { + background-color: transparent; + border: 1px solid var(--lightGrey-color); +} + +.button.outline.primary { + border-color: var(--primary-color); + color: var(--primary-color); +} + +.button.clear { + background-color: transparent; + border-color: transparent; + color: var(--primary-color); +} + +.nav { + display: flex; + min-height: 5rem; + align-items: stretch; +} + +.nav > .container { + display: flex; +} + +.container > .nav { + padding-left: var(--grid-gutter); + padding-right: var(--grid-gutter); +} + +.nav-center, +.nav-left, +.nav-right { + display: flex; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; +} + +.nav-left { + justify-content: flex-start; +} + +.nav-right { + justify-content: flex-end; +} + +.nav-center { + justify-content: center; +} + +@media screen and (max-width: 480px) { + .nav, .nav>.container { + flex-direction: column; + } + .nav-center, + .nav-left, + .nav-right { + flex-basis: 100%; + justify-content: center; + flex-shrink: 1; + flex-grow: 0; + flex-wrap: wrap; + } +} + +.nav .brand { + display: flex; + align-items: center; + margin: 0; + font-weight: 300; +} + +.nav a { + text-decoration: none; + cursor: pointer; + display: flex; + align-items: center; + padding: 1rem 2rem; +} + +.card { + padding: 1rem 2rem; + border-radius: 4px; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.4); +} + +.card header > * { + margin-top: 0; + margin-bottom: 1rem; +} + +.tabs { + display: flex; +} + +.tabs a { + text-decoration: none; +} + +.tabs > a { + padding: 1rem 2rem; + flex: 1; + color: #555; + border-bottom: 2px solid var(--lightGrey-color); + text-align: center; +} + +.tabs > a.active, +.tabs > a:hover { + border-bottom: 2px solid #555; +} + +.tabs > a.active { + border-color: var(--primary-color); +} + +.pull-right { + float: right; +} + +.pull-left { + float: left; +} + +.is-text-center { + text-align: center; +} + +.is-text-left { + text-align: left; +} + +.is-text-right { + text-align: right; +} + +.is-text-uppercase { + text-transform: uppercase; +} + +.is-text-lowercase { + text-transform: lowercase; +} + +.is-text-capitalize { + text-transform: capitalize; +} + +.is-full-screen { + width: 100%; + min-height: 100vh; +} + +.is-full-width { + width: 100%; +} + +.is-vertical-align { + display: flex; + align-items: center; +} + +.is-horizontal-align { + display: flex; + justify-content: center; +} + +.is-center { + display: flex; + align-items: center; + justify-content: center; +} + +.is-right { + display: flex; + align-items: center; + justify-content: flex-end; +} + +.is-left { + display: flex; + align-items: center; + justify-content: flex-start; +} + +.is-fixed { + position: fixed; + width: 100%; +} + +.clearfix { + content: ""; + display: table; + clear: both; +} + +@media screen and (max-width: 480px) { + .hide-phone { + display: none; + } +} + +@media screen and (max-width: 768px) { + .hide-tablet { + display: none; + } +} diff --git a/dist/chota.min.css b/dist/chota.min.css index 46964b2..5fd02c7 100644 --- a/dist/chota.min.css +++ b/dist/chota.min.css @@ -1 +1 @@ -:root{--primary-color:#1a9f60;--lightGrey-color:#ddd;--grid-maxWidth:120rem;--grid-gutter:1.5rem}*,html{box-sizing:border-box}html{font-size:62.5%;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{letter-spacing:.01em;line-height:1.6;font-size:1.6rem;font-weight:400;font-family:-apple-system,BlinkMacSystemFont,Avenir,Avenir Next,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:600}h1{font-size:2em;margin:.67em 0}a{color:var(--primary-color)}a:hover:not(.button){opacity:.6}p{margin-top:0}blockquote{background-color:#f3f3f3;padding:1.5rem 2rem;border-left:3px solid var(--lightGrey-color)}dl dt{font-weight:700}hr{background-color:var(--lightGrey-color);height:1px;margin:1rem 0}hr,table{border:none}table{width:100%;border-collapse:collapse;border-spacing:0;text-align:left}td,th{vertical-align:middle;padding:1.2rem .4rem}thead{border-bottom:2px solid var(--lightGrey-color)}tfoot{border-top:2px solid var(--lightGrey-color)}code,kbd,pre,samp,tt{font-family:monaco,Consolas,Lucida Console,monospace}code,kbd{padding:0 .4rem;font-size:90%;white-space:nowrap;color:#d00939;border:1px solid var(--lightGrey-color);border-radius:4px}pre{font-size:1em;background-color:#f3f3f3;padding:1rem}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}img{max-width:100%}fieldset,iframe{border:1px solid var(--lightGrey-color)}.container{max-width:var(--grid-maxWidth);margin:0 auto;width:90%}.row{display:flex;flex-flow:row wrap;justify-content:flex-start;margin-top:var(--grid-gutter);margin-bottom:var(--grid-gutter)}.row>:first-child{margin-left:0}.col{flex:1}.col,[class*=" col-"],[class^=col-]{margin-left:var(--grid-gutter)}.col-1{width:calc((100% - var(--grid-gutter)*11)/12)}.col-2{width:calc((100% - var(--grid-gutter)*5)/6)}.col-3{width:calc((100% - var(--grid-gutter)*3)/4)}.col-4{width:calc((100% - var(--grid-gutter)*2)/3)}.col-5{width:calc((100% - var(--grid-gutter)*1.4)/2.4)}.col-6{width:calc((100% - var(--grid-gutter)*1)/2)}.col-7{width:calc((100% - var(--grid-gutter)*0.714285714285714)/1.714285714285714)}.col-8{width:calc((100% - var(--grid-gutter)*0.5)/1.5)}.col-9{width:calc((100% - var(--grid-gutter)*0.333333333333333)/1.333333333333333)}.col-10{width:calc((100% - var(--grid-gutter)*0.2)/1.2)}.col-11{width:calc((100% - var(--grid-gutter)*0.090909090909091)/1.090909090909091)}.col-12{width:calc((100% - var(--grid-gutter)*0)/1)}@media screen and (max-width:768px){.col,[class*=" col-"],[class^=col-]{margin:var(--grid-gutter) 0;width:100%}}fieldset{padding:.5rem 2rem}legend{text-transform:uppercase;font-size:.8em;letter-spacing:.1rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),select,textarea,textarea[type=text]{font-family:inherit;padding:.7rem 1rem;border-radius:4px;border:1px solid var(--lightGrey-color);font-size:1em;transition:all .2s ease;display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,select:hover,textarea:hover,textarea[type=text]:hover{border-color:#aaa}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,select:focus,textarea:focus,textarea[type=text]:focus{outline:none;border-color:var(--primary-color)}select{-webkit-appearance:none;background-color:#fafafa;border:1px solid var(--lightGrey-color);background-position:100%;background-repeat:no-repeat;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,")}[type=checkbox],[type=radio]{-webkit-appearance:none;width:1.6rem;height:1.6rem;margin:-.2rem .2rem;border:1px solid #aaa}[type=radio]{border-radius:50%;box-shadow:inset 0 0 0 3px #fff}[type=radio]:checked{background-color:var(--primary-color)}[type=checkbox]:checked{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC") var(--primary-color) no-repeat 50%;background-size:1rem}.button,[type=button],[type=reset],[type=submit],button{padding:1rem 2.5rem;color:#333;background:#e6e6e6;border-radius:4px;border:none;font-size:1.5rem;line-height:1;transition:all .2s ease;text-decoration:none;transform:scale(1);transition:all .3s;display:inline-block}.button+.button{margin-left:1rem}.button:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{opacity:.8}.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{transform:scale(.98)}input[disabled]{opacity:.4;cursor:not-allowed}.button.primary,[type=submit]{color:#fff;background:var(--primary-color)}.button.outline{background-color:transparent;border:1px solid var(--lightGrey-color)}.button.outline.primary{border-color:var(--primary-color);color:var(--primary-color)}.button.clear{background-color:transparent;border-color:transparent;color:var(--primary-color)}.nav{min-height:5rem;align-items:stretch}.nav,.nav>.container{display:flex}.container>.nav{padding-left:var(--grid-gutter);padding-right:var(--grid-gutter)}.nav-center,.nav-left,.nav-right{display:flex;flex-basis:0;flex-grow:1;flex-shrink:0}.nav-left{justify-content:flex-start}.nav-right{justify-content:flex-end}.nav-center{justify-content:center}@media screen and (max-width:480px){.nav,.nav>.container{flex-direction:column}.nav-center,.nav-left,.nav-right{flex-basis:100%;justify-content:center;flex-shrink:1;flex-grow:0;flex-wrap:wrap}}.nav .brand{margin:0;font-weight:300}.nav .brand,.nav a{display:flex;align-items:center}.nav a{text-decoration:none;cursor:pointer}.card,.nav a{padding:1rem 2rem}.card{border-radius:4px;box-shadow:0 0 2px rgba(0,0,0,.4)}.card header>*{margin-top:0;margin-bottom:1rem}.tabs{display:flex}.tabs a{text-decoration:none}.tabs>a{padding:1rem 2rem;flex:1;color:#555;border-bottom:2px solid var(--lightGrey-color);text-align:center}.tabs>a.active,.tabs>a:hover{border-bottom:2px solid #555}.tabs>a.active{border-color:var(--primary-color)}.pull-right{float:right}.pull-left{float:left}.is-text-center{text-align:center}.is-text-left{text-align:left}.is-text-right{text-align:right}.is-text-uppercase{text-transform:uppercase}.is-text-lowercase{text-transform:lowercase}.is-text-capitalize{text-transform:capitalize}.is-full-screen{width:100%;min-height:100vh}.is-full-width{width:100%}.is-vertical-align{display:flex;align-items:center}.is-center,.is-horizontal-align{display:flex;justify-content:center}.is-center{align-items:center}.is-right{justify-content:flex-end}.is-left,.is-right{display:flex;align-items:center}.is-left{justify-content:flex-start}.is-fixed{position:fixed;width:100%}.clearfix{content:"";display:table;clear:both}@media screen and (max-width:480px){.hide-phone{display:none}}@media screen and (max-width:768px){.hide-tablet{display:none}} \ No newline at end of file +:root{--primary-color:#1a9f60;--lightGrey-color:#ddd;--grid-maxWidth:120rem;--grid-gutter:1.5rem;--font-family:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif}*,html{box-sizing:border-box}html{font-size:62.5%;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{letter-spacing:.01em;line-height:1.6;font-size:1.6rem;font-weight:400;font-family:var(--font-family);margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:600}h1{font-size:2em;margin:.67em 0}a{color:var(--primary-color)}a:hover:not(.button){opacity:.6}p{margin-top:0}blockquote{background-color:#f3f3f3;padding:1.5rem 2rem;border-left:3px solid var(--lightGrey-color)}dl dt{font-weight:700}hr{background-color:var(--lightGrey-color);height:1px;margin:1rem 0}hr,table{border:none}table{width:100%;border-collapse:collapse;border-spacing:0;text-align:left}td,th{vertical-align:middle;padding:1.2rem .4rem}thead{border-bottom:2px solid var(--lightGrey-color)}tfoot{border-top:2px solid var(--lightGrey-color)}code,kbd,pre,samp,tt{font-family:monaco,Consolas,Lucida Console,monospace}code,kbd{padding:0 .4rem;font-size:90%;white-space:nowrap;border-radius:4px}pre{font-size:1em;padding:1rem}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}img{max-width:100%}fieldset,iframe{border:1px solid var(--lightGrey-color)}.container{max-width:var(--grid-maxWidth);margin:0 auto;width:90%}.row{display:flex;flex-flow:row wrap;justify-content:flex-start;margin-top:var(--grid-gutter);margin-bottom:var(--grid-gutter)}.row>:first-child{margin-left:0}.col{flex:1}.col,[class*=" col-"],[class^=col-]{margin-left:var(--grid-gutter)}.col-1{width:calc((100% - var(--grid-gutter)*11)/12)}.col-2{width:calc((100% - var(--grid-gutter)*5)/6)}.col-3{width:calc((100% - var(--grid-gutter)*3)/4)}.col-4{width:calc((100% - var(--grid-gutter)*2)/3)}.col-5{width:calc((100% - var(--grid-gutter)*1.4)/2.4)}.col-6{width:calc((100% - var(--grid-gutter)*1)/2)}.col-7{width:calc((100% - var(--grid-gutter)*0.714285714285714)/1.714285714285714)}.col-8{width:calc((100% - var(--grid-gutter)*0.5)/1.5)}.col-9{width:calc((100% - var(--grid-gutter)*0.333333333333333)/1.333333333333333)}.col-10{width:calc((100% - var(--grid-gutter)*0.2)/1.2)}.col-11{width:calc((100% - var(--grid-gutter)*0.090909090909091)/1.090909090909091)}.col-12{width:calc((100% - var(--grid-gutter)*0)/1)}@media screen and (max-width:768px){.col,[class*=" col-"],[class^=col-]{margin:var(--grid-gutter) 0;width:100%}}fieldset{padding:.5rem 2rem}legend{text-transform:uppercase;font-size:.8em;letter-spacing:.1rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),select,textarea,textarea[type=text]{font-family:inherit;padding:.7rem 1rem;border-radius:4px;border:1px solid var(--lightGrey-color);font-size:1em;transition:all .2s ease;display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,select:hover,textarea:hover,textarea[type=text]:hover{border-color:#aaa}input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,select:focus,textarea:focus,textarea[type=text]:focus{outline:none;border-color:var(--primary-color)}select{-webkit-appearance:none;background-color:#fafafa;border:1px solid var(--lightGrey-color);background-position:100%;background-repeat:no-repeat;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,")}[type=checkbox],[type=radio]{-webkit-appearance:none;width:1.6rem;height:1.6rem;margin:-.2rem .2rem;border:1px solid #aaa}[type=radio]{border-radius:50%;box-shadow:inset 0 0 0 3px #fff}[type=radio]:checked{background-color:var(--primary-color)}[type=checkbox]:checked{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC") var(--primary-color) no-repeat 50%;background-size:1rem}.button,[type=button],[type=reset],[type=submit],button{padding:1rem 2.5rem;color:#333;background:#e6e6e6;border-radius:4px;border:none;font-size:1.5rem;line-height:1;transition:all .2s ease;text-decoration:none;transform:scale(1);transition:all .3s;display:inline-block}.button+.button{margin-left:1rem}.button:hover,[type=button]:hover,[type=reset]:hover,[type=submit]:hover,button:hover{opacity:.8}.button:active,[type=button]:active,[type=reset]:active,[type=submit]:active,button:active{transform:scale(.98)}input[disabled]{opacity:.4;cursor:not-allowed}.button.primary,[type=submit]{color:#fff;background:var(--primary-color)}.button.outline{background-color:transparent;border:1px solid var(--lightGrey-color)}.button.outline.primary{border-color:var(--primary-color);color:var(--primary-color)}.button.clear{background-color:transparent;border-color:transparent;color:var(--primary-color)}.nav{min-height:5rem;align-items:stretch}.nav,.nav>.container{display:flex}.container>.nav{padding-left:var(--grid-gutter);padding-right:var(--grid-gutter)}.nav-center,.nav-left,.nav-right{display:flex;flex-basis:0;flex-grow:1;flex-shrink:0}.nav-left{justify-content:flex-start}.nav-right{justify-content:flex-end}.nav-center{justify-content:center}@media screen and (max-width:480px){.nav,.nav>.container{flex-direction:column}.nav-center,.nav-left,.nav-right{flex-basis:100%;justify-content:center;flex-shrink:1;flex-grow:0;flex-wrap:wrap}}.nav .brand{margin:0;font-weight:300}.nav .brand,.nav a{display:flex;align-items:center}.nav a{text-decoration:none;cursor:pointer}.card,.nav a{padding:1rem 2rem}.card{border-radius:4px;box-shadow:0 0 2px rgba(0,0,0,.4)}.card header>*{margin-top:0;margin-bottom:1rem}.tabs{display:flex}.tabs a{text-decoration:none}.tabs>a{padding:1rem 2rem;flex:1;color:#555;border-bottom:2px solid var(--lightGrey-color);text-align:center}.tabs>a.active,.tabs>a:hover{border-bottom:2px solid #555}.tabs>a.active{border-color:var(--primary-color)}.pull-right{float:right}.pull-left{float:left}.is-text-center{text-align:center}.is-text-left{text-align:left}.is-text-right{text-align:right}.is-text-uppercase{text-transform:uppercase}.is-text-lowercase{text-transform:lowercase}.is-text-capitalize{text-transform:capitalize}.is-full-screen{width:100%;min-height:100vh}.is-full-width{width:100%}.is-vertical-align{display:flex;align-items:center}.is-center,.is-horizontal-align{display:flex;justify-content:center}.is-center{align-items:center}.is-right{justify-content:flex-end}.is-left,.is-right{display:flex;align-items:center}.is-left{justify-content:flex-start}.is-fixed{position:fixed;width:100%}.clearfix{content:"";display:table;clear:both}@media screen and (max-width:480px){.hide-phone{display:none}}@media screen and (max-width:768px){.hide-tablet{display:none}} \ No newline at end of file diff --git a/src/_base.css b/src/_base.css index f10d736..76cc26f 100644 --- a/src/_base.css +++ b/src/_base.css @@ -3,6 +3,7 @@ --lightGrey-color: #ddd; --grid-maxWidth: 120rem; --grid-gutter: 1.5rem; + --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } * { @@ -22,7 +23,7 @@ body { line-height: 1.6; font-size: 1.6rem; font-weight: 400; - font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-family: var(--font-family); margin: 0; padding: 0; } @@ -105,14 +106,11 @@ kbd { padding: 0 0.4rem; font-size: 90%; white-space: nowrap; - color: #d00939; - border: 1px solid var(--lightGrey-color); border-radius: 4px; } pre { font-size: 1em; - background-color: #f3f3f3; padding: 1rem; }