Files
lena-schilling-website/packages/base/Resources/Public/Scss/components/_footer.scss
Dominik Polakovics 52e962ae83
All checks were successful
Build / build (push) Successful in 2m32s
Build / deploy-stage (push) Successful in 3m0s
Build / switch-stage (push) Successful in 2m8s
feat: add a textimage element, add news design, add a footer
2024-12-13 01:07:46 +01:00

82 lines
1.3 KiB
SCSS

.site-footer {
background: #f8f8ea;
color: #4b4b4b;
font-size: 0.9rem;
padding: 2rem 0;
&__top {
padding-bottom: 2rem;
}
&__grid {
display: flex;
flex-direction: column;
gap: 2rem;
}
&__left, &__right {
flex: 1 1 100%;
}
@media (min-width: 768px) {
&__grid {
flex-direction: row;
gap: 4rem;
}
&__left, &__right {
flex: 1;
}
}
&__divider {
border: none;
border-top: 1px solid #4b4b4b;
margin: 2rem 0;
}
&__bottom-grid {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1rem;
}
@media (min-width: 768px) {
&__bottom-grid {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}
&__legal {
list-style: none;
display: flex;
gap: 2rem;
padding: 0;
margin: 0;
}
&__copyright {
font-size: 0.9rem;
}
}
/* Social links styling based on href */
a[href*="instagram.com"], a[href*="tiktok.com"], a[href*="linkedin.com"], a[href*="twitter.com"], a[href*="x.com"] {
display: inline-block;
text-decoration: none;
color: #4b4b4b;
transition: color 0.3s ease;
}
a[href*="instagram.com"]:hover,
a[href*="tiktok.com"]:hover,
a[href*="linkedin.com"]:hover,
a[href*="twitter.com"]:hover,
a[href*="x.com"]:hover {
color: #6B8E23;
}