feat: exploded cards css

nypesap · Nov 8, 2024 · bd5edb0 · bd5edb0
1 parent 2fd5d1e
commit bd5edb0
Showing 1 changed file with 63 additions and 0 deletions.
diff --git a/mkdocs_nype/templates/assets/stylesheets/nype-main.css b/mkdocs_nype/templates/assets/stylesheets/nype-main.css
@@ -404,4 +404,67 @@
     margin: 1em 0;
 }
 
+/* #endregion */
+
+/* #region exploded cards based on Material for MkDocs homepage mdx-expect */
+
+.nype-exploded-cards {
+    margin: 2.4rem 0;
+}
+
+.nype-exploded-cards h2 {
+    font-weight: 700;
+    margin-top: .175em;
+}
+
+.nype-exploded-cards h2 + h3 {
+    font-size: 1em;
+    margin-top: -.8em;
+}
+
+.nype-exploded-cards > ul ul {
+    margin-left: 0 !important;
+}
+
+.nype-exploded-cards > ul li {
+    margin-left: 0 !important;
+}
+
+.nype-exploded-cards > ul {
+    display: flex !important;
+    flex-flow: row wrap;
+    gap: 1.6rem;
+    padding: 0;
+}
+
+.nype-exploded-cards > ul > li {
+    display: flex;
+    flex: 1 0 48%;
+    gap: .6rem;
+    margin: 0;
+    transition: transform .75s cubic-bezier(.075, .85, .175, 1), opacity .75s;
+}
+
+.nype-exploded-card-icon .twemoji {
+    all: revert !important;
+}
+
+.nype-exploded-card-icon .twemoji svg {
+    all: revert !important;
+}
+
+.nype-exploded-card-icon {
+    fill: currentcolor;
+    background-color: var(--md-default-fg-color--lightest);
+    border-radius: 100%;
+    flex-shrink: 0;
+    height: 2.2rem;
+    padding: .4rem;
+    width: 2.2rem;
+}
+
+.nype-exploded-card-description > :last-child {
+    margin-bottom: 0;
+}
+
 /* #endregion */