CSS

Concepts

Sass is used for CSS pre-processing, however we use CSS variables for easier self-service styling. The various base files from node_modules/@shift72/core-template/site/styles are merged with any local files in local/site/styles to create the final CSS in output/site/static/styles/main.css. This is added to the site as a typical stylesheet:

<link rel="stylesheet" href="/styles/main.css">

Variables

There are a number of variables available to control simple styling tasks. Currently there is a mixture of CSS variables and Sass variables. To modify CSS variables, add a :root pseudo-class to local/site/styles/_variables.css and add your variables inside. For Sass variables, add a variable to your local/site/styles/_variables.scss to modify it.

These 4 core color CSS variables are typically set first in local/site/styles/_variables.css, with others modified as needed:

• --primary-rgb
• --secondary-rgb
• --body-bg-rgb
• --body-color-rgb

Overriding

Add any further styles to local/site/styles/local.scss.

Warning: Forward compatibility

How Tos

Change a color

For example, let's say you want to change the --primary-rgb color. Open local/site/styles/_variables.css and see if the variable is already defined. If so, you can modify it, otherwise add it:

:root {
  --primary-rgb: 53, 160, 168;
}

Change the logo size

Modify these variables to suit, taking note of the different breakpoints.

--navbar-brand-padding-y: 20px;
--navbar-brand-min-width: 130px;
--navbar-brand-min-width-md: 290px;
--navbar-brand-min-width-lg: 290px;
--navbar-brand-min-width-xl: 290px;

--footer-brand-min-width: 160px;
--footer-brand-min-width-md: 160px;
--footer-brand-min-width-lg: 160px;
--footer-brand-min-width-xl: 160px;

Make sure it doesnt overlap the search bar. Once you have a width you can set the padding-y to make sure the logo is visible.

Style links

Links (anchor tags) are used in a variety of situations and it would be quite easy to casually override them all leading to poor results. For this example, let's say we want to make links on content pages more noticeable. Open local/site/styles/local.scss and add:

// Be sure to scope your changes.
.content-page-content p {
  a {
    font-size: larger;
    text-decoration: wavy;
  }
}