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

see-more

Browse source
This commit is contained in:
Julie Blanc 2026-01-12 19:13:21 +01:00
parent 3e110f9c55
commit b8f12369b8
7 changed files with 87 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

16
assets/css/_home.scss
View file

@ -115,6 +115,18 @@
}
.content{
position: relative;
}
.see-more{
position: absolute;
bottom: 0;
font-size: var(--fs-small);
--hover-bg: var(--color);
}
}
@ -215,8 +227,8 @@
.see-more{
display: block;
color: var(--color-txt);
font-weight: bold;
// color: var(--color-txt);
// font-weight: bold;
padding-top: calc(var(--unit)*1.5);
}

26
assets/css/_see-more.scss Normal file
View file

@ -0,0 +1,26 @@
.see-more{
--hover-bg: var(--color-bg);
font-weight: 500;
color: var(--color-txt);
color: currentColor;
text-decoration: none;
span{ display: none;}
&::after{
content: "→";
position: relative;
display: inline-block;
padding-left: 0.75ch;
left: 0;
transition: left .4s ease-in-out;
}
&:hover{
text-decoration: underline;
&::after{
left: 0.5ch;
text-decoration: underline var(--hover-bg);
}
}
}

2
assets/css/_var.scss
View file

@ -4,6 +4,7 @@
--font-title: 'Borna', Arial, sans-serif;
--font: 'Nunito', Arial, sans-serif;
--fs-small: 11px;
--fs-normal: 14px;
font-size: 14px;
@ -21,6 +22,7 @@
--header-h: 60px;
--white: white;
--color-bg: white;
--color-violet: #6e62a4;

40
assets/style.css
View file

@ -2,6 +2,7 @@
:root {
--font-title: "Borna", Arial, sans-serif;
--font: "Nunito", Arial, sans-serif;
--fs-small: 11px;
--fs-normal: 14px;
font-size: 14px;
--unit: 24px;
@ -11,6 +12,7 @@
--radius-btn: 6px;
--header-h: 60px;
--white: white;
--color-bg: white;
--color-violet: #6e62a4;
--color-violet-medium: #9b92c4;
--color-violet-light: #e1dfec;
@ -284,6 +286,33 @@ button {
height: 100%;
}
.see-more {
--hover-bg: var(--color-bg);
font-weight: 500;
color: var(--color-txt);
color: currentColor;
text-decoration: none;
}
.see-more span {
display: none;
}
.see-more::after {
content: "→";
position: relative;
display: inline-block;
padding-left: 0.75ch;
left: 0;
transition: left 0.4s ease-in-out;
}
.see-more:hover {
text-decoration: underline;
}
.see-more:hover::after {
left: 0.5ch;
-webkit-text-decoration: underline var(--hover-bg);
text-decoration: underline var(--hover-bg);
}
.item-nav {
border: 1px solid var(--color-txt-light);
border-radius: var(--radius-small);
@ -418,6 +447,15 @@ button {
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--section-tool .section--inner {
display: grid;
@ -495,8 +533,6 @@ button {
}
#home__hero .see-more {
display: block;
color: var(--color-txt);
font-weight: bold;
padding-top: calc(var(--unit) * 1.5);
}

2
assets/style.css.map
View file

File diff suppressed because one or more lines are too long

1
assets/style.scss
View file

@ -5,6 +5,7 @@
@use "css/site-nav";
@use "css/site-footer";
@use "css/buttons";
@use "css/see-more";
@use "css/home-item-nav";
@use "css/home";

7
index.html
View file

@ -76,6 +76,7 @@
<p class="label">Livret du mois</p>
<h3 class="title">Apiaciée de Baumont</h3>
<p class="details">45 espèces</p>
<a class="see-more" href="#">Voir le livret<span>→</span></a>
</div>
<figure><img src="https://botascopia.inria.fr/photos/Crataegus%20monogyna_morphology_vegetative_leaves_leaves_type0_illustration_photo.png"></figure>
</div>
@ -107,8 +108,10 @@
<div class="content">
<p class="label">Espèce du jour</p>
<h3 class="title">Charme commun</h3>
<p class="details">Carpinus betulus L. — Betulaceae</p>
<p class="details">Carpinus betulus L. — Betulaceae</p>
<a class="see-more" href="#">Voir la fiche de l’espèce<span>→</span></a>
</div>
<figure><img src="https://botascopia.inria.fr/photos/Frangula%20alnus_morphology_vegetative_type_woody_twig-type_normal_twig-illustration_photo.png"></figure>
</div>