css@home

code:style.css

.page-list, .related-page-list {

.grid {

li {

aspect-ratio: 1/1;

&.pin + li:not(.pin) {

grid-column-start: 1;

}

a {

box-shadow: none;

border-radius: 5px;

transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;

overflow: visible;

.content {

height: 100%;

.header {

border-top: none;

.title {

text-align: center;

}

}

.icon {

display: flex;

justify-content: center;

align-items: center;

padding: 5px;

img {

width: auto;

max-width: 100%;

max-height: 100%;

border-radius: 5px;

}

}

}

&::before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 0;

z-index: -1;

background:

radial-gradient(50% 90% at 70% 110%, rgba(93, 227, 236, 0.8) 0%, rgba(93, 227, 236, 0.2) 60%, rgba(93, 227, 236, 0) 100%),

linear-gradient(60deg, rgba(150, 220, 240, 1) 10%, rgba(185, 240, 255, 0) 80%),

radial-gradient(120% 120% at 90% 70%, rgba(120, 200, 255, 1) 0%, rgba(120, 200, 255, 0) 75%),

radial-gradient(115% 150% at 10% 15%, rgba(135, 225, 255, 0.7) 0%, rgba(135, 225, 255, 0.2) 65%, rgba(135, 225, 255, 0) 100%);

background-blend-mode: hard-light, darken, normal, normal, normal, normal;

filter: blur(50px);

transition: all 700ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;

}

&:hover {

box-shadow: none !important;

&::before {

opacity: 1;

}

.hover {

opacity: 0 !important;

}

}

}

}

}

}