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

Side by Side Diff: static/css/index.css

Issue 29721694: Fixes #31 - Adjustments to media mention section of index page (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Created March 13, 2018, 4:07 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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 #content, 10 #content,
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after
66 #hero-download-video 66 #hero-download-video
67 { 67 {
68 display: block; 68 display: block;
69 } 69 }
70 } 70 }
71 71
72 /****************************************************************************** 72 /******************************************************************************
73 * #media 73 * #media
74 *****************************************************************************/ 74 *****************************************************************************/
75 75
76 #media-section { clear: both; } 76 #media-section
77
78 #media-header h2,
79 #media-list
80 { 77 {
81 margin: 0; 78 clear: both;
79 text-align: center;
82 } 80 }
83 81
84 #media-header 82 #media-header
85 { 83 {
86 margin-bottom: 2em; 84 margin-bottom: 1em;
87 } 85 }
88 86
89 #media-header h2 87 #media-header h2
90 { 88 {
91 font-size: 1em; 89 font-size: 1em;
92 font-weight: normal; 90 font-weight: normal;
93 text-transform: uppercase; 91 text-transform: uppercase;
94 } 92 }
95 93
94 #media-header h2,
95 #media-list
96 {
97 margin: 0;
98 }
99
96 #media-list li 100 #media-list li
97 { 101 {
98 display: inline-block; 102 display: inline-block;
99 } 103 }
100 104
101 #media-list img 105 #media-list img
102 { 106 {
103 max-width: 10em; 107 max-width: 10em;
104 max-height: 3em; 108 max-height: 3em;
105 margin: 0 1em 1em; 109 margin: 0 1em 1em;
(...skipping 24 matching lines...) Expand all
130 border-radius: 50%; 134 border-radius: 50%;
131 background-color: #000; 135 background-color: #000;
132 background-image: url(../img/external-icon.png); 136 background-image: url(../img/external-icon.png);
133 background-image: linear-gradient(transparent, transparent), 137 background-image: linear-gradient(transparent, transparent),
134 url(../img/external-icon.svg); 138 url(../img/external-icon.svg);
135 background-repeat: no-repeat; 139 background-repeat: no-repeat;
136 background-position: center; 140 background-position: center;
137 background-size: 1em; 141 background-size: 1em;
138 } 142 }
139 143
140 @media (min-width: 992px) 144 @media (min-width: 1024px)
141 { 145 {
146 #media
147 {
148 display: table;
149 width: 100%;
150 }
151
152 #media-header,
153 #media-list
154 {
155 display: table-cell;
156 vertical-align: middle;
157 width: auto;
158 }
159
160 #media-header
161 {
162 margin-bottom: 0;
163 }
164
142 #media-header small 165 #media-header small
143 { 166 {
144 display: none; 167 display: none;
145 } 168 }
146 169
170 #media-list { direction: rtl; }
171 [dir="rtl"] #media-list { direction: ltr; }
172
173 @supports (display: flex)
174 {
175 #media-list
176 {
177 display: flex;
178 justify-content: space-between;
179 align-items: center;
180 }
181 }
182
147 #media-list 183 #media-list
148 { 184 {
149 display: table; 185 display: table;
150 width: 100%; 186 width: 100%;
151 } 187 }
152 188
153 #media-list li 189 #media-list li
154 { 190 {
155 display: table-cell; 191 display: table-cell;
156 vertical-align: middle; 192 vertical-align: middle;
157 } 193 }
158 194
159 #media-list img 195 #media-list img
160 { 196 {
161 margin: 0 2em; 197 margin: 0 2em;
162 } 198 }
163 } 199 }
164 200
165 @media (min-width: 768px)
166 {
167 #media {
168 display: table;
169 width: 100%;
170 }
171
172 #media-header,
173 #media-list
174 {
175 display: table-cell;
176 vertical-align: middle;
177 width: auto;
178 }
179
180 #media-header
181 {
182 margin-bottom: 0;
183 }
184
185 #media-list { direction: rtl; }
186 [dir="rtl"] #media-list { direction: ltr; }
187
188 @supports (display: flex)
189 {
190 #media-list
191 {
192 display: flex;
193 justify-content: space-between;
194 align-items: center;
195 }
196 }
197
198 }
199
200 /****************************************************************************** 201 /******************************************************************************
201 * #abb-notification 202 * #abb-notification
202 *****************************************************************************/ 203 *****************************************************************************/
203 204
204 #abb-notification h2, 205 #abb-notification h2,
205 #abb-notification h3 206 #abb-notification h3
206 { 207 {
207 text-transform: uppercase; 208 text-transform: uppercase;
208 } 209 }
209 210
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after
262 padding: 0px 30px; 263 padding: 0px 30px;
263 } 264 }
264 265
265 @media(max-width: 767px) 266 @media(max-width: 767px)
266 { 267 {
267 #footnote 268 #footnote
268 { 269 {
269 padding: 0px 20px; 270 padding: 0px 20px;
270 } 271 }
271 } 272 }
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld