DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

refactor(css): more landing + new_footer cleanup

Browse source
This commit is contained in:
Colin Darie 2022-10-06 11:24:56 +02:00
parent be367503cf
commit aea2733be1
2 changed files with 1 additions and 207 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
app/assets/stylesheets/landing.scss
View file

@ -3,10 +3,6 @@
@import "mixins"; @import "mixins";
@import "placeholders"; @import "placeholders";
.landing {
background-color: #FFFFFF;
}
.landing-panel { .landing-panel {
@include vertical-padding(60px); @include vertical-padding(60px);
} }
@ -57,10 +53,6 @@ $landing-breakpoint: 1040px;
background-color: $blue-france-500; background-color: $blue-france-500;
} }
.features-panel-title {
color: #FFFFFF;
}
.features { .features {
@extend %horizontal-list; @extend %horizontal-list;
width: 100%; width: 100%;
@ -228,17 +220,6 @@ $users-breakpoint: 950px;
height: 180px; height: 180px;
} }
.cta-role-title {
font-size: 30px;
font-weight: bold;
margin-top: 13px;
}
.cta-role-explanation {
font-size: 30px;
margin-bottom: 10px;
}
.cta-panel { .cta-panel {
background-color: $blue-france-500; background-color: $blue-france-500;
color: #FFFFFF; color: #FFFFFF;
@ -248,8 +229,7 @@ $users-breakpoint: 950px;
} }
} }
.role-panel-wrapper, .role-panel-wrapper {
.cta-panel-wrapper {
width: 100%; width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -305,11 +285,6 @@ $users-breakpoint: 950px;
} }
} }
.half .cta-panel-title,
.half .cta-panel-explanation {
text-align: center;
}
.role-administrations-image { .role-administrations-image {
text-align: right; text-align: right;
@ -369,84 +344,3 @@ $cta-panel-button-border-size: 2px;
outline: 3px solid #FFFFFF; outline: 3px solid #FFFFFF;
} }
} }
.cta-panel-button-blue {
@include cta-panel-button;
border: $cta-panel-button-border-size solid $blue-france-700;
color: $blue-france-700;
&:hover {
color: #FFFFFF;
background-color: $blue-france-500;
text-decoration: none;
&:focus {
color: #FFFFFF;
}
}
&:focus {
color: $blue-france-500;
text-decoration: none;
}
}
@mixin role-button {
@include horizontal-padding(30px);
display: inline-block;
border-radius: 100px;
font-size: 20px;
text-align: center;
cursor: pointer;
margin-top: 20px;
line-height: 50px;
}
.role-panel-button-primary {
@include role-button;
background-color: $blue-france-700;
color: #FFFFFF;
&:hover {
color: #FFFFFF;
text-decoration: none;
background-color: $blue-france-500;
}
&:focus {
color: #FFFFFF;
text-decoration: none;
}
}
.role-panel-button-secondary {
@include role-button;
border: $cta-panel-button-border-size solid $blue-france-700;
line-height: 50px - 2 * $cta-panel-button-border-size;
color: $blue-france-700;
margin-left: 10px;
@media (max-width: $users-breakpoint) {
margin-left: 0px;
}
&:hover {
color: $blue-france-500;
border: $cta-panel-button-border-size solid $blue-france-500;
text-decoration: none;
}
&:focus {
color: $light-blue;
text-decoration: none;
}
}
.half {
width: 45%;
float: left;
}
.first-half {
margin-right: 10%;
}

100
app/assets/stylesheets/new_footer.scss
View file

@ -1,7 +1,4 @@
@import "colors";
@import "constants";
@import "mixins"; @import "mixins";
@import "placeholders";
.landing-footer { .landing-footer {
@include vertical-padding(72px); @include vertical-padding(72px);
@ -12,50 +9,6 @@
line-height: 24px; line-height: 24px;
} }
.footer-columns {
@extend %horizontal-list;
justify-content: flex-start;
margin: 0 -15px;
}
.footer-column {
@extend %horizontal-list-item;
font-size: 14px;
vertical-align: top;
flex: 0 0 33.333333%;
min-width: 280px;
margin-bottom: 30px;
@media (max-width: 550px) {
width: 100%;
}
}
.footer-logos,
.footer-links {
list-style-type: none;
padding: 0;
margin: 0;
}
.footer-header {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
.footer-link {
margin-bottom: 14px;
&:last-of-type {
margin-bottom: 0;
}
}
.footer-text {
margin-bottom: 14px;
}
.footer-logo:hover { .footer-logo:hover {
opacity: 0.8; opacity: 0.8;
} }
@ -67,56 +20,3 @@
height: 25px; height: 25px;
margin-top: 14px; margin-top: 14px;
} }
.footer-logo-france {
@include ie-compatible-background-image("republique-francaise-logo.svg");
width: 105px;
height: 90px;
}
.footer-link a,
.footer-text a {
color: $black;
text-decoration: none;
&:hover,
&:focus {
color: $blue-france-700;
text-decoration: none;
}
}
.footer-bottom-line {
text-align: center;
font-size: small;
@media (max-width: 550px) {
text-align: left;
}
}
.footer-row {
margin-bottom: 30px;
// In this case, the bottom margin is defined directly on each individual column
&.footer-columns {
margin-bottom: 0;
}
}
.footer-site-links {
li {
display: inline;
&::before {
content: "-";
margin: $default-spacer;
}
&:first-child::before {
content: none;
}
}
}