83 lines
2.0 KiB
SCSS
83 lines
2.0 KiB
SCSS
body {
|
|
display: grid;
|
|
grid-template-columns: [left-gutter] 5% [content] 90% [right-gutter] 5%;
|
|
grid-template-rows: [header] 10% [body] auto [footer] 30%;
|
|
grid-column-gap: 0;
|
|
@include breakpoint(m) {
|
|
grid-template-columns: [left-gutter] 1fr [content] 4fr [right-gutter] 1fr;
|
|
grid-column-gap: 1em;
|
|
}
|
|
@include breakpoint(l) {
|
|
grid-template-columns: [left-gutter] 1fr [content] 2fr [right-gutter] 1fr;
|
|
grid-column-gap: 1em;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
grid-row: header;
|
|
grid-column: left-gutter / 4;
|
|
display: grid;
|
|
grid-template-columns: [header-left-gutter] 5% [title] 90% [header-right-gutter] 5%;
|
|
grid-template-rows: [title] 7em [menu] 6em;
|
|
grid-column-gap: 0;
|
|
@include breakpoint(s) {
|
|
grid-template-rows: [title] 7em [menu] 3.4em;
|
|
}
|
|
@include breakpoint(m) {
|
|
grid-template-columns: [header-left-gutter] 1fr [title] 4fr [header-right-gutter] 1fr;
|
|
grid-template-rows: [title] 7em [menu] 3.4em;
|
|
grid-column-gap: 1em;
|
|
}
|
|
@include breakpoint(l) {
|
|
grid-template-columns: [header-left-gutter] 1fr [title] 2fr [header-right-gutter] 1fr;
|
|
grid-template-rows: [title] 7em [menu] 3.4em;
|
|
grid-column-gap: 1em;
|
|
}
|
|
.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;
|
|
grid-template-columns: [footer-left-gutter] 5% [center] 90% [footer-right-gutter] 5%;
|
|
grid-column-gap: 0;
|
|
@include breakpoint(m) {
|
|
grid-template-columns: [footer-left-gutter] 1fr [center] 4fr [footer-right-gutter] 1fr;
|
|
grid-column-gap: 1em;
|
|
}
|
|
@include breakpoint(l) {
|
|
grid-template-columns: [footer-left-gutter] 1fr [center] 2fr [footer-right-gutter] 1fr;
|
|
grid-column-gap: 1em;
|
|
}
|
|
ul {
|
|
grid-column: center;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
grid-row: body;
|
|
grid-column: content;
|
|
}
|
|
|
|
#contact {
|
|
@include breakpoint(l) {
|
|
display: grid;
|
|
grid-template-columns: [pers] 1fr [prof] 1fr;
|
|
grid-column-gap: 1em;
|
|
.perso {
|
|
grid-column: pers;
|
|
}
|
|
.prof {
|
|
grid-column: prof;
|
|
}
|
|
}
|
|
}
|