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

Delta Between Two Patch Sets: static/css/main.css

Issue 29453600: Issue 4961 - Fix card group field alignment on acceptableads.com (Closed) Base URL: https://hg.adblockplus.org/web.acceptableads.com
Left Patch Set: Rebase Created July 17, 2017, 1:41 p.m.
Right Patch Set: Move styling for cards on committee page to committee/index.html Created July 25, 2017, 1:33 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « pages/solutions/index.html ('k') | static/scss/_variables.scss » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 .m-a-na { 1 .m-a-na {
2 margin: 0 0 !important; } 2 margin: 0 0 !important; }
3 3
4 .m-t-na { 4 .m-t-na {
5 margin-top: 0 !important; } 5 margin-top: 0 !important; }
6 6
7 .m-b-na { 7 .m-b-na {
8 margin-bottom: 0 !important; } 8 margin-bottom: 0 !important; }
9 9
10 .m-x-na { 10 .m-x-na {
(...skipping 1034 matching lines...) Expand 10 before | Expand all | Expand 10 after
1045 border: 1px solid #161616; 1045 border: 1px solid #161616;
1046 background-color: #FFFFFF; } 1046 background-color: #FFFFFF; }
1047 1047
1048 .card h1, .card h2, .card .center blockquote, .center .card blockquote, .card h3 , .card .group.items .item::before, .group.items .card .item::before, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .card .h4, .card .h5 , .card .h6 { 1048 .card h1, .card h2, .card .center blockquote, .center .card blockquote, .card h3 , .card .group.items .item::before, .group.items .card .item::before, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .card .h4, .card .h5 , .card .h6 {
1049 height: 48px; 1049 height: 48px;
1050 margin: 16px 0 16px 0; } 1050 margin: 16px 0 16px 0; }
1051 @media (max-width: 544px) { 1051 @media (max-width: 544px) {
1052 .card h1, .card h2, .card .center blockquote, .center .card blockquote, .car d h3, .card .group.items .item::before, .group.items .card .item::before, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6 { 1052 .card h1, .card h2, .card .center blockquote, .center .card blockquote, .car d h3, .card .group.items .item::before, .group.items .card .item::before, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6 {
1053 height: auto; } } 1053 height: auto; } }
1054 1054
1055 .card article .card-heading {
1056 height: auto; }
1057 @media (min-width: 768px) {
1058 .card article .card-heading {
1059 height: 120px; } }
1060
1061 .card-icon { 1055 .card-icon {
1062 margin: 16px 0; } 1056 margin: 16px 0; }
1063 1057
1064 .center .card-icon { 1058 .center .card-icon {
1065 margin: 48px 0 32px 0; } 1059 margin: 48px 0 32px 0; }
1066 @media (max-width: 768px) { 1060 @media (max-width: 768px) {
1067 .center .card-icon { 1061 .center .card-icon {
1068 margin-top: 32px; } } 1062 margin-top: 32px; } }
1069 @media (max-width: 544px) { 1063 @media (max-width: 544px) {
1070 .center .card-icon { 1064 .center .card-icon {
(...skipping 242 matching lines...) Expand 10 before | Expand all | Expand 10 after
1313 .group.cards { 1307 .group.cards {
1314 display: grid; 1308 display: grid;
1315 grid-template-columns: repeat(1, 1fr); } 1309 grid-template-columns: repeat(1, 1fr); }
1316 @media (min-width: 350px) { 1310 @media (min-width: 350px) {
1317 .group.cards { 1311 .group.cards {
1318 grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } } 1312 grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } }
1319 .group.cards .card { 1313 .group.cards .card {
1320 display: inline-grid; 1314 display: inline-grid;
1321 width: 100%; 1315 width: 100%;
1322 grid-template-rows: auto 1fr auto; } 1316 grid-template-rows: auto 1fr auto; }
1323 @media all { 1317 .group.cards .card-summary {
1324 .group.cards .card-summary { 1318 height: auto; }
1325 height: auto; } }
1326 @media (min-width: 992px) { 1319 @media (min-width: 992px) {
1327 .group-4.cards { 1320 .group-4.cards {
1328 grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); } } 1321 grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); } }
1329 @media (min-width: 768px) { 1322 @media (min-width: 768px) {
1330 .group-5.cards { 1323 .group-5.cards {
1331 grid-template-columns: repeat(auto-fit, minmax(33.3%, 1fr)); } } 1324 grid-template-columns: repeat(auto-fit, minmax(33.3%, 1fr)); } }
1332 @media (min-width: 992px) { 1325 @media (min-width: 992px) {
1333 .group-5.cards { 1326 .group-5.cards {
1334 grid-template-columns: repeat(auto-fit, minmax(20%, 1fr)); } } 1327 grid-template-columns: repeat(auto-fit, minmax(20%, 1fr)); } }
1335 @media all { 1328 .group-5.cards > div:nth-child(4),
1336 .group-5.cards > div:nth-child(4), 1329 .group-5.cards > div:nth-child(5) {
1337 .group-5.cards > div:nth-child(5) { 1330 margin-left: 0; }
1338 margin-left: 0; } } 1331 @media (min-width: 768px) and (max-width: 991px) {
1339 @media (min-width: 768px) and (max-width: 992px) {
1340 .group-5.cards > div:nth-child(4) { 1332 .group-5.cards > div:nth-child(4) {
1341 margin-left: 50%; } } 1333 margin-left: 50%; } }
1342 @media (min-width: 700px) and (max-width: 992px) { 1334 @media (min-width: 700px) and (max-width: 991px) {
1343 .group-5.cards > div:nth-child(5) { 1335 .group-5.cards > div:nth-child(5) {
1344 margin-left: 50%; } } } 1336 margin-left: 50%; } } }
1345 1337
1346 .masthead-img > img { 1338 .masthead-img > img {
1347 width: 100%; 1339 width: 100%;
1348 margin: 32px 0; } 1340 margin: 32px 0; }
1349 1341
1350 @media (max-width: 767px) { 1342 @media (max-width: 767px) {
1351 .masthead.bg-info { 1343 .masthead.bg-info {
1352 background-color: #FFFFFF; } } 1344 background-color: #FFFFFF; } }
(...skipping 389 matching lines...) Expand 10 before | Expand all | Expand 10 after
1742 height: 0; 1734 height: 0;
1743 content: " "; 1735 content: " ";
1744 border-top: 2px solid #FFFFFF; } 1736 border-top: 2px solid #FFFFFF; }
1745 #footer a { 1737 #footer a {
1746 color: #FFFFFF; } 1738 color: #FFFFFF; }
1747 #footer a:hover { 1739 #footer a:hover {
1748 text-decoration: underline; 1740 text-decoration: underline;
1749 color: #8CC63E !important; } 1741 color: #8CC63E !important; }
1750 #footer p { 1742 #footer p {
1751 color: #E1E1E1; } 1743 color: #E1E1E1; }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld