feat: getting-started shows stacked icons in responsive layout

Signed-off-by: Marc Nuri <[email protected]>
eclipse-jkube · Aug 10, 2023 · 5acfaa2 · 5acfaa2
1 parent 1be7e2a
commit 5acfaa2
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/src/content/index.md b/src/content/index.md
@@ -34,7 +34,7 @@ Eclipse JKube also provides a set of tools such as watch, debug, log, etc. to im
        <GettingStartedTab
           id='kubernetes-maven-plugin'
           title={<><MavenIcon /> Maven &nbsp; <KubernetesIcon /> Kubernetes</>}
-          titleCompact={<><MavenIcon /> <KubernetesIcon /></>}
+          titleCompact={<><MavenIcon /><KubernetesIcon /></>}
           videoId='FHz5q8ERtPk'
        >
           <Tag color='#FFF' backgroundColor='#DD8623'>[🚀 Getting started](/docs/kubernetes-maven-plugin/#getting-started)</Tag>
@@ -63,7 +63,7 @@ Eclipse JKube also provides a set of tools such as watch, debug, log, etc. to im
        <GettingStartedTab
           id='openshift-maven-plugin'
           title={<><MavenIcon /> Maven &nbsp; <OpenShiftIcon hideText={true} /> OpenShift</>}
-          titleCompact={<><MavenIcon /> <OpenShiftIcon hideText={true} /></>}
+          titleCompact={<><MavenIcon /><OpenShiftIcon hideText={true} /></>}
           videoId='ZJzfD-bDxpc'
        >
           <Tag color='#FFF' backgroundColor='#DD8623'>[🚀 Getting started](/docs/openshift-maven-plugin/#getting-started)</Tag>
@@ -91,7 +91,7 @@ Eclipse JKube also provides a set of tools such as watch, debug, log, etc. to im
        <GettingStartedTab
           id='kubernetes-gradle-plugin'
           title={<><GradleIcon variant='light' /> Gradle &nbsp; <KubernetesIcon /> Kubernetes</>}
-          titleCompact={<><GradleIcon variant='light' /> <KubernetesIcon /></>}
+          titleCompact={<><GradleIcon variant='light' /><KubernetesIcon /></>}
           videoId='TUYl2Vw8bnQ'
        >
           <Tag color='#FFF' backgroundColor='#DD8623'>[🚀 Getting started](/docs/kubernetes-gradle-plugin/#getting-started)</Tag>
@@ -114,7 +114,7 @@ Eclipse JKube also provides a set of tools such as watch, debug, log, etc. to im
        <GettingStartedTab
           id='openshift-gradle-plugin'
           title={<><GradleIcon variant='light' /> Gradle &nbsp; <OpenShiftIcon hideText={true} /> OpenShift</>}
-          titleCompact={<><GradleIcon variant='light' /> <OpenShiftIcon hideText={true} /></>}
+          titleCompact={<><GradleIcon variant='light' /><OpenShiftIcon hideText={true} /></>}
           videoId='uMxEzLdqcik'
        >
           <Tag color='#FFF' backgroundColor='#DD8623'>[🚀 Getting started](/docs/openshift-gradle-plugin/#getting-started)</Tag>

diff --git a/src/styles/templates/main.scss b/src/styles/templates/main.scss
@@ -26,6 +26,25 @@
     :not(pre) > code[class*="language-"], pre[class*="language-"] {
       background-color: transparent;
     }
+    .eclipse-jkube-tabs__tab-title--sm {
+      position: relative;
+      svg {
+        $title-margin: 0.3rem;
+        &:nth-child(1) {
+          z-index: 1;
+          opacity: 75%;
+          padding-top: $title-margin * 1.5;
+          padding-right: $title-margin * 3;
+        }
+        &:nth-child(2) {
+          position: absolute;
+          z-index: 0;
+          height: 1.1rem;
+          top: $title-margin;
+          right: $title-margin;
+        }
+      }
+    }
     .section-dark {
       @include full-width;
       background-color: $color-dark-background;