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

menu

Browse source
This commit is contained in:
Julie Blanc 2026-02-27 20:33:56 +01:00
parent 25cdb3bd0b
commit 31e1b729f3
28 changed files with 925 additions and 426 deletions
Download patch file Download diff file Expand all files Collapse all files

1
assets/css/_page-content.scss
View file

@ -1,4 +1,5 @@
@use "abstracts/mixins.scss" as *;
@use "abstracts/responsive.scss" as *;
.page-content{

3
assets/css/_page-grid.scss
View file

@ -1,3 +1,6 @@
@use "abstracts/mixins.scss" as *;
@use "abstracts/responsive.scss" as *;
.page-grid{

4
assets/css/_page-header.scss
View file

@ -1,8 +1,8 @@
@use "abstracts/mixins.scss" as *;
@use "abstracts/responsive.scss" as *;
.page-header{
// margin-top: calc(var(--spacing)*1);
// margin-bottom: calc(var(--spacing)*2);
color: var(--data-color);
background-color: var(--data-color-light);

1
assets/css/_page-nav.scss
View file

@ -1,4 +1,5 @@
@use "abstracts/mixins.scss" as *;
@use "abstracts/responsive.scss" as *;
.page-nav{

1
assets/css/_site-footer.scss
View file

@ -1,4 +1,5 @@
@use "abstracts/mixins.scss" as *;
@use "abstracts/responsive.scss" as *;
#site-footer{
background-color: var(--color-x-light);

32
assets/css/_site-header.scss
View file

@ -1,4 +1,5 @@
@use "abstracts/mixins.scss" as *;
@use "abstracts/responsive.scss" as *;
#site-header{
height: var(--header-h);
@ -15,39 +16,20 @@
a{ text-decoration: none; }
// #logo-botascopia{
// display: flex;
// align-items: center;
// gap: 10px;
// svg{
// width: 35px;
// fill: var(--color-green);
// }
// }
// h1{
// font-family: var(--font-title);
// color: var(--color-txt);
// text-decoration: none;
// font-size: 25px;
// position: relative;
// top: -2px;
// color: var(--color-green);
// position: absolute;
// opacity: 0;
// }
#logo-botascopia{
svg{
display: none;
width: 180px;
fill: var(--color-green);
}
}
h1{
position: absolute;
opacity: 0;
// position: absolute;
opacity: 1;
font-size: var(--fs-normal);
font-family: var(--font-title);
color: var(--color-green);
}
}
#site-header ul{

290
assets/css/_site-nav.scss
View file

@ -1,6 +1,9 @@
@use "abstracts/mixins.scss" as *;
@use "abstracts/responsive.scss" as *;
#site-nav{
z-index: var(--header-z);
position: relative;
z-index: calc(var(--header-z) - 10);
}
@ -12,6 +15,9 @@
#site-nav li{
font-weight: 500;
color: var(--color-txt);
input[type="radio"]{
display: none;
}
}
.arrow{
@ -35,17 +41,281 @@
}
#site-nav .nav-level-1_ul{
display: flex;
gap: calc(var(--padding-inner)*2);
label[for="menu-toggle"]{
cursor: pointer;
.menu__icon{
@include icon(26px);
}
}
#menu-toggle{ display: none; }
#menu-toggle ~ label[for="menu-toggle"] {
.menu__icon--open{ display: flex; }
.menu__icon--close{ display: none; }
}
#menu-toggle:checked ~ label[for="menu-toggle"] {
.menu__icon--open{ display: none; }
.menu__icon--close{ display: flex; }
}
@media #{$medium}{
#menu-toggle ~ #site-nav{
top: -100vh;
}
#menu-toggle:checked ~ #site-nav{
top: var(--header-h);
}
#site-nav{
position: fixed;
background-color: white;
transition: top .5s ease-in-out;
// top: var(--header-h);
left: 0px;
max-height: calc(100vh - var(--header-h) + 2px);
width: 100vw;
padding: calc(var(--padding-body)*1);
border-bottom: 2px solid var(--color-txt);
// overflow-y: scroll;
overflow: hidden;
.img-menu{
position: absolute;
top: 25vw;
margin-top: -20vw;
right: -20vh;
width: auto;
height: calc(400px + 25vw);
z-index: 10;
float: right;
background-color: var(--color-txt);
display: flex;
img{
mix-blend-mode: screen;
}
}
#btn__connexion,
.nav-level-1_ul{
position: relative;
z-index: 20;
}
#btn__connexion{
display: block;
// margin-inline: auto;
margin-top: calc(var(--spacing)*2);
// margin-bottom: calc(var(--spacing)*1);
}
.nav-level-1_ul{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-gap: var(--padding-inner);
max-width: 580px;
margin-right: 35vw;
max-height: calc(100% - var(--spacing)*4);
overflow-y: scroll;
}
.nav-level-1_li:first-of-type{
grid-row: 1/3;
}
.nav-level-1_link{
display: block;
font-size: var(--fs-small);
font-family: var(--font-title);
padding-top: calc(var(--spacing)*1.5);
padding-bottom: calc(var(--spacing)*1);
text-decoration: underline 2px;
text-underline-offset: 3px;
text-transform: uppercase;
padding-left: 1.4ch;
cursor: auto;
.arrow{
display: none;
}
// a{
// pointer-events: none;
// cursor: auto;
// }
}
.nav-level-2_li{
font-size: var(--fs-normal);
max-width: 20ch;
a{
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding: calc(var(--spacing)*0.35) 1ch;
}
&:hover{
background-color: var(--color-x-light);
}
}
}
}
@media screen and (max-width: 780px){
#site-nav{
height: calc(100vh - var(--header-h) + 10px);
.nav-level-1_ul{
margin-right: 10vw;
}
.img-menu{
top: auto;
bottom: -60px;
height: 400px;
}
}
}
@media #{$x-small}{
#site-nav{
.nav-level-2_ul{
max-height: 0;
transition: max-height .3s ease-in, opacity .2s ease-in;
overflow: hidden;
opacity: 0;
}
.nav-level-1_ul{
display: block;
width: calc(100% + var(--padding-body));
overflow: hidden;
input:checked + label .arrow svg{
transform: rotate(90deg);
}
input:checked ~ .nav-level-2_ul{
max-height: 300px;
padding-top: calc(var(--spacing)*0.5);
padding-bottom: calc(var(--spacing)*2);
opacity: 1;
}
}
.nav-level-1_link{
cursor: pointer;
}
#btn__connexion{
margin-inline: 0px;
position: absolute;
bottom: calc(var(--spacing)*1.5);
}
.img-menu{
// display: none;
bottom: -80px;
}
.nav-level-1_link{
padding-top: calc(var(--spacing) * 0.5);
padding-bottom: calc(var(--spacing) * 0.5);
text-decoration: none;
display: flex;
justify-content: space-between;
max-width: 26ch;
.arrow{
display: block;
padding-left: 2ch;
position: relative;
top: 1px;
}
}
}
}
@media #{$medium-up}{
#menu-toggle,
label[for="menu-toggle"]{
display: none;
}
#site-nav{
display: flex;
gap: calc(var(--padding-inner)*1);
align-items: center;
}
#site-nav .nav-level-1_ul{
display: flex;
// gap: calc(var(--padding-inner)*0);
}
#site-nav .nav-level-1_li {
display: block;
/* float: left; */
padding: var(--padding-inner);
position: relative;
text-decoration: none;
white-space: nowrap;
&:hover{
color: var(--color-green);
@ -95,6 +365,16 @@
}
.img-menu{
display: none;
}
}

18
assets/css/abstracts/_responsive.scss Normal file
View file

@ -0,0 +1,18 @@
$desktop: "screen and (min-width: 1200px)";
$medium: "screen and (max-width: 1080px)";
$medium-up: "screen and (min-width: 1080px)";
$small-up: "screen and (min-width: 768px)";
$small: "screen and (max-width: 768px)";
$x-small-up: "screen and (min-width: 560px)";
$x-small: "screen and (max-width: 560px)";
$paysage: "screen and (max-height: 670px) and (min-width: 1080px)";
@media #{$medium}{
}
@media #{$x-small}{
}

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

@ -5,8 +5,8 @@
--font: 'Nunito', Arial, sans-serif;
--fs-small: 14px;
--fs-normal: 16px;
--fs-medium: 22px;
--fs-normal: 18px;
--fs-medium: 24px;
--fs-title-page: 42px;
--spacing: 20px;

16
assets/css/components/_taxon-card.scss
View file

@ -1,11 +1,11 @@
@use "../abstracts/mixins.scss" as *;
.species-list{
display: grid;
grid-gap: calc(var(--spacing)*1);
grid-gap: calc(var(--spacing)*0.5);
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
.taxon{
align-self: start;
}
@ -33,15 +33,25 @@
background-color: var(--color-green-light);
padding: calc(var(--padding-inner)*0.75);
border-radius: var(--radius-img);
.name{ order: 1; }
figure{ order: 2; }
figure{
@include fig-ratio(1/1);
border-radius: var(--radius-img);
overflow: hidden;
img{
background-color: var(--color-green);
&:nth-of-type(4n){
background-color: yellow;
}
}
}

84
assets/css/pages/_home.scss
View file

@ -43,6 +43,10 @@
grid-column: span 2;
text-align: center;
margin-bottom: calc(var(--spacing)*2);
border: 2px solid currentColor;
border-radius: var(--radius-btn);
padding: 1ch calc(var(--spacing)*0.5);
}
.baseline {
@ -58,11 +62,6 @@
.taxon:hover{
outline: 3px solid var(--color-txt);
}
// .taxon:hover{
// border-color: red!important;
// }
}
.species-list .title{
@ -71,19 +70,11 @@
color: var(--data-color-light);
}
}
.slideshow {
width: 100%;
height: calc(var(--unit)*13);
figure {
height: calc(var(--unit)*11);
.section--content{
width: 100%;
}
}
@ -91,6 +82,8 @@
#home__hero {
margin-bottom: 0;
padding-bottom: calc(var(--unit)*1.5) !important;
@ -104,6 +97,7 @@
.section--title {
// font-size: 3.6em;
border: none;
margin-bottom: calc(var(--unit)*1.5);
// color: var(--color-orange);
@ -226,56 +220,17 @@
}
.slideshow-scroll{
width: 100vw;
position: relative;
left: calc((100vw - var(--max-w-home))*-0.5);
padding-bottom: 20px;
overflow-y: scroll;
@include hide-scrollbar();
margin-top: calc(var(--spacing) * 4);
margin-bottom: calc(var(--spacing) * 4);
.slideshow-scroll__warpper{
// padding-left: calc((100vw - var(--max-w-home))*0.5);
padding-left: var(--padding-body);
display: flex;
gap: var(--padding-inner);
.slideshow-item{
flex-shrink: 0;
figure{
height: 420px;
width: 100%;
img{
width: 100%;
aspect-ratio: 5/3;
}
}
}
&::after{
content: "........................................";
display: block;
width: calc((100vw - var(--max-w-home))*1);
color: transparent;
}
}
}
.screenshot-booklet{
display: flex;
--size-page: 340px;
--gap: var(--padding-inner);
gap: var(--gap);
width: calc(var(--size-page)*5 + var(--gap)*2);
width: 100%;
.cover, .page{
width: 300px;
.cover, .page{
img{
border: 0.5px solid var(--color-txt-light);
width: 100%;
@ -292,4 +247,15 @@
}
}
.slider-flex{
display: flex;
min-height: 500px;
background-color: #efefef;
.item{
display: none;
}
}

4
assets/css/pages/_species-list.scss
View file

@ -36,12 +36,12 @@
[data-page="species-list-by-families"]{
.species-list{
align-items: center;
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: calc(var(--spacing)*1);
gap: calc(var(--spacing)*0.5);
margin-bottom: calc(var(--spacing)*3);
.taxon{
width: calc(100%/3 - var(--spacing)*2/3);