Merge pull request #315 from HackTricks-wiki/refine-hovered-sponsor-layout-20260624173941

Refine hovered sponsor layout

Author: carlospolop

theme/pagetoc.css

@@ -106,11 +106,11 @@
         overflow: auto;
         display: flex;
         flex-direction: column;
-        gap:20px;
+        gap:14px;
         background-color: transparent;
     }
     .pagetoc {
-        max-height: 60%;
+        max-height: 48%;
         overflow: auto;
         border-left: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent);
         border-radius: 12px;
@@ -119,8 +119,8 @@
         padding: 4px 4px;
     }
     .sidesponsor {
-        max-height: 40%;
-        height: 40%;
+        max-height: 52%;
+        height: 52%;
         background-color: transparent;
         border: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent);
         border-radius: 8px;
@@ -132,12 +132,12 @@
         backdrop-filter: blur(6px);
     }
     .sidesponsor img {
-        height: 45%;
-        max-height: 150px;
-        min-height: 95px;
+        height: 50%;
+        max-height: 180px;
+        min-height: 110px;
         width: auto;
-        max-width: 78%;
-        padding: 10px;        
+        max-width: 86%;
+        padding: 8px;
         object-fit: contain;
         align-self: center;
         flex: 0 0 auto;
@@ -149,20 +149,20 @@
        width: 42px;
        padding: 4px;
        grid-area: sponsor-image;
-       align-self: start;
+       align-self: center;
        transition-duration: 0s;
     }
     .sidesponsor:hover {
         display: grid !important;
         grid-template-columns: auto minmax(0, 1fr);
-        grid-template-rows: max-content minmax(0, 1fr) max-content;
+        grid-template-rows: max-content minmax(0, 1fr) auto;
         grid-template-areas:
             "sponsor-image sponsor-title"
             "sponsor-description sponsor-description"
             "sponsor-cta sponsor-cta";
         column-gap: 8px;
-        row-gap: 8px;
-        align-items: start;
+        row-gap: 10px;
+        align-items: center;
         align-content: start;
         overflow: hidden;
     }
@@ -172,8 +172,8 @@
         margin-left: 15px;
         margin-right: 15px;
         font-weight: 800;
-        font-size: var(--sponsor-title-font-size, clamp(1.28rem, 7.2cqw, 1.75rem));
-        line-height: 1.08;
+        font-size: var(--sponsor-title-font-size, clamp(1.45rem, 7.8cqw, 2rem));
+        line-height: 1.05;
         color: var(--sponsor-fg);
         overflow-wrap: anywhere;
         text-align: center;
@@ -185,11 +185,12 @@
     .sidesponsor:hover .sponsor-title{
         grid-area: sponsor-title;
         margin-left: 0;
-        margin-top: 6px;
+        margin-top: 0;
         margin-bottom: 0;
         font-size: 1.55rem;
         line-height: 1.15;
         overflow-wrap: anywhere;
+        align-self: center;
     }
     .sidesponsor .sponsor-description{
         display: block;
@@ -234,9 +235,9 @@
     }
     .sidesponsor:hover .sponsor-cta{
         grid-area: sponsor-cta;
-        margin-top: 0;
-        margin-bottom: 4px;
-        padding: 10px 14px;
+        margin-top: 22px;
+        margin-bottom: 8px;
+        padding: 9px 14px;
         box-sizing: border-box;
         max-width: 100%;
         overflow: hidden;
@@ -260,8 +261,8 @@
         }
     }
     .sidesponsor-bsa {
-        max-height: 40%;
-        height: 40%;
+        max-height: 52%;
+        height: 52%;
         background-color: transparent;
         border: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent);
         border-radius: 8px;

theme/sponsor.js

@@ -97,11 +97,11 @@
 
   function getSponsorTitleFontSize(title) {
     if (title.length > 45) {
-      return "1.25rem"
+      return "1.35rem"
     }
 
     if (title.length > 28) {
-      return "1.35rem"
+      return "1.55rem"
     }
 
     return ""