[Summary view] [Print] [Text view]

   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  
 154      --branding--logo--max-width: 300px;
 155      --branding--logo--max-height: 100px;
 156      --branding--logo--max-width-mobile: 96px;
 157      --branding--logo--max-height-mobile: 96px;
 158  
 159      /* Main navigation */
 160      --primary-nav--font-family: var(--global--font-secondary);
 161      --primary-nav--font-family-mobile: var(--global--font-primary);
 162      --primary-nav--font-size: var(--global--font-size-md);
 163      --primary-nav--font-size-sub-menu: var(--global--font-size-xs);
 164      --primary-nav--font-size-mobile: var(--global--font-size-sm);
 165      --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
 166      --primary-nav--font-size-button: var(--global--font-size-xs);
 167      --primary-nav--font-style: normal;
 168      --primary-nav--font-style-sub-menu-mobile: normal;
 169      --primary-nav--font-weight: normal;
 170      --primary-nav--font-weight-button: 500;
 171      --primary-nav--color-link: var(--global--color-primary);
 172      --primary-nav--color-link-hover: var(--global--color-primary-hover);
 173      --primary-nav--color-text: var(--global--color-primary);
 174      --primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
 175      --primary-nav--border-color: var(--global--color-primary);
 176  
 177      /* Pagination */
 178      --pagination--color-text: var(--global--color-primary);
 179      --pagination--color-link-hover: var(--global--color-primary-hover);
 180      --pagination--font-family: var(--global--font-secondary);
 181      --pagination--font-size: var(--global--font-size-lg);
 182      --pagination--font-weight: normal;
 183      --pagination--font-weight-strong: 600;
 184  
 185      /* Footer */
 186      --footer--color-text: var(--global--color-primary);
 187      --footer--color-link: var(--global--color-primary);
 188      --footer--color-link-hover: var(--global--color-primary-hover);
 189      --footer--font-family: var(--global--font-primary);
 190      --footer--font-size: var(--global--font-size-sm);
 191  
 192      /* Block: Pull quote */
 193      --pullquote--font-family: var(--global--font-primary);
 194      --pullquote--font-size: var(--heading--font-size-h3);
 195      --pullquote--font-style: normal;
 196      --pullquote--letter-spacing: var(--heading--letter-spacing-h4);
 197      --pullquote--line-height: var(--global--line-height-heading);
 198      --pullquote--border-width: 3px;
 199      --pullquote--border-color: var(--global--color-primary);
 200      --pullquote--color-foreground: var(--global--color-primary);
 201      --pullquote--color-background: var(--global--color-background);
 202  
 203      --quote--font-family: var(--global--font-secondary);
 204      --quote--font-size: var(--global--font-size-md);
 205      --quote--font-size-large: var(--global--font-size-xl);
 206      --quote--font-style: normal;
 207      --quote--font-weight: 700;
 208      --quote--font-weight-strong: bolder;
 209      --quote--font-style-large: normal;
 210      --quote--font-style-cite: normal;
 211      --quote--line-height: var(--global--line-height-body);
 212      --quote--line-height-large: 1.35;
 213  
 214      --separator--border-color: var(--global--color-border);
 215      --separator--height: 1px;
 216  
 217      /* Block: Table */
 218      --table--stripes-border-color: var(--global--color-light-gray);
 219      --table--stripes-background-color: var(--global--color-light-gray);
 220      --table--has-background-text-color: var(--global--color-dark-gray);
 221  
 222      /* Widgets */
 223      --widget--line-height-list: 1.9;
 224      --widget--line-height-title: 1.4;
 225      --widget--font-weight-title: 700;
 226      --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));
 227  
 228      /* Admin-bar height */
 229      --global--admin-bar--height: 0px;
 230  }
 231  
 232  .admin-bar {
 233      --global--admin-bar--height: 32px;
 234  
 235      @media only screen and (max-width: 782px) {
 236          --global--admin-bar--height: 46px;
 237      }
 238  }
 239  
 240  @media only screen and (min-width: 652px) { // Not using the mixin because it's compiled after this file
 241      :root {
 242          --global--font-size-xl: 2.5rem; // 40px / 16px
 243          --global--font-size-xxl: 6rem; // 96px / 16px
 244          --global--font-size-xxxl: 9rem; // 144px / 16px
 245          --heading--font-size-h3: 2rem; // 32px / 16px
 246          --heading--font-size-h2: 3rem; // 48px / 16px
 247      }
 248  }