nnwhen.com/socials.css
2025-02-04 16:44:55 +02:00

78 lines
1.8 KiB
CSS

#social-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
width: min(95%, 1000px);
margin: auto;
}
.social-box {
width: min(70%, 220px);
margin: 15px 5px;
-webkit-box-shadow: var(--title-background) 1px 1px 10px;
box-shadow: var(--title-background) 1px 1px 10px;
-webkit-transition: ease-out 200ms;
-o-transition: ease-out 200ms;
transition: ease-out 200ms;
}
.social-box a:hover img {
-webkit-filter: drop-shadow(var(--accent) 5px 5px 0);
filter: drop-shadow(var(--accent) 5px 5px 0);
}
.social-box a:hover p {
color: var(--accent-focus) !important;
}
.social-box:hover {
-webkit-box-shadow: var(--title-background) 5px 5px 15px;
box-shadow: var(--title-background) 5px 5px 15px;
background-color: var(--blog-box);
}
.social-box h1 {
text-justify: distribute;
text-align: justify;
-moz-text-align-last: justify;
text-align-last: justify;
font-family: "mono", monospace;
font-weight: bold;
text-transform: uppercase;
margin: 5px 0;
padding: 0 20px;
}
.social-box h2 {
text-justify: distribute;
text-align: justify;
-moz-text-align-last: justify;
text-align-last: justify;
font-size: 1.125rem;
font-weight: lighter;
padding: 0 5px;
margin-bottom: 5px;
margin-top: -5px;
color: var(--load-light);
background-color: var(--title-background);
}
.social-box p {
margin: 5px 0;
color: var(--light);
padding: 5px 25px 15px 25px;
text-shadow: var(--max-dark) 1px 1px 1px;
}
.social-box img {
-o-object-fit: contain;
object-fit: contain;
margin: 20px auto;
width: min(100%, 220px);
height: 180px;
-webkit-transition: ease-out 200ms;
-o-transition: ease-out 200ms;
transition: ease-out 200ms;
}