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

back species

Browse source
This commit is contained in:
Julie Blanc 2026-02-16 15:34:30 +01:00
parent 9a6ff0b24e
commit 25cdb3bd0b
13 changed files with 158 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

24
assets/css/components/_buttons.scss
View file

@ -102,5 +102,29 @@ label.btn-action{
left: 2.5ch;
}
}
}
.link-back{
a{
text-decoration: none;
color: var(--color-txt);
font-size: var(--fs-small);
&::before{
content: "←";
font-family: var(--font-title);
font-size: 0.9em;
position: relative;
left: -1.5ch;
transition: left .4s ease-in-out;
text-decoration: 1px underline transparent;
}
}
&:hover{
opacity: 0.8;
a::before{
left: -2.5ch;
}
}
}

19
assets/css/components/_slideshow.scss
View file

@ -42,11 +42,26 @@ $slideshow-items: 3;
}
}
.schema-collectifs{
background-color: white;
img{
object-fit: contain;
}
}
figcaption{
width: calc(100% - var(--arrow-space)*2);
font-size: var(--fs-small);
height: calc(var(--unit)*2);
font-size: var(--fs-normal);
font-weight: 500;
padding-top: calc(var(--padding-inner)*0.5);
text-align: left;
width: 100%;
margin-top: calc(var(--spacing)*0.5);
&::before{
content: '→';
font-family: var(--font-title);
padding-right: 2ch;
}
}
}

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

@ -55,11 +55,14 @@
.species-list{
margin-bottom: calc(var(--spacing)*3);
.taxon:hover{
border-color: red!important;
outline: 3px solid var(--color-txt);
}
// .taxon:hover{
// border-color: red!important;
// }
}
.species-list .title{

27
assets/css/pages/_species-single.scss
View file

@ -8,30 +8,45 @@
.page-header__inner{
display: grid;
grid-template-columns: var(--w-fig) 1fr;
grid-gap: var(--padding-body);
grid-column-gap: var(--padding-body);
}
.link-back{
grid-column: 1;
grid-row: 1;
text-align: left;
position: relative;
top: calc(var(--spacing)*-1);
a{
color: var(--color-green)!important;
}
padding-left: 1.5ch;
}
figure, picture{
border-radius: var(--radius-img);
grid-column: 1;
grid-row: 1/3;
grid-row: 2/4;
@include fig-ratio(1/1);
}
.group-title{
grid-column: 2;
grid-row: 1;
grid-row: 2;
align-self: start;
padding-top: calc(var(--spacing)*0.5);
padding-bottom: calc(var(--spacing)*1);
}
.saviez-vous{
grid-column: 2;
grid-row: 2;
grid-row: 3;
align-self: start;
}
@ -56,12 +71,14 @@
}
.btn--group{
grid-column: span 2;
display: flex;
justify-content: right;
gap: var(--padding-inner);
position: relative;
top: calc(var(--spacing)*-1);
}

65
assets/style.css
View file

@ -499,6 +499,28 @@ label.btn-action .text {
left: 2.5ch;
}
.link-back a {
text-decoration: none;
color: var(--color-txt);
font-size: var(--fs-small);
}
.link-back a::before {
content: "←";
font-family: var(--font-title);
font-size: 0.9em;
position: relative;
left: -1.5ch;
transition: left 0.4s ease-in-out;
-webkit-text-decoration: 1px underline transparent;
text-decoration: 1px underline transparent;
}
.link-back:hover {
opacity: 0.8;
}
.link-back:hover a::before {
left: -2.5ch;
}
.slideshow {
height: 100%;
width: 100%;
@ -539,11 +561,26 @@ label.btn-action .text {
-o-object-fit: cover;
object-fit: cover;
}
.slideshow-item .schema-collectifs {
background-color: white;
}
.slideshow-item .schema-collectifs img {
-o-object-fit: contain;
object-fit: contain;
}
.slideshow-item figcaption {
width: calc(100% - var(--arrow-space) * 2);
font-size: var(--fs-small);
height: calc(var(--unit) * 2);
font-size: var(--fs-normal);
font-weight: 500;
padding-top: calc(var(--padding-inner) * 0.5);
text-align: left;
width: 100%;
margin-top: calc(var(--spacing) * 0.5);
}
.slideshow-item figcaption::before {
content: "→";
font-family: var(--font-title);
padding-right: 2ch;
}
/* Display slides (input checked)
@ -1848,7 +1885,7 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
margin-bottom: calc(var(--spacing) * 3);
}
#main_home .species-list .taxon:hover {
border-color: red !important;
outline: 3px solid var(--color-txt);
}
#main_home .species-list .title {
grid-column: 1/end;
@ -2099,12 +2136,25 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
[data-page=species-single] .page-header .page-header__inner {
display: grid;
grid-template-columns: var(--w-fig) 1fr;
grid-gap: var(--padding-body);
grid-column-gap: var(--padding-body);
}
[data-page=species-single] .page-header .link-back {
grid-column: 1;
grid-row: 1;
text-align: left;
position: relative;
top: calc(var(--spacing) * -1);
}
[data-page=species-single] .page-header .link-back a {
color: var(--color-green) !important;
}
[data-page=species-single] .page-header .link-back {
padding-left: 1.5ch;
}
[data-page=species-single] .page-header figure, [data-page=species-single] .page-header picture {
border-radius: var(--radius-img);
grid-column: 1;
grid-row: 1/3;
grid-row: 2/4;
width: 100%;
overflow: hidden;
}
@ -2117,13 +2167,14 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
}
[data-page=species-single] .page-header .group-title {
grid-column: 2;
grid-row: 1;
grid-row: 2;
align-self: start;
padding-top: calc(var(--spacing) * 0.5);
padding-bottom: calc(var(--spacing) * 1);
}
[data-page=species-single] .page-header .saviez-vous {
grid-column: 2;
grid-row: 2;
grid-row: 3;
align-self: start;
}
[data-page=species-single] .page-header .page-title {

2
assets/style.css.map
View file

File diff suppressed because one or more lines are too long

0
content/images/Bellis-perennis-L.-1753-bdtfx-par-Annie-JOUAUD.jpg → images/Bellis-perennis-L.-1753-bdtfx-par-Annie-JOUAUD.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 81 KiB

Before After
Before After

0
content/images/Epinay3.jpeg → images/Epinay3.jpeg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 MiB

After

Width:  |  Height:  |  Size: 1.9 MiB

Before After
Before After

0
content/images/atelier-1.png → images/atelier-1.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 308 KiB

After

Width:  |  Height:  |  Size: 308 KiB

Before After
Before After

0
content/images/atelier-2.png → images/atelier-2.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 355 KiB

After

Width:  |  Height:  |  Size: 355 KiB

Before After
Before After

BIN
images/shema-collectifs.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 63 KiB

14
index.html
View file

@ -159,7 +159,7 @@
<div class="slideshow-item" data-item="1">
<figure>
<img src="/content/images/atelier-2.png">
<img src="/images/atelier-2.png">
</figure>
<figcaption>
Atelier Lorem Ispsum, Rennes, 23 septembre 2025
@ -167,15 +167,23 @@
</div>
<div class="slideshow-item" data-item="2">
<figure>
<img src="/content/images/atelier-1.png">
<img src="/images/atelier-1.png">
</figure>
<figcaption>
Atelier 2 Lorem Ispsum, Rennes, 23 septembre 2025
</figcaption>
</div>
<div class="slideshow-item" data-item="3">
<figure class="schema-collectifs">
<img src="/images/shema-collectifs.png">
</figure>
<figcaption>
Accompagnement des collectifs
</figcaption>
</div>
<div class="slideshow-item" data-item="3">
<figure>
<img src="/content/images/Epinay3.jpeg">
<img src="/images/Epinay3.jpeg">
</figure>
<figcaption>
Atelier 3 Lorem Ispsum, Epinay, 23 septembre 2025

33
species-single.html
View file

@ -19,10 +19,9 @@
<main data-page="species-single">
<header class="page-header">
<div class="page-header__inner">
<button class="link-back"><a href="species-list.html">Liste des espèces</a></button>
<div class="group-title">
<h2 class="page-title">Ailante glanduleux</h2>
<p class="latin"><i>Ailanthus altissima</i> <span>Swingle</span> — Simaroubaceae</p>
@ -38,6 +37,7 @@
</div>
<div class="btn--group">
<button class="btn-action btn-download">
<a href="#" download>
<span class="icon"><include src="/components/icons/download.svg"></include></span> <span class="text">Télécharger la fiche</span>
@ -864,19 +864,24 @@
</section>
</div>
<section id="credits">
<p class="title">Crédits</p>
<ul>
<li>Pierre Paul (photo principale)</li>
<li>Bob Harvey (photo inflorescence, photo fruit, photo bourgeons)</li>
<li>Inès Bourgeon, Violette Defloeur</li>
</ul>
</section>
<!-- For mobile -->
<section id="saviez-vous">
<h3 class="section-title">Le saviez-vous ? </h3>
<p>Originaire de Chine, et introduite en 1751 en Europe, elle est aujourd'hui très envahissante par ses drageons.</p>
</section>
<section id="credits">
<p class="title">Crédits</p>
<ul>
<li>Pierre Paul (photo principale)</li>
<li>Bob Harvey (photo inflorescence, photo fruit, photo bourgeons)</li>
<li>Inès Bourgeon, Violette Defloeur</li>
</ul>
</section>
</div>