added variable font on hero and test circle animation
parent
d7a33df68a
commit
6152c84675
|
@ -361,6 +361,7 @@ body {
|
||||||
text-rendering: auto;
|
text-rendering: auto;
|
||||||
background-color: var(--background-main);
|
background-color: var(--background-main);
|
||||||
color: var(--color-main);
|
color: var(--color-main);
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
color: var(--color-link);
|
color: var(--color-link);
|
||||||
|
@ -380,7 +381,7 @@ i, em {
|
||||||
.wrapper {
|
.wrapper {
|
||||||
max-width: 768px;
|
max-width: 768px;
|
||||||
}
|
}
|
||||||
@media (min-width: 480px) {
|
@media (min-width: 960px) {
|
||||||
.wrapper {
|
.wrapper {
|
||||||
margin-left: calc(20vw + var(--logo-width))
|
margin-left: calc(20vw + var(--logo-width))
|
||||||
}
|
}
|
||||||
|
@ -389,22 +390,54 @@ i, em {
|
||||||
margin-top: var(--spacing-6);
|
margin-top: var(--spacing-6);
|
||||||
padding: var(--spacing-3);
|
padding: var(--spacing-3);
|
||||||
}
|
}
|
||||||
|
.back-circle {
|
||||||
|
position: absolute;
|
||||||
|
left: 80vw;
|
||||||
|
opacity: .02;
|
||||||
|
z-index: -1;
|
||||||
|
fill: var(--color-main);
|
||||||
|
animation: back-circle 65s infinite linear;
|
||||||
|
}
|
||||||
|
@keyframes back-circle{
|
||||||
|
0% {
|
||||||
|
transform: translateY(-20vh);
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(-45vw) translateY(50vh);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(35vw) translateY(30vh);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(5vw) translateY(20vh);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(-20vh);
|
||||||
|
}
|
||||||
|
}
|
||||||
/* Layout */
|
/* Layout */
|
||||||
/* Components */
|
/* Components */
|
||||||
/* Modules */
|
/* Modules */
|
||||||
.header {
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
padding: var(--spacing-3);
|
padding: var(--spacing-3);
|
||||||
}
|
}
|
||||||
@media (min-width: 480px) {
|
@media (min-width: 768px) {
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background: var(--background-main)
|
background: var(--background-main)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (min-width: 960px) {
|
||||||
|
.header {
|
||||||
|
justify-content: flex-start
|
||||||
|
}
|
||||||
|
}
|
||||||
.logo {
|
.logo {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
@ -414,7 +447,7 @@ i, em {
|
||||||
.logo svg > * {
|
.logo svg > * {
|
||||||
stroke: currentColor;
|
stroke: currentColor;
|
||||||
}
|
}
|
||||||
@media (min-width: 480px) {
|
@media (min-width: 960px) {
|
||||||
.main-nav {
|
.main-nav {
|
||||||
margin-left: 20vw
|
margin-left: 20vw
|
||||||
}
|
}
|
||||||
|
@ -436,7 +469,7 @@ i, em {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.hero .hero-title {
|
.hero .hero-title {
|
||||||
font: var(--font-title);
|
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);
|
margin-bottom: calc(var(--spacing-8) * 2);
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,6 +10,7 @@ body {
|
||||||
text-rendering: auto;
|
text-rendering: auto;
|
||||||
background-color: var(--background-main);
|
background-color: var(--background-main);
|
||||||
color: var(--color-main);
|
color: var(--color-main);
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
color: var(--color-link);
|
color: var(--color-link);
|
||||||
|
@ -30,7 +31,7 @@ i, em {
|
||||||
/* TODO: move this */
|
/* TODO: move this */
|
||||||
.wrapper {
|
.wrapper {
|
||||||
max-width: 768px;
|
max-width: 768px;
|
||||||
@media (--screen-xs) {
|
@media (--screen-m) {
|
||||||
margin-left: calc(20vw + var(--logo-width));
|
margin-left: calc(20vw + var(--logo-width));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -39,3 +40,31 @@ i, em {
|
||||||
margin-top: var(--spacing-6);
|
margin-top: var(--spacing-6);
|
||||||
padding: var(--spacing-3);
|
padding: var(--spacing-3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.back-circle {
|
||||||
|
position: absolute;
|
||||||
|
left: 80vw;
|
||||||
|
opacity: .02;
|
||||||
|
z-index: -1;
|
||||||
|
fill: var(--color-main);
|
||||||
|
animation: back-circle 65s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes back-circle{
|
||||||
|
0% {
|
||||||
|
transform: translateY(-20vh);
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
25% {
|
||||||
|
transform: translateX(-45vw) translateY(50vh);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateX(35vw) translateY(30vh);
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
transform: translateX(5vw) translateY(20vh);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(-20vh);
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,13 +1,17 @@
|
||||||
.header {
|
.header {
|
||||||
padding: var(--spacing-3);
|
|
||||||
@media (--screen-xs) {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
|
padding: var(--spacing-3);
|
||||||
|
@media (--screen-s) {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
background: var(--background-main);
|
background: var(--background-main);
|
||||||
}
|
}
|
||||||
|
@media (--screen-m) {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.logo {
|
.logo {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -19,7 +23,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.main-nav {
|
.main-nav {
|
||||||
@media (--screen-xs) {
|
@media (--screen-m) {
|
||||||
margin-left: 20vw;
|
margin-left: 20vw;
|
||||||
}
|
}
|
||||||
ul {
|
ul {
|
||||||
|
@ -42,7 +46,7 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.hero-title {
|
.hero-title {
|
||||||
font: var(--font-title);
|
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);
|
margin-bottom: calc(var(--spacing-8) * 2);
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,6 +2,9 @@
|
||||||
<html lang="{{ .Site.LanguageCode | default "en" }}">
|
<html lang="{{ .Site.LanguageCode | default "en" }}">
|
||||||
{{ partial "metas.html" . }}
|
{{ partial "metas.html" . }}
|
||||||
<body>
|
<body>
|
||||||
|
<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"/>
|
||||||
|
</svg>
|
||||||
{{ partial "header.html" . }}
|
{{ partial "header.html" . }}
|
||||||
{{ block "main" . }}{{ end }}
|
{{ block "main" . }}{{ end }}
|
||||||
{{ partial "footer.html" . }}
|
{{ partial "footer.html" . }}
|
||||||
|
|
Loading…
Reference in New Issue