80 lines
2.0 KiB
SCSS
80 lines
2.0 KiB
SCSS
body {
|
|
display: grid;
|
|
@include breakpoint(desktop) {
|
|
grid-template-columns: [left-gutter] 1fr [content] 2fr [right-gutter] 1fr;
|
|
grid-column-gap: 1em;
|
|
}
|
|
@include breakpoint(tablet) {
|
|
grid-template-columns: [left-gutter] 1fr [content] 4fr [right-gutter] 1fr;
|
|
grid-column-gap: 1em;
|
|
}
|
|
grid-template-columns: [left-gutter] 1em [content] auto [right-gutter] 1em;
|
|
grid-template-rows: [header] 30% [body] auto [footer] 30%;
|
|
grid-column-gap: 0;
|
|
}
|
|
|
|
.header {
|
|
grid-row: header;
|
|
grid-column: left-gutter / 4;
|
|
display: grid;
|
|
@include breakpoint(desktop) {
|
|
grid-template-columns: [header-left-gutter] 1fr [title] 2fr [header-right-gutter] 1fr;
|
|
grid-template-rows: [title] auto [menu] auto;
|
|
grid-column-gap: 1em;
|
|
}
|
|
@include breakpoint(tablet) {
|
|
grid-template-columns: [header-left-gutter] 1fr [title] 4fr [header-right-gutter] 1fr;
|
|
grid-template-rows: [title] auto [menu] auto;
|
|
grid-column-gap: 1em;
|
|
}
|
|
grid-template-columns: [header-left-gutter] 1em [title] auto [header-right-gutter] 1em;
|
|
grid-template-rows: [title] auto [menu] auto;
|
|
grid-column-gap: 0;
|
|
.title {
|
|
grid-column: title;
|
|
grid-row: title;
|
|
}
|
|
.menu {
|
|
grid-row: menu;
|
|
grid-column: title;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
grid-row: footer;
|
|
grid-column: left-gutter / 4;
|
|
display: grid;
|
|
@include breakpoint(desktop) {
|
|
grid-template-columns: [footer-left-gutter] 1fr [center] 2fr [footer-right-gutter] 1fr;
|
|
grid-column-gap: 1em;
|
|
}
|
|
@include breakpoint(tablet) {
|
|
grid-template-columns: [footer-left-gutter] 1fr [center] 4fr [footer-right-gutter] 1fr;
|
|
grid-column-gap: 1em;
|
|
}
|
|
grid-template-columns: [footer-left-gutter] 1em [center] auto [footer-right-gutter] 1em;
|
|
grid-column-gap: 0;
|
|
ul {
|
|
grid-column: center;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
grid-row: body;
|
|
grid-column: content;
|
|
}
|
|
|
|
#contact {
|
|
@include breakpoint(desktop) {
|
|
display: grid;
|
|
grid-template-columns: [pers] 1fr [prof] 1fr;
|
|
grid-column-gap: 1em;
|
|
.perso {
|
|
grid-column: pers;
|
|
}
|
|
.prof {
|
|
grid-column: prof;
|
|
}
|
|
}
|
|
}
|