Styling grid, not the html

assets/css/components/content-grid.css

@@ -1,62 +0,0 @@
-.post-content {
-    display: grid;
-    grid-row-gap: 1.5em;
-    grid-template-columns:
-    [full-start]
-      minmax(calc(calc(100% - 720px) / 2), 1fr)
-        [wide-start]
-            1fr
-                [main-start]
-                      repeat(10, [col-start] 1fr)
-                [main-end]
-            1fr
-        [wide-end]
-      minmax(calc(calc(100% - 720px) / 2), 1fr)
-    [full-end]
-    ;
-}
-
-@media (max-width: 600px) {
-    .post-content {
-        grid-template-columns:
-            [full-start]
-              minmax(calc(calc(100% - 720px) / 2), 1fr)
-                [wide-start main-start]
-                    repeat(10, [col-start] 1fr)
-                [main-end wide-end]
-              minmax(calc(calc(100% - 720px) / 2), 1fr)
-            [full-end]
-        ;
-    }
-}
-
-.post-content > * {
-    grid-column: main-start / main-end;
-}
-
-.kg-width-wide {
-    grid-column: wide-start / wide-end;
-}
-
-.kg-width-full {
-    grid-column: full-start / full-end;
-}
-
-.kg-width-full.kg-image-card {
-    display: grid;
-    grid-template-columns: inherit;
-}
-
-.kg-width-full.kg-image-card img {
-    grid-column: inherit;
-}
-
-.kg-width-full.kg-image-card figcaption {
-    grid-column: main-start / main-end;
-    padding-left: 0;
-}
-
-.post-content pre,
-.post-content figure {
-    max-width: 100%;
-}

assets/css/components/content.css

@@ -1,4 +1,51 @@
 
+/* Content grid
+/* ---------------------------------------------------------- */
+.gh-content {
+    display: grid;
+    grid-row-gap: 1.5em;
+    grid-template-columns:
+    [full-start]
+      minmax(calc(calc(100% - 720px) / 2), 1fr)
+        [wide-start]
+            1fr
+                [main-start]
+                      repeat(10, [col-start] 1fr)
+                [main-end]
+            1fr
+        [wide-end]
+      minmax(calc(calc(100% - 720px) / 2), 1fr)
+    [full-end]
+    ;
+}
+
+@media (max-width: 600px) {
+    .gh-content {
+        grid-template-columns:
+            [full-start]
+              minmax(calc(calc(100% - 720px) / 2), 1fr)
+                [wide-start main-start]
+                    repeat(10, [col-start] 1fr)
+                [main-end wide-end]
+              minmax(calc(calc(100% - 720px) / 2), 1fr)
+            [full-end]
+        ;
+    }
+}
+
+.gh-content > * {
+    grid-column: main-start / main-end;
+}
+
+.kg-width-wide {
+    grid-column: wide-start / wide-end;
+}
+
+.kg-width-full {
+    grid-column: full-start / full-end;
+}
+
+
 /* Tables
 /* ---------------------------------------------------------- */
 
@@ -59,16 +106,14 @@ tfoot {
     margin: 7vw 0;
 }
 
+/* Do we need this anymore?
 .kg-embed-card {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
 }
-
+*/
-.kg-image {
-    max-width: 100%;
-}
 
 .kg-card figcaption {
     padding: 1.5rem;
@@ -80,58 +125,34 @@ tfoot {
     opacity: 0.4;
 }
 
+.gh-content > pre {
+    overflow: scroll;
+    border-radius: 5px;
+    box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
+    padding: 16px 20px;
+}
 
-/* Wide cards
+/* Card captions
 /* ---------------------------------------------------------- */
-
+.kg-width-full.kg-card-hascaption {
-.kg-width-wide {
+    display: grid;
-    position: relative;
+    grid-template-columns: inherit;
-    width: 75vw;
-    min-width: 100%;
-    margin-left: calc(50% - 50vw);
-    margin-right: calc(50% - 50vw);
-    transform: translateX(calc(50vw - 50%));
 }
 
-.kg-width-full {
+.kg-width-wide.kg-card-hascaption img {
-    position: relative;
+    grid-column: wide-start / wide-end;
-    width: 94vw;
+}
-    min-width: 100%;
+.kg-width-full.kg-card-hascaption img {
-    margin-left: calc(50% - 50vw);
+    grid-column: full-start / full-end;
-    margin-right: calc(50% - 50vw);
-    transform: translateX(calc(50vw - 50%));
 }
 
-.kg-width-full figcaption {
+.kg-width-full.kg-card-hascaption figcaption {
-    padding-left: 0;
+    grid-column: main-start / main-end;
-    padding-right: 0;
-    text-align: left;
-}
-
-@media (max-width: 800px) {
-    .kg-width-full {
-        width: 100vw;
-    }
-    .kg-width-full figcaption {
-        padding-left: 6vw;
-    }
 }
 
 
 /* Galleries
 /* ---------------------------------------------------------- */
-
-.kg-gallery-container {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    width: 75vw;
-    min-width: 100%;
-    margin-left: calc(50% - 50vw);
-    margin-right: calc(50% - 50vw);
-    transform: translateX(calc(50vw - 50%));
-}
-
 .kg-gallery-row {
     display: flex;
     flex-direction: row;
@@ -153,32 +174,10 @@ tfoot {
     margin: 0 0 0 0.75em;
 }
 
-.kg-gallery-card + .kg-image-card.kg-width-wide,
-.kg-gallery-card + .kg-gallery-card,
-.kg-image-card.kg-width-wide + .kg-gallery-card,
-.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
-    margin-top: calc( -7vw + 0.75em );
-}
-
-/* Code Cards
-/* ---------------------------------------------------------- */
-
-.kg-code-card {
-    width: 100%;
-}
-
-.kg-code-card pre {
-    margin: 0;
-}
-
 
 /* Bookmark Cards
 /* ---------------------------------------------------------- */
 
-.kg-bookmark-card {
-    width: 100%;
-}
-
 .kg-bookmark-container {
     display: flex;
     min-height: 148px;
@@ -205,7 +204,7 @@ tfoot {
 }
 
 .kg-bookmark-title {
-    color: #131313;
+    color: inherit;
     font-size: 1.6rem;
     line-height: 1.5em;
     font-weight: 600;
@@ -220,7 +219,6 @@ tfoot {
     font-weight: 400;
     max-height: 44px;
     overflow-y: hidden;
-
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }
@@ -239,7 +237,6 @@ tfoot {
     width: 100%;
     height: 100%;
     border-radius: 0 3px 3px 0;
-
     object-fit: cover;
 }
 

assets/css/components/grid.css

@@ -1,126 +0,0 @@
-/* Grid
-/* ---------------------------------------------------------- */
-
-.row {
-    display: flex;
-    flex: 0 1 auto;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0 -1rem;
-}
-
-.col,
-.col-1,
-.col-2,
-.col-3,
-.col-4,
-.col-5,
-.col-6,
-.col-7,
-.col-8,
-.col-9,
-.col-10,
-.col-11,
-.col-12 {
-    padding: 1rem;
-}
-
-.col {
-    flex-grow: 1;
-    flex-basis: 0;
-    max-width: 100%;
-}
-
-.col-1 {
-    flex-basis: 8.3333333%;
-    max-width: 8.3333333%;
-}
-
-.col-2 {
-    flex-basis: 16.6666666%;
-    max-width: 16.6666666%;
-}
-
-.col-3 {
-    flex-basis: 25%;
-    max-width: 25%;
-}
-
-.col-4 {
-    flex-basis: 33.3333333%;
-    max-width: 33.3333333%;
-}
-
-.col-5 {
-    flex-basis: 41.6666666%;
-    max-width: 41.6666666%;
-}
-
-.col-6 {
-    flex-basis: 50%;
-    max-width: 50%;
-}
-
-.col-7 {
-    flex-basis: 58.3333333%;
-    max-width: 58.3333333%;
-}
-
-.col-8 {
-    flex-basis: 66.6666666%;
-    max-width: 66.6666666%;
-}
-
-.col-9 {
-    flex-basis: 75%;
-    max-width: 75%;
-}
-
-.col-10 {
-    flex-basis: 83.3333333%;
-    max-width: 83.3333333%;
-}
-
-.col-11 {
-    flex-basis: 91.6666666%;
-    max-width: 91.6666666%;
-}
-
-.col-12 {
-    flex-basis: 100%;
-    max-width: 100%;
-}
-
-@media (max-width: 800px) {
-    .col-1,
-    .col-2,
-    .col-3,
-    .col-4,
-    .col-5,
-    .col-6,
-    .col-7,
-    .col-8,
-    .col-9,
-    .col-10,
-    .col-11 {
-        flex-basis: 50%;
-        max-width: 50%;
-    }
-}
-
-@media (max-width: 600px) {
-    .col-1,
-    .col-2,
-    .col-3,
-    .col-4,
-    .col-5,
-    .col-6,
-    .col-7,
-    .col-8,
-    .col-9,
-    .col-10,
-    .col-11 {
-        flex-basis: 100%;
-        max-width: 100%;
-    }
-}