frontend: refactor $mobileThreshold and container media queries
This commit is contained in:
parent
04f19f5a28
commit
f16d63c74f
@ -28,4 +28,4 @@ $errorText: darken($error, 30%);
|
||||
$errorColor: desaturate($errorText, 50%);
|
||||
|
||||
// Responsivity
|
||||
$menuLayoutSwitchTreshold: 700px;
|
||||
$mobileThreshold: 632px;
|
||||
|
@ -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,10 +649,22 @@ button, .button {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
@mixin container {
|
||||
width: $mobileThreshold;
|
||||
padding: 0 16px;
|
||||
max-width: 632px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (min-width: $mobileThreshold) {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: $mobileThreshold) {
|
||||
width: 100%;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
@include container;
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
Loading…
Reference in New Issue
Block a user