studio-variable/index-main
4
0
Fork 0
Code Issues 16 Pull requests Projects Releases Packages Wiki Activity Actions

bottomBar responsive
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-23 15:55:20 +01:00
parent 99ccc15ba9
commit f24b296ff7
15 changed files with 445 additions and 303 deletions
Download patch file Download diff file Expand all files Collapse all files

200
assets/css/partials/_site-footer.scss
View file

@ -1,116 +1,144 @@
#site-footer{
#site-footer {
background-color: var(--dark);
padding: calc(var(--padding-body)*2) var(--padding-body);
z-index: 500;
background-color: var(--dark);
padding: calc(var(--spacing)*2) var(--padding-body);
z-index: 500;
.site-footer__container{
.site-footer__container {
max-width: var(--max-w-cards);
margin: 0 auto;
padding: 0 var(--padding-body);
font-size: var(--fs-small);
}
.logo {
margin-top: calc(var(--spacing)*0.25);
margin-bottom: calc(var(--spacing)*1);
svg{
.logo {
// margin-top: calc(var(--spacing)*0.25);
margin-bottom: calc(var(--spacing)*0.5);
svg {
width: 100px;
}
}
p{
margin: calc(var(--spacing)*0.5) 0;
font-size: var(--fs-small);
a{
text-decoration: none;
&:hover{
text-decoration: underline;
color: currentColor;
}
}
}
.p__small{
font-size: var(--fs-xsmall);
color: var(--grey-600);
}
.baseline{
max-width: 40ch;
}
.footer__mentions{
p{
font-size: var(--fs-xsmall);
color: var(--color-txt)
.list-links {
ul {
list-style: none;
li {
margin-bottom: calc(var(--spacing)*0.5);
}
a {
text-decoration: none;
}
li:hover a {
text-decoration: underline;
}
}
.hightlight {
text-transform: uppercase;
font-weight: 500;
}
}
.footer__socials > p{
font-weight: 500;
}
@media #{$small}{
.footer__socials{
margin-top: calc(var(--spacing)*0.75);
padding-top: calc(var(--spacing)*0.25);
border-top: var(--border-light);
.list-socials{
margin-top: calc(var(--spacing)*0.5);
margin-bottom: calc(var(--spacing)*0.75);
// @media #{$medium} {
// }
@media #{$small-up} {
.site-footer__container {
display: grid;
grid-template-columns: 1fr 350px;
column-gap: calc(var(--padding-inner)*2);
.logo{ grid-column: span 2;}
.baseline{
grid-column: 1;
grid-row: 2;
}
.list-links{
grid-column: 2;
grid-row: 2;
max-width: 350px;
margin-bottom: calc(var(--spacing)*1);
display: flex;
justify-content: space-between;
gap: var(--padding-inner);
li {
// margin-bottom: calc(var(--spacing)*1);
}
}
.socials{
grid-column: 2;
grid-row: 3;
}
.credits {
font-size: var(--fs-xsmall);
grid-column: 1;
grid-row: 3;
}
}
}
.footer__mentions{
border-top: var(--border-light);
padding-top: calc(var(--spacing)*0.25);
p{
font-size: 12px;
text-align: center;
@media #{$small} {
.list-links {
margin-top: calc(var(--spacing)*1);
li {
margin-bottom: calc(var(--spacing)*0.5);
}
.hightlight {
margin-top: calc(var(--spacing)*1.5);
}
}
.socials {
margin-top: calc(var(--spacing)*2);
}
.p__small{
font-size: 12px;
}
}
@media #{$small-up}{
.site-footer__container{
display: grid;
grid-template-columns: 3fr 2fr;
column-gap: calc(var(--spacing)*2);
}
.footer__newsletter{
grid-column: 1;
grid-row: 2;
}
.footer__socials{
grid-column: 2;
grid-row: 2;
}
.footer__socials .socials{
columns: 2;
margin-top: calc(var(--spacing)*1);
}
.footer__mentions{
grid-column: span 2;
p{
.credits {
margin-top: calc(var(--spacing)*1);
}
}
}
@media #{$x-small} {
.credits {
text-align: center;
}
}
}