60 lines
1.6 KiB
SCSS
60 lines
1.6 KiB
SCSS
// COLOR VARIABLES
|
|
$color-primary: #c69963;
|
|
$color-primary-dark: #B28451;
|
|
|
|
$color-secondary: #101d2c;
|
|
|
|
$color-grey-light-1: #f9f7f6;
|
|
$color-grey-light-2: #aaa;
|
|
|
|
$color-grey-dark-1: #54483A;
|
|
$color-grey-dark-2: #6D5D4B;
|
|
|
|
// FONT VARIABLES
|
|
$font-primary: 'Nunito', sans-serif;
|
|
$font-display: 'Josefin Sans', sans-serif;
|
|
|
|
// RESPONSIVE BREAKPOINTS
|
|
$bp-largest: 75em; // 1200px
|
|
$bp-large: 62.5em; // 1000px
|
|
$bp-medium: 50em; // 800px;
|
|
$bp-small: 37.5em; // 600px;
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
html {
|
|
box-sizing: border-box;
|
|
font-size: 62.5%; // 10px/16px = 62.5% -> 1rem = 10px
|
|
|
|
@media only screen and (max-width: $bp-largest) {
|
|
font-size: 50%;
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: $font-primary;
|
|
color: $color-grey-dark-2;
|
|
font-weight: 300;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container {
|
|
display: grid;
|
|
grid-template-rows: 80vh min-content 40vw repeat(3, min-content);
|
|
grid-template-columns: [sidebar-start] 8rem [sidebar-end full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
|
|
|
|
@media only screen and (max-width: $bp-large) {
|
|
grid-template-rows: 6rem 80vh min-content 40vw repeat(3, min-content);
|
|
grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
|
|
}
|
|
|
|
@media only screen and (max-width: $bp-medium) {
|
|
grid-template-rows: 6rem calc(100vh - 6rem);
|
|
}
|
|
} |