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

support : integration except products

Browse source
This commit is contained in:
isUnknown 2025-11-04 08:33:39 +01:00
parent 904dd353e8
commit ba0df6b5cb
44 changed files with 2146 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

55
assets/css/components/_buttons.scss Normal file
View file

@ -0,0 +1,55 @@
.btn--bold .btn--bold__container{
--size: 28px;
font-size: var(--fs-big);
height: var(--size);
position: relative;
display: flex;
align-items: center;
gap: 0.75ch;
padding-right: 1ch;
color: var(--color-accent);
font-weight: var(--fw-medium);
text-decoration: none;
cursor: pointer;
.icon, .txt{ z-index: 10; }
.icon{
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
padding-top: 1px;
padding-left: 2px;
svg{
width: 70%;
fill: var(--color-bg);
}
}
&::before{
content: '';
display: block;
background-color: var(--color-accent);
border-radius: calc(var(--size)/2);
width: var(--size);
height: var(--size);
position: absolute;
left: 0px;
z-index: 0;
transition: width .2s
}
&:hover{
color: var(--color-bg);
&::before{
width: 100%;
}
}
}

74
assets/css/components/_comments-slider.scss Normal file
View file

@ -0,0 +1,74 @@
.comments-slider {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
gap: 0;
padding: 0;
scrollbar-width: none; /* Firefox */
@media #{$small-up}{
padding-left: 20%;
flex: 0 0 40%;
}
}
.comments-slider::-webkit-scrollbar {
display: none;
}
.comment {
scroll-snap-align: start;
// background-color: #444;
@media #{$small}{
flex: 0 0 calc(100vw - var(--padding-body)*2); /* mobile */
padding: 0px 2ch;
}
@media #{$small-up}{
flex: 0 0 40%;
}
}
.comment__text{
font-size: var(--fs-medium);
font-weight: var(--fw-medium);
line-height: 1;
max-width: 40ch;
text-align: center;
}
.comment__name {
margin-top: calc(var(--spacing)*0.5);
text-align: center;
}
/* Dots */
.comments-slider__dots {
display: flex;
@media #{$small-up}{ justify-content: center; }
@media #{$small}{ justify-content: flex-end; }
margin-top: 0.5rem;
gap: 0.4rem;
margin-top: calc(var(--spacing)*1.5);
}
.comments-slider__dots button {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
background: var(--grey-400);
cursor: pointer;
transition: background 0.3s;
}
.comments-slider__dots button.active {
background: var(--color-txt);
}

81
assets/css/components/_form-newsletter.scss Normal file
View file

@ -0,0 +1,81 @@
.form__newsletter{
--size: 24px;
position: relative;
display: flex;
align-items: center;
max-width: 36ch;
margin: calc(var(--spacing)*1) auto;
margin-top: calc(var(--spacing)*1.5);
input[type="email"]{
height: var(--h-block);
width: 100%;
border-radius: calc(var(--h-block)*0.5);
outline: none;
border: none;
padding: 0 1ch;
font-size: var(--fs-medium);
z-index: 40;
&::placeholder{
font-size: var(--fs-medium);
}
&:focus{
outline: 3px solid var(--grey-400);
}
}
button[type="submit"].btn--bold{
z-index: 50;
position: absolute;
right: 3px;
.btn--bold__container{
z-index: 50;
padding-right: 0;
&::before{
left: auto;
right: 0;
}
.txt{
font-size: var(--fs-medium);
display: none;
padding-left: 1ch;
}
&:hover{
.txt{
display: block;
}
}
}
// shadow on input
&::before{
content: '';
display: block;
width: 120px;
height: 30px;
background: linear-gradient(90deg,transparent 0%, var(--color-txt) 80%);
position: absolute;
left: -110px;
z-index: 40;
}
}
}

51
assets/css/components/_gauge.scss Normal file
View file

@ -0,0 +1,51 @@
.gauge__container{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#gauge{
width: 100%;
margin-bottom: calc(var(--spacing)*0.25);
height: calc(var(--h-block)*0.5);
border-radius: calc(var(--h-block)*0.25);
background-color: var(--grey-400);
position: relative;
overflow: hidden;
&::before{
content: '';
display: block;
height: calc(var(--h-block)*0.5);
border-radius: calc(var(--h-block)*0.25);
width: 0%;
background-color: var(--color-txt);
position: absolute;
top: 0;
left: 0;
animation: fillGauge 1s ease forwards;
}
}
@keyframes fillGauge {
from {
width: 0%;
}
to {
width: var(--pourcent);
}
}
.gauge--infos{
.property{
font-size: var(--fs-small);
padding-bottom: 3px;
}
&:last-of-type{
text-align: right;
}
}

1
assets/css/components/_heading.scss Normal file
View file

@ -0,0 +1 @@

32
assets/css/components/_list-socials.scss Normal file
View file

@ -0,0 +1,32 @@
.list-socials{
list-style-type: none;
li {
margin-bottom: calc(var(--spacing)*0.25);
.link--external{
display: flex;
align-items: center;
gap: 1ch;
text-decoration: none;
.icon svg {
width: 25px;
fill: var(--color-txt);
}
.arrow svg{
position: relative;
top: 3px;
width: 12px;
fill: var(--grey-400);
}
}
}
}

38
assets/css/components/_nav-tabs.scss Normal file
View file

@ -0,0 +1,38 @@
.nav--tabs{
height: var(--h-block);
width: auto;
border: var(--border);
border-radius: var(--radius-small);
overflow: hidden;
display: inline-flex;
width: auto;
margin: 0 auto;
margin-bottom: var(--spacing);
.nav--tabs__btn{
font-size: var(--fs-small);
padding: 0 1ch;
&.is-selected{
background-color: var(--color-txt);
color: var(--color-bg);
}
&:not(.is-selected):hover{
background-color: var(--grey-800);
cursor: pointer;
}
}
.nav--tabs__btn + .nav--tabs__btn{
border-left: var(--border);
}
}

53
assets/css/components/_player.scss Normal file
View file

@ -0,0 +1,53 @@
.player__container {
width: 100%;
height: 100%;
.player__element {
width: 100%;
height: 100%;
display: grid;
place-items: center;
overflow: hidden;
// display: none;
.player__btn {
svg {
fill: var(--color-txt);
width: 100%;
}
position: absolute;
width: 60px;
height: 60px;
cursor: pointer;
}
img,
video {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.player__iframe {
display: none;
width: 100%;
height: 100%;
iframe{
width: 100%;
height: 100%;
}
}
}

65
assets/css/components/_text.scss Normal file
View file

@ -0,0 +1,65 @@
#page-don{
// text -----------------------------------------
.p__baseline-big{
font-size: var(--fs-big);
font-weight: var(--fw-medium);
line-height: var(--leading-tight);
text-align: center;
margin: calc(var(--spacing)*1.75) 0;
}
.p__baseline{
font-size: var(--fs-medium);
font-weight: var(--fw-medium);
line-height: var(--leading-tight);
text-align: center;
margin: var(--spacing) 0;
}
.p__details{
font-size: var(--fs-small);
margin-bottom: 0.5em;
color: var(--grey-400);
}
// heading ---------------------------------------------
.hero-heading{
font-size: var(--fs-x-big);
line-height: var(--leading-tight);
font-weight: var(--fw-medium);
display: inline;
background: var(--color-txt);
color: var(--color-bg);
padding: 0 0.3em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
text-align: center;
}
.section__heading{
font-size: var(--fs-medium);
font-weight: var(--fw-medium);
line-height: 1;
height: calc(var(--spacing)*3);
border-bottom: var(--border);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.subsection__heading{
font-size: var(--fs-normal);
font-weight: var(--fw-medium);
line-height: 1;
margin-top: calc(var(--spacing)*0.75);
margin-bottom: calc(var(--spacing)*1);
}
}