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

Added promo icons on home

feature/oscar-theme
Segundo Fdez 2022-03-08 22:43:31 +01:00
parent 299c684cfc
commit b565b5799d
5 changed files with 270 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -390,20 +390,37 @@ i, em {
padding: var(--spacing-3);
}
.back-forms {
position: absolute;
position: fixed;
inset: 0 0 0 0;
z-index: -1;
overflow: hidden;
}
.back-circle {
left: 80vw;
opacity: .02;
}
.back-circle > * {
fill: var(--color-main);
}
.back-circle{
animation: back-circle 65s infinite linear;
animation: back-circle 85s infinite linear;
}
.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% {
@ -423,6 +440,40 @@ i, em {
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 */
/* Components */
/* Modules */
@ -478,7 +529,6 @@ i, em {
.hero .hero-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);
}
.hero .hero-img {
display: inline-block;
@ -494,6 +544,54 @@ i, em {
width: 100%;
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 */
.posts-container {
}

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

@ -41,18 +41,32 @@ i, em {
}
.back-forms {
position: absolute;
position: fixed;
inset: 0 0 0 0;
z-index: -1;
overflow: hidden;
}
.back-circle {
left: 80vw;
opacity: .02;
> * {
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 {
@ -73,3 +87,37 @@ i, em {
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);
}
}

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

@ -48,7 +48,6 @@
.hero-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);
}
.hero-img {
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
src/themes/oscar/layouts/_default/baseof.html
View File

@ -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">
<circle cx="178.5" cy="178.5" r="178.5" fill="white"/>
</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>
{{ partial "header.html" . }}
{{ block "main" . }}{{ end }}

58
src/themes/oscar/layouts/index.html
View File

File diff suppressed because one or more lines are too long