LibreGaming
/
frontend-styles
Archived
14
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

+container, full-width-container 

Container's max-width was reflected to setting $container-page-width found within settings.

Container makes use of $gutter-half from settings for easier coding and
consistency.

Container now makes use of media queries. We add and subtract margins based on screen size. In particular, we register margin gutters when the viewport width is within the container-page-width.

.full-width-container is set to 100% width, expanding fully for each screen size. This additional class is expected to be used for content outside of textual information e.g. artwork.
This commit is contained in:
spongycake 2022-01-28 12:21:24 +00:00
parent 6c1919e68a
commit ba36dca6e1
1 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/scss/_container.scss
View File

@ -1,6 +1,22 @@
// Container
.container {
max-width:1000px;
margin:22px auto;
@include padding-left(15px);
@include padding-right(15px);
max-width: $container-page-width;
// On desktop screens, when screen size is greater than the actual width of the page
// then content is centred instead of adding gutters
margin-left: auto;
margin-right: auto;
// As soon as the viewport is less than page width plus both gutters,
// then add gutter spacing to container
@include mq.mq($until: $container-page-width + $gutter * 2) {
margin-left: $gutter-half;
margin-right: $gutter-half;
}
}
// Full width container
.full-width-container {
max-width: 100%;
margin-left: $gutter-half;
margin-right: $gutter-half;
}