docs: more banner fix

Unleash · Jan 30, 2024 · 99115ee · 99115ee
1 parent 45c05ec
commit 99115ee
Showing 1 changed file with 61 additions and 6 deletions.
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -308,19 +308,45 @@ html[data-theme='dark'] .links-container  {
 }
 /* end certification links */
 
+html[data-theme='dark'] .banner-container  {
+    --button-color: #635dc5;
+}
+
+html[data-theme='light'] .banner-container  {
+    --button-color: var(--unleash-color-purple);
+}
+
+
 .banner-container {
+    --unleash-academy-logo-width: 85px;
+    --banner-padding: calc(var(--ifm-spacing-vertical) * 3);
+    --banner-font-color: #000;
+
+    container-type: inline-size;
     border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
-    padding: calc(var(--ifm-spacing-vertical) * 3);
+    padding: var(--banner-padding);
     border-radius: var(--ifm-global-radius);
     min-height: 282px;
     background-color: #F1F0FC;
     background-image: url('/img/unleash-academy/banner-bg-pixels.svg');
     background-position: top right;
     background-repeat: no-repeat;
+    overflow: hidden;
+    color: var(--banner-font-color);
+
+    .banner {
+        display: grid;
+        grid-template-areas: "header logo"
+                             "bullets bullets"
+                             "button button";
+        grid-template-columns: auto var(--unleash-academy-logo-width);
+        gap: var(--ifm-spacing-horizontal);
+    }
 
     ul {
+        grid-area: bullets;
         display: flex;
-        flex-flow: row;
+        flex-flow: column;
         gap: calc( var(--ifm-spacing-horizontal) * 2);
         padding-inline-start: 0;
     }
@@ -345,10 +371,11 @@ html[data-theme='dark'] .links-container  {
     }
 
     .unleash-action-button {
+        grid-area: button;
         display: block;
         border-radius: var(--ifm-global-radius);
-        width: 240px;
-        background: var(--unleash-color-purple);
+        width: 100%;
+        background: var(--button-color);
         color: white;
         text-align: center;
         padding: calc(var(--ifm-spacing-horizontal) * .5);
@@ -357,16 +384,44 @@ html[data-theme='dark'] .links-container  {
     h3 {
         font-weight: normal;
         font-size: 1.4em;
+        grid-area: header;
     }
 
     .icon {
+        grid-area: logo;
         background-image: url('/img/unleash-academy/academy-logo.svg');
         background-repeat: no-repeat;
-        background-position: left center;
-        width: 4em;
+        background-position: center;
+        width: 100%;
         aspect-ratio: 1;
         background-size: contain;
     }
+
+    @container (width > 700px) {
+        .banner {
+            grid-template-areas: "header logo"
+                                 "bullets logo"
+                                 "button logo";
+            grid-template-columns: 480px auto;
+        }
+
+        ul {
+            flex-flow: row;
+        }
+
+        background: red;
+
+        .unleash-action-button {
+            width: 240px;
+        }
+
+        .icon {
+            background-position: center var(--banner-padding);
+            /* width: 100%; */
+            aspect-ratio: unset;
+            background-size: contain;
+        }
+    }
 }