Added promo icons on home
Segundo Fdez
parent
299c684cfc
commit
b565b5799d
|
|
@ -390,22 +390,39 @@ i, em {
|
||||||
padding: var(--spacing-3);
|
padding: var(--spacing-3);
|
||||||
}
|
}
|
||||||
.back-forms {
|
.back-forms {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
inset: 0 0 0 0;
|
inset: 0 0 0 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.back-circle {
|
.back-circle {
|
||||||
left: 80vw;
|
|
||||||
opacity: .02;
|
opacity: .02;
|
||||||
}
|
}
|
||||||
.back-circle > * {
|
.back-circle > * {
|
||||||
fill: var(--color-main);
|
fill: var(--color-main);
|
||||||
}
|
}
|
||||||
.back-circle{
|
.back-circle{
|
||||||
animation: back-circle 65s infinite linear;
|
animation: back-circle 85s infinite linear;
|
||||||
}
|
}
|
||||||
@keyframes back-circle{
|
.back-triangle {
|
||||||
|
opacity: .02;
|
||||||
|
}
|
||||||
|
.back-triangle > * {
|
||||||
|
fill: var(--color-main);
|
||||||
|
}
|
||||||
|
.back-triangle{
|
||||||
|
animation: back-triangle 45s infinite linear;
|
||||||
|
}
|
||||||
|
.back-square {
|
||||||
|
opacity: .02;
|
||||||
|
}
|
||||||
|
.back-square > * {
|
||||||
|
fill: var(--color-main);
|
||||||
|
}
|
||||||
|
.back-square{
|
||||||
|
animation: back-square 65s infinite linear;
|
||||||
|
}
|
||||||
|
@keyframes back-circle {
|
||||||
0% {
|
0% {
|
||||||
transform: translateY(-20vh);
|
transform: translateY(-20vh);
|
||||||
transform-origin: center center;
|
transform-origin: center center;
|
||||||
|
|
@ -423,6 +440,40 @@ i, em {
|
||||||
transform: translateY(-20vh);
|
transform: translateY(-20vh);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@keyframes back-triangle {
|
||||||
|
0% {
|
||||||
|
transform: translateX(45vw) translateY(-20vh);
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(15vw) translateY(50vh) rotate(45deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(-20vw) translateY(40vh) rotate(-45deg);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(45vw) translateY(-20vh);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes back-square {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-45vw) translateY(120vh);
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(15vw) translateY(30vh) rotate(45deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(-20vw) translateY(40vh) rotate(-185deg);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-45vw) translateY(120vh);
|
||||||
|
}
|
||||||
|
}
|
||||||
/* Layout */
|
/* Layout */
|
||||||
/* Components */
|
/* Components */
|
||||||
/* Modules */
|
/* Modules */
|
||||||
|
|
@ -478,7 +529,6 @@ i, em {
|
||||||
.hero .hero-title {
|
.hero .hero-title {
|
||||||
font-size: clamp(var(--font-size-3), 2.5vw, var(--font-size-4));
|
font-size: clamp(var(--font-size-3), 2.5vw, var(--font-size-4));
|
||||||
color: var(--color-main);
|
color: var(--color-main);
|
||||||
margin-bottom: calc(var(--spacing-8) * 2);
|
|
||||||
}
|
}
|
||||||
.hero .hero-img {
|
.hero .hero-img {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -494,6 +544,54 @@ i, em {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
mix-blend-mode: overlay;
|
mix-blend-mode: overlay;
|
||||||
}
|
}
|
||||||
|
.social {
|
||||||
|
margin-top: var(--spacing-7);
|
||||||
|
margin-bottom: calc(var(--spacing-8) * 2);
|
||||||
|
}
|
||||||
|
.social ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
}
|
||||||
|
.social ul li {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.social span {
|
||||||
|
/* position:absolute;
|
||||||
|
left:-10000px;
|
||||||
|
top:auto;
|
||||||
|
width:1px;
|
||||||
|
height:1px;
|
||||||
|
overflow: hidden; */
|
||||||
|
display: block;
|
||||||
|
font: var(--font-caption);
|
||||||
|
margin-top: var(--spacing-1);
|
||||||
|
width: min-content;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
.social a {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.social a:hover svg > * {
|
||||||
|
fill: var(--color-main);
|
||||||
|
stroke: var(--color-main);
|
||||||
|
stroke-width: 1px;
|
||||||
|
}
|
||||||
|
.social svg {
|
||||||
|
vertical-align: middle;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.social svg > * {
|
||||||
|
fill: var(--background-main);
|
||||||
|
stroke: var(--color-link);
|
||||||
|
transition: all ease-in-out 250ms;
|
||||||
|
stroke-width: 2px;
|
||||||
|
}
|
||||||
/* POST LIST */
|
/* POST LIST */
|
||||||
.posts-container {
|
.posts-container {
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -41,21 +41,35 @@ i, em {
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-forms {
|
.back-forms {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
inset: 0 0 0 0;
|
inset: 0 0 0 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-circle {
|
.back-circle {
|
||||||
left: 80vw;
|
|
||||||
opacity: .02;
|
opacity: .02;
|
||||||
> * {
|
> * {
|
||||||
fill: var(--color-main);
|
fill: var(--color-main);
|
||||||
}
|
}
|
||||||
animation: back-circle 65s infinite linear;
|
animation: back-circle 85s infinite linear;
|
||||||
|
}
|
||||||
|
.back-triangle {
|
||||||
|
opacity: .02;
|
||||||
|
> * {
|
||||||
|
fill: var(--color-main);
|
||||||
|
}
|
||||||
|
animation: back-triangle 45s infinite linear;
|
||||||
|
}
|
||||||
|
.back-square {
|
||||||
|
opacity: .02;
|
||||||
|
> * {
|
||||||
|
fill: var(--color-main);
|
||||||
|
}
|
||||||
|
animation: back-square 65s infinite linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes back-circle{
|
@keyframes back-circle {
|
||||||
0% {
|
0% {
|
||||||
transform: translateY(-20vh);
|
transform: translateY(-20vh);
|
||||||
transform-origin: center center;
|
transform-origin: center center;
|
||||||
|
|
@ -73,3 +87,37 @@ i, em {
|
||||||
transform: translateY(-20vh);
|
transform: translateY(-20vh);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@keyframes back-triangle {
|
||||||
|
0% {
|
||||||
|
transform: translateX(45vw) translateY(-20vh);
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(15vw) translateY(50vh) rotate(45deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(-20vw) translateY(40vh) rotate(-45deg);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(45vw) translateY(-20vh);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes back-square {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-45vw) translateY(120vh);
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(15vw) translateY(30vh) rotate(45deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(-20vw) translateY(40vh) rotate(-185deg);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-45vw) translateY(120vh);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -48,7 +48,6 @@
|
||||||
.hero-title {
|
.hero-title {
|
||||||
font-size: clamp(var(--font-size-3), 2.5vw, var(--font-size-4));
|
font-size: clamp(var(--font-size-3), 2.5vw, var(--font-size-4));
|
||||||
color: var(--color-main);
|
color: var(--color-main);
|
||||||
margin-bottom: calc(var(--spacing-8) * 2);
|
|
||||||
}
|
}
|
||||||
.hero-img {
|
.hero-img {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -65,3 +64,54 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.social {
|
||||||
|
margin-top: var(--spacing-7);
|
||||||
|
margin-bottom: calc(var(--spacing-8) * 2);
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: var(--spacing-3);
|
||||||
|
li {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
/* position:absolute;
|
||||||
|
left:-10000px;
|
||||||
|
top:auto;
|
||||||
|
width:1px;
|
||||||
|
height:1px;
|
||||||
|
overflow: hidden; */
|
||||||
|
display: block;
|
||||||
|
font: var(--font-caption);
|
||||||
|
margin-top: var(--spacing-1);
|
||||||
|
width: min-content;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
&:hover {
|
||||||
|
svg > * {
|
||||||
|
fill: var(--color-main);
|
||||||
|
stroke: var(--color-main);
|
||||||
|
stroke-width: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
vertical-align: middle;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0 auto;
|
||||||
|
> * {
|
||||||
|
fill: var(--background-main);
|
||||||
|
stroke: var(--color-link);
|
||||||
|
transition: all ease-in-out 250ms;
|
||||||
|
stroke-width: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,12 @@
|
||||||
<svg class="back-circle" width="357" height="357" viewBox="0 0 357 357" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg class="back-circle" width="357" height="357" viewBox="0 0 357 357" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<circle cx="178.5" cy="178.5" r="178.5" fill="white"/>
|
<circle cx="178.5" cy="178.5" r="178.5" fill="white"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
<svg class="back-triangle" width="333" height="333" viewBox="0 0 333 333" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M0 0L333 333H0V0Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
<svg class="back-square" width="357" height="357" viewBox="0 0 357 357" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="357" height="357" fill="white"/>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
{{ partial "header.html" . }}
|
{{ partial "header.html" . }}
|
||||||
{{ block "main" . }}{{ end }}
|
{{ block "main" . }}{{ end }}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue