Improve sponsor hover layout

This commit is contained in:
Carlos Polop
2026-05-09 18:50:44 +02:00
parent 39db3878cf
commit 7759eb35db
+29 -2
View File
@@ -139,7 +139,17 @@
transition-duration: .3s;
}
.sidesponsor:hover img{
width: 30%;
width: 52px;
padding: 6px;
grid-column: 1;
grid-row: 1;
}
.sidesponsor:hover {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto;
column-gap: 8px;
align-items: center;
}
.sidesponsor .sponsor-title{
margin-top: 5px;
@@ -150,6 +160,14 @@
font-size: 2rem;
color: var(--sponsor-fg);
}
.sidesponsor:hover .sponsor-title{
grid-column: 2;
grid-row: 1;
margin-left: 0;
font-size: 1.55rem;
line-height: 1.15;
overflow-wrap: anywhere;
}
.sidesponsor .sponsor-description{
display:none;
margin-top: 5px;
@@ -164,7 +182,12 @@
}
.sidesponsor:hover .sponsor-description{
display:block;
grid-column: 1 / -1;
grid-row: 2;
min-height: 0;
margin-top: 8px;
margin-bottom: 8px;
overflow: auto;
}
.sidesponsor .sponsor-cta{
margin-top: auto;
@@ -177,6 +200,10 @@
background-color: var(--fg);
color: var(--bg);
}
.sidesponsor:hover .sponsor-cta{
grid-column: 1 / -1;
grid-row: 3;
}
.sidesponsor-bsa {
max-height: 40%;
height: 40%;