Mercurial

annotate mrjunejune/src/tools/index.css @ 97:3bdfffaad162

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
author June Park <parkjune1995@gmail.com>
date Fri, 02 Jan 2026 20:21:58 -0800
parents bcc76a156aea
children
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 .title {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
2 color: var(--darkgray);
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
3 }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
4
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
5 .nav-list {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
6 list-style: none;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
7 padding: 0;
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
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
10 .nav-list li {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
11 display: flex;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
12 align-items: center;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
13 margin-bottom: 20px;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
14 cursor: pointer;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
15 group;
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 /* The Mini Sphere */
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
19 .sphere {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
20 width: 12px;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
21 height: 12px;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
22 border-radius: 50%;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
23 margin-right: 15px;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
24 background: var(--darkgray);
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
25 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
26 transition: all 0.3s ease;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
27 opacity: 0.5; /* Dim when not active */
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
28 }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
29
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
30 /* The Text */
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
31 .nav-list a {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
32 color: var(--darkgray);
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
33 text-decoration: none;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
34 font-size: 1.2rem;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
35 transition: color 0.3s ease;
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 /* Hover Effects */
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
39 .nav-list li:hover .sphere {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
40 opacity: 1;
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
41 transform: scale(1.5);
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
42 box-shadow: 0 0 20px var(--awesome);
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
43 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
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 .nav-list li:hover a {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
47 color: var(--awesome);
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
48 }
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
49
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
50 /* Simple pulse animation for the list version */
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
51 @keyframes pulse {
35b1abc37969 Updating my website to use seobeo library.
June Park <parkjune1995@gmail.com>
parents:
diff changeset
52 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
53 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
54 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
55 }
97
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
56
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
57 /* Mobile responsive */
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
58 @media (max-width: 720px) {
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
59 .title {
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
60 font-size: 2rem;
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
61 }
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
62
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
63 .nav-list a {
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
64 font-size: 1.1rem;
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
65 line-height: 1.6;
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
66 }
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
67
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
68 .nav-list li {
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
69 margin-bottom: 1.5em;
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
70 padding: 0.5em 0;
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
71 }
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
72
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
73 .sphere {
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
74 width: 14px;
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
75 height: 14px;
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
76 margin-right: 12px;
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
77 }
3bdfffaad162 [MrJuneJune] Updated so it is mobile friendly and fixed few font sizes.
June Park <parkjune1995@gmail.com>
parents: 84
diff changeset
78 }