studio-variable/botascopia-webiste-static
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

separation scss

Browse source
This commit is contained in:
Julie Blanc 2026-01-12 21:19:10 +01:00
parent c5d2926ded
commit c3248a21f9
7 changed files with 278 additions and 275 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/_base.scss
View file

@ -20,7 +20,7 @@ body {
main{ main{
min-height: calc(100vh - var(--header-h)); min-height: calc(100vh - var(--header-h));
margin-top: var(--header-h); // margin-top: var(--header-h);
/* padding: var(--padding-body); */ /* padding: var(--padding-body); */
} }

74
assets/css/_home-highlight.scss Normal file
View file

@ -0,0 +1,74 @@
.highlight-block{
background-color: var(--color);
border: 1px solid var(--color-txt-light);
border-radius: var(--radius-small);
padding: calc(var(--padding-inner)*1.5) var(--padding-inner);
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
gap: var(--unit);
figure{
width: 100%;
max-width: 160px;
aspect-ratio: 4/5;
border: 1px solid var(--color-medium);
border-radius: var(--radius-small);
overflow: hidden;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.label{
font-weight: 600;
margin-bottom: calc(var(--unit)*0.5);
/* text-decoration: 1px underline;
text-underline-offset: 3px; */
color: var(--color);
display: inline-flex;
align-items: center;
background-color: var(--color-light);
height: var(--unit);
padding: 0px 1ch;
border-radius: var(--radius-btn);
}
.title{
font-family: var(--font-title);
font-size: 1.4rem;
font-weight: normal;
margin-top: 0.5em;
margin-bottom: 0.25em;
color: var(--color-light);
}
.details{
margin-bottom: calc(var(--unit)*0.75);
// font-size: 0.8rem;
color: var(--color-light);
font-weight: 500;
}
.content{
position: relative;
}
.see-more{
position: absolute;
bottom: 0;
font-size: var(--fs-small);
--hover-bg: var(--color);
}
}

146
assets/css/_home.scss
View file

@ -64,80 +64,6 @@
} }
} }
.highlight-block{
background-color: var(--color);
border: 1px solid var(--color-txt-light);
border-radius: var(--radius-small);
padding: calc(var(--padding-inner)*1.5) var(--padding-inner);
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
gap: var(--unit);
figure{
width: 100%;
max-width: 160px;
aspect-ratio: 4/5;
border: 1px solid var(--color-medium);
border-radius: var(--radius-small);
overflow: hidden;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.label{
font-weight: 600;
margin-bottom: calc(var(--unit)*0.5);
/* text-decoration: 1px underline;
text-underline-offset: 3px; */
color: var(--color);
display: inline-flex;
align-items: center;
background-color: var(--color-light);
height: var(--unit);
padding: 0px 1ch;
border-radius: var(--radius-btn);
}
.title{
font-family: var(--font-title);
font-size: 1.4rem;
font-weight: normal;
margin-top: 0.5em;
margin-bottom: 0.25em;
color: var(--color-light);
}
.details{
margin-bottom: calc(var(--unit)*0.75);
// font-size: 0.8rem;
color: var(--color-light);
font-weight: 500;
}
.content{
position: relative;
}
.see-more{
position: absolute;
bottom: 0;
font-size: var(--fs-small);
--hover-bg: var(--color);
}
}
.home--section-tool .section--inner{ .home--section-tool .section--inner{
@ -166,7 +92,7 @@
#home__hero{ #home__hero{
margin-bottom: 0; margin-bottom: 0;
padding-bottom: calc(var(--unit)*1.5)!important; padding-bottom: calc(var(--unit)*1.5)!important;
.section--inner{ .section--inner{
display: block; display: block;
text-align: center; text-align: center;
@ -299,73 +225,3 @@
} }
} }
.container-logos{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 40px 60px;
}
.container-logos .logo{
width: 200px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.container-logos .logo > * {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.container-logos .logo img,
.container-logos .logo svg {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
#logo-inria{
width: 150px;
}
#logo-cnrs{
width: 90px;
height: 80px;
}
#logo-sorbonne{
height: 65px;
width: 160px;
}
#logo-saclay{
width: 160px;
transform: translateY(-10px);
}
#logo-rennes{
width: 81px;
height: 90px;
}
#logo-plantagroeco{
width: 220px;
}
#logo-SBF{
width: 146px;
height: 120px;
}
#logo-upec{
width: 161px;
height: 70px;
}
#logo-paris{
width: 80px;
height: 70px;
}

70
assets/css/_logos-container.scss Normal file
View file

@ -0,0 +1,70 @@
.container-logos{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 40px 60px;
}
.container-logos .logo{
width: 200px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.container-logos .logo > * {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.container-logos .logo img,
.container-logos .logo svg {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
#logo-inria{
width: 150px;
}
#logo-cnrs{
width: 90px;
height: 80px;
}
#logo-sorbonne{
height: 65px;
width: 160px;
}
#logo-saclay{
width: 160px;
transform: translateY(-10px);
}
#logo-rennes{
width: 81px;
height: 90px;
}
#logo-plantagroeco{
width: 220px;
}
#logo-SBF{
width: 146px;
height: 120px;
}
#logo-upec{
width: 161px;
height: 70px;
}
#logo-paris{
width: 80px;
height: 70px;
}

255
assets/style.css
View file

@ -78,7 +78,6 @@ body {
main { main {
min-height: calc(100vh - var(--header-h)); min-height: calc(100vh - var(--header-h));
margin-top: var(--header-h);
/* padding: var(--padding-body); */ /* padding: var(--padding-body); */
} }
@ -470,6 +469,84 @@ span.controls::after {
z-index: 11; z-index: 11;
} }
.container-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 40px 60px;
}
.container-logos .logo {
width: 200px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.container-logos .logo > * {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
.container-logos .logo img,
.container-logos .logo svg {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
#logo-inria {
width: 150px;
}
#logo-cnrs {
width: 90px;
height: 80px;
}
#logo-sorbonne {
height: 65px;
width: 160px;
}
#logo-saclay {
width: 160px;
transform: translateY(-10px);
}
#logo-rennes {
width: 81px;
height: 90px;
}
#logo-plantagroeco {
width: 220px;
}
#logo-SBF {
width: 146px;
height: 120px;
}
#logo-upec {
width: 161px;
height: 70px;
}
#logo-paris {
width: 80px;
height: 70px;
}
.item-nav { .item-nav {
border: 1px solid var(--color-txt-light); border: 1px solid var(--color-txt-light);
border-radius: var(--radius-small); border-radius: var(--radius-small);
@ -511,55 +588,6 @@ span.controls::after {
left: calc(var(--unit) * 0.25); left: calc(var(--unit) * 0.25);
} }
#home__livrets {
--color: var(--color-violet);
--color-medium: var(--color-violet-medium);
--color-light: var(--color-violet-light);
background-color: var(--color-medium);
}
#home__base-connaissance {
--color: var(--color-yellow);
--color-medium: var(--color-yellow-medium);
--color-light: var(--color-yellow-light);
background-color: var(--color-medium);
}
#home__ateliers {
--color: var(--color-orange);
--color-medium: var(--color-orange-medium);
--color-light: var(--color-orange-light);
background-color: var(--color);
}
#main_home section {
padding: calc(var(--unit) * 3) var(--padding-body);
}
#main_home section .section--inner {
max-width: 1100px;
margin: 0 auto;
}
.item-nav__group {
display: flex;
flex-direction: column;
gap: var(--unit);
}
.section--title {
font-size: 2.8rem;
font-family: var(--font-title);
margin-bottom: calc(var(--unit) * 3);
}
.slideshow {
width: 100%;
height: calc(var(--unit) * 13);
}
.slideshow figure {
height: calc(var(--unit) * 11);
}
.highlight-block { .highlight-block {
background-color: var(--color); background-color: var(--color);
border: 1px solid var(--color-txt-light); border: 1px solid var(--color-txt-light);
@ -621,6 +649,55 @@ span.controls::after {
--hover-bg: var(--color); --hover-bg: var(--color);
} }
#home__livrets {
--color: var(--color-violet);
--color-medium: var(--color-violet-medium);
--color-light: var(--color-violet-light);
background-color: var(--color-medium);
}
#home__base-connaissance {
--color: var(--color-yellow);
--color-medium: var(--color-yellow-medium);
--color-light: var(--color-yellow-light);
background-color: var(--color-medium);
}
#home__ateliers {
--color: var(--color-orange);
--color-medium: var(--color-orange-medium);
--color-light: var(--color-orange-light);
background-color: var(--color);
}
#main_home section {
padding: calc(var(--unit) * 3) var(--padding-body);
}
#main_home section .section--inner {
max-width: 1100px;
margin: 0 auto;
}
.item-nav__group {
display: flex;
flex-direction: column;
gap: var(--unit);
}
.section--title {
font-size: 2.8rem;
font-family: var(--font-title);
margin-bottom: calc(var(--unit) * 3);
}
.slideshow {
width: 100%;
height: calc(var(--unit) * 13);
}
.slideshow figure {
height: calc(var(--unit) * 11);
}
.home--section-tool .section--inner { .home--section-tool .section--inner {
display: grid; display: grid;
grid-template-columns: 4fr 5fr; grid-template-columns: 4fr 5fr;
@ -742,82 +819,4 @@ span.controls::after {
} }
#home__a-propos .btn--solid { #home__a-propos .btn--solid {
margin-top: calc(var(--unit) * 2); margin-top: calc(var(--unit) * 2);
}
.container-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 40px 60px;
}
.container-logos .logo {
width: 200px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.container-logos .logo > * {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
.container-logos .logo img,
.container-logos .logo svg {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
-o-object-fit: contain;
object-fit: contain;
}
#logo-inria {
width: 150px;
}
#logo-cnrs {
width: 90px;
height: 80px;
}
#logo-sorbonne {
height: 65px;
width: 160px;
}
#logo-saclay {
width: 160px;
transform: translateY(-10px);
}
#logo-rennes {
width: 81px;
height: 90px;
}
#logo-plantagroeco {
width: 220px;
}
#logo-SBF {
width: 146px;
height: 120px;
}
#logo-upec {
width: 161px;
height: 70px;
}
#logo-paris {
width: 80px;
height: 70px;
}/*# sourceMappingURL=style.css.map */ }/*# sourceMappingURL=style.css.map */

2
assets/style.css.map
View file

File diff suppressed because one or more lines are too long

4
assets/style.scss
View file

@ -7,6 +7,10 @@
@use "css/buttons"; @use "css/buttons";
@use "css/see-more"; @use "css/see-more";
@use "css/slideshow"; @use "css/slideshow";
@use "css/logos-container";
@use "css/home-item-nav"; @use "css/home-item-nav";
@use "css/home-highlight";
@use "css/home"; @use "css/home";