franconian
/
www.franconian.net
13
0
Fork 0
Code Pull Requests Releases Activity

Define animations in a separate file, remove redundancy

This commit is contained in:
Luca 2020-12-26 20:39:00 +01:00
parent 13a3062a3f
commit 0938a0b034
3 changed files with 84 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
assets/_animations.scss Normal file
View File

@ -0,0 +1,64 @@
@import 'colors';
@keyframes cycle-link-background {
0% {
background-image: linear-gradient(
to right,
$highlight-3 0%, $highlight-3 10%,
$highlight-1 10%, $highlight-1 20%,
$highlight-2 20%, $highlight-2 30%,
$highlight-3 30%, $highlight-3 40%,
$highlight-2 40%, $highlight-2 50%,
$highlight-3 50%, $highlight-3 60%,
$highlight-1 60%, $highlight-1 70%,
$highlight-3 70%, $highlight-3 80%,
$highlight-1 80%, $highlight-1 90%,
$highlight-2 90%,
);
}
25% {
background-image: linear-gradient(
to right,
$highlight-2 0%, $highlight-2 10%,
$highlight-3 10%, $highlight-3 20%,
$highlight-1 20%, $highlight-1 30%,
$highlight-2 30%, $highlight-2 40%,
$highlight-3 40%, $highlight-3 50%,
$highlight-1 50%, $highlight-1 60%,
$highlight-2 60%, $highlight-2 70%,
$highlight-1 70%, $highlight-1 80%,
$highlight-3 80%, $highlight-3 90%,
$highlight-1 90%
);
}
50% {
background-image: linear-gradient(
to right,
$highlight-3 0%, $highlight-3 10%,
$highlight-2 10%, $highlight-2 20%,
$highlight-3 20%, $highlight-3 30%,
$highlight-1 30%, $highlight-1 40%,
$highlight-2 40%, $highlight-2 50%,
$highlight-3 50%, $highlight-3 60%,
$highlight-1 60%, $highlight-1 70%,
$highlight-2 70%, $highlight-2 80%,
$highlight-1 80%, $highlight-1 90%,
$highlight-3 90%
);
}
75% {
background-image: linear-gradient(
to right,
$highlight-1 0%, $highlight-1 10%,
$highlight-3 10%, $highlight-3 20%,
$highlight-2 20%, $highlight-2 30%,
$highlight-1 30%, $highlight-1 40%,
$highlight-3 40%, $highlight-3 50%,
$highlight-1 50%, $highlight-1 60%,
$highlight-2 60%, $highlight-2 70%,
$highlight-1 70%, $highlight-1 80%,
$highlight-2 80%, $highlight-2 90%,
$highlight-3 90%
);
}
}

17
assets/_mixins.scss
View File

@ -4,3 +4,20 @@
text-transform: uppercase;
color: $primary-1;
}
@mixin hline($width, $height, $c1, $c2, $c3) {
background: repeat-x center bottom / $width $height;
background-image: linear-gradient(
to right,
$c3 0%, $c3 10%,
$c1 10%, $c1 20%,
$c2 20%, $c2 30%,
$c3 30%, $c3 40%,
$c2 40%, $c2 50%,
$c3 50%, $c3 60%,
$c1 60%, $c1 70%,
$c3 70%, $c3 80%,
$c1 80%, $c1 90%,
$c2 90%, $c2 100%
);
}

94
assets/style.scss
View File

@ -1,71 +1,9 @@
@import 'animations';
@import 'breakpoints';
@import 'colors';
@import 'fonts';
@import 'mixins';
@keyframes cycle-link-background {
0% {
background-image: linear-gradient(
to right,
$highlight-3 0%, $highlight-3 10%,
$highlight-1 10%, $highlight-1 20%,
$highlight-2 20%, $highlight-2 30%,
$highlight-3 30%, $highlight-3 40%,
$highlight-2 40%, $highlight-2 50%,
$highlight-3 50%, $highlight-3 60%,
$highlight-1 60%, $highlight-1 70%,
$highlight-3 70%, $highlight-3 80%,
$highlight-1 80%, $highlight-1 90%,
$highlight-2 90%,
);
}
25% {
background-image: linear-gradient(
to right,
$highlight-2 0%, $highlight-2 10%,
$highlight-3 10%, $highlight-3 20%,
$highlight-1 20%, $highlight-1 30%,
$highlight-2 30%, $highlight-2 40%,
$highlight-3 40%, $highlight-3 50%,
$highlight-1 50%, $highlight-1 60%,
$highlight-2 60%, $highlight-2 70%,
$highlight-1 70%, $highlight-1 80%,
$highlight-3 80%, $highlight-3 90%,
$highlight-1 90%
);
}
50% {
background-image: linear-gradient(
to right,
$highlight-3 0%, $highlight-3 10%,
$highlight-2 10%, $highlight-2 20%,
$highlight-3 20%, $highlight-3 30%,
$highlight-1 30%, $highlight-1 40%,
$highlight-2 40%, $highlight-2 50%,
$highlight-3 50%, $highlight-3 60%,
$highlight-1 60%, $highlight-1 70%,
$highlight-2 70%, $highlight-2 80%,
$highlight-1 80%, $highlight-1 90%,
$highlight-3 90%
);
}
75% {
background-image: linear-gradient(
to right,
$highlight-1 0%, $highlight-1 10%,
$highlight-3 10%, $highlight-3 20%,
$highlight-2 20%, $highlight-2 30%,
$highlight-1 30%, $highlight-1 40%,
$highlight-3 40%, $highlight-3 50%,
$highlight-1 50%, $highlight-1 60%,
$highlight-2 60%, $highlight-2 70%,
$highlight-1 70%, $highlight-1 80%,
$highlight-2 80%, $highlight-2 90%,
$highlight-3 90%
);
}
}
* {
font-family: Montserrat, sans-serif;
box-sizing: border-box;
@ -96,40 +34,14 @@ h1, h2, h3, h4, h5, h6 {
h1, footer {
padding-bottom: 0.2em;
background: repeat-x center bottom / 250px 4px;
background-image: linear-gradient(
to right,
$primary-3 0%, $primary-3 10%,
$primary-1 10%, $primary-1 20%,
$primary-2 20%, $primary-2 30%,
$primary-3 30%, $primary-3 40%,
$primary-2 40%, $primary-2 50%,
$primary-3 50%, $primary-3 60%,
$primary-1 60%, $primary-1 70%,
$primary-3 70%, $primary-3 80%,
$primary-1 80%, $primary-1 90%,
$primary-2 90%, $primary-2 100%
);
@include hline(250px, 4px, $primary-1, $primary-2, $primary-3);
}
a:not(.nav-logo) {
text-decoration: none;
color: $highlight-1;
text-shadow: -1px 1px 0 $background, 0 1px 0 $background, 1px 1px 0 $background;
background: repeat-x center bottom / 10em 2px;
background-image: linear-gradient(
to right,
$highlight-3 0%, $highlight-3 10%,
$highlight-1 10%, $highlight-1 20%,
$highlight-2 20%, $highlight-2 30%,
$highlight-3 30%, $highlight-3 40%,
$highlight-2 40%, $highlight-2 50%,
$highlight-3 50%, $highlight-3 60%,
$highlight-1 60%, $highlight-1 70%,
$highlight-3 70%, $highlight-3 80%,
$highlight-1 80%, $highlight-1 90%,
$highlight-2 90%, $highlight-2 100%
);
@include hline(10em, 2px, $highlight-1, $highlight-2, $highlight-3);
&:hover, &:focus {
animation: cycle-link-background 2s steps(4) infinite 0ms;