diff --git a/components/main.scss b/components/main.scss index 9c84c90..abbc30d 100644 --- a/components/main.scss +++ b/components/main.scss @@ -44,24 +44,28 @@ src: local('Montserrat Bold'), local('Montserrat-Bold'), url(fonts/Montserrat/Montserrat-Bold.ttf) format('truetype'); } +// Define global color variables. $-beige: #D7CEC7; $-grey: #565656; $-wine-red: #76323F; $-light-brown: #C09F80; $-almost-white: #f9f9f9; -$-primary-sans-serif-font: Montserrat, +// Define global sand/serif font variables. +$-primary-sans-serif-font: 'Montserrat', Helvetica, sans-serif; $-primary-serif-font: 'Crimson Text', Times, serif; +// Define viewport sizes. $-viewport-extra-small: 450px; $-viewport-small: 650px; $-viewport-medium: 750px; $-viewport-normal: 1000px; +// Define when to hide the sidebar. $-viewport-toggle-sidebar: $-viewport-small; $-sidebar-width: 250px; @@ -113,6 +117,7 @@ body { display: none; } +// Media queries @media(max-width: $-viewport-normal) { .LP-Wrapper__Site { grid-template-columns: (0.75 * $-sidebar-width) 1fr;