Bauke/bauke-xyz
Bauke
/
bauke-xyz
1
Fork 0
Code Releases 12 Activity

Add responsive containers to page components.

This commit is contained in:
Bauke 2022-03-28 14:12:06 +02:00
parent 375e9be9cf
commit 475e4b3c1b
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
4 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
source/scss/components/_page-footer.scss
View File

@ -1,3 +1,7 @@
@use 'mixins';
.page-footer { .page-footer {
@include mixins.responsive-container;
margin-top: 1rem; margin-top: 1rem;
} }

4
source/scss/components/_page-header.scss
View File

@ -1,3 +1,7 @@
@use 'mixins';
.page-header { .page-header {
@include mixins.responsive-container;
padding: 1rem; padding: 1rem;
} }

4
source/scss/components/_page-main.scss
View File

@ -1,4 +1,8 @@
@use 'mixins';
.page-main { .page-main {
@include mixins.responsive-container;
padding: 1rem; padding: 1rem;
.contact-links { .contact-links {

12
source/scss/mixins.scss Normal file
View File

@ -0,0 +1,12 @@
$medium-breakpoint: 900px;
$large-breakpoint: 1200px;
@mixin responsive-container {
margin-left: auto;
margin-right: auto;
width: $large-breakpoint;
@media (max-width: $large-breakpoint) {
width: 100%;
}
}