[plugins] Makes plugin page responsive

Author: jacomyal

src/pages/desktop/index.astro

@@ -28,7 +28,7 @@ import Layout from "../../layouts/Layout.astro";
 
           <DownloadGephiDesktop withAlternativeLinks />
         </div>
-        <div class="banner-image">
+        <div class="banner-image banner-logo">
           <Image src="/icons/gephi-desktop-logo-inverted.svg" alt="Gephi logo" width="400" height="400" />
         </div>
       </div>

src/pages/desktop/plugins/[id].astro

@@ -5,6 +5,7 @@ import { marked } from "marked";
 
 import Layout from "../../../layouts/Layout.astro";
 import type { Plugin } from "./type";
+import { Image } from "astro:assets";
 
 interface Props {
   plugin: Plugin;
@@ -33,30 +34,31 @@ try {
 ---
 
 <Layout class="plugin-page">
-  <header class="banner">
+  <header class="banner py-4">
     <div class="container">
-      <div class="py-3">
+      <div class="banner-top">
         <a class="text-white" href="/desktop">Gephi</a> > <a class="text-white" href="/desktop/plugins">Gephi plugins</a
         > > <a class="text-white" href={`/desktop/plugins?categories=${plugin.category}`}>{plugin.category} plugins</a>
       </div>
 
-      <div class="content my-3 pb-5 pt-3">
+      <div class="banner-contents">
+        <div class="banner-texts gap-3">
+          <h1 class="fs-2">{plugin.name}</h1>
+
+          <p class="fs-4">{plugin.short_description}</p>
+          <p class="fs-5 opacity-75">last updated on {plugin.last_update}</p>
+        </div>
         {
           !!plugin.images?.length && (
-            <img
-              class="flex-shrink-0"
-              src={`https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${plugin.images[0].image}`}
-            />
+            <div class="banner-image">
+              <img
+                class="flex-shrink-0 bg-white"
+                src={`https://raw.githubusercontent.com/gephi/gephi-plugins/refs/heads/gh-pages/plugins/${plugin.images[0].image}`}
+                alt=""
+              />
+            </div>
           )
         }
-
-        <section class="flex-grow-1">
-          <div class="">
-            <h1>{plugin.name}</h1>
-            <div class="fs-4">last updated on {plugin.last_update}</div>
-            <p class="fs-4 mt-3">{plugin.short_description}</p>
-          </div>
-        </section>
       </div>
     </div>
   </header>

src/pages/lite/index.astro

@@ -34,7 +34,7 @@ import Layout from "../../layouts/Layout.astro";
             <div class="fs-5 pt-2">Works on desktop, tablets and mobiles</div>
           </div>
         </div>
-        <div class="banner-image">
+        <div class="banner-image banner-logo">
           <Image src="/icons/gephi-lite-logo-inverted.svg" alt="Gephi logo" width="400" height="400" />
         </div>
       </div>

src/styles/_contents.scss

@@ -7,21 +7,31 @@
   background-color: $gray-800;
   @extend .text-light;
 
+  .banner-top {
+    padding-bottom: $spacer-3;
+  }
+
   .banner-contents {
-    @extend .row;
+    display: flex;
+    gap: $spacer-5;
   }
 
   .banner-texts {
-    @extend .col-12;
-    @extend .col-md-7;
-
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
     gap: $spacer-4;
+
+    & > * {
+      margin: 0;
+    }
   }
   .banner-image {
-    @extend .col-12;
-    @extend .col-md-5;
+    width: 28%;
+
+    &.banner-logo {
+      width: 40%;
+    }
 
     text-align: end;
     img {
@@ -185,11 +195,15 @@
     gap: $spacer-3;
   }
   .banner-image {
+    width: 100% !important;
     display: flex;
     justify-content: center;
 
     img {
       height: auto;
+      width: 100%;
+    }
+    &.banner-logo img {
       width: 80%;
     }
   }

src/styles/_plugins.scss

@@ -139,20 +139,6 @@
 }
 
 .plugin-page {
-  .banner .content {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    @extend .gap-5;
-
-    img {
-      background: $white;
-      max-width: 30%;
-      max-height: 300px;
-      height: auto;
-    }
-  }
-
   .thumbnails {
     display: flex;
     flex-direction: row;