Delta Between Two Patch Sets: 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
Left Patch Set: Addressed #10
Created March 14, 2018, 2:13 p.m.
Right Patch Set: Addressed #13 & #14
Created March 14, 2018, 2:51 p.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with change/comment
|
« includes/hero-download.html ('k')
|
static/css/main.css » ('j')
|
no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| LEFT | RIGHT |
|---|---|
| 1 /****************************************************************************** | 1 /****************************************************************************** |
| 2 * Temparary styles | 2 * Temparary styles |
| 3 *****************************************************************************/ | 3 *****************************************************************************/ |
| 4 | 4 |
| 5 .avoid-wrap {display: inline-block;} | 5 .avoid-wrap {display: inline-block;} |
| 6 .small {font-size: smaller;} | 6 .small {font-size: smaller;} |
| 7 .maxthon-only {display: none;} | 7 .maxthon-only {display: none;} |
| 8 .maxthon .maxthon-only {display: block;} | 8 .maxthon .maxthon-only {display: block;} |
| 9 | 9 |
| 10 /****************************************************************************** | 10 /****************************************************************************** |
| (...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 42 { | 42 { |
| 43 width: 100%; | 43 width: 100%; |
| 44 } | 44 } |
| 45 } | 45 } |
| 46 | 46 |
| 47 @media (min-width: 1024px) | 47 @media (min-width: 1024px) |
| 48 { | 48 { |
| 49 #hero-download | 49 #hero-download |
| 50 { | 50 { |
| 51 padding-top: 6em; | 51 padding-top: 6em; |
| 52 /* 4em bottom looks like 6em because of thumbnail contents */ | 52 padding-bottom: 6em; |
| 53 padding-bottom: 4em; | |
| 54 } | 53 } |
| 55 } | 54 } |
| 56 | 55 |
| 57 #hero-download h1 | 56 #hero-download h1 |
| 58 { | 57 { |
| 59 /* Spacing is provided by the hero-download section */ | 58 /* Spacing is provided by the hero-download section */ |
| 60 margin-top: 0; | 59 margin-top: 0; |
| 61 } | 60 } |
| 62 | 61 |
| 63 @media (min-width: 576px) | 62 @media (min-width: 576px) |
| (...skipping 26 matching lines...) Expand all Loading... | |
| 90 #hero-download-button | 89 #hero-download-button |
| 91 { | 90 { |
| 92 /* force auto-width >= small tablets */ | 91 /* force auto-width >= small tablets */ |
| 93 width: auto; | 92 width: auto; |
| 94 } | 93 } |
| 95 } | 94 } |
| 96 | 95 |
| 97 #hero-download-video | 96 #hero-download-video |
| 98 { | 97 { |
| 99 /* add space above on phones & tablets */ | 98 /* add space above on phones & tablets */ |
| 100 margin-top: 1em; | 99 margin-top: 2em; |
| 101 /* prevent default full-width on small tablets */ | 100 /* prevent default full-width on small tablets */ |
| 102 max-width: 550px; | 101 max-width: 550px; |
| 103 } | 102 } |
| 104 | 103 |
| 105 @media(min-width: 1024px) | 104 #hero-download-video |
| 105 { | |
| 106 /* provide a little space between thumbnail and border + shadow */ | |
| 107 padding: 1em 1em 0 1em; | |
| 108 } | |
| 109 | |
| 110 @media (min-width: 1024px) | |
| 106 { | 111 { |
| 107 #hero-download-video | 112 #hero-download-video |
| 108 { | 113 { |
| 109 /* keep aligned-top despite padding below */ | 114 /* keep aligned-top despite padding below */ |
| 110 margin-top: -1em; | 115 margin-top: -1em; |
| 111 /* provide a little space between thumbnail and border + shadow */ | |
| 112 padding: 1em; | |
| 113 } | 116 } |
| 114 } | 117 } |
| 115 | 118 |
| 116 #hero-download-video.has-iframe | 119 #hero-download-video.has-iframe |
| 117 { | 120 { |
| 118 /* remove space around thumbnail when thumbnail is replaced by video */ | 121 /* remove space around thumbnail when thumbnail is replaced by video */ |
| 119 padding: 0; | 122 padding: 0; |
| 120 } | 123 } |
| 121 | 124 |
| 122 /** Hide the video border + shadow only when the thumbnail alone is showing */ | 125 /** Hide the video border + shadow only when the thumbnail alone is showing */ |
| 123 #hero-download-video.hide-disclaimer:not(.has-iframe) | 126 #hero-download-video.hide-disclaimer:not(.has-iframe) |
| 124 { | 127 { |
| 125 border-color: transparent; | 128 border-color: transparent; |
| 126 /* there is no box-shadow-color property :( */ | 129 /* there is no box-shadow-color property :( */ |
| 127 box-shadow: 1px 1px 0 0 transparent; | 130 box-shadow: 1px 1px 0 0 transparent; |
| 128 } | 131 } |
| 129 | 132 |
| 130 /* The thumbnail is taller than the video. But it's hard to see because of the | 133 /* The thumbnail is taller than the video. But it's hard to see because of the |
| 131 * reflection and whitespace at the bottom. As a result, I am cutting out the | 134 * reflection and whitespace at the bottom. As a result, I am cutting out the |
| 132 * whitespace and reflection when I show the disclaimer so that the section | 135 * whitespace and reflection when I show the disclaimer so that the section |
| 133 * doesn't visibly resize when the thumbnail is replaced by the a iframe. | 136 * doesn't visibly resize when the thumbnail is replaced by the a iframe. |
| 134 */ | 137 */ |
| 135 | 138 |
| 136 #hero-download-video:not(.hide-disclaimer) .video-thumbnail | |
| 137 { | |
| 138 margin-bottom: -2.5em; | |
| 139 } | |
| 140 | |
| 141 #hero-download-video:not(.hide-disclaimer), | |
| 142 #hero-download-video.has-iframe | |
| 143 { | |
| 144 margin-bottom: 2.5em; | |
| 145 } | |
| 146 | 139 |
| 147 /****************************************************************************** | 140 /****************************************************************************** |
| 148 * #media | 141 * #media |
| 149 *****************************************************************************/ | 142 *****************************************************************************/ |
| 150 | 143 |
| 151 #media-section | 144 #media-section |
| 152 { | 145 { |
| 153 clear: both; | 146 clear: both; |
| 154 text-align: center; | 147 text-align: center; |
| 155 } | 148 } |
| (...skipping 151 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 307 * #footnote | 300 * #footnote |
| 308 *****************************************************************************/ | 301 *****************************************************************************/ |
| 309 | 302 |
| 310 #footnote | 303 #footnote |
| 311 { | 304 { |
| 312 padding-top: 3em; | 305 padding-top: 3em; |
| 313 padding-bottom: 2em; | 306 padding-bottom: 2em; |
| 314 font-size: 13px; | 307 font-size: 13px; |
| 315 color: #7d7d7d; | 308 color: #7d7d7d; |
| 316 } | 309 } |
| LEFT | RIGHT |
« includes/hero-download.html ('k')
|
static/css/main.css » ('j')
|
Toggle Intra-line Diffs ('i')
|
Expand Comments ('e')
|
Collapse Comments ('c')
|
Toggle Comments ('s')
