Fixes a regression in the demo css that busted cards demo

AgnosticUI · Sep 15, 2020 · 956ccac · 956ccac
1 parent df73a80
commit 956ccac
Showing 1 changed file with 118 additions and 118 deletions.
diff --git a/agnosticui-css/card.html b/agnosticui-css/card.html
@@ -49,131 +49,131 @@
       /* Kind of cludgy, but this will preserve your main font within the smart quotes */
       font-family: inherit;
       quotes: "“""”""‘""’";
+    }
 
-      /* This is demo specific styling for a couple of the cards example's
+    /* This is demo specific styling for a couple of the cards example's
     child content. The reusable cards stuff is all in card.css */
+    .card-tags {
+      margin: 0 -8px;
+    }
+
+    .card-tag {
+      display: inline-block;
+      margin: 8px;
+      font-size: .875em;
+      text-transform: uppercase;
+      font-weight: 600;
+      letter-spacing: .02em;
+      color: var(--primary);
+    }
+
+    .card-title {
+      margin: 0;
+      font-size: clamp(1.4em, 2.1vw, 2.1em);
+      font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
+    }
+
+    .card-title a {
+      text-decoration: none;
+      color: inherit;
+    }
+
+    .card-metadata {
+      margin: 0;
+    }
+
+    .card-rating {
+      font-size: 1.2em;
+      letter-spacing: 0.05em;
+      color: var(--primary);
+    }
+
+    .card-rating span {
+      color: var(--grey);
+    }
+
+    .card-votes {
+      font-size: .825em;
+      font-style: italic;
+      color: var(--lightgrey);
+    }
+
+    .card-image-wrap {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      position: relative;
+      box-sizing: border-box;
+      width: 100%;
+      flex: 3 1 30ch;
+      height: calc(282px + 5vw);
+      overflow: hidden;
+    }
 
-      .card-tags {
-        margin: 0 -8px;
-      }
-
-      .card-tag {
-        display: inline-block;
-        margin: 8px;
-        font-size: .875em;
-        text-transform: uppercase;
-        font-weight: 600;
-        letter-spacing: .02em;
-        color: var(--primary);
-      }
-
-      .card-title {
-        margin: 0;
-        font-size: clamp(1.4em, 2.1vw, 2.1em);
-        font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
-      }
-
-      .card-title a {
-        text-decoration: none;
-        color: inherit;
-      }
-
-      .card-metadata {
-        margin: 0;
-      }
-
-      .card-rating {
-        font-size: 1.2em;
-        letter-spacing: 0.05em;
-        color: var(--primary);
-      }
-
-      .card-rating span {
-        color: var(--grey);
-      }
-
-      .card-votes {
-        font-size: .825em;
-        font-style: italic;
-        color: var(--lightgrey);
-      }
-
-      .card-image-wrap {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        position: relative;
-        box-sizing: border-box;
-        width: 100%;
-        flex: 3 1 30ch;
-        height: calc(282px + 5vw);
-        overflow: hidden;
-      }
-
-      /* This technique will help you, but please consider using <picture> and let a tool light
+    /* This technique will help you, but please consider using <picture> and let a tool light
       Lighthouse guide you on how to optimize your images for each source media breakpoint */
-      .card-image-wrap img {
-        max-width: 100%;
-        min-height: 100%;
-        width: auto;
-        height: auto;
-        object-fit: cover;
-        object-position: 50% 50%;
-      }
-
-      .card-content {
-        padding: 16px 32px;
-        flex: 4 1 40ch;
-      }
-
-      /* Stacked uses normal flex defaults */
-      .card-stacked .card-content,
-      .card-stacked .card-image-wrap {
-        flex: 1 1 auto;
-        height: auto;
-      }
-
-      .card-save {
-        display: flex;
-        align-items: center;
-        padding: 6px 14px 6px 12px;
-        border-radius: 4px;
-        border: 2px solid currentColor;
-        color: var(--primary);
-        background: none;
-        cursor: pointer;
-        font-weight: bold;
-      }
-
-      .card-save svg {
-        margin-right: 6px;
-      }
-
-      /**
+    .card-image-wrap img {
+      max-width: 100%;
+      min-height: 100%;
+      width: auto;
+      height: auto;
+      object-fit: cover;
+      object-position: 50% 50%;
+    }
+
+    .card-content {
+      padding: 16px 32px;
+      flex: 4 1 40ch;
+    }
+
+    /* Stacked uses normal flex defaults */
+    .card-stacked .card-content,
+    .card-stacked .card-image-wrap {
+      flex: 1 1 auto;
+      height: auto;
+    }
+
+    .card-save {
+      display: flex;
+      align-items: center;
+      padding: 6px 14px 6px 12px;
+      border-radius: 4px;
+      border: 2px solid currentColor;
+      color: var(--primary);
+      background: none;
+      cursor: pointer;
+      font-weight: bold;
+    }
+
+    .card-save svg {
+      margin-right: 6px;
+    }
+
+    /**
      * AgnosticUI does not offer a .cards-demo -- this is just an example of how
      * you may want to wrap a card to produce a row of cards with flexbox
      */
-      .cards-demo {
-        display: flex;
-        align-items: center;
-        justify-items: center;
-        flex-wrap: wrap;
-        margin-top: 32px;
-        margin-bottom: 32px;
-      }
-
-      .cards-demo .card {
-        flex: 1;
-        padding: 24px;
-      }
-
-      .cards-demo .card .btn {
-        margin-right: 16px;
-      }
-
-      .cards-demo .card:not(:last-child) {
-        margin-right: 24px;
-      }
+    .cards-demo {
+      display: flex;
+      align-items: center;
+      justify-items: center;
+      flex-wrap: wrap;
+      margin-top: 32px;
+      margin-bottom: 32px;
+    }
+
+    .cards-demo .card {
+      flex: 1;
+      padding: 24px;
+    }
+
+    .cards-demo .card .btn {
+      margin-right: 16px;
+    }
+
+    .cards-demo .card:not(:last-child) {
+      margin-right: 24px;
+    }
   </style>
 </head>