blob: 8d65c6869dae91f0d7a7cd5dea963b2f18c24d4d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
@include box-sizing;
@include font-face("Merriweather");
@include font-face("CourierNew");
* {
font-family: Merriweather, Georgia, serif;
color: $lightblue;
}
html {
background-color: #454545;
}
html, body {
height: 100%;
margin: 0;
}
a {
display: inline-block;
position: relative;
text-decoration: none;
transition: linear 0.2s;
color: $purple;
&:before {
content: '';
height: 2px;
position: absolute;
bottom: -1.5px;
width: 100%;
left: 50%;
@include linear-gradient($rainbowright...);
@include transform(translate(-50%, 0));
@include transition(width 0.2s ease-in-out);
}
&:hover {
color: $white;
}
&:hover:before {
width: 0;
}
}
@mixin animate-letter($n) {
.e#{$n} {
position: relative;
$delay: (12 - $n) * -100ms;
@include animation-delay($delay);
@include animation(
wave 1s linear $delay infinite,
rainbow 3s linear $delay infinite);
}
}
#webring {
position: relative;
width: 100%;
padding: 0.5em;
.left {
float: left;
}
.right {
float: right;
}
center {
width: 100%;
left: 0;
position: absolute;
margin-top: 3px;
.center {
.header {
@for $i from 0 through 12 {
@include animate-letter($i);
}
}
}
}
}
@media (prefers-reduced-motion: reduce) {
.header span {
animation: none !important;
}
}
@include keyframes(wave) {
0% {top: 0px;}
25% {top: -1px;}
50% {top: 0px;}
75% {top: 1px;}
100% {top: 0px;}
}
@include keyframes(rainbow) {
0% {color: $red;}
17% {color: $orange;}
33% {color: $yellow;}
50% {color: $green;}
67% {color: $blue;}
83% {color: $purple;}
100% {color: $red;}
}
|
