Mercurial

comparison mrjunejune/src/base.css @ 84:bcc76a156aea

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to be called src instead of pages.
author June Park <parkjune1995@gmail.com>
date Thu, 01 Jan 2026 13:01:10 -0800
parents mrjunejune/pages/base.css@1ded13720541
children 19cccf6e866a
comparison
equal deleted inserted replaced
83:49b611c808e7 84:bcc76a156aea
1 /* Base Colors */
2 :root {
3 --white: #ffffff;
4 --black: hsl(224, 12%, 4%);
5 --darkgray: #333333;
6 --gray: #5d5d5d;
7 --lightgray: #999999;
8 --green: #c2e15f;
9 --orange: #fda333;
10 --purple: #d3a4f9;
11 --red: #fb4485;
12 --blue: #6ce0f1;
13 --darktext: #414141;
14 /* from astro */
15 --accent: #2337ff;
16 --accent-dark: #000d8a;
17 --gray: 96, 115, 159;
18 --gray-light: 229, 233, 240;
19 --gray-dark: 34, 41, 57;
20 --gray-gradient: rgba(var(--gray-light), 50%), #fff;
21 --box-shadow: 0 2px 6px rgba(var(--gray), 25%),
22 0 8px 24px rgba(var(--gray), 33%), 0 16px 32px rgba(var(--gray), 33%);
23 --awesome: #dc3522;
24 --main-width: 720px;
25 }
26 .dark {
27 --white: hsl(224, 10%, 10%);
28 --black: hsl(0, 0%, 90%);
29 --darkgray: #cccccc; /* Inverted */
30 --lightgray: #666666; /* Inverted */
31 --green: #3d1ea0; /* Complementary */
32 --orange: #025ccc; /* Complementary */
33 --purple: #2b5b06; /* Complementary */
34 --red: #04bb7a; /* Complementary */
35 --blue: #932f0e; /* Complementary */
36 --darktext: #bebebe; /* Inverted */
37 --text: var(--lightgray); /* Opposite of --darkgray */
38 --graytext: var(--lightgray); /* Opposite of --gray */
39 --lighttext: var(--darkgray); /* Opposite of --lightgray */
40 --awesome: #23cade; /* Complementary */
41
42 /* Opposite of Astro Colors */
43 --accent: #ffcc00; /* Complementary */
44 --accent-dark: #ffb275; /* Modified complementary */
45 --gray: 159, 140, 96; /* Inverted */
46 --gray-light: 26, 22, 15; /* Inverted */
47 --gray-dark: 221, 214, 198; /* Inverted */
48 --gray-gradient: rgba(26, 22, 15, 50%), #000; /* Adjusted */
49 --box-shadow: 0 -2px -6px rgba(159, 140, 96, 25%),
50 0 -8px -24px rgba(159, 140, 96, 33%), 0 -16px -32px rgba(159, 140, 96, 33%);
51 }
52
53 html {
54 background: var(--white);
55 }
56
57 /* fonts */
58 @font-face {
59 font-family: "Atkinson";
60 src: url("/fonts/atkinson-regular.woff") format("woff");
61 font-weight: 400;
62 font-style: normal;
63 }
64 @font-face {
65 font-family: "Atkinson";
66 src: url("/fonts/atkinson-bold.woff") format("woff");
67 font-weight: 700;
68 font-style: normal;
69 }
70 /* Fonts */
71 @font-face {
72 font-family: "Roboto";
73 src: url("/fonts/Roboto-Regular.ttf");
74 }
75
76 @font-face {
77 font-family: "Roboto Light";
78 src: url("/fonts/Roboto-Thin.ttf");
79 }
80
81 a {
82 color: inherit; /* blue colors for links too */
83 text-decoration: inherit; /* no underline */
84 }
85
86 body {
87 font-family: "Atkinson", sans-serif;
88 margin: 0;
89 padding: 0;
90 text-align: left;
91 background: var(--gray-gradient);
92 background-size: 100% 600px;
93 word-wrap: break-word;
94 overflow-wrap: break-word;
95 color: rgb(var(--gray-dark));
96 font-size: 20px;
97 line-height: 1.7;
98 }
99
100 main {
101 background: var(--white);
102 width: var(--main-width);
103 max-width: calc(100% - 2em);
104 margin: auto;
105 padding: 1em 1em;
106 }
107
108 h1,
109 h2,
110 h3,
111 h4,
112 h5,
113 h6 {
114 margin: 0 0 0.5rem 0;
115 color: rgb(var(--black));
116 line-height: 1.2;
117 }
118 h1 {
119 font-size: 3.052em;
120 }
121 h2 {
122 font-size: 2.441em;
123 }
124 h3 {
125 font-size: 1.953em;
126 }
127 h4 {
128 font-size: 1.563em;
129 }
130 h5 {
131 font-size: 1.25em;
132 }
133 strong,
134 b {
135 font-weight: 700;
136 }
137 p {
138 margin-bottom: 1em;
139 }
140 .prose p {
141 margin-bottom: 2em;
142 }
143 textarea {
144 width: 100%;
145 font-size: 16px;
146 }
147 input {
148 font-size: 16px;
149 }
150 table {
151 width: 100%;
152 }
153 img {
154 max-width: 100%;
155 height: auto;
156 border-radius: 8px;
157 }
158 code {
159 padding: 2px 5px;
160 background-color: rgb(var(--gray-light));
161 border-radius: 2px;
162 }
163 pre {
164 padding: 1.5em;
165 border-radius: 8px;
166 }
167 pre > code {
168 all: unset;
169 }
170 blockquote {
171 border-left: 4px solid var(--accent);
172 padding: 0 0 0 20px;
173 margin: 0px;
174 font-size: 1.333em;
175 }
176 hr {
177 border: none;
178 border-top: 1px solid rgb(var(--gray-light));
179 }
180 @media (max-width: 720px) {
181 body {
182 font-size: 18px;
183 }
184 main {
185 padding: 1em;
186 }
187 }
188
189 .sr-only {
190 border: 0;
191 padding: 0;
192 margin: 0;
193 position: absolute !important;
194 height: 1px;
195 width: 1px;
196 overflow: hidden;
197 /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
198 clip: rect(1px 1px 1px 1px);
199 /* maybe deprecated but we need to support legacy browsers */
200 clip: rect(1px, 1px, 1px, 1px);
201 /* modern browsers, clip-path works inwards from each corner */
202 clip-path: inset(50%);
203 /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
204 white-space: nowrap;
205 }
206
207 .center {
208 display: flex;
209 justify-content: center;
210 }
211
212 /* Auto dark mode based on system preference */
213 @media (prefers-color-scheme: dark) {
214 :root:not(.light-mode) {
215 --white: hsl(224, 10%, 10%);
216 --black: hsl(0, 0%, 90%);
217 --darkgray: #cccccc;
218 --lightgray: #666666;
219 --green: #3d1ea0;
220 --orange: #025ccc;
221 --purple: #2b5b06;
222 --red: #04bb7a;
223 --blue: #932f0e;
224 --darktext: #bebebe;
225 --awesome: #23cade;
226 --accent: #ffcc00;
227 --accent-dark: #ffb275;
228 --gray: 159, 140, 96;
229 --gray-light: 26, 22, 15;
230 --gray-dark: 221, 214, 198;
231 --gray-gradient: rgba(26, 22, 15, 50%), #000;
232 --box-shadow: 0 -2px -6px rgba(159, 140, 96, 25%),
233 0 -8px -24px rgba(159, 140, 96, 33%), 0 -16px -32px rgba(159, 140, 96, 33%);
234 }
235 }
236
237 a {
238 text-decoration: underline;
239 }
240
241 a::before {
242 content: "";
243 display: inline-block;
244 width: 1em;
245 height: 1em;
246 margin-right: 8px;
247 vertical-align: middle;
248
249 /* This treats the paw like a stencil */
250 background-color: #FF69B4; /* Change your color here! (e.g., Hot Pink) */
251 -webkit-mask: url('/public/paw.svg') no-repeat center;
252 mask: url('/public/paw.svg') no-repeat center;
253
254 /* Your 2D Animation */
255 animation: pawStep 0.6s ease-out forwards;
256 }
257
258 @keyframes pawStep {
259 0% { transform: scale(0); opacity: 0; }
260 100% { transform: scale(1); opacity: 1; }
261 }
262
263 a:hover::before {
264 animation: wiggle 0.4s ease-in-out infinite;
265 }
266
267 @keyframes wiggle {
268 0%, 100% { transform: rotate(-15deg); }
269 50% { transform: rotate(15deg); }
270 }