Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: static/scss/content/_typography.scss

Issue 29438582: Issue 5135 - Reduce font size and padding on smaller screens on acceptableads.com (Closed) Base URL: https://hg.adblockplus.org/web.acceptableads.com
Patch Set: Handle responsive styling Created June 22, 2017, 3:27 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: static/scss/content/_typography.scss
===================================================================
--- a/static/scss/content/_typography.scss
+++ b/static/scss/content/_typography.scss
@@ -25,71 +25,123 @@
h1,
.h1
{
margin: $xl 0 $lg 0;
text-transform: none;
font-size: $font-size-h1;
font-weight: 300;
+
+ @media (max-width: $tablet-breakpoint)
+ {
+ font-size: $font-size-h1 - 12px;
+ margin-top: $md;
+ }
+ @media (max-width: $mobile-breakpoint)
+ {
+ font-size: $font-size-h1 - 16px;
+ margin-bottom: $lg - 20px;
+ }
}
h2,
.h2
{
margin: $lg 0 $md 0;
font-size: $font-size-h2;
font-weight: 700;
+
+ @media (max-width: $tablet-breakpoint)
+ {
+ font-size: $font-size-h2 - 4px;
+ margin-top: $md;
+ }
+ @media (max-width: $mobile-breakpoint)
+ {
+ font-size: $font-size-h2 - 6px;
+ margin-bottom: $sm;
+ }
}
h3,
.h3
{
margin: $lg 0 $md 0;
font-size: $font-size-h3;
font-weight: 700;
+
+ @media (max-width: $tablet-breakpoint)
+ {
+ font-size: $font-size-h3 - 2px;
+ margin-top: $md;
+ }
+ @media (max-width: $mobile-breakpoint)
+ {
+ margin-bottom: $sm;
+ }
}
h4,
.h4
{
margin: $md 0 $sm 0;
font-size: $font-size-h4;
font-weight: 700;
+
+ @media (max-width: $mobile-breakpoint)
+ {
+ font-size: $font-size-h4 - 2px;
+ }
}
h5,
.h5
{
margin: $sm 0;
font-size: $font-size-h5;
+
+ @media (max-width: $mobile-breakpoint)
+ {
+ font-size: $font-size-h5 - 2px;
+ }
}
h6,
.h6
{
margin: $sm 0;
font-size: $font-size-h6;
font-weight: 400;
+
+ @media (max-width: $mobile-breakpoint)
+ {
+ font-size: $font-size-h6 - 2px;
+ }
}
// Main text ///////////////////////////////////////////////////////////////////
html,
body
{
color: $primary-fg;
// @see https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-size: $font-size-lg;
font-weight: 300;
line-height: 120%;
+
+ @media (max-width: $mobile-breakpoint)
+ {
+ font-size: $font-size-lg - 2px;
+ }
}
small,
.small
{
margin-bottom: $xs;
font-size: 70%;
line-height: 80%;
@@ -254,16 +306,21 @@
margin: $sm 0 $md 0;
}
dt
{
font-size: $font-size-xl;
text-transform: uppercase;
font-weight: 700;
+
+ @media (max-width: $tablet-breakpoint)
+ {
+ font-size: $font-size-xl - 2px;
+ }
}
// Blockquotes /////////////////////////////////////////////////////////////////
blockquote
{
margin: 0;
padding: 0 $md;
@@ -287,18 +344,24 @@
{
border: none;
}
.center blockquote
{
@extend h2;
margin: 0;
- padding: $xl 0;
+ padding: $lg 0;
font-style: normal;
+
+ @media (max-width: $tablet-breakpoint)
+ {
+ font-size: $font-size-h3;
+ padding: $md 0;
+ }
}
.center blockquote p:last-child
{
margin-top: -$xs;
}
cite

Powered by Google App Engine
This is Rietveld