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

newsletter apage
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-26 17:02:34 +01:00
parent e7da4d77b5
commit 20bdf428e4
25 changed files with 648 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

3
assets/css/components/_bottom-bar.scss
View file

@ -55,6 +55,9 @@
.icon{
transform: rotate(-90deg);
transform-origin: center;
svg{
fill: var(--color-txt);
}
}
}

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

@ -366,6 +366,7 @@ fill: var(--color-txt-light);
display: flex;
align-items: center;
gap: 1ch;
text-decoration: none;
}
.text{
@ -390,6 +391,7 @@ fill: var(--color-txt-light);
svg{
width: 12px;
height: 12px;
fill: var(--color-txt);
}
}

37
assets/css/components/_dl-table.scss Normal file
View file

@ -0,0 +1,37 @@
.dl-table {
margin-top: calc(var(--spacing) * 1.5);
border-bottom: var(--border-light);
max-width: var(--max-w-content);
max-width: var(--max-w-cards);
margin-inline: auto;
font-size: var(--fs-normal);
@media #{$small} {
font-size: var(--fs-small);
}
.dl__group {
@include grid-content();
column-gap: 1ch;
border-top: var(--border-light);
padding: calc(var(--spacing) * 0.5) 0;
}
dt {
color: var(--color-txt-light);
padding-right: 1ch;
}
ul:not(.keywords) {
list-style: none;
li {
padding-bottom: 0.2em;
}
}
a:hover{
opacity: 0.8;
}
}

112
assets/css/components/_newsletter-form.scss Normal file
View file

@ -0,0 +1,112 @@
.form__newsletter {
margin-top: calc(var(--spacing)*2);
--size: 24px;
position: relative;
display: flex;
align-items: center;
position: relative;
max-width: var(--max-w-content);
margin-inline: auto;
}
.form__newsletter input[type=email] {
height: calc(var(--h-block) * 1.5);
width: 100%;
border-radius: calc(var(--h-block) * 0.75);
outline: none;
border: none;
padding: 0 2ch;
font-family: var(--font);
font-size: var(--fs-normal);
z-index: 40;
padding-top: 4px;
border: 1px solid var(--color-txt);
background-color: white;
font-family: var(--font);
font-size: var(--fs-normal);
font-weight: 500;
color: black;
&::-moz-placeholder,
&::placeholder {
font-family: var(--font);
font-size: var(--fs-normal);
font-weight: 500;
color: black!important;
}
}
.form__newsletter input[type=email]:focus {
outline: 3px solid var(--grey-400);
}
.form__newsletter button[type=submit] {
position: absolute;
right: 2px;
z-index: 100;
--size: calc(var(--h-block)*1.5 - 4px);
font-family: var(--font);
font-size: var(--fs-button-bold);
height: var(--size);
display: flex;
align-items: center;
gap: 0.75ch;
color: var(--color-accent);
font-weight: var(--fw-medium);
text-decoration: none;
cursor: pointer;
}
.form__newsletter button[type=submit] .icon,
.form__newsletter button[type=submit] .txt {
z-index: 10;
}
.form__newsletter button[type=submit] .icon {
width: var(--size);
height: var(--size);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-bg);
text-align: center;
}
.form__newsletter button[type=submit] .icon svg {
fill: var(--color-bg);
width: 80%;
}
.form__newsletter button[type=submit] .txt {
position: relative;
top: 2px;
font-size: var(--fs-normal);
display: none;
padding-left: 1ch;
}
.form__newsletter button[type=submit]::after {
content: "";
display: block;
background-color: var(--color-accent);
border-radius: calc(var(--size) / 2);
width: var(--size);
height: var(--size);
position: absolute;
right: 0;
z-index: 0;
transition: width 0.2s;
}
.form__newsletter button[type=submit]:hover .txt {
color: var(--color-bg);
display: block;
}
.form__newsletter button[type=submit]:hover::after {
width: 100%;
}
[data-template="newsletter"]{
.details p{
font-size: var(--fs-xsmall);
margin-top: calc(var(--spacing)*1);
}
}