@@ 1,21 1,11 @@
-/*!
- * Milligram v1.3.0
- * https://milligram.github.io
- *
- * Copyright (c) 2017 CJ Patoilo
- * Licensed under the MIT license
- */
-
*,
*:after,
*:before {
- box-sizing: inherit;
-}
+ box-sizing: inherit; }
html {
box-sizing: border-box;
- font-size: 62.5%;
-}
+ font-size: 62.5%; }
body {
color: #606c76;
@@ 23,19 13,15 @@ body {
font-size: 1.6em;
font-weight: 300;
letter-spacing: .01em;
- line-height: 1.6;
-}
+ line-height: 1.6; }
blockquote {
border-left: 0.3rem solid #d1d1d1;
margin-left: 0;
margin-right: 0;
- padding: 1rem 1.5rem;
-}
-
-blockquote *:last-child {
- margin-bottom: 0;
-}
+ padding: 1rem 1.5rem; }
+ blockquote *:last-child {
+ margin-bottom: 0; }
.button,
button,
@@ 57,117 43,98 @@ input[type='submit'] {
text-align: center;
text-decoration: none;
text-transform: uppercase;
- white-space: nowrap;
-}
-
-.button:focus, .button:hover,
-button:focus,
-button:hover,
-input[type='button']:focus,
-input[type='button']:hover,
-input[type='reset']:focus,
-input[type='reset']:hover,
-input[type='submit']:focus,
-input[type='submit']:hover {
- background-color: #606c76;
- border-color: #606c76;
- color: #fff;
- outline: 0;
-}
-
-.button[disabled],
-button[disabled],
-input[type='button'][disabled],
-input[type='reset'][disabled],
-input[type='submit'][disabled] {
- cursor: default;
- opacity: .5;
-}
-
-.button[disabled]:focus, .button[disabled]:hover,
-button[disabled]:focus,
-button[disabled]:hover,
-input[type='button'][disabled]:focus,
-input[type='button'][disabled]:hover,
-input[type='reset'][disabled]:focus,
-input[type='reset'][disabled]:hover,
-input[type='submit'][disabled]:focus,
-input[type='submit'][disabled]:hover {
- background-color: #9b4dca;
- border-color: #9b4dca;
-}
-
-.button.button-outline,
-button.button-outline,
-input[type='button'].button-outline,
-input[type='reset'].button-outline,
-input[type='submit'].button-outline {
- background-color: transparent;
- color: #9b4dca;
-}
-
-.button.button-outline:focus, .button.button-outline:hover,
-button.button-outline:focus,
-button.button-outline:hover,
-input[type='button'].button-outline:focus,
-input[type='button'].button-outline:hover,
-input[type='reset'].button-outline:focus,
-input[type='reset'].button-outline:hover,
-input[type='submit'].button-outline:focus,
-input[type='submit'].button-outline:hover {
- background-color: transparent;
- border-color: #606c76;
- color: #606c76;
-}
-
-.button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
-button.button-outline[disabled]:focus,
-button.button-outline[disabled]:hover,
-input[type='button'].button-outline[disabled]:focus,
-input[type='button'].button-outline[disabled]:hover,
-input[type='reset'].button-outline[disabled]:focus,
-input[type='reset'].button-outline[disabled]:hover,
-input[type='submit'].button-outline[disabled]:focus,
-input[type='submit'].button-outline[disabled]:hover {
- border-color: inherit;
- color: #9b4dca;
-}
-
-.button.button-clear,
-button.button-clear,
-input[type='button'].button-clear,
-input[type='reset'].button-clear,
-input[type='submit'].button-clear {
- background-color: transparent;
- border-color: transparent;
- color: #9b4dca;
-}
-
-.button.button-clear:focus, .button.button-clear:hover,
-button.button-clear:focus,
-button.button-clear:hover,
-input[type='button'].button-clear:focus,
-input[type='button'].button-clear:hover,
-input[type='reset'].button-clear:focus,
-input[type='reset'].button-clear:hover,
-input[type='submit'].button-clear:focus,
-input[type='submit'].button-clear:hover {
- background-color: transparent;
- border-color: transparent;
- color: #606c76;
-}
-
-.button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
-button.button-clear[disabled]:focus,
-button.button-clear[disabled]:hover,
-input[type='button'].button-clear[disabled]:focus,
-input[type='button'].button-clear[disabled]:hover,
-input[type='reset'].button-clear[disabled]:focus,
-input[type='reset'].button-clear[disabled]:hover,
-input[type='submit'].button-clear[disabled]:focus,
-input[type='submit'].button-clear[disabled]:hover {
- color: #9b4dca;
-}
+ white-space: nowrap; }
+ .button:focus, .button:hover,
+ button:focus,
+ button:hover,
+ input[type='button']:focus,
+ input[type='button']:hover,
+ input[type='reset']:focus,
+ input[type='reset']:hover,
+ input[type='submit']:focus,
+ input[type='submit']:hover {
+ background-color: #606c76;
+ border-color: #606c76;
+ color: #fff;
+ outline: 0; }
+ .button[disabled],
+ button[disabled],
+ input[type='button'][disabled],
+ input[type='reset'][disabled],
+ input[type='submit'][disabled] {
+ cursor: default;
+ opacity: .5; }
+ .button[disabled]:focus, .button[disabled]:hover,
+ button[disabled]:focus,
+ button[disabled]:hover,
+ input[type='button'][disabled]:focus,
+ input[type='button'][disabled]:hover,
+ input[type='reset'][disabled]:focus,
+ input[type='reset'][disabled]:hover,
+ input[type='submit'][disabled]:focus,
+ input[type='submit'][disabled]:hover {
+ background-color: #9b4dca;
+ border-color: #9b4dca; }
+ .button.button-outline,
+ button.button-outline,
+ input[type='button'].button-outline,
+ input[type='reset'].button-outline,
+ input[type='submit'].button-outline {
+ background-color: transparent;
+ color: #9b4dca; }
+ .button.button-outline:focus, .button.button-outline:hover,
+ button.button-outline:focus,
+ button.button-outline:hover,
+ input[type='button'].button-outline:focus,
+ input[type='button'].button-outline:hover,
+ input[type='reset'].button-outline:focus,
+ input[type='reset'].button-outline:hover,
+ input[type='submit'].button-outline:focus,
+ input[type='submit'].button-outline:hover {
+ background-color: transparent;
+ border-color: #606c76;
+ color: #606c76; }
+ .button.button-outline[disabled]:focus, .button.button-outline[disabled]:hover,
+ button.button-outline[disabled]:focus,
+ button.button-outline[disabled]:hover,
+ input[type='button'].button-outline[disabled]:focus,
+ input[type='button'].button-outline[disabled]:hover,
+ input[type='reset'].button-outline[disabled]:focus,
+ input[type='reset'].button-outline[disabled]:hover,
+ input[type='submit'].button-outline[disabled]:focus,
+ input[type='submit'].button-outline[disabled]:hover {
+ border-color: inherit;
+ color: #9b4dca; }
+ .button.button-clear,
+ button.button-clear,
+ input[type='button'].button-clear,
+ input[type='reset'].button-clear,
+ input[type='submit'].button-clear {
+ background-color: transparent;
+ border-color: transparent;
+ color: #9b4dca; }
+ .button.button-clear:focus, .button.button-clear:hover,
+ button.button-clear:focus,
+ button.button-clear:hover,
+ input[type='button'].button-clear:focus,
+ input[type='button'].button-clear:hover,
+ input[type='reset'].button-clear:focus,
+ input[type='reset'].button-clear:hover,
+ input[type='submit'].button-clear:focus,
+ input[type='submit'].button-clear:hover {
+ background-color: transparent;
+ border-color: transparent;
+ color: #606c76; }
+ .button.button-clear[disabled]:focus, .button.button-clear[disabled]:hover,
+ button.button-clear[disabled]:focus,
+ button.button-clear[disabled]:hover,
+ input[type='button'].button-clear[disabled]:focus,
+ input[type='button'].button-clear[disabled]:hover,
+ input[type='reset'].button-clear[disabled]:focus,
+ input[type='reset'].button-clear[disabled]:hover,
+ input[type='submit'].button-clear[disabled]:focus,
+ input[type='submit'].button-clear[disabled]:hover {
+ color: #9b4dca; }
code {
background: #f4f5f6;
@@ 175,27 142,22 @@ code {
font-size: 86%;
margin: 0 .2rem;
padding: .2rem .5rem;
- white-space: nowrap;
-}
+ white-space: nowrap; }
pre {
background: #f4f5f6;
border-left: 0.3rem solid #9b4dca;
- overflow-y: hidden;
-}
-
-pre > code {
- border-radius: 0;
- display: block;
- padding: 1rem 1.5rem;
- white-space: pre;
-}
+ overflow-y: hidden; }
+ pre > code {
+ border-radius: 0;
+ display: block;
+ padding: 1rem 1.5rem;
+ white-space: pre; }
hr {
border: 0;
border-top: 0.1rem solid #f4f5f6;
- margin: 3.0rem 0;
-}
+ margin: 3.0rem 0; }
input[type='email'],
input[type='number'],
@@ 204,11 166,16 @@ input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
+input[type='color'],
+input[type='date'],
+input[type='month'],
+input[type='week'],
+input[type='datetime'],
+input[type='datetime-local'],
+input:not([type]),
textarea,
select {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
+ appearance: none;
background-color: transparent;
border: 0.1rem solid #d1d1d1;
border-radius: .4rem;
@@ 216,282 183,206 @@ select {
box-sizing: inherit;
height: 3.8rem;
padding: .6rem 1.0rem;
- width: 100%;
-}
-
-input[type='email']:focus,
-input[type='number']:focus,
-input[type='password']:focus,
-input[type='search']:focus,
-input[type='tel']:focus,
-input[type='text']:focus,
-input[type='url']:focus,
-textarea:focus,
-select:focus {
- border-color: #9b4dca;
- outline: 0;
-}
+ width: 100%; }
+ input[type='email']:focus,
+ input[type='number']:focus,
+ input[type='password']:focus,
+ input[type='search']:focus,
+ input[type='tel']:focus,
+ input[type='text']:focus,
+ input[type='url']:focus,
+ input[type='color']:focus,
+ input[type='date']:focus,
+ input[type='month']:focus,
+ input[type='week']:focus,
+ input[type='datetime']:focus,
+ input[type='datetime-local']:focus,
+ input:not([type]):focus,
+ textarea:focus,
+ select:focus {
+ border-color: #9b4dca;
+ outline: 0; }
select {
- background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#d1d1d1" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>') center right no-repeat;
- padding-right: 3.0rem;
-}
-
-select:focus {
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 29 14" width="29"><path fill="#9b4dca" d="M9.37727 3.625l5.08154 6.93523L19.54036 3.625"/></svg>');
-}
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23d1d1d1" d="M0,0l6,8l6-8"/></svg>') center right no-repeat;
+ padding-right: 3.0rem; }
+ select:focus {
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%239b4dca" d="M0,0l6,8l6-8"/></svg>'); }
textarea {
- min-height: 6.5rem;
-}
+ min-height: 6.5rem; }
label,
legend {
display: block;
font-size: 1.6rem;
font-weight: 700;
- margin-bottom: .5rem;
-}
+ margin-bottom: .5rem; }
fieldset {
border-width: 0;
- padding: 0;
-}
+ padding: 0; }
input[type='checkbox'],
input[type='radio'] {
- display: inline;
-}
+ display: inline; }
.label-inline {
display: inline-block;
font-weight: normal;
- margin-left: .5rem;
-}
+ margin-left: .5rem; }
+
+select[multiple] {
+ height: auto;
+ background: none; }
.container {
margin: 0 auto;
max-width: 112.0rem;
padding: 0 2.0rem;
position: relative;
- width: 100%;
-}
+ width: 100%; }
.row {
display: flex;
flex-direction: column;
padding: 0;
- width: 100%;
-}
-
-.row.row-no-padding {
- padding: 0;
-}
-
-.row.row-no-padding > .column {
- padding: 0;
-}
-
-.row.row-wrap {
- flex-wrap: wrap;
-}
-
-.row.row-top {
- align-items: flex-start;
-}
-
-.row.row-bottom {
- align-items: flex-end;
-}
-
-.row.row-center {
- align-items: center;
-}
-
-.row.row-stretch {
- align-items: stretch;
-}
-
-.row.row-baseline {
- align-items: baseline;
-}
-
-.row .column {
- display: block;
- flex: 1 1 auto;
- margin-left: 0;
- max-width: 100%;
- width: 100%;
-}
-
-.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 {
- flex: 0 0 10%;
- max-width: 10%;
-}
-
-.row .column.column-20 {
- flex: 0 0 20%;
- max-width: 20%;
-}
-
-.row .column.column-25 {
- flex: 0 0 25%;
- max-width: 25%;
-}
-
-.row .column.column-33, .row .column.column-34 {
- flex: 0 0 33.3333%;
- max-width: 33.3333%;
-}
-
-.row .column.column-40 {
- flex: 0 0 40%;
- max-width: 40%;
-}
-
-.row .column.column-50 {
- flex: 0 0 50%;
- max-width: 50%;
-}
-
-.row .column.column-60 {
- flex: 0 0 60%;
- max-width: 60%;
-}
-
-.row .column.column-66, .row .column.column-67 {
- flex: 0 0 66.6666%;
- max-width: 66.6666%;
-}
-
-.row .column.column-75 {
- flex: 0 0 75%;
- max-width: 75%;
-}
-
-.row .column.column-80 {
- flex: 0 0 80%;
- max-width: 80%;
-}
-
-.row .column.column-90 {
- flex: 0 0 90%;
- max-width: 90%;
-}
-
-.row .column .column-top {
- align-self: flex-start;
-}
-
-.row .column .column-bottom {
- align-self: flex-end;
-}
-
-.row .column .column-center {
- -ms-grid-row-align: center;
- align-self: center;
-}
+ width: 100%; }
+ .row.row-no-padding {
+ padding: 0; }
+ .row.row-no-padding > .column {
+ padding: 0; }
+ .row.row-wrap {
+ flex-wrap: wrap; }
+ .row.row-top {
+ align-items: flex-start; }
+ .row.row-bottom {
+ align-items: flex-end; }
+ .row.row-center {
+ align-items: center; }
+ .row.row-stretch {
+ align-items: stretch; }
+ .row.row-baseline {
+ align-items: baseline; }
+ .row .column {
+ display: block;
+ flex: 1 1 auto;
+ margin-left: 0;
+ max-width: 100%;
+ width: 100%; }
+ .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-40 {
+ margin-left: 40%; }
+ .row .column.column-offset-50 {
+ margin-left: 50%; }
+ .row .column.column-offset-60 {
+ margin-left: 60%; }
+ .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 {
+ flex: 0 0 10%;
+ max-width: 10%; }
+ .row .column.column-20 {
+ flex: 0 0 20%;
+ max-width: 20%; }
+ .row .column.column-25 {
+ flex: 0 0 25%;
+ max-width: 25%; }
+ .row .column.column-33, .row .column.column-34 {
+ flex: 0 0 33.3333%;
+ max-width: 33.3333%; }
+ .row .column.column-40 {
+ flex: 0 0 40%;
+ max-width: 40%; }
+ .row .column.column-50 {
+ flex: 0 0 50%;
+ max-width: 50%; }
+ .row .column.column-60 {
+ flex: 0 0 60%;
+ max-width: 60%; }
+ .row .column.column-66, .row .column.column-67 {
+ flex: 0 0 66.6666%;
+ max-width: 66.6666%; }
+ .row .column.column-75 {
+ flex: 0 0 75%;
+ max-width: 75%; }
+ .row .column.column-80 {
+ flex: 0 0 80%;
+ max-width: 80%; }
+ .row .column.column-90 {
+ flex: 0 0 90%;
+ max-width: 90%; }
+ .row .column .column-top {
+ align-self: flex-start; }
+ .row .column .column-bottom {
+ align-self: flex-end; }
+ .row .column .column-center {
+ align-self: center; }
@media (min-width: 40rem) {
.row {
flex-direction: row;
margin-left: -1.0rem;
- width: calc(100% + 2.0rem);
- }
- .row .column {
- margin-bottom: inherit;
- padding: 0 1.0rem;
- }
-}
+ width: calc(100% + 2.0rem); }
+ .row .column {
+ margin-bottom: inherit;
+ padding: 0 1.0rem; } }
a {
color: #9b4dca;
- text-decoration: none;
-}
-
-a:focus, a:hover {
- color: #606c76;
-}
+ text-decoration: none; }
+ a:focus, a:hover {
+ color: #606c76; }
dl,
ol,
ul {
list-style: none;
margin-top: 0;
- padding-left: 0;
-}
-
-dl dl,
-dl ol,
-dl ul,
-ol dl,
-ol ol,
-ol ul,
-ul dl,
-ul ol,
-ul ul {
- font-size: 90%;
- margin: 1.5rem 0 1.5rem 3.0rem;
-}
+ padding-left: 0; }
+ dl dl,
+ dl ol,
+ dl ul,
+ ol dl,
+ ol ol,
+ ol ul,
+ ul dl,
+ ul ol,
+ ul ul {
+ font-size: 90%;
+ margin: 1.5rem 0 1.5rem 3.0rem; }
ol {
- list-style: decimal inside;
-}
+ list-style: decimal inside; }
ul {
- list-style: circle inside;
-}
+ list-style: circle inside; }
.button,
button,
dd,
dt,
li {
- margin-bottom: 1.0rem;
-}
+ margin-bottom: 1.0rem; }
fieldset,
input,
select,
textarea {
- margin-bottom: 1.5rem;
-}
+ margin-bottom: 1.5rem; }
blockquote,
dl,
@@ 502,39 393,64 @@ p,
pre,
table,
ul {
- margin-bottom: 2.5rem;
-}
+ margin-bottom: 2.5rem; }
table {
border-spacing: 0;
- width: 100%;
-}
+ width: 100%; }
td,
th {
border-bottom: 0.1rem solid #e1e1e1;
padding: 1.2rem 1.5rem;
- text-align: left;
-}
-
-td:first-child,
-th:first-child {
- padding-left: 0;
-}
-
-td:last-child,
-th:last-child {
- padding-right: 0;
-}
+ text-align: left; }
+ td:first-child,
+ th:first-child {
+ padding-left: 0; }
+ td:last-child,
+ th:last-child {
+ padding-right: 0; }
+
+@media screen and (max-width: 40rem) {
+ table {
+ border-spacing: 0;
+ display: flex;
+ width: 100%; }
+ table thead {
+ border-right: solid 0.1rem #e1e1e1; }
+ table thead td,
+ table thead th {
+ padding-left: 0; }
+ table thead td:first-child,
+ table thead th:first-child {
+ padding-left: 0; }
+ table thead td:last-child,
+ table thead th:last-child {
+ padding-right: 1.2rem; }
+ table tbody {
+ display: flex;
+ overflow-x: auto;
+ white-space: nowrap; }
+ table tbody tr {
+ border-right: solid 0.1rem #e1e1e1; }
+ table tbody tr:last-child {
+ border-right: none; }
+ table td,
+ table th {
+ display: block; }
+ table td:first-child,
+ table th:first-child {
+ padding-left: 1.2rem; }
+ table td:last-child,
+ table th:last-child {
+ padding-right: 1.2rem; } }
b,
strong {
- font-weight: bold;
-}
+ font-weight: bold; }
p {
- margin-top: 0;
-}
+ margin-top: 0; }
h1,
h2,
@@ 545,58 461,45 @@ h6 {
font-weight: 300;
letter-spacing: -.1rem;
margin-bottom: 2.0rem;
- margin-top: 0;
-}
+ margin-top: 0; }
h1 {
font-size: 4.6rem;
- line-height: 1.2;
-}
+ line-height: 1.2; }
h2 {
font-size: 3.6rem;
- line-height: 1.25;
-}
+ line-height: 1.25; }
h3 {
font-size: 2.8rem;
- line-height: 1.3;
-}
+ line-height: 1.3; }
h4 {
font-size: 2.2rem;
letter-spacing: -.08rem;
- line-height: 1.35;
-}
+ line-height: 1.35; }
h5 {
font-size: 1.8rem;
letter-spacing: -.05rem;
- line-height: 1.5;
-}
+ line-height: 1.5; }
h6 {
font-size: 1.6rem;
letter-spacing: 0;
- line-height: 1.4;
-}
+ line-height: 1.4; }
img {
- max-width: 100%;
-}
+ max-width: 100%; }
.clearfix:after {
clear: both;
content: ' ';
- display: table;
-}
+ display: table; }
.float-left {
- float: left;
-}
+ float: left; }
.float-right {
- float: right;
-}
-
-/*# sourceMappingURL=milligram.css.map */>
\ No newline at end of file
+ float: right; }