angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update formatting settings and reformat the codebase

Browse source
This commit is contained in:
Yannik Rödel 2022-03-15 09:38:13 +01:00
parent 6f52b98dcb
commit ee64ae9493
25 changed files with 1275 additions and 1187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.editorconfig
View file

@ -1,7 +1,7 @@
root = true
[*]
indent_style = space
indent_style = tab
indent_size = 2
end_of_line = lf
insert_final_newline = true

1
.eleventy.js
View file

@ -1,5 +1,4 @@
const fs = require('fs');
const path = require('path');
const { DateTime } = require('luxon');
const pluginRss = require('@11ty/eleventy-plugin-rss');

3
.prettierrc
View file

@ -3,5 +3,6 @@
"printWidth": 80,
"proseWrap": "preserve",
"singleQuote": true,
"trailingComma": "es5"
"trailingComma": "es5",
"useTabs": true
}

92
src/styles/components/_actions.scss
View file

@ -118,71 +118,103 @@
%action-icon-hover {
.emphasis-gradient {
@keyframes action-icon-emphasis-gradient-1 {
0% { stop-color: colors.$blue-500; }
40% { stop-color: colors.$yellow-500; }
80% { stop-color: colors.$teal-500; }
0% {
stop-color: colors.$blue-500;
}
40% {
stop-color: colors.$yellow-500;
}
80% {
stop-color: colors.$teal-500;
}
}
@keyframes action-icon-emphasis-gradient-2 {
0% { stop-color: colors.$blue-500; }
20% { stop-color: colors.$blue-800; }
60% { stop-color: colors.$yellow-500; }
100% { stop-color: colors.$teal-500; }
0% {
stop-color: colors.$blue-500;
}
20% {
stop-color: colors.$blue-800;
}
60% {
stop-color: colors.$yellow-500;
}
100% {
stop-color: colors.$teal-500;
}
}
@for $i from 1 through 2 {
> stop:nth-of-type(#{$i}) {
stop-color: colors.$teal-500;
animation:
motion.$prominent 0s 1 normal backwards running
animation: motion.$prominent
0s
1
normal
backwards
running
action-icon-emphasis-gradient-#{$i};
}
}
}
.heart-left {
$final-transformation:
translateX(-0.8rem) translateY(1.4rem) scale(1.5) rotate(-25deg);
$final-transformation: translateX(-0.8rem) translateY(1.4rem) scale(1.5)
rotate(-25deg);
@keyframes action-icon-heart-left {
0% { transform: none; }
50% {
transform:
translateX(0.2rem) translateY(0.8rem) scale(1.2) rotate(-10deg);
0% {
transform: none;
}
50% {
transform: translateX(0.2rem) translateY(0.8rem) scale(1.2)
rotate(-10deg);
}
100% {
transform: $final-transformation;
}
100% { transform: $final-transformation; }
}
transform: $final-transformation;
animation:
motion.$gentle 0s 1 normal backwards running action-icon-heart-left;
animation: motion.$gentle 0s 1 normal backwards running
action-icon-heart-left;
}
.heart-right {
$final-transformation:
translateX(1.4rem) translateY(-0.1rem) scale(1.6) rotate(15deg);
$final-transformation: translateX(1.4rem) translateY(-0.1rem) scale(1.6)
rotate(15deg);
@keyframes action-icon-heart-right {
0% { transform: none; }
50% {
transform:
translateX(1.3rem) translateY(0.8rem) scale(1.4) rotate(30deg);
0% {
transform: none;
}
50% {
transform: translateX(1.3rem) translateY(0.8rem) scale(1.4)
rotate(30deg);
}
100% {
transform: $final-transformation;
}
100% { transform: $final-transformation; }
}
transform: $final-transformation;
animation:
motion.$gentle 0s 1 normal backwards running action-icon-heart-right;
animation: motion.$gentle 0s 1 normal backwards running
action-icon-heart-right;
}
.coin {
$final-transformation: scale(0.8);
@keyframes action-icon-coin {
0% { transform: none; }
50% { transform: scale(1.1); }
100% { transform: $final-transformation; }
0% {
transform: none;
}
50% {
transform: scale(1.1);
}
100% {
transform: $final-transformation;
}
}
transform: $final-transformation;

11
src/styles/components/_form-choices.scss
View file

@ -60,8 +60,12 @@
transition: motion.$subtle background-color, motion.$subtle box-shadow;
@keyframes form-choice-hover {
0% { background-position: -100% 0; }
100% { background-position: 200% 0; }
0% {
background-position: -100% 0;
}
100% {
background-position: 200% 0;
}
}
&:hover,
@ -77,8 +81,7 @@
background-repeat: no-repeat;
color: inherit;
@include colors.card-shadow(colors.$yellow-500);
animation:
motion.$prominent 0s 1 normal both running form-choice-hover;
animation: motion.$prominent 0s 1 normal both running form-choice-hover;
> em {
background-color: transparent;

7
src/styles/components/_markup.scss
View file

@ -57,7 +57,9 @@ p {
@extend %content-gutter;
}
ul, ol, dl {
ul,
ol,
dl {
@extend %content-gutter;
}
@ -106,7 +108,8 @@ blockquote {
text-decoration: none;
line-height: 3rem;
border: 1px solid colors.$main-text;
transition: font motion.$subtle, border-color motion.$subtle, color motion.$subtle;
transition: font motion.$subtle, border-color motion.$subtle,
color motion.$subtle;
&:hover {
border-color: colors.$blue-800;

3
src/styles/components/_timeline.scss
View file

@ -67,7 +67,8 @@
line-height: #{$stampSize - 2 * $lineWeight};
text-align: center;
background-color: colors.$gray-50;
transition: border-color motion.$subtle, background-color motion.$subtle, color motion.$subtle;
transition: border-color motion.$subtle, background-color motion.$subtle,
color motion.$subtle;
&.small {
background-color: colors.$gray-300;

141
src/styles/finish.scss
View file

@ -11,11 +11,21 @@
.finish-hero {
@keyframes finish-hero {
0% { stroke-width: 3px; }
10% { stroke-width: 3px; }
20% { stroke-width: 5px; }
60% { stroke-width: 5px; }
100% { stroke-width: 3px; }
0% {
stroke-width: 3px;
}
10% {
stroke-width: 3px;
}
20% {
stroke-width: 5px;
}
60% {
stroke-width: 5px;
}
100% {
stroke-width: 3px;
}
}
display: block;
@ -28,28 +38,20 @@
> .stroke-gradient {
$idle-color: colors.$gray-900;
$colors: [
$idle-color
$idle-color
$idle-color
colors.$blue-500
colors.$teal-500
colors.$yellow-500
colors.$teal-500
colors.$gray-300
colors.$yellow-500
colors.$blue-500
colors.$gray-300
$idle-color
$idle-color
$idle-color
];
$colors: [ $idle-color $idle-color $idle-color colors.$blue-500
colors.$teal-500 colors.$yellow-500 colors.$teal-500 colors.$gray-300
colors.$yellow-500 colors.$blue-500 colors.$gray-300 $idle-color
$idle-color $idle-color ];
@for $i from 1 through 4 {
> stop:nth-of-type(#{$i}) {
@keyframes finish-stroke-gradient-#{$i} {
0% { stop-color: $idle-color; }
15% { stop-color: $idle-color; }
0% {
stop-color: $idle-color;
}
15% {
stop-color: $idle-color;
}
// This is some which magic that chooses the correct colors for each
// stop - don't change it unless you know what you are doing! In
// general, the output will look something like this:
@ -66,22 +68,39 @@
stop-color: list.nth($colors, 4 + $j - $i);
}
}
70% { stop-color: $idle-color; }
100% { stop-color: $idle-color; }
70% {
stop-color: $idle-color;
}
100% {
stop-color: $idle-color;
}
}
animation:
motion.$prominent 0s 1 normal both running finish-stroke-gradient-#{$i};
animation: motion.$prominent
0s
1
normal
both
running
finish-stroke-gradient-#{$i};
}
}
}
> .cable {
@keyframes finish-hero-cable {
0% { transform: translateX(0.5rem); }
20% { transform: translateX(0.5rem); }
70% { transform: translateX(0.5rem); }
100% { transform: none; }
0% {
transform: translateX(0.5rem);
}
20% {
transform: translateX(0.5rem);
}
70% {
transform: translateX(0.5rem);
}
100% {
transform: none;
}
}
animation: motion.$prominent 0s 1 normal both running finish-hero-cable;
@ -89,21 +108,43 @@
> .plug {
@keyframes finish-hero-plug {
0% { transform: translateX(-0.5rem); }
20% { transform: translateX(-0.5rem); }
70% { transform: translateX(-0.5rem); }
100% { transform: none; }
0% {
transform: translateX(-0.5rem);
}
20% {
transform: translateX(-0.5rem);
}
70% {
transform: translateX(-0.5rem);
}
100% {
transform: none;
}
}
@keyframes finish-hero-plug-transition {
0% { fill: colors.$gray-900; }
100% { fill: colors.$gray-600; }
0% {
fill: colors.$gray-900;
}
100% {
fill: colors.$gray-600;
}
}
@keyframes finish-hero-plug-idle {
0% { fill: colors.$gray-600; }
25% { fill: colors.$teal-600; }
50% { fill: colors.$yellow-600; }
75% { fill: colors.$blue-800; }
100% { fill: colors.$gray-600; }
0% {
fill: colors.$gray-600;
}
25% {
fill: colors.$teal-600;
}
50% {
fill: colors.$yellow-600;
}
75% {
fill: colors.$blue-800;
}
100% {
fill: colors.$gray-600;
}
}
animation: motion.$prominent 0s 1 normal both running finish-hero-plug,
@ -113,10 +154,18 @@
> .contacts {
@keyframes finish-hero-contacts {
0% { transform: translateX(0rem); }
20% { transform: translateX(-0.7rem); }
70% { transform: translateX(-0.7rem); }
100% { transform: none; }
0% {
transform: translateX(0rem);
}
20% {
transform: translateX(-0.7rem);
}
70% {
transform: translateX(-0.7rem);
}
100% {
transform: none;
}
}
animation: motion.$prominent 0s 1 normal both running finish-hero-contacts;

4
src/styles/lib/_motion.scss
View file

@ -1,4 +1,4 @@
$subtle: 0.1s cubic-bezier(0.56, 0.03, 0.35, 0.9);
$gentle: 0.2s cubic-bezier(1, 0.11, 0.41, 0.69);
$prominent: 0.7s cubic-bezier(.45,.16,.38,.7);
$background: 8s cubic-bezier(.45,.16,.38,.7);
$prominent: 0.7s cubic-bezier(0.45, 0.16, 0.38, 0.7);
$background: 8s cubic-bezier(0.45, 0.16, 0.38, 0.7);