studio-variable/index-main
4
0
Fork 0
Code Issues 15 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);
}
}

4
assets/css/partials/_main-layout.scss
View file

@ -14,8 +14,8 @@ body{
padding-top: var(--header-h);
padding-bottom: calc(var(--spacing)*6);
min-height: 100dvh;
min-height: 100vh;
// min-height: 100dvh;
// min-height: 100vh;
.page__content{
max-width: var(--max-w-cards);

211
assets/css/style.css
View file

@ -674,6 +674,7 @@ button:disabled {
display: flex;
align-items: center;
gap: 1ch;
text-decoration: none;
}
#btn--back-to-top .text {
font-size: var(--fs-small);
@ -695,6 +696,7 @@ button:disabled {
#btn--back-to-top .icon svg {
width: 12px;
height: 12px;
fill: var(--color-txt);
}
#btn--back-to-top:hover {
opacity: 0.8;
@ -2461,6 +2463,43 @@ figcaption, .caption {
box-shadow: 1px 1px 1px hsla(0, 50%, 2%, 0.5);
}
.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 screen and (max-width: 768px) {
.dl-table {
font-size: var(--fs-small);
}
}
.dl-table .dl__group {
display: grid;
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
-moz-column-gap: 1ch;
column-gap: 1ch;
border-top: var(--border-light);
padding: calc(var(--spacing) * 0.5) 0;
}
.dl-table dt {
color: var(--color-txt-light);
padding-right: 1ch;
}
.dl-table ul:not(.keywords) {
list-style: none;
}
.dl-table ul:not(.keywords) li {
padding-bottom: 0.2em;
}
.dl-table a:hover {
opacity: 0.8;
}
#bottom-bar {
position: fixed;
left: 0;
@ -2519,6 +2558,9 @@ figcaption, .caption {
transform: rotate(-90deg);
transform-origin: center;
}
#bottom-bar .btn--back-to-top .icon svg {
fill: var(--color-txt);
}
#bottom-bar .title-group {
font-size: var(--fs-small);
display: flex;
@ -2563,6 +2605,124 @@ figcaption, .caption {
}
}
.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;
}
.form__newsletter input[type=email]::-moz-placeholder {
font-family: var(--font);
font-size: var(--fs-normal);
font-weight: 500;
color: black !important;
}
.form__newsletter input[type=email]::-moz-placeholder, .form__newsletter input[type=email]::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);
}
#support-bar {
height: var(--header-h);
background-color: var(--color-accent);
@ -2981,8 +3141,6 @@ body main {
padding: 0 var(--padding-body);
padding-top: var(--header-h);
padding-bottom: calc(var(--spacing) * 6);
min-height: 100dvh;
min-height: 100vh;
}
body main .page__content {
max-width: var(--max-w-cards);
@ -3233,6 +3391,22 @@ main .page__header ul.details li:hover {
}
}
[data-template=newsletter] .page__header,
[data-template=about] .page__header,
[data-template=privacy-policy] .page__header,
[data-template=legal-notices] .page__header {
border-bottom: none;
padding-bottom: 0px;
}
[data-template=newsletter] .page__header .page__title,
[data-template=about] .page__header .page__title,
[data-template=privacy-policy] .page__header .page__title,
[data-template=legal-notices] .page__header .page__title {
text-align: center;
border-bottom: var(--border-medium);
padding-bottom: calc(var(--spacing) * 0.5);
}
[data-template=investigation] main {
position: relative;
}
@ -3259,39 +3433,6 @@ main .page__header ul.details li:hover {
margin-bottom: calc(var(--spacing) * 2);
}
}
[data-template=investigation] main #investigation__dl {
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 screen and (max-width: 768px) {
[data-template=investigation] main #investigation__dl {
font-size: var(--fs-small);
}
}
[data-template=investigation] main #investigation__dl .dl__group {
display: grid;
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
-moz-column-gap: 1ch;
column-gap: 1ch;
border-top: var(--border-light);
padding: calc(var(--spacing) * 0.5) 0;
}
[data-template=investigation] main #investigation__dl dt {
color: var(--color-txt-light);
padding-right: 1ch;
}
[data-template=investigation] main #investigation__dl ul:not(.keywords) {
list-style: none;
}
[data-template=investigation] main #investigation__dl ul:not(.keywords) li {
padding-bottom: 0.2em;
}
#investigation__content {
padding-top: calc(var(--spacing) * 4);

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

3
assets/css/style.scss
View file

@ -28,9 +28,12 @@
@import "components/card-open-graph";
@import "components/swiper";
@import "components/slider-before-after";
@import "components/dl-table";
@import "components/bottom-bar";
@import "components/newsletter-form";
@import "components/support-bar";
@import "partials/site-header";
@import "partials/site-menu";
@import "partials/site-footer";

36
assets/css/template/_investigation.scss
View file

@ -33,39 +33,6 @@
#investigation__dl {
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;
}
}
}
@ -77,3 +44,6 @@
}

19
assets/css/template/_page-single.scss
View file

@ -29,4 +29,23 @@
@media #{$small} {
padding-top: 0;
}
}
[data-template="newsletter"],
[data-template="about"],
[data-template="privacy-policy"],
[data-template="legal-notices"]{
.page__header{
border-bottom: none;
padding-bottom: 0px;
.page__title{
text-align: center;
border-bottom: var(--border-medium);
padding-bottom: calc(var(--spacing) * 0.5);
}
}
}