-
Notifications
You must be signed in to change notification settings - Fork 0
/
neon.scss
66 lines (58 loc) · 1.38 KB
/
neon.scss
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
// $font: "Balsamiq Sans";
// $font: "Monoton";
// $font: "Genos";
// $font: "MuseoModerno";
$font: "Dongle";
@use "sass:list";
@use "../base/animators/neon" as animator;
@use "../base/font" with ($font: $font);
@use "../base/layout";
@use "../base/vars";
@use "../base/utils";
$pink: rgb(254, 1, 154);
$orange: rgb(201, 128, 19);
$green: rgb(0, 255, 85);
$purple: rgb(90, 7, 135);
$glow-colour: $green;
$active-colour: white;
$inactive-colour: darken($glow-colour, 50%);
$background-colour: transparentize(darken($glow-colour, 50%), 0.15);
$inactive-shadow: 0 0 1px $glow-colour;
body {
background: url(vars.$background-root + "wall.jpg");
background-color: $background-colour;
background-blend-mode: overlay;
color: $inactive-colour;
font-weight: bold;
font-size: 10vh;
text-shadow: $inactive-shadow;
}
@function make-shadows($radii, $colour) {
$results: [];
@each $radius in $radii {
$results: list.append(
$results,
#{0 0 $radius * 1vh $colour},
$separator: comma
);
}
@return $results;
}
animator.$activated-styles: (
color: $active-colour,
text-shadow: (
utils.list-to-string(
list.join(
make-shadows([0.5, 1], $active-colour),
make-shadows([2, 3, 4], $glow-colour)
)
),
)
);
animator.$deactivated-styles: (
color: $inactive-colour,
text-shadow: (
$inactive-shadow,
)
);
@include animator.setup(2s); ;;