1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
|
:root {
/* Layout & Whitespace */
--content-width: 949px;
--content-gutter: 60px;
--borderRadius: 4px;
--navTabBorderWidth: 4px;
/* Font Families */
--defaultFontFamily: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji";
--sansFontFamily: "Lato", sans-serif;
--monoFontFamily: "Inconsolata", Menlo, Courier, monospace;
/* Typography */
--baseFontSize: 18px;
--baseLineHeight: 1.5em;
/* Colours */
--gray25: hsl(207, 43%, 98%);
--gray50: hsl(207, 43%, 96%);
--gray100: hsl(212, 33%, 91%);
--gray200: hsl(210, 29%, 88%);
--gray300: hsl(210, 26%, 84%);
--gray400: hsl(210, 21%, 64%);
--gray450: hsl(210, 21%, 49%);
--gray500: hsl(210, 21%, 34%);
--gray600: hsl(210, 27%, 26%);
--gray700: hsl(212, 35%, 17%);
--gray750: hsl(214, 46%, 14%);
--gray800: hsl(216, 52%, 11%);
--gray800-opacity-0: hsla(216, 52%, 11%, 0%);
--gray850: hsl(216, 63%, 8%);
--gray900: hsl(218, 73%, 4%);
--gray900-opacity-50: hsla(218, 73%, 4%, 50%);
--gray900-opacity-0: hsla(218, 73%, 4%, 0%);
--coldGrayFaint: hsl(240, 5%, 97%);
--coldGrayLight: hsl(240, 5%, 88%);
--coldGray-lightened-10: hsl(240, 5%, 56%);
--coldGray: hsl(240, 5%, 46%);
--coldGray-opacity-10: hsla(240, 5%, 46%, 10%);
--coldGrayDark: hsl(240, 5%, 28%);
--coldGrayDim: hsl(240, 5%, 18%);
--yellowLight: hsl(60, 100%, 81%);
--yellowDark: hsl(60, 100%, 43%, 62%);
--yellow: hsl(60, 100%, 43%);
--green-lightened-10: hsl(90, 100%, 45%);
--green: hsl(90, 100%, 35%);
--white: hsl(0, 0%, 100%);
--white-opacity-50: hsla(0, 0%, 100%, 50%);
--white-opacity-10: hsla(0, 0%, 100%, 10%);
--white-opacity-0: hsla(0, 0%, 100%, 0%);
--black: hsl(0, 0%, 0%);
--black-opacity-10: hsla(0, 0%, 0%, 10%);
--black-opacity-50: hsla(0, 0%, 0%, 50%);
}
@media screen and (max-width: 768px) {
:root {
--content-width: 100%;
--content-gutter: 20px;
}
}
|