Mercurial

annotate 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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
76
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
1 body {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
2 line-height: 1.6;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
3 padding: 20px;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
4 max-width: 1200px;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
5 margin: 0 auto;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
6 background: rgb(var(--gray-light));
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
7 }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
8
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
9 .title {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
10 color: var(--darkgray);
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
11 }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
12
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
13 .nav-list {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
14 list-style: none;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
15 padding: 0;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
16 }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
17
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
18 .nav-list li {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
19 display: flex;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
20 align-items: center;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
21 margin-bottom: 20px;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
22 cursor: pointer;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
23 group;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
24 }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
25
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
26 /* The Mini Sphere */
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
27 .sphere {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
28 width: 12px;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
29 height: 12px;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
30 border-radius: 50%;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
31 margin-right: 15px;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
32 background: var(--darkgray);
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
33 box-shadow: 0 0 10px rgba(68, 136, 255, 0.5);
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
34 transition: all 0.3s ease;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
35 opacity: 0.5; /* Dim when not active */
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
36 }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
37
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
38 /* The Text */
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
39 .nav-list a {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
40 color: var(--darkgray);
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
41 text-decoration: none;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
42 font-size: 1.2rem;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
43 transition: color 0.3s ease;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
44 }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
45
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
46 /* Hover Effects */
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
47 .nav-list li:hover .sphere {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
48 opacity: 1;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
49 transform: scale(1.5);
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
50 box-shadow: 0 0 20px var(--awesome);
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
51 animation: pulse 1.5s infinite; /* Only pulses on hover */
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
52 }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
53
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
54 .nav-list li:hover a {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
55 color: var(--awesome);
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
56 }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
57
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
58 /* Simple pulse animation for the list version */
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
59 @keyframes pulse {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
60 0% { box-shadow: 0 0 0 0 rgba(68, 136, 255, 0.7); }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
61 70% { box-shadow: 0 0 0 10px rgba(68, 136, 255, 0); }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
62 100% { box-shadow: 0 0 0 0 rgba(68, 136, 255, 0); }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
63 }