Define animations in a separate file, remove redundancy
This commit is contained in:
parent
13a3062a3f
commit
0938a0b034
|
|
@ -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%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -4,3 +4,20 @@
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: $primary-1;
|
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%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,71 +1,9 @@
|
||||||
|
@import 'animations';
|
||||||
@import 'breakpoints';
|
@import 'breakpoints';
|
||||||
@import 'colors';
|
@import 'colors';
|
||||||
@import 'fonts';
|
@import 'fonts';
|
||||||
@import 'mixins';
|
@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;
|
font-family: Montserrat, sans-serif;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -96,40 +34,14 @@ h1, h2, h3, h4, h5, h6 {
|
||||||
|
|
||||||
h1, footer {
|
h1, footer {
|
||||||
padding-bottom: 0.2em;
|
padding-bottom: 0.2em;
|
||||||
background: repeat-x center bottom / 250px 4px;
|
@include hline(250px, 4px, $primary-1, $primary-2, $primary-3);
|
||||||
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%
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a:not(.nav-logo) {
|
a:not(.nav-logo) {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $highlight-1;
|
color: $highlight-1;
|
||||||
text-shadow: -1px 1px 0 $background, 0 1px 0 $background, 1px 1px 0 $background;
|
text-shadow: -1px 1px 0 $background, 0 1px 0 $background, 1px 1px 0 $background;
|
||||||
background: repeat-x center bottom / 10em 2px;
|
@include hline(10em, 2px, $highlight-1, $highlight-2, $highlight-3);
|
||||||
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%
|
|
||||||
);
|
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
animation: cycle-link-background 2s steps(4) infinite 0ms;
|
animation: cycle-link-background 2s steps(4) infinite 0ms;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue