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
|
@use "sass:color";
@use "sass:meta";
@mixin contact($color, $text-color: $color) {
cursor: pointer;
color: $text-color;
background-color: color.adjust($color, $alpha: -0.1);
padding: 7px 25px;
min-width: 70px;
max-width: 70vw;
overflow-wrap: break-word;
border-radius: 10px;
align-items: center;
justify-content: center;
box-shadow: 0 1px 4px 1px color.change(black, $alpha: 0.10),
0 1px 10px 5px color.change(black, $alpha: 0.09),
0 3px 16px 8px color.change(black, $alpha: 0.04),
0 0 0 1px color.change(black, $alpha: 0.05);
transition: box-shadow 0.3s ease-in-out;
&:hover {
box-shadow: 0 1px 4px 1px color.change($color, $alpha: 0.10),
0 1px 10px 5px color.change($color, $alpha: 0.09),
0 3px 16px 8px color.change($color, $alpha: 0.04),
0 0 0 1px color.change($color, $alpha: 0.05);
}
& h3 {
text-align: center;
}
& p {
user-select: none;
}
& noscript {
text-overflow: ellipsis;
}
}
|
