global.scss (10385B)
1 /* Variables */ 2 3 // Vertical Rhythm Multiplier 4 $baseline-unit: 10px; 5 6 :root { 7 8 /* Font Family */ 9 --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); 10 --global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); 11 12 /* Font Size */ 13 --global--font-size-base: 1.25rem; // 20px / 16px 14 --global--font-size-xs: 1rem; // 16px / 16px 15 --global--font-size-sm: 1.125rem; // 18px / 16px 16 --global--font-size-md: 1.25rem; // 20px / 16px 17 --global--font-size-lg: 1.5rem; // 24px / 16px 18 --global--font-size-xl: 2.25rem; // 36px / 16px 19 --global--font-size-xxl: 4rem; // 64px / 16px 20 --global--font-size-xxxl: 5rem; // 80px / 16px 21 --global--font-size-page-title: var(--global--font-size-xxl); 22 --global--letter-spacing: normal; 23 24 /* Line Height */ 25 --global--line-height-body: 1.7; 26 --global--line-height-heading: 1.3; 27 --global--line-height-page-title: 1.1; 28 29 /* Headings */ 30 --heading--font-family: var(--global--font-primary); 31 32 --heading--font-size-h6: var(--global--font-size-xs); 33 --heading--font-size-h5: var(--global--font-size-sm); 34 --heading--font-size-h4: var(--global--font-size-lg); 35 --heading--font-size-h3: calc(1.25 * var(--global--font-size-lg)); 36 --heading--font-size-h2: var(--global--font-size-xl); 37 --heading--font-size-h1: var(--global--font-size-page-title); 38 39 --heading--letter-spacing-h6: 0.05em; 40 --heading--letter-spacing-h5: 0.05em; 41 --heading--letter-spacing-h4: var(--global--letter-spacing); 42 --heading--letter-spacing-h3: var(--global--letter-spacing); 43 --heading--letter-spacing-h2: var(--global--letter-spacing); 44 --heading--letter-spacing-h1: var(--global--letter-spacing); 45 46 --heading--line-height-h6: var(--global--line-height-heading); 47 --heading--line-height-h5: var(--global--line-height-heading); 48 --heading--line-height-h4: var(--global--line-height-heading); 49 --heading--line-height-h3: var(--global--line-height-heading); 50 --heading--line-height-h2: var(--global--line-height-heading); 51 --heading--line-height-h1: var(--global--line-height-page-title); 52 53 --heading--font-weight: normal; 54 --heading--font-weight-page-title: 300; 55 --heading--font-weight-strong: 600; 56 57 /* Block: Latest posts */ 58 --latest-posts--title-font-family: var(--heading--font-family); 59 --latest-posts--title-font-size: var(--heading--font-size-h3); 60 --latest-posts--description-font-family: var(--global--font-secondary); 61 --latest-posts--description-font-size: var(--global--font-size-sm); 62 63 --list--font-family: var(--global--font-secondary); 64 --definition-term--font-family: var(--global--font-primary); 65 66 /* Colors */ 67 --global--color-black: #000; 68 --global--color-dark-gray: #28303d; 69 --global--color-gray: #39414d; 70 --global--color-light-gray: #f0f0f0; 71 --global--color-green: #d1e4dd; 72 --global--color-blue: #d1dfe4; 73 --global--color-purple: #d1d1e4; 74 --global--color-red: #e4d1d1; 75 --global--color-orange: #e4dad1; 76 --global--color-yellow: #eeeadd; 77 --global--color-white: #fff; 78 --global--color-white-50: rgba(255, 255, 255, 0.5); // Used for disabled buttons 79 --global--color-white-90: rgba(255, 255, 255, 0.9); // Used in form fields. 80 81 --global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */ 82 --global--color-secondary: var(--global--color-gray); /* Headings */ 83 --global--color-primary-hover: var(--global--color-primary); 84 --global--color-background: var(--global--color-green); /* Mint, default body background */ 85 --global--color-border: var(--global--color-primary); /* Used for borders (separators) */ 86 87 /* Spacing */ 88 --global--spacing-unit: #{2 * $baseline-unit}; // 20px 89 --global--spacing-measure: unset; // Use ch units here. ie: 60ch = 60 character max-width 90 --global--spacing-horizontal: #{2.5 * $baseline-unit}; // 25px 91 --global--spacing-vertical: #{3 * $baseline-unit}; // 30px. 92 93 /* Elevation */ 94 --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2); 95 96 /* Forms */ 97 --form--font-family: var(--global--font-secondary); 98 --form--font-size: var(--global--font-size-sm); 99 --form--line-height: var(--global--line-height-body); 100 --form--color-text: var(--global--color-dark-gray); // Text color in input fields is always dark over light background. 101 --form--color-ranged: var(--global--color-secondary); 102 --form--label-weight: 500; 103 --form--border-color: var(--global--color-secondary); 104 --form--border-width: 3px; 105 --form--border-radius: 0; 106 --form--spacing-unit: calc(0.5 * var(--global--spacing-unit)); 107 108 /* Cover block */ 109 --cover--height: calc(15 * var(--global--spacing-vertical)); 110 --cover--color-foreground: var(--global--color-white); 111 --cover--color-background: var(--global--color-black); 112 113 /* Buttons */ 114 // Colors 115 --button--color-text: var(--global--color-background); 116 --button--color-text-hover: var(--global--color-secondary); 117 --button--color-text-active: var(--global--color-secondary); 118 --button--color-background: var(--global--color-secondary); 119 --button--color-background-active: var(--global--color-background); 120 // Fonts 121 --button--font-family: var(--global--font-primary); 122 --button--font-size: var(--global--font-size-base); 123 --button--font-weight: 500; 124 --button--line-height: 1.5; 125 // Borders 126 --button--border-width: 3px; 127 --button--border-radius: 0; 128 // Spacing 129 --button--padding-vertical: 15px; 130 --button--padding-horizontal: calc(2 * var(--button--padding-vertical)); 131 132 /* entry */ 133 --entry-header--color: var(--global--color-primary); 134 --entry-header--color-link: currentColor; 135 --entry-header--color-hover: var(--global--color-primary-hover); 136 --entry-header--color-focus: var(--global--color-secondary); 137 --entry-header--font-size: var(--heading--font-size-h2); 138 --entry-content--font-family: var(--global--font-secondary); 139 --entry-author-bio--font-family: var(--heading--font-family); 140 --entry-author-bio--font-size: var(--heading--font-size-h4); 141 142 /* Header */ 143 --branding--color-text: var(--global--color-primary); 144 --branding--color-link: var(--global--color-primary); 145 --branding--color-link-hover: var(--global--color-secondary); 146 --branding--title--font-family: var(--global--font-primary); 147 --branding--title--font-size: var(--global--font-size-lg); 148 --branding--title--font-size-mobile: var(--heading--font-size-h4); 149 --branding--title--font-weight: normal; 150 --branding--title--text-transform: uppercase; 151 --branding--description--font-family: var(--global--font-secondary); 152 --branding--description--font-size: var(--global--font-size-sm); 153 --branding--description--font-family: var(--global--font-secondary); 154 155 --branding--logo--max-width: 300px; 156 --branding--logo--max-height: 100px; 157 --branding--logo--max-width-mobile: 96px; 158 --branding--logo--max-height-mobile: 96px; 159 160 /* Main navigation */ 161 --primary-nav--font-family: var(--global--font-secondary); 162 --primary-nav--font-family-mobile: var(--global--font-primary); 163 --primary-nav--font-size: var(--global--font-size-md); 164 --primary-nav--font-size-sub-menu: var(--global--font-size-xs); 165 --primary-nav--font-size-mobile: var(--global--font-size-sm); 166 --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm); 167 --primary-nav--font-size-button: var(--global--font-size-xs); 168 --primary-nav--font-style: normal; 169 --primary-nav--font-style-sub-menu-mobile: normal; 170 --primary-nav--font-weight: normal; 171 --primary-nav--font-weight-button: 500; 172 --primary-nav--color-link: var(--global--color-primary); 173 --primary-nav--color-link-hover: var(--global--color-primary-hover); 174 --primary-nav--color-text: var(--global--color-primary); 175 --primary-nav--padding: calc(0.66 * var(--global--spacing-unit)); 176 --primary-nav--border-color: var(--global--color-primary); 177 178 /* Pagination */ 179 --pagination--color-text: var(--global--color-primary); 180 --pagination--color-link-hover: var(--global--color-primary-hover); 181 --pagination--font-family: var(--global--font-secondary); 182 --pagination--font-size: var(--global--font-size-lg); 183 --pagination--font-weight: normal; 184 --pagination--font-weight-strong: 600; 185 186 /* Footer */ 187 --footer--color-text: var(--global--color-primary); 188 --footer--color-link: var(--global--color-primary); 189 --footer--color-link-hover: var(--global--color-primary-hover); 190 --footer--font-family: var(--global--font-primary); 191 --footer--font-size: var(--global--font-size-sm); 192 193 /* Block: Pull quote */ 194 --pullquote--font-family: var(--global--font-primary); 195 --pullquote--font-size: var(--heading--font-size-h3); 196 --pullquote--font-style: normal; 197 --pullquote--letter-spacing: var(--heading--letter-spacing-h4); 198 --pullquote--line-height: var(--global--line-height-heading); 199 --pullquote--border-width: 3px; 200 --pullquote--border-color: var(--global--color-primary); 201 --pullquote--color-foreground: var(--global--color-primary); 202 --pullquote--color-background: var(--global--color-background); 203 204 --quote--font-family: var(--global--font-secondary); 205 --quote--font-size: var(--global--font-size-md); 206 --quote--font-size-large: var(--global--font-size-xl); 207 --quote--font-style: normal; 208 --quote--font-weight: 700; 209 --quote--font-weight-strong: bolder; 210 --quote--font-style-large: normal; 211 --quote--font-style-cite: normal; 212 --quote--line-height: var(--global--line-height-body); 213 --quote--line-height-large: 1.35; 214 215 --separator--border-color: var(--global--color-border); 216 --separator--height: 1px; 217 218 /* Block: Table */ 219 --table--stripes-border-color: var(--global--color-light-gray); 220 --table--stripes-background-color: var(--global--color-light-gray); 221 --table--has-background-text-color: var(--global--color-dark-gray); 222 223 /* Widgets */ 224 --widget--line-height-list: 1.9; 225 --widget--line-height-title: 1.4; 226 --widget--font-weight-title: 700; 227 --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit)); 228 229 /* Admin-bar height */ 230 --global--admin-bar--height: 0px; 231 } 232 233 .admin-bar { 234 --global--admin-bar--height: 32px; 235 236 @media only screen and (max-width: 782px) { 237 --global--admin-bar--height: 46px; 238 } 239 } 240 241 @media only screen and (min-width: 652px) { // Not using the mixin because it's compiled after this file 242 :root { 243 --global--font-size-xl: 2.5rem; // 40px / 16px 244 --global--font-size-xxl: 6rem; // 96px / 16px 245 --global--font-size-xxxl: 9rem; // 144px / 16px 246 --heading--font-size-h3: 2rem; // 32px / 16px 247 --heading--font-size-h2: 3rem; // 48px / 16px 248 } 249 }