Skip to content

Commit

Permalink
maj graphisme troisponts
Browse files Browse the repository at this point in the history
  • Loading branch information
@Broemman
Broemman committed Aug 8, 2024
1 parent 78a2adc commit 18cc886
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 194 deletions.
200 changes: 31 additions & 169 deletions troisponts/src/scss/home/a-la-une.scss
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,54 @@
.a-la-une {
padding-top: 0;
padding-bottom: 0;
margin: 0 0 60px !important;
padding-top: 1rem;
padding-bottom: 6rem;
margin: 3rem 0;
max-width: 100vw;
width: 100vw;
left: 50%;
transform: translateX(-50%);

.swiper {
padding: 0 25px !important;
}

@media screen and (max-width: 992px) {
padding-top: 0;
padding-bottom: 0;
margin: 0;
padding-top: 3.5rem;
padding-bottom: 3.5rem;
margin: 3rem 0 0;
}

&::before {
display: none;
background: transparent;
border-radius: 0;
bottom: 0;
content: "";
right: 0;
position: absolute;
top: 0;
width: 60%;
z-index: -1;

@media screen and (max-width: 992px) {
background: #f4f4f4;
width: 100%;
}
}

.swiper-wrapper {
padding-bottom: 0;
}

@media screen and (max-width: 992px) {
.swiper-wrapper {
padding-bottom: 80px;
}
}

.swiper-pagination {
display: none;
}

.section-title {
font-weight: 300;
font-weight: 600;
text-transform: none;
font-style: italic;
margin: 0 0 0 -90px;
width: max-content;
font-size: 3rem;
font-size: 3.7rem;
transform: rotate(180deg);
position: absolute;
padding: 100px 0 0;
writing-mode: vertical-rl;
background: transparent;

@media screen and (max-width: 992px) {
transform: rotate(0deg);
Expand All @@ -58,101 +61,27 @@
}

.swiper-slide {
&::before {
background: $primary;
border-radius: 0 100px 100px 0;
inset: 50px 0 0 auto;
content: "";
position: absolute;
margin-left: -700px;
width: calc(40% + 129px);
height: 470px;
z-index: -1;

@media screen and (max-width: 1400px) {
border-radius: 100px;
left: 0;
top: 0;
margin-left: 0;
width: 100%;
}

@media screen and (max-width: 992px) {
border-radius: 50px;
inset: auto 0 0 auto;
margin-left: 0;
width: 100%;
height: 350px;
}

@media screen and (max-width: 500px) {
top: 40px;
height: 310px;
}
}

.swiper-image {
border-radius: 100px 0 0 100px;
width: 100%;
height: 470px;

@media screen and (max-width: 992px) {
border-radius: 50px 50px 0 0;
height: auto !important;
}

&::after {
display: none !important;
}

&::before {
border-radius: 0;
content: "";
left: 60%;
margin-left: -129px;
right: auto;
position: absolute;
bottom: 0;
width: 130px;
height: 63px;
z-index: -1;
background: url("../../assets/svg/relief-banner.svg") top right
no-repeat;

@media screen and (max-width: 1400px) {
display: none;
}
}
}

.swiper_title h3 {
margin-bottom: 20px;
font-weight: 300 !important;
padding: 100px 60px 30px;

@media screen and (max-width: 1400px) {
padding: 60px 30px 30px;
}
font-weight: 400 !important;
}

a {
display: grid;
grid-template-columns: 60% 40%;
grid-template-columns: 50% 50%;
grid-template-rows: auto 1fr;
padding-bottom: 50px !important;

@media screen and (max-width: 1400px) {
padding-bottom: 0 !important;
}
direction: rtl;
grid-auto-flow: dense;
text-align: left;

@media screen and (max-width: 992px) {
padding-bottom: 40px !important;
.swiper_date {
display: none;
}
}

@media screen and (max-width: 992px) {
.swiper_title h3 {
padding: 20px;
padding: 0 1rem;
}

a {
Expand All @@ -163,73 +92,6 @@

.swiper_description {
font-size: 16px;

p {
color: #fff;
}
}
}

.swiper-button-next,
.swiper-button-prev {
top: 50% !important;
box-shadow: rgb(99 99 99 / 20%) 0 2px 8px 0;
}

.swiper-button-prev {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M14 17.75a.74.74 0 0 1-.53-.22l-5-5a.75.75 0 0 1 0-1.06l5-5a.75.75 0 0 1 1.06 1.06L10.06 12l4.47 4.47a.75.75 0 0 1 0 1.06a.74.74 0 0 1-.53.22Z" fill="%23000000"/></svg>');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
inset: auto 140px 60px auto;
margin-left: 36px;
}

.swiper-button-next {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M10 17.75a.74.74 0 0 1-.53-.22a.75.75 0 0 1 0-1.06L13.94 12L9.47 7.53a.75.75 0 0 1 1.06-1.06l5 5a.75.75 0 0 1 0 1.06l-5 5a.74.74 0 0 1-.53.22Z" fill="%23000000"/></svg>');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
right: 80px;
margin-left: 96px;
top: auto !important;
bottom: 60px;
}

@media screen and (max-width: 992px) {
.swiper-button-prev {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M14 17.75a.74.74 0 0 1-.53-.22l-5-5a.75.75 0 0 1 0-1.06l5-5a.75.75 0 0 1 1.06 1.06L10.06 12l4.47 4.47a.75.75 0 0 1 0 1.06a.74.74 0 0 1-.53.22Z" fill="%23000000"/></svg>');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
left: 50%;
margin-left: -55px;
top: auto !important;
bottom: 0;
}

.swiper-button-next {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M10 17.75a.74.74 0 0 1-.53-.22a.75.75 0 0 1 0-1.06L13.94 12L9.47 7.53a.75.75 0 0 1 1.06-1.06l5 5a.75.75 0 0 1 0 1.06l-5 5a.74.74 0 0 1-.53.22Z" fill="%23000000"/></svg>');
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
left: 50%;
margin-left: 10px;
top: auto !important;
bottom: 0;
}
}

.swiper-button-prev {
display: block !important;
}

.swiper-button-next {
display: block !important;
}

.see_all,
.swiper_date {
display: none;
}
}
10 changes: 3 additions & 7 deletions troisponts/src/scss/home/quick.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
#main-container .quick-access {
margin: 60px 0 100px;
margin: 20px 0 50px;
padding: 0;

@include media-breakpoint-down(lg) {
Expand All @@ -15,10 +15,6 @@
li {
.table_image {
.image.d-block {
background: $primary;
border-radius: 100px;
width: 80px;
height: 80px;
transition: all 0.3s ease;
position: relative;

Expand Down Expand Up @@ -136,7 +132,7 @@
text-decoration: none !important;

.table_title {
color: $primary;
color: #000;
font-weight: 600;
transition: 0.5s;
font-size: 18px;
Expand All @@ -149,7 +145,7 @@

&:hover {
.table_title {
color: $primary;
color: #000;
transition: 0.5s;
}
}
Expand Down
2 changes: 1 addition & 1 deletion troisponts/src/scss/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ $enable-roboto-webfont: false;
// ... add your styles here
@import "./home/intro";
@import "./home/quick";
@import "./home/a-la-une";
@import "./home/espace-citoyen";
@import "./home/actualites";
@import "./home/cpas";
Expand All @@ -25,3 +24,4 @@ $enable-roboto-webfont: false;
@import "./se-link";
@import "./se-files";
@import "./contact";
@import "./home/a-la-une";
34 changes: 17 additions & 17 deletions troisponts/src/scss/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ $primary-dark: #26383f;
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500&display=swap");

$font-family-base: "Roboto", sans-serif !default;
$font-family-title: "Nunito", sans-serif !default;
$font-title-color: $primary !default;
$font-family-title: "Roboto", sans-serif;
$font-title-color: #000;
$font-title-color-light: #fff !default;
$font-title-color-dark: #000 !default;
$font-title-weight: 700 !default;
Expand Down Expand Up @@ -70,10 +70,10 @@ $header-top-padding: 1rem 0 !default;
$header-top-background: #fff !default;
$header-center-nav: false !default;
$header-nav-margin: 0 1rem 0 1rem !default;
$header-nav-link-color: $primary !default;
$header-nav-link-color: #000;
$header-nav-link-font-size: 16px !default;
$header-nav-link-font-family: $font-family-base !default;
$header-links-color: $primary !default;
$header-links-color: #000;
$header-links-account-margin: 0 !default;
$header-links-account-padding: 0 !default;
$header-links-account-border: solid 0 #000 !default;
Expand All @@ -94,9 +94,9 @@ $enable-full-width-breacrumb: false !default;
$navbar-padding-x: 2.5rem !default;
$nav-mask-background: rgb(15 11 11 / 76%) !default;
$nav-title-font-family: $font-family-base !default;
$nav-link-color: $primary !default;
$nav-link-color: #000;
$nav-link-open-color: $primary !default;
$nav-link-active-color: $primary-svg !default;
$nav-link-active-color: $primary-dark;
$nav-link-font-size: initial !default;
$nav-link-font-weight: 500 !default;
$nav-link-drop-color: $primary !default;
Expand Down Expand Up @@ -173,22 +173,22 @@ $see-all-hover-underline-width: 50% !default;

// Quick access
$quick-access-section-full-width: false !default;
$quick-access-title-color: $primary !default;
$quick-access-title-color: #000;
$quick-access-title-margin: $home-section-title-margin !default;
$quick-access-title-padding: $home-section-title-padding !default;
$quick-access-title-align: $home-section-title-align !default;
$quick-access-container-padding: 1rem 0 !default;
$quick-access-width: 100px !default;
$quick-access-height: 100px !default;
$quick-access-background: #fff !default;
$quick-access-border: solid 1px $primary !default;
$quick-access-width: 80px;
$quick-access-height: 80px;
$quick-access-background: $primary;
$quick-access-border: none;
$quick-access-border-radius: 100px !default;
$quick-access-shadow: none !default;
$quick-access-svg-width: 40px !default;
$quick-access-svg-color: $primary !default;
$quick-access-svg-width: 30px;
$quick-access-svg-color: #fff;
$quick-access-item-title-margin: 1rem 0 0 0 !default;
$quick-access-title-font-size: 18px !default;
$quick-access-title-color: $primary !default;
$quick-access-title-color: #000;
$quick-access-title-text-transform: initial !default;
$quick-access-title-weight: 400 !default;

Expand All @@ -202,9 +202,9 @@ $a-la-une-title-color: $font-title-color !default;
$a-la-une-title-align: $home-section-title-align !default;
$a-la-une-title-margin: $home-section-title-margin !default;
$a-la-une-title-padding: $home-section-title-padding !default;
$a-la-une-text-bg: rgb(244, 244, 244) !default;
$a-la-une-text-bg: transparent;
$a-la-une-item-image-margin: 0 !default;
$a-la-une-item-title-color: $primary !default;
$a-la-une-item-title-color: #000;
$a-la-une-item-title-font-size: $h3-font-size !default;
$a-la-une-item-title-margin: 0 !default;
$a-la-une-item-title-padding: 36px 36px 0 !default;
Expand All @@ -214,7 +214,7 @@ $a-la-une-item-description-color: initial !default;
$a-la-une-item-description-margin: 0 !default;
$a-la-une-item-description-padding: 0 36px 36px !default;
$a-la-une-item-description-radius: 0 !default;
$a-la-une-item-image-radius: 0 !default;
$a-la-une-item-image-radius: 20px;

// Actu
$actu-section-full-width: true !default;
Expand Down

0 comments on commit 18cc886

Please sign in to comment.