From 7af271ce43be28b531c71c40b140678f6cbb03f2 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 31 Jan 2024 13:10:08 +0900
Subject: [PATCH] docs: rewrite css to avoid nesting

---
 website/src/css/custom.css | 116 +++++++++++++++++++------------------
 1 file changed, 59 insertions(+), 57 deletions(-)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 069a780879..7c492d1d2f 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -231,7 +231,8 @@ html[data-theme='dark'] .links-container {
 }
 
 .links-container {
-    margin-block: var(--ifm-spacing-vertical);
+    margin-block-start: var(--ifm-spacing-vertical);
+    margin-block-end: var(--ifm-spacing-vertical);
     --button-background-color: var(--color-purple);
     --border-color: var(--ifm-color);
 }
@@ -314,7 +315,8 @@ html[data-theme='dark'] .links-container {
     --banner-padding: calc(var(--ifm-spacing-vertical) * 3);
     --banner-font-color: #000;
 
-    margin-block: var(--ifm-spacing-vertical);
+    margin-block-start: var(--ifm-spacing-vertical);
+    margin-block-end: var(--ifm-spacing-vertical);
     position: relative;
     border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
     padding: var(--banner-padding);
@@ -425,7 +427,8 @@ html[data-theme='dark'] .links-container {
     --banner-padding: calc(var(--ifm-spacing-vertical) * 3);
     --banner-font-color: #000;
 
-    margin-block: var(--ifm-spacing-vertical);
+    margin-block-start: var(--ifm-spacing-vertical);
+    margin-block-end: var(--ifm-spacing-vertical);
     position: relative;
     border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
     padding: var(--banner-padding);
@@ -535,11 +538,13 @@ html[data-theme='dark'] .links-container {
     }
 }
 
+/* Styles for .course-banner-container */
 .course-banner-container {
     --banner-padding: calc(var(--ifm-spacing-vertical) * 3);
     --banner-font-color: #000;
 
-    margin-block: var(--ifm-spacing-vertical);
+    margin-block-start: var(--ifm-spacing-vertical);
+    margin-block-end: var(--ifm-spacing-vertical);
     border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
     padding: var(--banner-padding);
     border-radius: var(--ifm-global-radius);
@@ -548,61 +553,58 @@ html[data-theme='dark'] .links-container {
     background-repeat: no-repeat;
     overflow: hidden;
     color: var(--banner-font-color);
-
-    &.beginners {
-        background-image: url('/img/unleash-academy/beginner-pixels-l.svg');
-    }
-
-    &.advanced {
-        /* todo: rewrite this to use the large advanced pixels */
-        background-image: url('/img/unleash-academy/beginner-pixels-l.svg');
-    }
-
-    > * + * {
-        margin-top: var(--ifm-spacing-vertical);
-    }
-
-    .level {
-        border: 2px solid var(--ifm-link-color);
-        border-radius: 60px;
-        color: var(--unleash-logo-purple);
-        padding-inline: calc(var(--ifm-spacing-horizontal) * .5);
-        text-transform: capitalize;
-    }
-
-    p {
-        font-size: 1.4em;
-    }
-
-    ul {
-        grid-area: bullets;
-        display: flex;
-        flex-wrap: wrap !important;
-        flex-flow: row;
-        gap: calc( var(--ifm-spacing-horizontal) * 2);
-        padding-inline-start: 0;
-    }
-
-
-    li {
-        font-weight: bold;
-        list-style-type: none;
-        background-image: url('/img/unleash-academy/bullet-check.svg');
-        background-repeat: no-repeat;
-        background-position: left center;
-        padding-left: 30px;
-    }
-
-
-    li::marker {
-        height: 100%;
-    }
-
-    li + li {
-        margin-block-start: 0;
-    }
 }
 
+.course-banner-container.beginners {
+    background-image: url('/img/unleash-academy/beginner-pixels-l.svg');
+}
+
+.course-banner-container.advanced {
+    /* todo: rewrite this to use the large advanced pixels */
+    background-image: url('/img/unleash-academy/beginner-pixels-l.svg');
+}
+
+.course-banner-container > * + * {
+    margin-top: var(--ifm-spacing-vertical);
+}
+
+.course-banner-container .level {
+    border: 2px solid var(--ifm-link-color);
+    border-radius: 60px;
+    color: var(--unleash-logo-purple);
+    padding-inline: .5em;
+    text-transform: capitalize;
+}
+
+.course-banner-container p {
+    font-size: 1.4em;
+}
+
+.course-banner-container ul {
+    grid-area: bullets;
+    display: flex;
+    flex-wrap: wrap !important;
+    flex-flow: row;
+    gap: calc(var(--ifm-spacing-horizontal) * 2);
+    padding-inline-start: 0;
+}
+
+.course-banner-container li {
+    font-weight: bold;
+    list-style-type: none;
+    background-image: url('/img/unleash-academy/bullet-check.svg');
+    background-repeat: no-repeat;
+    background-position: left center;
+    padding-left: 30px;
+}
+
+.course-banner-container li::marker {
+    height: 100%;
+}
+
+.course-banner-container li + li {
+    margin-block-start: 0;
+}
 
 
 /* docusaurus-plugin-openapi-docs styling