My personal site hosted @ https://indexx.dev
indexx.dev
1/* ---------------------------------------------------
2 VARIABLES & PROPERTIES
3--------------------------------------------------- */
4@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
5
6:root {
7 --line: transparent;
8 --line-active: #ffffff;
9 --bg-gradient: linear-gradient(
10 45deg,
11 rgb(0, 59, 74),
12 rgb(0, 35, 44),
13 rgb(0, 29, 36)
14 );
15}
16
17@property --animatedBorder {
18 syntax: "<angle>";
19 inherits: false;
20 initial-value: 0deg;
21}
22
23/* ---------------------------------------------------
24 GLOBAL STYLES
25--------------------------------------------------- */
26html,
27body {
28 font-family: "Nunito Sans", sans-serif;
29 width: 100%;
30 height: 100%;
31 background: var(--bg-gradient);
32}
33
34a {
35 color: rgb(0, 151, 188) !important;
36 text-decoration: none;
37}
38
39a:hover .project-card {
40 border-color: rgb(0, 83, 104);
41}
42
43.unselectable {
44 user-select: none;
45 -webkit-user-select: none;
46 -moz-user-select: none;
47 -ms-user-select: none;
48}
49
50/* ---------------------------------------------------
51 PAGE LAYOUT
52--------------------------------------------------- */
53main#page {
54 position: absolute;
55 top: 50%;
56 left: 0;
57 width: 100%;
58 margin-top: -100px;
59 color: rgb(0, 151, 188);
60 transition: width 0.5s ease;
61}
62
63main#page.side {
64 width: 70%;
65}
66
67/* ---------------------------------------------------
68 TEXT STYLES
69--------------------------------------------------- */
70h1 {
71 color: #fff;
72 margin-bottom: 0;
73 font-weight: 1000;
74 font-size: 4rem;
75}
76
77h1.spin {
78 animation: textSpin 4.5s linear infinite;
79 position: relative;
80}
81
82h1.spin::before,
83h1.spin::after {
84 content: "index" !important;
85}
86
87/* ---------------------------------------------------
88 CIRCLE HOVER LINK
89--------------------------------------------------- */
90.circle-hover {
91 display: inline-block;
92 position: relative;
93 margin: 0 var(--spacing, 0px);
94 flex: 1;
95 min-width: 0;
96 transition: margin 0.25s;
97}
98
99.circle-hover:hover {
100 --spacing: 4px;
101 --stroke: var(--line-active);
102 --stroke-delay: 0.1s;
103 --offset: 180px;
104 color: #fff !important;
105}
106
107.circle-hover svg {
108 width: 76px;
109 height: 40px;
110 position: absolute;
111 left: 50%;
112 bottom: 0;
113 transform: translate(-50%, 7px) translateZ(0);
114 fill: none;
115 stroke: var(--stroke, var(--line));
116 stroke-linecap: round;
117 stroke-width: 2px;
118 stroke-dasharray: var(--offset, 69px) 278px;
119 stroke-dashoffset: 361px;
120 transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;
121}
122
123/* ---------------------------------------------------
124 PROJECTS SIDE PANE
125--------------------------------------------------- */
126#projects-pane {
127 position: absolute;
128 top: 0;
129 right: 0;
130 width: 30%;
131 height: 97%;
132 margin: 15px;
133 padding: 20px;
134 border-radius: 10px;
135 background: rgba(0, 23, 29, 0.48);
136 opacity: 0;
137 pointer-events: none;
138 visibility: hidden;
139}
140
141#projects-pane ul {
142 height: 100%;
143 padding-bottom: 20px;
144 overflow-y: scroll;
145 overflow-x: hidden;
146}
147
148.project-card {
149 background: rgba(0, 23, 29, 0.641);
150 border: 1px solid rgb(0, 44, 55);
151 padding: 10px;
152 border-radius: 10px;
153 margin-bottom: 10px;
154 color: #fff !important;
155}
156
157/* ---------------------------------------------------
158 NOW PLAYING WIDGET
159--------------------------------------------------- */
160#now-playing {
161 position: fixed;
162 bottom: 20px;
163 left: 50%;
164 transform: translateX(-50%);
165 display: flex;
166 align-items: center;
167 gap: 12px;
168 padding: 8px;
169 background-color: rgba(8, 61, 74, 0.42);
170 border-radius: 8px;
171 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
172 color: #000;
173 text-align: right;
174 text-decoration: none;
175 max-width: 400px;
176 min-width: 300px;
177 outline: 2px solid #0000001a;
178 outline-offset: 5px;
179 transition: opacity 0.2s;
180}
181
182#now-playing img {
183 width: 64px;
184 height: 64px;
185 border-radius: 4px;
186 object-fit: cover;
187}
188
189#now-playing #content {
190 width: 100%;
191}
192
193/* ---------------------------------------------------
194 ANIMATED BORDER EFFECT
195--------------------------------------------------- */
196.animated-border::before,
197.animated-border::after {
198 content: "";
199 position: absolute;
200 top: 50%;
201 left: 50%;
202 transform: translate(-50%, -50%);
203 font-size: 70px;
204 z-index: 1;
205 background: conic-gradient(
206 from var(--animatedBorder),
207 transparent,
208 transparent,
209 transparent,
210 blue
211 );
212 background-clip: text;
213 -webkit-text-fill-color: transparent;
214 animation: animatedBorder 3s linear infinite;
215}
216
217.animated-border::before {
218 filter: blur(20px);
219 opacity: 0.5;
220}
221
222/* ---------------------------------------------------
223 ANIMATIONS
224--------------------------------------------------- */
225@keyframes textSpin {
226 0% {
227 transform: rotateY(0deg);
228 }
229 100% {
230 transform: rotateY(359deg);
231 }
232}
233
234@keyframes animatedBorder {
235 from {
236 --animatedBorder: 0deg;
237 }
238 to {
239 --animatedBorder: 360deg;
240 }
241}