Mercurial

comparison mrjunejune/pages/base.css @ 80:d55157451947

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[MrJuneJune] Updating my homepage.
author June Park <parkjune1995@gmail.com>
date Thu, 01 Jan 2026 08:23:46 -0800
parents 35b1abc37969
children 1ded13720541
comparison
equal deleted inserted replaced
79:5710108c949e 80:d55157451947
58 @font-face { 58 @font-face {
59 font-family: "Atkinson"; 59 font-family: "Atkinson";
60 src: url("/fonts/atkinson-regular.woff") format("woff"); 60 src: url("/fonts/atkinson-regular.woff") format("woff");
61 font-weight: 400; 61 font-weight: 400;
62 font-style: normal; 62 font-style: normal;
63 font-display: swap;
64 } 63 }
65 @font-face { 64 @font-face {
66 font-family: "Atkinson"; 65 font-family: "Atkinson";
67 src: url("/fonts/atkinson-bold.woff") format("woff"); 66 src: url("/fonts/atkinson-bold.woff") format("woff");
68 font-weight: 700; 67 font-weight: 700;
69 font-style: normal; 68 font-style: normal;
70 font-display: swap;
71 } 69 }
72 /* Fonts */ 70 /* Fonts */
73 @font-face { 71 @font-face {
74 font-family: "Roboto"; 72 font-family: "Roboto";
75 src: url("/fonts/Roboto-Regular.ttf"); 73 src: url("/fonts/Roboto-Regular.ttf");
96 overflow-wrap: break-word; 94 overflow-wrap: break-word;
97 color: rgb(var(--gray-dark)); 95 color: rgb(var(--gray-dark));
98 font-size: 20px; 96 font-size: 20px;
99 line-height: 1.7; 97 line-height: 1.7;
100 } 98 }
99
101 main { 100 main {
102 background: var(--white); 101 background: var(--white);
103 width: var(--main-width); 102 width: var(--main-width);
104 max-width: calc(100% - 2em); 103 max-width: calc(100% - 2em);
105 margin: auto; 104 margin: auto;
106 padding: 1em 1em; 105 padding: 1em 1em;
107 } 106 }
107
108 h1, 108 h1,
109 h2, 109 h2,
110 h3, 110 h3,
111 h4, 111 h4,
112 h5, 112 h5,
255 255
256 .dark-mode-toggle:hover { 256 .dark-mode-toggle:hover {
257 transform: scale(1.1); 257 transform: scale(1.1);
258 box-shadow: 0 4px 12px rgba(0,0,0,0.3); 258 box-shadow: 0 4px 12px rgba(0,0,0,0.3);
259 } 259 }
260
261 a {
262 text-decoration: underline;
263 }
264
265 a::before {
266 content: "";
267 display: inline-block;
268 width: 1em;
269 height: 1em;
270 margin-right: 8px;
271 vertical-align: middle;
272
273 /* This treats the paw like a stencil */
274 background-color: #FF69B4; /* Change your color here! (e.g., Hot Pink) */
275 -webkit-mask: url('/public/paw.svg') no-repeat center;
276 mask: url('/public/paw.svg') no-repeat center;
277
278 /* Your 2D Animation */
279 animation: pawStep 0.6s ease-out forwards;
280 }
281
282 @keyframes pawStep {
283 0% { transform: scale(0); opacity: 0; }
284 100% { transform: scale(1); opacity: 1; }
285 }
286
287 a:hover::before {
288 animation: wiggle 0.4s ease-in-out infinite;
289 }
290
291 @keyframes wiggle {
292 0%, 100% { transform: rotate(-15deg); }
293 50% { transform: rotate(15deg); }
294 }