From 6152c84675c06790dcb69ab0db4d7e26635b7a72 Mon Sep 17 00:00:00 2001
From: Segundo Fdez <segun.2@gmail.com>
Date: Tue, 8 Mar 2022 21:25:45 +0100
Subject: [PATCH] added variable font on hero and test circle animation

---
 ...s_abdeb689137b085b8cf50bb0fe96e360.content | 45 ++++++++++++++++---
 src/themes/oscar/assets/css/common.css        | 31 ++++++++++++-
 .../oscar/assets/css/modules/header.css       | 14 +++---
 src/themes/oscar/layouts/_default/baseof.html |  3 ++
 4 files changed, 81 insertions(+), 12 deletions(-)

diff --git a/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content b/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content
index 255cc7c..8102a31 100644
--- a/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content
+++ b/src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content
@@ -361,6 +361,7 @@ body {
     text-rendering: auto;
     background-color: var(--background-main);
     color: var(--color-main);
+    overflow: hidden;
 }
 a {
     color: var(--color-link);
@@ -380,7 +381,7 @@ i, em {
 .wrapper {
     max-width: 768px;
 }
-@media (min-width: 480px) {
+@media (min-width: 960px) {
 .wrapper {
         margin-left: calc(20vw + var(--logo-width))
 }
@@ -389,22 +390,54 @@ i, em {
     margin-top: var(--spacing-6);
     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 */
 /* Components */
 /* Modules */
 .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
     padding: var(--spacing-3);
 }
-@media (min-width: 480px) {
+@media (min-width: 768px) {
 .header {
-        display: flex;
-        align-items: flex-end;
         position: sticky;
         top: 0;
         z-index: 1;
         background: var(--background-main)
 }
     }
+@media (min-width: 960px) {
+.header {
+        justify-content: flex-start
+}
+    }
 .logo {
     margin: 0;
 }
@@ -414,7 +447,7 @@ i, em {
 .logo svg > * {
             stroke: currentColor;
         }
-@media (min-width: 480px) {
+@media (min-width: 960px) {
 .main-nav {
         margin-left: 20vw
 }
@@ -436,7 +469,7 @@ i, em {
         display: none;
     }
 .hero .hero-title {
-        font: var(--font-title);
+        font-size: clamp(var(--font-size-3), 2.5vw, var(--font-size-4));
         color: var(--color-main);
         margin-bottom: calc(var(--spacing-8) * 2);
     }
diff --git a/src/themes/oscar/assets/css/common.css b/src/themes/oscar/assets/css/common.css
index a38125c..322cf14 100644
--- a/src/themes/oscar/assets/css/common.css
+++ b/src/themes/oscar/assets/css/common.css
@@ -10,6 +10,7 @@ body {
     text-rendering: auto;
     background-color: var(--background-main);
     color: var(--color-main);
+    overflow: hidden;
 }
 a {
     color: var(--color-link);
@@ -30,7 +31,7 @@ i, em {
 /* TODO: move this  */
 .wrapper {
     max-width: 768px;
-    @media (--screen-xs) {
+    @media (--screen-m) {
         margin-left: calc(20vw + var(--logo-width));
     }
 }
@@ -38,4 +39,32 @@ i, em {
 .main {
     margin-top: var(--spacing-6);
     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);
+    }
 }
\ No newline at end of file
diff --git a/src/themes/oscar/assets/css/modules/header.css b/src/themes/oscar/assets/css/modules/header.css
index a59cb4f..a4f57c0 100644
--- a/src/themes/oscar/assets/css/modules/header.css
+++ b/src/themes/oscar/assets/css/modules/header.css
@@ -1,13 +1,17 @@
 .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
     padding: var(--spacing-3);
-    @media (--screen-xs) {
-        display: flex;
-        align-items: flex-end;
+    @media (--screen-s) {
         position: sticky;
         top: 0;
         z-index: 1;
         background: var(--background-main);
     }
+    @media (--screen-m) {
+        justify-content: flex-start;
+    }
 }
 .logo {
     margin: 0;
@@ -19,7 +23,7 @@
     }
 }
 .main-nav {
-    @media (--screen-xs) {
+    @media (--screen-m) {
         margin-left: 20vw;
     }
     ul {
@@ -42,7 +46,7 @@
         display: none;
     }
     .hero-title {
-        font: var(--font-title);
+        font-size: clamp(var(--font-size-3), 2.5vw, var(--font-size-4));
         color: var(--color-main);
         margin-bottom: calc(var(--spacing-8) * 2);
     }
diff --git a/src/themes/oscar/layouts/_default/baseof.html b/src/themes/oscar/layouts/_default/baseof.html
index 285952f..81e214e 100644
--- a/src/themes/oscar/layouts/_default/baseof.html
+++ b/src/themes/oscar/layouts/_default/baseof.html
@@ -2,6 +2,9 @@
 <html lang="{{ .Site.LanguageCode | default "en" }}">
     {{ partial "metas.html" . }}
     <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" . }}
         {{ block "main" . }}{{ end }}
         {{ partial "footer.html" . }}