Issue 4961 - Fix card group field alignment on acceptableads.com

static/scss/components/_cards.scss

 // This file is part of acceptableads.org.
 // Copyright (C) 2016 Eyeo GmbH
 //
 // acceptableads.org is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
 //
 // acceptableads.org is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 13 matching lines @@
   background-color: $primary-bg;
 }
 
 .card %headings
 {
   @extend h3;
   height: $md + $sm;
   margin: $sm 0 $sm 0;
 }
 
+.card article .card-heading 

[juliandoucette, 2017/06/16 19:39:16]

Why article?

[ire, 2017/06/21 07:47:57]

I was selecting the cards on the `pages/committee/index.md`. This replaces the
inline styles that were on that page. (Or are inline styles preferable?)

+{
+  height: auto;
+
+  @media (min-width: 700px)

[juliandoucette, 2017/06/16 19:39:16]

Why 700?

[ire, 2017/06/21 07:47:57]

Sorry, this was supposed to be the $tablet-breakpoint variable :/

+  {
+    height: 120px;
+  }
+}
+
 .card-icon
 {
   margin: $sm 0;
 }
 
 .center .card-icon
 {
   margin: $lg - $sm 0 $md 0;
 }
 
@@ skipping 85 matching lines @@
 .card.list a
 {
   text-decoration: none;
   color: $primary-fg;
 }
 
 .card.list a%active
 {
   color: $accent;
 }
+
+@supports (display: grid) 
+{
+
+  .group .card 

[juliandoucette, 2017/06/16 19:39:16]

I think anything .group should go in _group.scss.

[ire, 2017/06/21 07:47:57]

Acknowledged.

+  {
+    width: 100%;
+    grid-template-rows: auto 1fr auto;
+  }
+
+  .group .card .card-summary 
+  {
+    @media all 

[juliandoucette, 2017/06/16 19:39:17]

Why @media all?

[ire, 2017/06/21 07:47:58]

This is to override the various media queries that are applied in the non-grid
solution. 

+    {
+      height: auto;
+    }
+  }
+
+  .card-footer .m-t-md 
+  {
+    margin-top: 0 !important;

[ire, 2017/06/13 16:51:23]

This is to remove the large top margin that's on the cards on the Solutions page
(e.g. includes/solutions/publishers.md)

[juliandoucette, 2017/06/16 19:39:16]

Perhaps this should go in includes/solutions/styles then (if we do need it) ?

[ire, 2017/06/21 07:47:57]

Okay I will move it then

+  }
+
+}