diff --git a/dist/milligram.css b/dist/milligram.css new file mode 100644 index 0000000..4d8d336 --- /dev/null +++ b/dist/milligram.css @@ -0,0 +1,572 @@ +html { + box-sizing: border-box; + font-size: 62.5%; +} + +body { + color: #606c76; + font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1.6em; + font-weight: 300; + letter-spacing: 0.01em; + line-height: 1.6; +} + +*, +*:after, +*:before { + box-sizing: border-box; +} + +.blockquote, +blockquote { + border-left: 0.3rem solid #d1d1d1; + margin-left: 0; + margin-right: 0; + padding: 1rem 1.5rem; +} +.blockquote *:last-child, +blockquote *:last-child { + margin: 0; +} + +.button, +button, +input[type='submit'], +input[type='reset'], +input[type='button'] { + background-color: #9b4dca; + border: 0.1rem solid #9b4dca; + border-radius: 0.4rem; + box-sizing: border-box; + color: #ffffff; + cursor: pointer; + display: inline-block; + font-size: 1.1rem; + font-weight: 700; + height: 3.8rem; + letter-spacing: 0.1rem; + line-height: 3.8rem; + padding: 0 3rem; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; +} +.button:hover, .button:focus, +button:hover, +button:focus, +input[type='submit']:hover, +input[type='submit']:focus, +input[type='reset']:hover, +input[type='reset']:focus, +input[type='button']:hover, +input[type='button']:focus { + background-color: #606c76; + border-color: #606c76; + color: #ffffff; + outline: 0; +} +.button.button-outline, +button.button-outline, +input[type='submit'].button-outline, +input[type='reset'].button-outline, +input[type='button'].button-outline { + color: #9b4dca; + background-color: transparent; +} +.button.button-outline:hover, .button.button-outline:focus, +button.button-outline:hover, +button.button-outline:focus, +input[type='submit'].button-outline:hover, +input[type='submit'].button-outline:focus, +input[type='reset'].button-outline:hover, +input[type='reset'].button-outline:focus, +input[type='button'].button-outline:hover, +input[type='button'].button-outline:focus { + color: #606c76; + background-color: transparent; + border-color: #606c76; +} +.button.button-clear, +button.button-clear, +input[type='submit'].button-clear, +input[type='reset'].button-clear, +input[type='button'].button-clear { + color: #9b4dca; + background-color: transparent; + border-color: transparent; +} +.button.button-clear:hover, .button.button-clear:focus, +button.button-clear:hover, +button.button-clear:focus, +input[type='submit'].button-clear:hover, +input[type='submit'].button-clear:focus, +input[type='reset'].button-clear:hover, +input[type='reset'].button-clear:focus, +input[type='button'].button-clear:hover, +input[type='button'].button-clear:focus { + color: #606c76; + background-color: transparent; + border-color: transparent; +} + +pre { + background: #f4f5f6; + border-left: 0.3rem solid #9b4dca; + font-family: Menlo, Consolas, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, monospace; +} + +code { + background: #f4f5f6; + border-radius: 0.4rem; + font-size: 86%; + padding: 0.2rem 0.5rem; + margin: 0 0.2rem; + white-space: nowrap; +} + +pre > code { + background: transparent; + border-radius: 0; + display: block; + padding: 1rem 1.5rem; + white-space: pre; +} + +input[type='email'], +input[type='number'], +input[type='search'], +input[type='text'], +input[type='tel'], +input[type='url'], +input[type='password'], +textarea, +select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border: 0.1rem solid #d1d1d1; + border-radius: 0.4rem; + box-shadow: none; + box-sizing: border-box; + height: 3.8rem; + padding: 0.6rem 1rem; + width: 100%; +} +input[type='email']:focus, +input[type='number']:focus, +input[type='search']:focus, +input[type='text']:focus, +input[type='tel']:focus, +input[type='url']:focus, +input[type='password']:focus, +textarea:focus, +select:focus { + border: 0.1rem solid #9b4dca; + outline: 0; +} + +textarea { + padding-bottom: 0.6rem; + padding-top: 0.6rem; + min-height: 6.5rem; +} + +label, +legend { + font-size: 1.6rem; + font-weight: 700; + display: block; + margin-bottom: 0.5rem; +} + +fieldset { + border-width: 0; + padding: 0; +} + +input[type='checkbox'], +input[type='radio'] { + display: inline; +} + +.label-inline { + font-weight: normal; + display: inline-block; + margin-left: 0.5rem; +} + +.container { + box-sizing: border-box; + margin: 0 auto; + max-width: 112rem; + padding: 0 2rem; + position: relative; + width: 100%; +} + +.row { + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + padding: 0; + width: 100%; +} +.row .row-wrap { + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.row .row-no-padding { + padding: 0; +} +.row .row-no-padding > .column { + padding: 0; +} +.row .row-top { + -webkit-align-items: flex-start; + -ms-flex-align: start; + align-items: flex-start; +} +.row .row-bottom { + -webkit-align-items: flex-end; + -ms-flex-align: end; + align-items: flex-end; +} +.row .row-center { + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} +.row .row-stretch { + -webkit-align-items: stretch; + -ms-flex-align: stretch; + align-items: stretch; +} +.row .row-baseline { + -webkit-align-items: baseline; + -ms-flex-align: baseline; + align-items: baseline; +} +.row .column { + display: block; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + margin-left: 0; + max-width: 100%; + width: 100%; +} +.row .column .col-top { + -webkit-align-self: flex-start; + -ms-flex-item-align: start; + align-self: flex-start; +} +.row .column .col-bottom { + -webkit-align-self: flex-end; + -ms-flex-item-align: end; + align-self: flex-end; +} +.row .column .col-center { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; +} +.row .column.column-offset-10 { + margin-left: 10%; +} +.row .column.column-offset-20 { + margin-left: 20%; +} +.row .column.column-offset-25 { + margin-left: 25%; +} +.row .column.column-offset-33, .row .column.column-offset-34 { + margin-left: 33.3333%; +} +.row .column.column-offset-50 { + margin-left: 50%; +} +.row .column.column-offset-66, .row .column.column-offset-67 { + margin-left: 66.6666%; +} +.row .column.column-offset-75 { + margin-left: 75%; +} +.row .column.column-offset-80 { + margin-left: 80%; +} +.row .column.column-offset-90 { + margin-left: 90%; +} +.row .column.column-10 { + -webkit-flex: 0 0 10%; + -ms-flex: 0 0 10%; + flex: 0 0 10%; + max-width: 10%; +} +.row .column.column-20 { + -webkit-flex: 0 0 20%; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + max-width: 20%; +} +.row .column.column-25 { + -webkit-flex: 0 0 25%; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; +} +.row .column.column-33, .row .column.column-34 { + -webkit-flex: 0 0 33.3333%; + -ms-flex: 0 0 33.3333%; + flex: 0 0 33.3333%; + max-width: 33.3333%; +} +.row .column.column-40 { + -webkit-flex: 0 0 40%; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + max-width: 40%; +} +.row .column.column-50 { + -webkit-flex: 0 0 50%; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; +} +.row .column.column-60 { + -webkit-flex: 0 0 60%; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + max-width: 60%; +} +.row .column.column-66, .row .column.column-67 { + -webkit-flex: 0 0 66.6666%; + -ms-flex: 0 0 66.6666%; + flex: 0 0 66.6666%; + max-width: 66.6666%; +} +.row .column.column-75 { + -webkit-flex: 0 0 75%; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; +} +.row .column.column-80 { + -webkit-flex: 0 0 80%; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + max-width: 80%; +} +.row .column.column-90 { + -webkit-flex: 0 0 90%; + -ms-flex: 0 0 90%; + flex: 0 0 90%; + max-width: 90%; +} + +@media (min-width: 40rem) { + .row { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + margin-left: -1rem; + width: calc(100% + 2.0rem); + } + .row .column { + margin-bottom: inherit; + padding: 0 1rem; + } +} +a { + color: #9b4dca; + text-decoration: none; +} +a:hover { + color: #606c76; +} + +dl, +ol, +ul { + margin-top: 0; + padding-left: 0; +} +dl ul, +dl ol, +ol ul, +ol ol, +ul ul, +ul ol { + font-size: 90%; + margin: 1.5rem 0 1.5rem 3rem; +} + +dl { + list-style: none; +} + +ul { + list-style: circle inside; +} + +ol { + list-style: decimal inside; +} + +dt, +dd, +li { + margin-bottom: 1rem; +} + +hr { + border-top: 0.1rem solid #f4f5f6; + border-width: 0; + margin-bottom: 3.5rem; + margin-top: 3rem; +} + +button, +.button { + margin-bottom: 1rem; +} + +input, +textarea, +select, +fieldset { + margin-bottom: 1.5rem; +} + +pre, +blockquote, +dl, +figure, +table, +p, +ul, +ol, +form { + margin-bottom: 2.5rem; +} + +table { + width: 100%; +} + +th, +td { + border-bottom: 0.1rem solid #e1e1e1; + padding: 1.2rem 1.5rem; + text-align: left; +} +th:first-child, +td:first-child { + padding-left: 0; +} +th:last-child, +td:last-child { + padding-right: 0; +} + +p { + margin-top: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 300; + margin-bottom: 2rem; + margin-top: 0; +} + +h1 { + font-size: 4rem; + letter-spacing: -0.1rem; + line-height: 1.2; +} + +h2 { + font-size: 3.6rem; + letter-spacing: -0.1rem; + line-height: 1.25; +} + +h3 { + font-size: 3rem; + letter-spacing: -0.1rem; + line-height: 1.3; +} + +h4 { + font-size: 2.4rem; + letter-spacing: -0.08rem; + line-height: 1.35; +} + +h5 { + font-size: 1.8rem; + letter-spacing: -0.05rem; + line-height: 1.5; +} + +h6 { + font-size: 1.6rem; + letter-spacing: 0; + line-height: 1.4; +} + +@media (min-width: 40rem) { + h1 { + font-size: 5rem; + } + + h2 { + font-size: 4.2rem; + } + + h3 { + font-size: 3.6rem; + } + + h4 { + font-size: 3rem; + } + + h5 { + font-size: 2.4rem; + } + + h6 { + font-size: 1.5rem; + } +} +.float-right { + float: right; +} + +.float-left { + float: left; +} + +.clearfix { + *zoom: 1; +} +.clearfix:after, .clearfix:before { + content: ""; + display: table; +} +.clearfix:after { + clear: both; +} diff --git a/dist/milligram.min.css b/dist/milligram.min.css new file mode 100644 index 0000000..f3b068e --- /dev/null +++ b/dist/milligram.min.css @@ -0,0 +1 @@ +html{box-sizing:border-box;font-size:62.5%}body{color:#606c76;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1.6em;font-weight:300;letter-spacing:0.01em;line-height:1.6}*,*:after,*:before{box-sizing:border-box}.blockquote,blockquote{border-left:0.3rem solid #d1d1d1;margin-left:0;margin-right:0;padding:1rem 1.5rem}.blockquote *:last-child,blockquote *:last-child{margin:0}.button,button,input[type='submit'],input[type='reset'],input[type='button']{background-color:#9b4dca;border:0.1rem solid #9b4dca;border-radius:0.4rem;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-size:1.1rem;font-weight:700;height:3.8rem;letter-spacing:0.1rem;line-height:3.8rem;padding:0 3rem;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap}.button:hover,.button:focus,button:hover,button:focus,input[type='submit']:hover,input[type='submit']:focus,input[type='reset']:hover,input[type='reset']:focus,input[type='button']:hover,input[type='button']:focus{background-color:#606c76;border-color:#606c76;color:#fff;outline:0}.button.button-outline,button.button-outline,input[type='submit'].button-outline,input[type='reset'].button-outline,input[type='button'].button-outline{color:#9b4dca;background-color:transparent}.button.button-outline:hover,.button.button-outline:focus,button.button-outline:hover,button.button-outline:focus,input[type='submit'].button-outline:hover,input[type='submit'].button-outline:focus,input[type='reset'].button-outline:hover,input[type='reset'].button-outline:focus,input[type='button'].button-outline:hover,input[type='button'].button-outline:focus{color:#606c76;background-color:transparent;border-color:#606c76}.button.button-clear,button.button-clear,input[type='submit'].button-clear,input[type='reset'].button-clear,input[type='button'].button-clear{color:#9b4dca;background-color:transparent;border-color:transparent}.button.button-clear:hover,.button.button-clear:focus,button.button-clear:hover,button.button-clear:focus,input[type='submit'].button-clear:hover,input[type='submit'].button-clear:focus,input[type='reset'].button-clear:hover,input[type='reset'].button-clear:focus,input[type='button'].button-clear:hover,input[type='button'].button-clear:focus{color:#606c76;background-color:transparent;border-color:transparent}pre{background:#f4f5f6;border-left:0.3rem solid #9b4dca;font-family:Menlo,Consolas,"Bitstream Vera Sans Mono","DejaVu Sans Mono",Monaco,monospace}code{background:#f4f5f6;border-radius:0.4rem;font-size:86%;padding:0.2rem 0.5rem;margin:0 0.2rem;white-space:nowrap}pre>code{background:transparent;border-radius:0;display:block;padding:1rem 1.5rem;white-space:pre}input[type='email'],input[type='number'],input[type='search'],input[type='text'],input[type='tel'],input[type='url'],input[type='password'],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0.1rem solid #d1d1d1;border-radius:0.4rem;box-shadow:none;box-sizing:border-box;height:3.8rem;padding:0.6rem 1rem;width:100%}input[type='email']:focus,input[type='number']:focus,input[type='search']:focus,input[type='text']:focus,input[type='tel']:focus,input[type='url']:focus,input[type='password']:focus,textarea:focus,select:focus{border:0.1rem solid #9b4dca;outline:0}textarea{padding-bottom:0.6rem;padding-top:0.6rem;min-height:6.5rem}label,legend{font-size:1.6rem;font-weight:700;display:block;margin-bottom:0.5rem}fieldset{border-width:0;padding:0}input[type='checkbox'],input[type='radio']{display:inline}.label-inline{font-weight:normal;display:inline-block;margin-left:0.5rem}.container{box-sizing:border-box;margin:0 auto;max-width:112rem;padding:0 2rem;position:relative;width:100%}.row{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:0;width:100%}.row .row-wrap{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.row .row-no-padding{padding:0}.row .row-no-padding>.column{padding:0}.row .row-top{-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.row .row-bottom{-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.row .row-center{-webkit-align-items:center;-ms-flex-align:center;align-items:center}.row .row-stretch{-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.row .row-baseline{-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline}.row .column{display:block;-webkit-flex:1;-ms-flex:1;flex:1;margin-left:0;max-width:100%;width:100%}.row .column .col-top{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}.row .column .col-bottom{-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end}.row .column .col-center{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.row .column.column-offset-10{margin-left:10%}.row .column.column-offset-20{margin-left:20%}.row .column.column-offset-25{margin-left:25%}.row .column.column-offset-33,.row .column.column-offset-34{margin-left:33.3333%}.row .column.column-offset-50{margin-left:50%}.row .column.column-offset-66,.row .column.column-offset-67{margin-left:66.6666%}.row .column.column-offset-75{margin-left:75%}.row .column.column-offset-80{margin-left:80%}.row .column.column-offset-90{margin-left:90%}.row .column.column-10{-webkit-flex:0 0 10%;-ms-flex:0 0 10%;flex:0 0 10%;max-width:10%}.row .column.column-20{-webkit-flex:0 0 20%;-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row .column.column-25{-webkit-flex:0 0 25%;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row .column.column-33,.row .column.column-34{-webkit-flex:0 0 33.3333%;-ms-flex:0 0 33.3333%;flex:0 0 33.3333%;max-width:33.3333%}.row .column.column-40{-webkit-flex:0 0 40%;-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}.row .column.column-50{-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row .column.column-60{-webkit-flex:0 0 60%;-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}.row .column.column-66,.row .column.column-67{-webkit-flex:0 0 66.6666%;-ms-flex:0 0 66.6666%;flex:0 0 66.6666%;max-width:66.6666%}.row .column.column-75{-webkit-flex:0 0 75%;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.row .column.column-80{-webkit-flex:0 0 80%;-ms-flex:0 0 80%;flex:0 0 80%;max-width:80%}.row .column.column-90{-webkit-flex:0 0 90%;-ms-flex:0 0 90%;flex:0 0 90%;max-width:90%}@media (min-width: 40rem){.row{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin-left:-1rem;width:calc(100% + 2.0rem)}.row .column{margin-bottom:inherit;padding:0 1rem}}a{color:#9b4dca;text-decoration:none}a:hover{color:#606c76}dl,ol,ul{margin-top:0;padding-left:0}dl ul,dl ol,ol ul,ol ol,ul ul,ul ol{font-size:90%;margin:1.5rem 0 1.5rem 3rem}dl{list-style:none}ul{list-style:circle inside}ol{list-style:decimal inside}dt,dd,li{margin-bottom:1rem}hr{border-top:0.1rem solid #f4f5f6;border-width:0;margin-bottom:3.5rem;margin-top:3rem}button,.button{margin-bottom:1rem}input,textarea,select,fieldset{margin-bottom:1.5rem}pre,blockquote,dl,figure,table,p,ul,ol,form{margin-bottom:2.5rem}table{width:100%}th,td{border-bottom:0.1rem solid #e1e1e1;padding:1.2rem 1.5rem;text-align:left}th:first-child,td:first-child{padding-left:0}th:last-child,td:last-child{padding-right:0}p{margin-top:0}h1,h2,h3,h4,h5,h6{font-weight:300;margin-bottom:2rem;margin-top:0}h1{font-size:4rem;letter-spacing:-0.1rem;line-height:1.2}h2{font-size:3.6rem;letter-spacing:-0.1rem;line-height:1.25}h3{font-size:3rem;letter-spacing:-0.1rem;line-height:1.3}h4{font-size:2.4rem;letter-spacing:-0.08rem;line-height:1.35}h5{font-size:1.8rem;letter-spacing:-0.05rem;line-height:1.5}h6{font-size:1.6rem;letter-spacing:0;line-height:1.4}@media (min-width: 40rem){h1{font-size:5rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3rem}h5{font-size:2.4rem}h6{font-size:1.5rem}}.float-right{float:right}.float-left{float:left}.clearfix{*zoom:1}.clearfix:after,.clearfix:before{content:"";display:table}.clearfix:after{clear:both}