Unified Diff: static/css/index.css
Issue 29720653:
Fixes #30 - Adjustments to hero unit section of index page (Closed)
Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Addressed #6 & #7
Created March 14, 2018, 12:38 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« no previous file
|
no next file »
|
no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: static/css/index.css |
| =================================================================== |
| --- a/static/css/index.css |
| +++ b/static/css/index.css |
| @@ -21,58 +21,56 @@ |
| /* add spacing left/right on tablets */ |
| #hero-download |
| { |
| padding-left: 3em; |
| padding-right: 3em; |
| } |
| } |
| -@media(min-width: 1024px) |
| +@media (max-width: 575px) |
| { |
| - #hero-download |
| + /* disable avoid-wrap inside h1 on mobile */ |
| + #hero-download h1 .avoid-wrap |
| { |
| - padding-top: 6em; |
| - /* 3em bottom looks like 6em because of thumbnail contents */ |
| - padding-bottom: 3em; |
| + display: inline; |
| } |
| } |
| @media (max-width: 1023px) |
| { |
| /* force hero unit columns to break on large tablets */ |
| #hero-download .column |
| { |
| width: 100%; |
| } |
| } |
| +@media (min-width: 1024px) |
| +{ |
| + #hero-download |
| + { |
| + padding-top: 6em; |
| + /* 3em bottom looks like 6em because of thumbnail contents */ |
| + padding-bottom: 4em; |
| + } |
| +} |
| + |
| #hero-download h1 |
| { |
| /* Spacing is provided by the hero-download section */ |
| margin-top: 0; |
| - /* Reduced line-height to match design without hurting accessibility */ |
| - line-height: 1.25; |
| -} |
| - |
| -@media (max-width: 575px) |
| -{ |
| - /* disable avoid-wrap inside h1 on mobile */ |
| - #hero-download h1 .avoid-wrap |
| - { |
| - display: inline; |
| - } |
| } |
| @media (min-width: 576px) |
| { |
| /* make h1 larger sooner than usual */ |
| #hero-download h1 |
| { |
| - font-size: 2.4em |
| + font-size: 2.4em; |
| } |
| /* force break without <br> on large screens */ |
| #hero-download h1 .avoid-wrap:first-of-type |
| { |
| display: block; |
| } |
| } |
| @@ -99,18 +97,18 @@ |
| { |
| /* force auto-width >= small tablets */ |
| width: auto; |
| } |
| } |
| #hero-download-video |
| { |
| - /* add 1em space above on phones & tablets */ |
| - margin-top: 1em; |
| + /* add space above on phones & tablets */ |
| + margin-top: 2em; |
|
juliandoucette
2018/03/14 12:46:31
NIT: Added a little more space here (personal pref
|
| /* prevent default full-width on small tablets */ |
| max-width: 550px; |
| } |
| @media(min-width: 1024px) |
| { |
| #hero-download-video |
| { |
« no previous file with comments
|
« no previous file
|
no next file »
|
no next file with comments »
