The styling has been set up in the file named "common-components.scss.liquid". This file is included on the theme.liquid file. There is a scss.liquid file, named `common-components` is the style sheet for all the styling applying accross the whole website (eg. header, footer, etc.). You can find the structure of this file in the ReadMe file.
Here is a list of the components that have been rebuild:
- Heading 2
- Container
- Underline links
- Buttons
Headings 2 are styled as per Go-To styling by default but if it's included in a `scheme-bro-to` element, it will be styled as per Bro-To styling. It's the same mechanics for Gro-To. There is a scheme evaluation which is adding a scheme CSS class on the body of the page. The styling applies for the element with CSS class .h2, because styling general <h2> would change the styling on the whole website.
Containers are using a CSS class named "content-width", which will be aligned with the logo from the navigation in the header.
Underline links are created with 2 CSS class `underline_link-primary`, `underline_link-secondary`, `underline_link-tertiary` or `underline_link-quaternary` (so far, only the links contained in a `scheme-gro-to` element can have a tertiary and quaternary styling). For each scheme there are two different styling. You can also add the CSS `underline_link-reverse` for underline links on a dark background.
There is also the base underline link which is black and white link, created with this class `underline_link-base`.
You can also add the CSS class `full-coloured` to use the underline colour for the copy and the arrow.
Buttons are also created with a CSS class `button-primary`. The styling is also based the scheme CSS class of a parent element (eg. scheme-go-to, scheme-bro-to, scheme-gro-to, ). You can also add the CSS `button-reverse` for buttons on a dark background.
!important: To change the font weight, you need to change the font-weight but not the font-family.
- snippets: the snippets list from Shogun has been cleaned up, mainly removed all the product page snippets, landing pages snippets, links because the product and landing pages have been rebuilt
- modals: now allow nesting other elements by dragging and dropping. You can add elements like text/headings/image… inside the modal.
- product legacy styling: there is a setting to add the previous product page styling or not. Once the new product pages will go live, we will be able to disable this setting and remove the legacy styling file.
- font-family: we now only use font-weight and not family to change the weight of a font. to prevent the old font to be displayed, even when an old font is set up on Shogun, we need to remove the old font from Shogun app, once the new the new styling will go live.
- bold/italic: bold and italic styling are not set up through a font-family anymore, they are using their initial display
- underline links: I've created a custom element to play with underline links option on Shogun Documentation here
