This commit is contained in:
isUnknown
parent
522d975a3a
commit
48e7f21c71
37 changed files with 2595 additions and 1348 deletions
60
assets/css/components/_btn--don.scss
Normal file
60
assets/css/components/_btn--don.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
#btn--don__mobile {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
padding-bottom: calc(var(--spacing) * 1.5);
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
opacity: 0;
|
||||
transition: opacity ease-in 0.2s;
|
||||
|
||||
pointer-events: none;
|
||||
&.is-visible {
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.is-sticky {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media #{$small-up} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--don {
|
||||
--vertical-padding: 0.5ch;
|
||||
height: calc(var(--h-block) + var(--vertical-padding));
|
||||
border-radius: calc(var(--h-block) / 1);
|
||||
padding: var(--vertical-padding) 2ch;
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: var(--fw-bold);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5ch;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 28px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: var(--color-bg);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,55 +1,157 @@
|
|||
.btn--bold .btn--bold__container{
|
||||
--size: 28px;
|
||||
font-size: var(--fs-big);
|
||||
height: var(--size);
|
||||
button {
|
||||
cursor: pointer;
|
||||
font-family: var(--font);
|
||||
font-size: var(--fons-normal);
|
||||
color: var(--color-txt);
|
||||
&:hover {
|
||||
color: var(--grey-100);
|
||||
}
|
||||
|
||||
position: relative;
|
||||
a {
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.soutenir {
|
||||
a {
|
||||
color: var(--color-accent);
|
||||
&:hover {
|
||||
color: var(--color-accent) !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn--bold,
|
||||
.btn--bold-inline {
|
||||
display: block;
|
||||
height: calc(var(--h-block) * 1);
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-small);
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75ch;
|
||||
padding-right: 1ch;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 2ch;
|
||||
padding-top: 4px;
|
||||
}
|
||||
&.no-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 2ch;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--bold {
|
||||
background-color: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
&:hover {
|
||||
background-color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
a {
|
||||
color: var(--color-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn--bold-inline {
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
.btn--bold-inline:hover {
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
a {
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
// DELETE ?
|
||||
|
||||
.btn__default {
|
||||
--size: calc(var(--h-block) - 8px);
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: var(--fw-normal);
|
||||
height: var(--size);
|
||||
padding-right: 1.5ch;
|
||||
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0ch;
|
||||
// padding-right: 0.5ch;
|
||||
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;
|
||||
color: var(--color-bg);
|
||||
text-align: center;
|
||||
|
||||
svg {
|
||||
fill: var(--color-bg);
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-family: var(--font-title);
|
||||
color: var(--color-accent);
|
||||
|
||||
font-weight: var(--fw-medium);
|
||||
|
||||
text-decoration: none;
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: var(--fw-bold);
|
||||
padding-left: 1ch;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
background-color: var(--color-accent);
|
||||
border-radius: calc(var(--size) / 2);
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
transition: width 0.2s;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
&:hover {
|
||||
//
|
||||
.txt {
|
||||
color: var(--color-bg);
|
||||
display: block;
|
||||
}
|
||||
|
||||
&::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
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
color: var(--color-bg);
|
||||
&::before{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,74 +0,0 @@
|
|||
.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);
|
||||
}
|
||||
|
||||
|
|
@ -4,26 +4,26 @@
|
|||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
max-width: 36ch;
|
||||
|
||||
margin: calc(var(--spacing)*1) auto;
|
||||
margin-top: calc(var(--spacing)*1.5);
|
||||
|
||||
|
||||
input[type="email"]{
|
||||
|
||||
height: var(--h-block);
|
||||
height: calc(var(--h-block)*1.25);
|
||||
width: 100%;
|
||||
border-radius: calc(var(--h-block)*0.5);
|
||||
border-radius: calc(var(--h-block)*0.625);
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 0 1ch;
|
||||
padding: 0 2ch;
|
||||
font-family: var(--font);
|
||||
|
||||
font-size: var(--fs-medium);
|
||||
font-size: var(--fs-normal);
|
||||
z-index: 40;
|
||||
padding-top: 4px;
|
||||
&::placeholder{
|
||||
font-size: var(--fs-medium);
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-normal);
|
||||
}
|
||||
|
||||
&:focus{
|
||||
|
|
@ -33,49 +33,95 @@
|
|||
|
||||
}
|
||||
|
||||
|
||||
button[type="submit"].btn--bold{
|
||||
|
||||
z-index: 50;
|
||||
button[type="submit"].btn--newletter{
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
right: 2px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.btn--bold__container{
|
||||
z-index: 50;
|
||||
padding-right: 0;
|
||||
|
||||
&::before{
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
button[type="submit"].btn--newletter {
|
||||
|
||||
|
||||
.txt{
|
||||
font-size: var(--fs-medium);
|
||||
display: none;
|
||||
padding-left: 1ch;
|
||||
}
|
||||
--size: calc(var(--h-block)*1.25 - 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;
|
||||
|
||||
&:hover{
|
||||
.txt{
|
||||
display: block;
|
||||
}
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
.icon, .txt{ z-index: 10; }
|
||||
|
||||
.icon{
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-bg);
|
||||
text-align: center;
|
||||
|
||||
svg{
|
||||
fill: var(--color-bg);
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// shadow on input
|
||||
&::before{
|
||||
.txt{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
font-size: var(--fs-normal);
|
||||
display: none;
|
||||
padding-left: 1ch;
|
||||
}
|
||||
|
||||
&::after{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
background: linear-gradient(90deg,transparent 0%, var(--color-txt) 80%);
|
||||
position: absolute;
|
||||
left: -110px;
|
||||
z-index: 40;
|
||||
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 .2s
|
||||
}
|
||||
|
||||
&:hover{
|
||||
.txt{
|
||||
color: var(--color-bg);
|
||||
display: block;
|
||||
}
|
||||
&::after{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// @media #{$small}{
|
||||
// .txt{
|
||||
// color: var(--color-bg);
|
||||
// display: block;
|
||||
// }
|
||||
// &::after{
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
.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 +0,0 @@
|
|||
|
||||
34
assets/css/components/_keywords.scss
Normal file
34
assets/css/components/_keywords.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
.keywords{
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1ch;
|
||||
|
||||
li{
|
||||
height: var(--h-block);
|
||||
border-radius: calc(var(--h-block)*0.5);
|
||||
border: var(--border-light);
|
||||
font-size: var(--fs-normal);
|
||||
overflow: hidden;
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 1.5ch;
|
||||
line-height: 1;
|
||||
padding-top: 2px;
|
||||
|
||||
}
|
||||
|
||||
&:hover{
|
||||
border-color: var(--color-txt);
|
||||
a{
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +1,57 @@
|
|||
.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);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.list-socials {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 400px;
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.icon{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
svg{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
.text{ display: none; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
// with text
|
||||
@media #{$small-up}{
|
||||
.footer__socials .list-socials{
|
||||
|
||||
display: block;
|
||||
|
||||
li{
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
a{
|
||||
gap: 1ch;
|
||||
|
||||
height: calc(var(--spacing)*1);
|
||||
&::after{
|
||||
content: '↗';
|
||||
color: var(--grey-300);
|
||||
}
|
||||
}
|
||||
.text{
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
122
assets/css/components/_modal-share.scss
Normal file
122
assets/css/components/_modal-share.scss
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
.modal--share{
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-btn);
|
||||
background-color: var(--color-bg);
|
||||
padding: var(--padding-inner);
|
||||
padding-top: calc( var(--padding-inner)*0.5);
|
||||
padding-bottom: calc( var(--padding-inner)*1.5);
|
||||
|
||||
.modal-title{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.socials{
|
||||
display: block;
|
||||
list-style: none;
|
||||
|
||||
li{
|
||||
font-size: var(--fs-normal);
|
||||
padding-bottom: 6px;
|
||||
border-bottom: var(--border-light);
|
||||
padding-top: 6px;
|
||||
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
svg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
&:hover{
|
||||
color: var(--color-accent);
|
||||
|
||||
.icon svg,
|
||||
.icon svg path,
|
||||
.icon svg rect{
|
||||
fill: var(--color-accent)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.copy-link{
|
||||
display: flex;
|
||||
gap: 0.5ch;
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
|
||||
.copy-link__field{
|
||||
flex-grow: 1;
|
||||
display: grid;
|
||||
grid-template-columns: var(--h-block) 1fr;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.icon{
|
||||
display: flex;
|
||||
width: var(--h-block);
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
// top: -2px;
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
.icon svg{
|
||||
width: 12px;
|
||||
}
|
||||
input{
|
||||
font-size: var(--fs-small);
|
||||
font-family: var(--font);
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-txt);
|
||||
padding-top: 2px;
|
||||
grid-column: 1/end;
|
||||
grid-row: 1;
|
||||
padding-left: var(--h-block);
|
||||
padding-right: 0.5ch;
|
||||
border: var(--border-light);
|
||||
border-radius: var(--radius-btn);
|
||||
height: var(--h-block);
|
||||
&:focus{
|
||||
border-color: var(--color-txt);
|
||||
outline: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
button{
|
||||
background-color: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
border-radius: var(--radius-btn);
|
||||
padding: 0 1ch;
|
||||
font-size: var(--fs-small);
|
||||
padding-top: 2px;
|
||||
&:hover{
|
||||
background-color: var(--color-accent);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
.nav--tabs{
|
||||
height: var(--h-block);
|
||||
height: calc(var(--h-block)*1);
|
||||
width: auto;
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-small);
|
||||
|
|
@ -14,8 +14,10 @@
|
|||
|
||||
|
||||
.nav--tabs__btn{
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-small);
|
||||
padding: 0 1ch;
|
||||
font-weight: var(--fw-medium);
|
||||
padding: 0 2ch;
|
||||
|
||||
&.is-selected{
|
||||
background-color: var(--color-txt);
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
.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%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,21 +1,47 @@
|
|||
#page-don{
|
||||
|
||||
// text -----------------------------------------
|
||||
[data-template="subscription-newsletter"],
|
||||
[data-template="thanks"],
|
||||
[data-template="support"],
|
||||
[data-template="store"]{
|
||||
|
||||
.p__baseline-big{
|
||||
font-family: var(--title);
|
||||
font-size: var(--fs-big);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: var(--leading-tight);
|
||||
font-weight: var(--fw-bold);
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
margin: calc(var(--spacing)*1.75) 0;
|
||||
margin: calc(var(--spacing)*1) 0;
|
||||
|
||||
strong{
|
||||
font-weight: var(--fw-bolf);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.link-don{
|
||||
display: block;
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
// &::after{
|
||||
// content: ' ↗';
|
||||
// font-size: 0.8em;
|
||||
// }
|
||||
&:hover{
|
||||
text-decoration: underline 2px;
|
||||
text-underline-offset: 4px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p__baseline{
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: var(--leading-tight);
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
margin: var(--spacing) 0;
|
||||
margin: calc(var(--spacing)*1) 0;
|
||||
@media #{$small}{
|
||||
text-align: center;
|
||||
margin: var(--spacing) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.p__details{
|
||||
|
|
@ -24,42 +50,19 @@
|
|||
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);
|
||||
text-align: center;
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
ul, ol{
|
||||
margin-left: 3ch;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue