/
style.css
130 lines (114 loc) · 2.44 KB
/
style.css
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
:root {
--red: rgba(211, 87, 91, 0.81);
--red-glow: rgba(211, 87, 91, 0.91);
--red-scanline: rgba(204, 94, 98, 0.2);
--black-scanline: rgba(1, 1, 1, 0.9);
--black-hover-background: rgba(0, 0, 0, 0.25);
--blue: #61e4fa;
--yellow: #f7f500;
--text-shadow: rgb(0, 208, 255);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
height: 100%;
display: block;
font-family: "GinesoSoft-ConMed";
}
body {
background-image: url("bg.png");
background-size: cover;
}
.logo {
font-family: "Cyberpunk";
color: var(--yellow);
text-align: center;
font-size: 42px;
text-shadow: var(--text-shadow) 2px 3px 0px;
line-height: 1.5;
padding: 25px 0px;
}
.sublogo {
font-family: "GinesoSoft-ConMed";
font-size: 24px;
color: var(--text-shadow);
text-shadow: none;
text-align: right;
letter-spacing: 24px;
padding-right: 15px;
}
.menu {
display: inline-block;
margin-left: 150px;
width: 400px;
height: 100%;
background: repeating-linear-gradient(
to bottom,
transparent 0%,
var(--red-scanline) 1px,
var(--red-scanline) 3px,
var(--red-scanline) 5px,
var(--red-scanline) 4px,
transparent 0.5%
),
repeating-linear-gradient(
to left,
var(--black-scanline) 100%,
var(--black-scanline) 100%
);
}
.menu ul {
list-style-type: none;
padding: 0px 25px;
}
.menu ul li {
text-transform: uppercase;
cursor: pointer;
/* layout */
position: relative;
padding: 10px;
margin: 15px 0px;
overflow: hidden;
width: 350px;
height: 54.5px;
clip-path: polygon(350px 0px, 350px 29px, 322px 57px, 0px 57px, 0px 0px);
/* font */
color: var(--red);
font-size: 26px;
text-shadow: 0px 0px 3px var(--red-glow);
/* Border */
border-style: solid;
border-width: 2px;
border-color: transparent;
/* Animation */
transition: color 1s ease-out;
transition: border-color 1s ease-out;
}
.menu ul li::after {
/* Layout */
content: "";
position: absolute;
bottom: -17px;
right: -17px;
width: 30px;
height: 30px;
transform: rotate(45deg);
/* Border */
border-width: 2px;
border-style: solid;
border-color: transparent;
/* Animation */
transition: color 1s ease-out;
transition: border-color 1s ease-out;
}
.menu ul li:hover::after,
.menu ul li:hover {
color: var(--blue);
background: var(--black-hover-background);
border-color: var(--blue);
transition: color 0.23s linear;
transition: border-color 0.23s linear;
}