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