Mercurial

comparison mrjunejune/pages/tools/index.css @ 76:35b1abc37969

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updating my website to use seobeo library.
author June Park <parkjune1995@gmail.com>
date Wed, 31 Dec 2025 14:11:21 -0800
parents
children d55157451947
comparison
equal deleted inserted replaced
75:ae6a88e6e484 76:35b1abc37969
1 body {
2 line-height: 1.6;
3 padding: 20px;
4 max-width: 1200px;
5 margin: 0 auto;
6 background: rgb(var(--gray-light));
7 }
8
9 .title {
10 color: var(--darkgray);
11 }
12
13 .nav-list {
14 list-style: none;
15 padding: 0;
16 }
17
18 .nav-list li {
19 display: flex;
20 align-items: center;
21 margin-bottom: 20px;
22 cursor: pointer;
23 group;
24 }
25
26 /* The Mini Sphere */
27 .sphere {
28 width: 12px;
29 height: 12px;
30 border-radius: 50%;
31 margin-right: 15px;
32 background: var(--darkgray);
33 box-shadow: 0 0 10px rgba(68, 136, 255, 0.5);
34 transition: all 0.3s ease;
35 opacity: 0.5; /* Dim when not active */
36 }
37
38 /* The Text */
39 .nav-list a {
40 color: var(--darkgray);
41 text-decoration: none;
42 font-size: 1.2rem;
43 transition: color 0.3s ease;
44 }
45
46 /* Hover Effects */
47 .nav-list li:hover .sphere {
48 opacity: 1;
49 transform: scale(1.5);
50 box-shadow: 0 0 20px var(--awesome);
51 animation: pulse 1.5s infinite; /* Only pulses on hover */
52 }
53
54 .nav-list li:hover a {
55 color: var(--awesome);
56 }
57
58 /* Simple pulse animation for the list version */
59 @keyframes pulse {
60 0% { box-shadow: 0 0 0 0 rgba(68, 136, 255, 0.7); }
61 70% { box-shadow: 0 0 0 10px rgba(68, 136, 255, 0); }
62 100% { box-shadow: 0 0 0 0 rgba(68, 136, 255, 0); }
63 }