Reduce spacing and improve readability on smaller screens
This commit is contained in:
parent
1193914f8b
commit
2bafe757fc
3 changed files with 53 additions and 6 deletions
|
@ -43,6 +43,15 @@ body > main {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (min-width: 1440px) {
|
||||||
|
section {
|
||||||
|
& > a:first-child + {
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin-top: $spacer * 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
padding: {
|
padding: {
|
||||||
|
@ -56,12 +65,6 @@ section {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
padding-bottom: $spacer * 2;
|
padding-bottom: $spacer * 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > a:first-child + {
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
margin-top: $spacer * 4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
article {
|
article {
|
||||||
|
@ -93,3 +96,21 @@ article {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
article main,
|
||||||
|
main > section {
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
-ms-hyphens: auto;
|
||||||
|
hyphens: auto;
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: justify;
|
||||||
|
|
||||||
|
// SOURCE: https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
|
||||||
|
/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
|
||||||
|
word-break: break-all;
|
||||||
|
|
||||||
|
/* Non standard for webkit */
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -6,3 +6,9 @@ body > header {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1439px) {
|
||||||
|
body > header {
|
||||||
|
padding-bottom: $spacer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -20,3 +20,23 @@ body.LayoutBlogPost {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1023px) {
|
||||||
|
body.LayoutBlogPost {
|
||||||
|
article,
|
||||||
|
article > main {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 1439px) {
|
||||||
|
body.LayoutBlogPost {
|
||||||
|
article {
|
||||||
|
padding-top: 0;
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue