oscarmlage
/
oscarmlage.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added variable font on hero and test circle animation

feature/oscar-theme
Segundo Fdez 2022-03-08 21:25:45 +01:00
parent d7a33df68a
commit 6152c84675
4 changed files with 81 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content
View File

@ -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);
}

31
src/themes/oscar/assets/css/common.css
View File

@ -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);
}
}

14
src/themes/oscar/assets/css/modules/header.css
View File

@ -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);
}

3
src/themes/oscar/layouts/_default/baseof.html
View File

@ -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" . }}