ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve section gutters in mobile for readability

This commit is contained in:
Rico Sta. Cruz 2017-09-02 00:20:18 +08:00
parent f9c0724b0c
commit 6bc5e527a1
No known key found for this signature in database
GPG Key ID: CAAD38AE2962619A
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
_sass/2017/components/h3-section.scss
View File

@ -43,14 +43,20 @@
.h3-section > h3 { .h3-section > h3 {
& { & {
@include section-gutter(margin-bottom, $multiplier: 1); margin-top: 8px;
@include section-gutter(margin-top, $multiplier: .5); margin-bottom: 16px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
// Mobile: the padding below h3-section is enough
@media (max-width: 768px) {
margin-top: 0;
}
// Horizontal line
&::after { &::after {
@include section-gutter(margin-left, $multiplier: 1.5); margin-left: 24px;
content: ''; content: '';
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;

6
_sass/2017/utils/section-gutter.scss
View File

@ -1,11 +1,7 @@
@mixin section-gutter($property, $multiplier: 1) { @mixin section-gutter($property, $multiplier: 1) {
#{$property}: 16px * $multiplier; #{$property}: 16px * $multiplier;
@media (max-width: 480px) { @media (max-width: $area-width + 32px) {
#{$property}: 8px * $multiplier; #{$property}: 8px * $multiplier;
} }
@media (max-width: 768px) {
#{$property}: 12px * $multiplier;
}
} }