ashpie/swaf-boilerplate
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

frontend: refactor $mobileThreshold and container media queries

Browse Source
This commit is contained in:
Alice Gaudon 2020-11-03 20:29:07 +01:00
parent 04f19f5a28
commit f16d63c74f
2 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/sass/_vars.scss
View File

@ -28,4 +28,4 @@ $errorText: darken($error, 30%);
$errorColor: desaturate($errorText, 50%); $errorColor: desaturate($errorText, 50%);
// Responsivity // Responsivity
$menuLayoutSwitchTreshold: 700px; $mobileThreshold: 632px;

22
assets/sass/layout.scss
View File

@ -183,7 +183,7 @@ body > header {
} }
} }
@media (max-width: $menuLayoutSwitchTreshold) { @media (max-width: $mobileThreshold) {
flex-direction: row-reverse; flex-direction: row-reverse;
.logo { .logo {
@ -246,7 +246,7 @@ body > header {
} }
} }
@media (min-width: $menuLayoutSwitchTreshold) { @media (min-width: $mobileThreshold) {
nav ul li { nav ul li {
a, button, .button { a, button, .button {
@include tip; @include tip;
@ -274,7 +274,7 @@ footer {
main { main {
flex: 1; flex: 1;
padding: 8px; padding: 8px 0;
button, .button { button, .button {
@include tip; @include tip;
@ -649,12 +649,24 @@ button, .button {
text-align: center; text-align: center;
} }
.container { @mixin container {
width: $mobileThreshold;
padding: 0 16px; padding: 0 16px;
max-width: 632px;
@media (min-width: $mobileThreshold) {
margin: 0 auto; margin: 0 auto;
} }
@media (max-width: $mobileThreshold) {
width: 100%;
padding: 0 8px;
}
}
.container {
@include container;
}
.panel { .panel {
position: relative; position: relative;
margin: 16px 0 48px; margin: 16px 0 48px;