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 @@ {{ partial "metas.html" . }}
+ {{ partial "header.html" . }} {{ block "main" . }}{{ end }} {{ partial "footer.html" . }}