gitea-mirror/hacktricks-cloud
1
0
Fork 0
mirror of https://github.com/HackTricks-wiki/hacktricks-cloud.git synced 2026-07-28 14:47:17 -07:00
Code Issues Packages Projects Releases Wiki Activity

Improve sponsor ad hover layout

Browse Source
This commit is contained in:
Carlos Polop
2026-07-03 23:05:07 +02:00
parent 36c997b8f0
commit 42c3a88de7
1 changed files with 41 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme/pagetoc.css
+41 -25
View File
@@ -127,6 +127,7 @@
padding: 5px; padding: 5px;
display: none; /*changed via JS once ad is loaded*/ display: none; /*changed via JS once ad is loaded*/
flex-direction: column; flex-direction: column;
align-items: center;
text-decoration: none !important; text-decoration: none !important;
overflow: hidden; overflow: hidden;
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
@@ -141,27 +142,31 @@
object-fit: contain; object-fit: contain;
align-self: center; align-self: center;
flex: 0 0 auto; flex: 0 0 auto;
transition-property: all; transition:
transition-timing-function: cubic-bezier(.4,0,.2,1); height .36s cubic-bezier(.22,1,.36,1),
transition-duration: .3s; width .36s cubic-bezier(.22,1,.36,1),
max-height .36s cubic-bezier(.22,1,.36,1),
min-height .36s cubic-bezier(.22,1,.36,1),
padding .36s cubic-bezier(.22,1,.36,1),
transform .36s cubic-bezier(.22,1,.36,1);
} }
.sidesponsor:hover img{ .sidesponsor:hover img{
width: 42px; width: 56px;
padding: 4px; padding: 4px;
grid-area: sponsor-image; grid-area: sponsor-image;
align-self: center; align-self: center;
transition-duration: 0s; justify-self: center;
} }
.sidesponsor:hover { .sidesponsor:hover {
display: grid !important; display: grid !important;
grid-template-columns: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
grid-template-rows: max-content minmax(0, 1fr) auto; grid-template-rows: max-content max-content minmax(0, 1fr) auto;
grid-template-areas: grid-template-areas:
"sponsor-image sponsor-title" "sponsor-image"
"sponsor-description sponsor-description" "sponsor-title"
"sponsor-cta sponsor-cta"; "sponsor-description"
column-gap: 8px; "sponsor-cta";
row-gap: 10px; row-gap: 3px;
align-items: center; align-items: center;
align-content: start; align-content: start;
overflow: hidden; overflow: hidden;
@@ -177,6 +182,7 @@
color: var(--sponsor-fg); color: var(--sponsor-fg);
overflow-wrap: anywhere; overflow-wrap: anywhere;
text-align: center; text-align: center;
align-self: center;
flex: 0 0 auto; flex: 0 0 auto;
} }
.sidesponsor .sponsor-title.sponsor-title--long { .sidesponsor .sponsor-title.sponsor-title--long {
@@ -184,13 +190,15 @@
} }
.sidesponsor:hover .sponsor-title{ .sidesponsor:hover .sponsor-title{
grid-area: sponsor-title; grid-area: sponsor-title;
margin-left: 0; margin-left: 8px;
margin-right: 8px;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
font-size: 1.55rem; font-size: 1.45rem;
line-height: 1.15; line-height: 1.1;
overflow-wrap: anywhere; overflow-wrap: anywhere;
align-self: center; align-self: center;
justify-self: center;
} }
.sidesponsor .sponsor-description{ .sidesponsor .sponsor-description{
display: block; display: block;
@@ -203,23 +211,31 @@
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
overflow: hidden; overflow: hidden;
transform: translateY(5px);
transition: transition:
opacity .18s ease .14s, max-height .44s cubic-bezier(.22,1,.36,1),
visibility 0s linear .32s; opacity .34s ease .08s,
transform .44s cubic-bezier(.22,1,.36,1),
visibility 0s linear .44s;
} }
.sidesponsor:hover .sponsor-description{ .sidesponsor:hover .sponsor-description{
grid-area: sponsor-description; grid-area: sponsor-description;
align-self: start;
min-height: 0; min-height: 0;
max-height: 100%; max-height: 100%;
margin-top: 0; margin-top: 3px;
margin-bottom: 0; margin-bottom: 0;
font-size: calc(1em - 1px); font-size: calc(1em - 1px);
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transform: translateY(0);
overflow: auto; overflow: auto;
overscroll-behavior: contain; overscroll-behavior: contain;
animation: sponsorTextReveal .12s ease .18s forwards; transition:
transition: none; max-height .44s cubic-bezier(.22,1,.36,1),
opacity .36s ease .08s,
transform .44s cubic-bezier(.22,1,.36,1),
visibility 0s linear 0s;
} }
.sidesponsor .sponsor-cta{ .sidesponsor .sponsor-cta{
margin-top: auto; margin-top: auto;
@@ -235,20 +251,20 @@
} }
.sidesponsor:hover .sponsor-cta{ .sidesponsor:hover .sponsor-cta{
grid-area: sponsor-cta; grid-area: sponsor-cta;
margin-top: 22px; margin-top: 4px;
margin-bottom: 8px; margin-bottom: 2px;
padding: 9px 14px; padding: 11px 18px;
box-sizing: border-box; box-sizing: border-box;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 1.2rem; font-size: 1.3rem;
font-weight: 800; font-weight: 800;
line-height: 1.1; line-height: 1.1;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
animation: sponsorTextReveal .12s ease .18s forwards; animation: sponsorTextReveal .28s ease .12s forwards;
} }
@keyframes sponsorTextReveal { @keyframes sponsorTextReveal {
0% { 0% {