Style:Portals overview
@gap: 10px;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap: 10px;
margin-top: .5rem;
/*temporary measure to make sure the logo is not in the way*/
@media (max-width: 999px) {
clear: both;
}
> .portals-overview-bubble {
width: ~"min(150px, calc((100% - "2*@gap~") / 3))"; /*raw css necessary to prevent a less bug*/
aspect-ratio: 2/1;
position: relative;
border-radius: 8px;
overflow: hidden;
filter: drop-shadow(0 0 1px black);
> .portals-overview-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at bottom 10px right 10px,rgba(0,0,0,0.8) 0,transparent 60%,transparent 100%);
display: flex;
justify-content:right;
align-items:end;
>a {
text-decoration: none;
color: white;
padding: 0 5px;
text-shadow: black 0px 0px 3px, black 0px 0px 2px;
font-weight: bold;
&:visited {
color: white;
}
/*this expands the clickable area of the linkt to the whole bubble*/
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
}
}
}