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

reorganisation style

Browse source
This commit is contained in:
Julie Blanc 2026-02-15 16:49:03 +01:00
parent e390d8cd5b
commit 718ca47696
20 changed files with 1187 additions and 821 deletions
Download patch file Download diff file Expand all files Collapse all files

13
assets/css/_base.scss
View file

@ -32,3 +32,16 @@ button{
background: none;
border: none;
}
figure, picture, img{
width: 100%;
}
.link-block{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
cursor: pointer;
}

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

@ -1,74 +0,0 @@
.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);
}
}

25
assets/css/_home.scss
View file

@ -1,30 +1,17 @@
@use "abstracts/mixins.scss" as *;
#home__livrets {
--color: var(--color-violet);
--color-medium: var(--color-violet-medium);
--color-light: var(--color-violet-light);
.home--section-tool{
background-color: var(--color);
color: var(--white);
&[data-type="base-connaissance"],
&[data-type="livrets"]{
color: var(--white);
}
}
#home__animations {
--color: var(--color-yellow);
--color-medium: var(--color-yellow-medium);
--color-light: var(--color-yellow-light);
background-color: var(--color);
color: var(--color-txt);
}
#home__base-connaissance {
--color: var(--color-orange);
--color-medium: var(--color-orange-medium);
--color-light: var(--color-orange-light);
background-color: var(--color);
}

3
assets/css/_page-content.scss Normal file
View file

@ -0,0 +1,3 @@
.page-content{
font-size: var(--fs-medium);
}

30
assets/css/abstracts/_var.scss
View file

@ -62,14 +62,14 @@
--color: var(--color-green);
--color-medium: var(--color-green-medium);
--color-light: var(--color-green-light);
}
[data-type="livret"]{
[data-type="livrets"]{
--color: var(--color-violet);
--color-medium: var(--color-violet-medium);
--color-light: var(--color-violet-light);
@ -77,13 +77,21 @@
[data-type="base-connaissance"]{
--color: var(--color-green);
--color-medium: var(--color-green-medium);
--color-light: var(--color-green-light);
}
[data-type="animations"]{
--color: var(--color-orange);
--color-medium: var(--color-orange-medium);
--color-light: var(--color-orange-light);
}
[data-type="methodologie"]{
--color: var(--color-yellow);
--color-medium: var(--color-yellow-medium);
--color-light: var(--color-yellow-light);
}
[data-type="atelier"]{
--color: var(--color-orange);
--color-medium: var(--color-orange-medium);
--color-light: var(--color-orange-light);
}

0
assets/css/_buttons.scss → assets/css/components/_buttons.scss
View file

0
assets/css/_logos-container.scss → assets/css/components/_logos-container.scss
View file

0
assets/css/_see-more.scss → assets/css/components/_see-more.scss
View file

0
assets/css/_slideshow.scss → assets/css/components/_slideshow.scss
View file

1
assets/css/_species-list.scss → assets/css/components/_species-list.scss
View file

@ -14,7 +14,6 @@
.taxon{
// width: calc(100%/3 - var(--spacing)*4/3);
width: calc(100%/3 - var(--spacing)*3/3);
}

19
assets/css/_taxon-card.scss → assets/css/components/_taxon-card.scss
View file

@ -1,4 +1,4 @@
@use "abstracts/mixins.scss" as *;
@use "../abstracts/mixins.scss" as *;
.species-list .taxon{
@ -18,7 +18,7 @@
display: flex;
flex-direction: column;
// margin-bottom: calc(var(--spacing)*2);
position: relative;
background-color: var(--color-green-light);
padding: 20px;
@ -36,26 +36,35 @@
}
.vernacular{
// font-size: var(--fs-medium);
// color: var(--color-green);
background-color: var(--color-green);
color: white;
border-radius: var(--radius-small);
padding: 4px 1ch;
margin-bottom: calc(var(--spacing)*0.25);
a{
color: white;
text-decoration: none;
}
}
.latin{
font-weight: normal;
font-weight: 500;
font-style: italic;
margin-bottom: calc(var(--spacing)*0.75);
margin-bottom: calc(var(--spacing)*0.75);
color: var(--color-txt);
}
.vernacular, .latin{
text-align: center;
}
&:hover{
outline: 2px solid var(--color-green);
background-color: var(--color-green-medium);
}
}

10
assets/css/components/_team.scss Normal file
View file

@ -0,0 +1,10 @@
.team{
.member{
img{
width: 60px;
aspect-ratio: 1/1;
background-color: #cfcfcf;
border-radius: var(--radius-img);
}
}
}

168
assets/style.css
View file

@ -1,7 +1,7 @@
@charset "UTF-8";
:root {
--font-title: "Borna", Arial, sans-serif;
--font: "Nunito", Arial, sans-serif;
--font-title: 'Borna', Arial, sans-serif;
--font: 'Nunito', Arial, sans-serif;
--fs-small: 14px;
--fs-normal: 16px;
--fs-medium: 22px;
@ -45,24 +45,30 @@
--color-light: var(--color-green-light);
}
[data-type=livret] {
[data-type=livrets] {
--color: var(--color-violet);
--color-medium: var(--color-violet-medium);
--color-light: var(--color-violet-light);
}
[data-type=base-connaissance] {
--color: var(--color-yellow);
--color-medium: var(--color-yellow-medium);
--color-light: var(--color-yellow-light);
--color: var(--color-green);
--color-medium: var(--color-green-medium);
--color-light: var(--color-green-light);
}
[data-type=atelier] {
[data-type=animations] {
--color: var(--color-orange);
--color-medium: var(--color-orange-medium);
--color-light: var(--color-orange-light);
}
[data-type=methodologie] {
--color: var(--color-yellow);
--color-medium: var(--color-yellow-medium);
--color-light: var(--color-yellow-light);
}
* {
margin: 0;
padding: 0;
@ -94,6 +100,20 @@ button {
border: none;
}
figure, picture, img {
width: 100%;
}
.link-block {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
cursor: pointer;
}
#site-header {
height: var(--header-h);
width: 100vw;
@ -564,6 +584,13 @@ span.controls::after {
height: 70px;
}
.team .member img {
width: 60px;
aspect-ratio: 1/1;
background-color: #cfcfcf;
border-radius: var(--radius-img);
}
.page-header {
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 2);
@ -573,6 +600,10 @@ span.controls::after {
font-family: var(--font-title);
}
.page-content {
font-size: var(--fs-medium);
}
.item-nav {
border: 1.5px solid var(--color-txt);
border-radius: var(--radius-btn);
@ -583,11 +614,13 @@ span.controls::after {
min-height: calc(var(--unit) * 5);
display: flex;
flex-direction: column;
cursor: pointer;
}
.item-nav:hover {
background-color: var(--color-light);
}
.item-nav {
cursor: pointer;
}
.item-nav .title {
font-family: var(--font-title);
font-size: 1.4rem;
@ -617,90 +650,13 @@ span.controls::after {
left: calc(var(--unit) * 0.25);
}
.highlight-block {
.home--section-tool {
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);
}
.highlight-block figure {
width: 100%;
max-width: 160px;
aspect-ratio: 4/5;
border: 1px solid var(--color-medium);
border-radius: var(--radius-small);
overflow: hidden;
}
.highlight-block figure img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.highlight-block .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);
}
.highlight-block .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);
}
.highlight-block .details {
margin-bottom: calc(var(--unit) * 0.75);
color: var(--color-light);
font-weight: 500;
}
.highlight-block .content {
position: relative;
}
.highlight-block .see-more {
position: absolute;
bottom: 0;
font-size: var(--fs-small);
--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);
.home--section-tool[data-type=base-connaissance], .home--section-tool[data-type=livrets] {
color: var(--white);
}
#home__animations {
--color: var(--color-yellow);
--color-medium: var(--color-yellow-medium);
--color-light: var(--color-yellow-light);
background-color: var(--color);
color: var(--color-txt);
}
#home__base-connaissance {
--color: var(--color-orange);
--color-medium: var(--color-orange-medium);
--color-light: var(--color-orange-light);
background-color: var(--color);
}
#main_home {
--max-w-home: 1100px;
}
@ -745,7 +701,6 @@ span.controls::after {
#home__hero {
margin-bottom: 0;
padding-bottom: calc(var(--unit) * 1.5) !important;
/* button{ display: none;} */
}
#home__hero .section--inner {
display: block;
@ -758,6 +713,9 @@ span.controls::after {
margin-bottom: calc(var(--unit) * 1.5);
color: var(--color);
}
#home__hero {
/* button{ display: none;} */
}
#home__hero .description {
font-size: var(--fs-medium);
max-width: 48ch;
@ -857,12 +815,14 @@ span.controls::after {
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
margin-top: calc(var(--spacing) * 4);
margin-bottom: calc(var(--spacing) * 4);
}
.slideshow-scroll::-webkit-scrollbar {
display: none;
}
.slideshow-scroll {
margin-top: calc(var(--spacing) * 4);
margin-bottom: calc(var(--spacing) * 4);
}
.slideshow-scroll .slideshow-scroll__warpper {
padding-left: var(--padding-body);
display: flex;
@ -941,12 +901,6 @@ span.controls::after {
font-weight: 500;
}
.species-list .taxon {
display: flex;
flex-direction: column;
background-color: var(--color-green-light);
padding: 20px;
}
.species-list .taxon .btn-edit {
width: 20px;
height: 20px;
@ -975,6 +929,13 @@ span.controls::after {
.species-list .taxon .chart-edit, .species-list .taxon .btn-edit {
display: none;
}
.species-list .taxon {
display: flex;
flex-direction: column;
position: relative;
background-color: var(--color-green-light);
padding: 20px;
}
.species-list .taxon .vernacular {
order: 1;
}
@ -989,8 +950,6 @@ span.controls::after {
aspect-ratio: 1;
overflow: hidden;
flex-shrink: 0;
border-radius: var(--radius-img);
overflow: hidden;
}
.species-list .taxon figure img {
width: 100%;
@ -998,6 +957,10 @@ span.controls::after {
-o-object-fit: cover;
object-fit: cover;
}
.species-list .taxon figure {
border-radius: var(--radius-img);
overflow: hidden;
}
.species-list .taxon .vernacular {
background-color: var(--color-green);
color: white;
@ -1005,12 +968,21 @@ span.controls::after {
padding: 4px 1ch;
margin-bottom: calc(var(--spacing) * 0.25);
}
.species-list .taxon .vernacular a {
color: white;
text-decoration: none;
}
.species-list .taxon .latin {
font-weight: normal;
font-weight: 500;
font-style: italic;
margin-bottom: calc(var(--spacing) * 0.75);
color: var(--color-txt);
}
.species-list .taxon .vernacular, .species-list .taxon .latin {
text-align: center;
}
.species-list .taxon:hover {
outline: 2px solid var(--color-green);
background-color: var(--color-green-medium);
}/*# sourceMappingURL=style.css.map */

2
assets/style.css.map
View file

File diff suppressed because one or more lines are too long

16
assets/style.scss
View file

@ -6,17 +6,19 @@
@use "css/site-header";
@use "css/site-nav";
@use "css/site-footer";
@use "css/buttons";
@use "css/see-more";
@use "css/slideshow";
@use "css/logos-container";
@use "css/components/buttons";
@use "css/components/see-more";
@use "css/components/slideshow";
@use "css/components/logos-container";
@use "css/components/team";
@use "css/page-header";
@use "css/page-content";
@use "css/home-item-nav";
@use "css/home-highlight";
@use "css/home";
@use "css/species-list";
@use "css/taxon-card";
@use "css/components/species-list";
@use "css/components/taxon-card";