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

search

Browse source
This commit is contained in:
Julie Blanc 2026-02-16 14:04:45 +01:00
parent 1b76727eff
commit 3c10e88b18
14 changed files with 272 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,4 @@
@use "abstracts/mixins.scss" as *;
.page-header{
// margin-top: calc(var(--spacing)*1);

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

@ -1,3 +1,5 @@
@use "abstracts/mixins.scss" as *;
#site-header{
height: var(--header-h);
width: 100vw;
@ -38,52 +40,6 @@
list-style: none;
}
/*----------------*/
/* search bar */
/*----------------*/
.search {
display: flex;
flex-direction: row-reverse;
height: calc(var(--unit)*1.5);
flex-grow: 2;
}
.search__toggle {
display: none;
}
.search__label {
cursor: pointer;
user-select: none;
width: calc(var(--unit)*1.5);
height: calc(var(--unit)*1.5);
display: flex;
justify-content: center;
align-items: center;
}
.search__input {
display: none;
}
.search__icon{
width: var(--unit);
}
.search__icon--open {
display: block;
}
.search__icon--close {
display: none;
}
.search__toggle:checked ~ .search__input {
display: block;
}
.search__toggle:checked ~ .search__label .search__icon--open {
display: none;
}
.search__toggle:checked ~ .search__label .search__icon--close {
display: block;
}
#btn__connexion{
font-weight: 500;

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

@ -56,6 +56,7 @@
--color-green-black: #016042;
--color-txt: rgb(41, 41, 41);
--color-txt: #0D2846;
--color-txt-light: #a5a9a9;
--color-light: #DCDDDD;
--color-x-light: #eaebeb;

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

@ -11,7 +11,7 @@
align-items: center;
justify-content: center;
height: calc(var(--unit)*1.5);
min-width: calc(var(--unit)*1.5);
border-radius: var(--radius-btn);
cursor: pointer;

110
assets/css/components/_search.scss Normal file
View file

@ -0,0 +1,110 @@
@use "../abstracts/mixins.scss" as *;
.search {
display: flex;
height: calc(var(--unit)*1.5);
flex-grow: 2;
flex-direction: row-reverse;
align-items: center;
gap: calc(var(--padding-inner)*0.5);
svg {
@include icon(18px);
stroke-width: 1px;
stroke: var(--color-txt);
}
.search__input-group {
display: grid;
grid-template-columns: var(--unit) 1fr;
width: 100%;
height: calc(var(--unit)*1.5);
input {
grid-column: 1/end;
grid-row: 1;
padding-left: calc(var(--padding-inner)*2.5);
font-family: sans-serif;
font-family: var(--font);
font-size: var(--fs-normal);
font-weight: 500;
border-radius: var(--radius-small);
border: 1px solid var(--color-txt-light);
outline: none;
&::placeholder {
font-family: var(--font);
font-size: var(--fs-normal);
}
&:focus {
outline: 1px solid var(--color-violet);
}
}
button {
grid-column: 1;
grid-row: 1;
z-index: 10;
align-self: center;
position: relative;
left: 10px;
top: 2px;
}
}
.search__icon {
width: calc(var(--unit)*1.25);
height: calc(var(--unit)*1.25);
// background-color: red;
border-radius: var(--radius-btn);
border: 1px solid var(--color-txt);
// background-color: var(--color-x-light);
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background-color: var(--color-x-light);
}
}
}
#search-toggle {
display: none;
}
#search-toggle~[for="search-toggle"] .search__icon--open {
display: flex;
}
#search-toggle~[for="search-toggle"] .search__icon--close {
display: none;
}
#search-toggle~.search__input-group {
display: none;
}
#search-toggle:checked~[for="search-toggle"] .search__icon--open {
display: none;
}
#search-toggle:checked~[for="search-toggle"] .search__icon--close {
display: flex;
}
#search-toggle:checked~.search__input-group {
display: grid;
}

9
assets/css/components/_taxon-card-inline.scss
View file

@ -31,10 +31,7 @@
}
&:first-of-type::before{ border-color: var(--color-green-light);}
.chart-edit {
display: block;
margin-right: var(--padding-inner);
}
@ -96,4 +93,8 @@
display: block!important;
z-index: 30;
}
.taxon .chart-edit {
display: block;
margin-right: var(--padding-inner);
}
}

2
assets/css/pages/_home-item-nav.scss
View file

@ -13,6 +13,8 @@
display: flex;
flex-direction: column;
text-decoration: none;
cursor: pointer;

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

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

174
assets/style.css
View file

@ -38,6 +38,7 @@
--color-green-x-light: #eef7f4;
--color-green-black: #016042;
--color-txt: rgb(41, 41, 41);
--color-txt: #0D2846;
--color-txt-light: #a5a9a9;
--color-light: #DCDDDD;
--color-x-light: #eaebeb;
@ -150,60 +151,6 @@ figure, picture, img {
list-style: none;
}
/*----------------*/
/* search bar */
/*----------------*/
.search {
display: flex;
flex-direction: row-reverse;
height: calc(var(--unit) * 1.5);
flex-grow: 2;
}
.search__toggle {
display: none;
}
.search__label {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: calc(var(--unit) * 1.5);
height: calc(var(--unit) * 1.5);
display: flex;
justify-content: center;
align-items: center;
}
.search__input {
display: none;
}
.search__icon {
width: var(--unit);
}
.search__icon--open {
display: block;
}
.search__icon--close {
display: none;
}
.search__toggle:checked ~ .search__input {
display: block;
}
.search__toggle:checked ~ .search__label .search__icon--open {
display: none;
}
.search__toggle:checked ~ .search__label .search__icon--close {
display: block;
}
#btn__connexion {
font-weight: 500;
font-size: 1rem;
@ -309,6 +256,108 @@ figure, picture, img {
padding: var(--padding-body);
}
.search {
display: flex;
height: calc(var(--unit) * 1.5);
flex-grow: 2;
flex-direction: row-reverse;
align-items: center;
gap: calc(var(--padding-inner) * 0.5);
}
.search svg {
display: inline-block;
width: 18px;
height: 18px;
}
.search svg svg {
width: 100%;
height: 100%;
}
.search svg {
stroke-width: 1px;
stroke: var(--color-txt);
}
.search .search__input-group {
display: grid;
grid-template-columns: var(--unit) 1fr;
width: 100%;
height: calc(var(--unit) * 1.5);
}
.search .search__input-group input {
grid-column: 1/end;
grid-row: 1;
padding-left: calc(var(--padding-inner) * 2.5);
font-family: sans-serif;
font-family: var(--font);
font-size: var(--fs-normal);
font-weight: 500;
border-radius: var(--radius-small);
border: 1px solid var(--color-txt-light);
outline: none;
}
.search .search__input-group input::-moz-placeholder {
font-family: var(--font);
font-size: var(--fs-normal);
}
.search .search__input-group input::placeholder {
font-family: var(--font);
font-size: var(--fs-normal);
}
.search .search__input-group input:focus {
outline: 1px solid var(--color-violet);
}
.search .search__input-group button {
grid-column: 1;
grid-row: 1;
z-index: 10;
align-self: center;
position: relative;
left: 10px;
top: 2px;
}
.search .search__icon {
width: calc(var(--unit) * 1.25);
height: calc(var(--unit) * 1.25);
border-radius: var(--radius-btn);
border: 1px solid var(--color-txt);
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.search .search__icon:hover {
background-color: var(--color-x-light);
}
#search-toggle {
display: none;
}
#search-toggle ~ [for=search-toggle] .search__icon--open {
display: flex;
}
#search-toggle ~ [for=search-toggle] .search__icon--close {
display: none;
}
#search-toggle ~ .search__input-group {
display: none;
}
#search-toggle:checked ~ [for=search-toggle] .search__icon--open {
display: none;
}
#search-toggle:checked ~ [for=search-toggle] .search__icon--close {
display: flex;
}
#search-toggle:checked ~ .search__input-group {
display: grid;
}
.btn--solid {
font-weight: 600;
font-size: 1.2rem;
@ -318,6 +367,7 @@ figure, picture, img {
align-items: center;
justify-content: center;
height: calc(var(--unit) * 1.5);
min-width: calc(var(--unit) * 1.5);
border-radius: var(--radius-btn);
cursor: pointer;
}
@ -1546,13 +1596,6 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
#view-list:checked ~ .page-species-list .species-list .taxon:first-of-type::before {
border-color: var(--color-green-light);
}
#view-edit:checked ~ .page-species-list .family .species-list .taxon .chart-edit,
#view-edit:checked ~ .page-species-list .species-list .taxon .chart-edit,
#view-list:checked ~ .page-species-list .family .species-list .taxon .chart-edit,
#view-list:checked ~ .page-species-list .species-list .taxon .chart-edit {
display: block;
margin-right: var(--padding-inner);
}
#view-edit:checked ~ .page-species-list .family .species-list .taxon figure,
#view-edit:checked ~ .page-species-list .species-list .taxon figure,
#view-list:checked ~ .page-species-list .family .species-list .taxon figure,
@ -1644,6 +1687,11 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
display: block !important;
z-index: 30;
}
#view-edit:checked ~ .page-species-list .family .species-list .taxon .chart-edit,
#view-edit:checked ~ .page-species-list .species-list .taxon .chart-edit {
display: block;
margin-right: var(--padding-inner);
}
.item-nav {
border: 1.5px solid var(--color-txt);
@ -1655,6 +1703,7 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
min-height: calc(var(--unit) * 5);
display: flex;
flex-direction: column;
text-decoration: none;
cursor: pointer;
}
.item-nav .title {
@ -1731,6 +1780,9 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
#main_home .species-list {
margin-bottom: calc(var(--spacing) * 3);
}
#main_home .species-list .taxon:hover {
border-color: red !important;
}
#main_home .species-list .title {
grid-column: 1/end;
font-size: var(--fs-medium);

2
assets/style.css.map
View file

File diff suppressed because one or more lines are too long

1
assets/style.scss
View file

@ -6,6 +6,7 @@
@use "css/site-header";
@use "css/site-nav";
@use "css/site-footer";
@use "css/components/search";
@use "css/components/buttons";
@use "css/components/slideshow";
@use "css/components/logos-container";