studio-variable/index-main
3
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

slider hero
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-08 14:53:08 +01:00
parent 6cf52a6703
commit 43e50ebc37
21 changed files with 578 additions and 143 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,7 @@ button{
color: var(--color-txt);
&:hover{
color: var(--grey-100);
svg{ fill: var(--grey-100); }
}
a{
@ -30,7 +31,34 @@ button:disabled{
}
.btn--small{
display: block;
height: calc(var(--h-block)*0.75);
border: var(--border);
border-radius: var(--radius-btn);
font-size: var(--fs-small);
line-height: 1;
overflow: hidden;
white-space: nowrap;
a{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 0 1ch;
padding-top: 2px;
}
&.no-link{
display: flex;
align-items: center;
justify-content: center;
padding: 0 1ch;
padding-top: 2px;
}
}
.btn--bold,
.btn--bold-inline{
display: block;
@ -90,6 +118,10 @@ button:disabled{
}
}
.btn--light{
border: var(--border-light);
}

2
assets/css/components/_card-article.scss
View file

@ -36,7 +36,7 @@
.dl{
margin-top: calc(var(--spacing)*0.5);
font-size: var(--fs-small);
.dl__group{
@include grid-content();
border-top: var(--border-light);

40
assets/css/components/_search-form.scss Normal file
View file

@ -0,0 +1,40 @@
.search-form{
--icon: 40px;
display: grid;
grid-template-columns: var(--icon) 1fr;
input{
grid-column: 1/3;
grid-row: 1;
height: calc(var(--h-block) * 1.5);
width: 100%;
background: var(--color-bg);
border: 1px solid var(--color-txt);
padding-left: var(--icon);
font-family: var(--font);
font-size: var(--fs-normal);
color: var(--color-txt);
padding-top: 3px;
&::placeholder{
font-family: var(--font);
font-size: var(--fs-normal);
color: var(--color-txt);
}
&:focus{
border-color: var(--color-accent);
outline: none;
}
}
.icon{
grid-column: 1;
grid-row: 1;
z-index: 10;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
svg{
width: 20px;
}
}
}

57
assets/css/components/_sort.scss Normal file
View file

@ -0,0 +1,57 @@
.sort{
display: flex;
align-items: center;
gap: 1ch;
.arrow{
line-height: 0;
--size: 12px;
height: var(--size);
width: var(--size);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
top: -2px;
transform: rotate(90deg);
transition: transform 0.2s ease-in;
svg{
width: 100%;
fill: var(--color-txt);
}
}
&[data-sort-type="up"]{
.arrow{
transform: rotate(-90deg);
}
}
&[data-sort="false"]{
color: var(--color-txt-light);
svg{
fill: var(--color-txt-light);
}
}
&[data-sort="false"],
&[data-sort="true"]{
&:hover{
color: var(--grey-100);
svg{
fill: var(--grey-100);
}
}
}
}

3
assets/css/components/_tags.scss
View file

@ -1,6 +1,7 @@
.tag{
height: calc(var(--h-block)*0.75);
border-radius: calc(var(--h-block)*0.75/2);
// border-radius: calc(var(--h-block)*0.75/2);
border-radius: var(--radius-small);
display: flex;
align-items: center;

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

@ -1,4 +1,19 @@
.title-page{
font-size: var(--fs-medium);
.page__title{
font-size: var(--fs-big);
font-weight: normal;
text-transform: uppercase;
margin: calc(var(--spacing)*2) auto;
text-align: center;
max-width: var(--max-w-container);
}
.page__description{
display: none;
max-width: var(--max-w-content);
margin: calc(var(--spacing)*2) auto;
p{
font-size: var(--fs-normal);
}
}