From 0938a0b0349007afedd4b026a329aea5c23a8d57 Mon Sep 17 00:00:00 2001 From: Luca Date: Sat, 26 Dec 2020 20:39:00 +0100 Subject: [PATCH] Define animations in a separate file, remove redundancy --- assets/_animations.scss | 64 ++++++++++++++++++++++++++++ assets/_mixins.scss | 17 ++++++++ assets/style.scss | 94 ++--------------------------------------- 3 files changed, 84 insertions(+), 91 deletions(-) create mode 100644 assets/_animations.scss diff --git a/assets/_animations.scss b/assets/_animations.scss new file mode 100644 index 0000000..5e267de --- /dev/null +++ b/assets/_animations.scss @@ -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% + ); + } +} diff --git a/assets/_mixins.scss b/assets/_mixins.scss index a96f835..0d3b08a 100644 --- a/assets/_mixins.scss +++ b/assets/_mixins.scss @@ -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% + ); +} diff --git a/assets/style.scss b/assets/style.scss index ae77241..f7892ff 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -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;