Mercurial

comparison mrjunejune/src/resume.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
comparison
equal deleted inserted replaced
96:70401cf61e97 97:3bdfffaad162
15 flex-grow: 1; 15 flex-grow: 1;
16 border-bottom: 1px solid var(--darkgray); 16 border-bottom: 1px solid var(--darkgray);
17 } 17 }
18 18
19 .header-firstname-style { 19 .header-firstname-style {
20 font-size: 32pt; 20 font-size: 2.5rem;
21 font-family: "Roboto Light", sans-serif; 21 font-family: "Roboto Light", sans-serif;
22 color: var(--graytext); 22 color: var(--graytext);
23 } 23 }
24 24
25 .header-lastname-style { 25 .header-lastname-style {
26 font-size: 32pt; 26 font-size: 2.5rem;
27 font-family: "Roboto", sans-serif; 27 font-family: "Roboto", sans-serif;
28 font-weight: bold; 28 font-weight: bold;
29 color: var(--text); 29 color: var(--text);
30 } 30 }
31 31
32 .header-position-style { 32 .header-position-style {
33 font-size: 7.6pt; 33 font-size: 0.875rem;
34 font-family: "Source Sans Pro", sans-serif; 34 font-family: "Source Sans Pro", sans-serif;
35 font-variant: small-caps; 35 font-variant: small-caps;
36 color: var(--awesome); 36 color: var(--awesome);
37 letter-spacing: 0.05em;
37 } 38 }
38 39
39 .header-address-style { 40 .header-address-style {
40 font-size: 8pt; 41 font-size: 1rem;
41 font-family: "Roboto", sans-serif; 42 font-family: "Roboto", sans-serif;
42 font-style: italic; 43 font-style: italic;
43 color: var(--lighttext); 44 color: var(--lighttext);
44 } 45 }
45 46
46 .header-social-style { 47 .header-social-style {
47 font-size: 10pt; 48 font-size: 1.1rem;
48 font-family: "Roboto", sans-serif; 49 font-family: "Roboto", sans-serif;
49 color: var(--text); 50 color: var(--text);
51 line-height: 1.6;
52 display: grid;
53 grid-template-columns: 1fr 1fr;
50 } 54 }
51 55
52 .header-quote-style { 56 .header-quote-style {
53 font-size: 9pt; 57 font-size: 1rem;
54 font-family: "Source Sans Pro", sans-serif; 58 font-family: "Source Sans Pro", sans-serif;
55 font-style: italic; 59 font-style: italic;
56 color: var(--darktext); 60 color: var(--darktext);
57 } 61 }
58 62
59 .footer-style { 63 .footer-style {
60 font-size: 8pt; 64 font-size: 0.875rem;
61 font-family: "Source Sans Pro", sans-serif; 65 font-family: "Source Sans Pro", sans-serif;
62 font-variant: small-caps; 66 font-variant: small-caps;
63 color: var(--lighttext); 67 color: var(--lighttext);
64 } 68 }
65 69
66 .section-style { 70 .section-style {
67 font-size: 16pt; 71 font-size: 1.5rem;
68 font-family: "Source Sans Pro", sans-serif; 72 font-family: "Source Sans Pro", sans-serif;
69 font-weight: bold; 73 font-weight: bold;
70 color: var(--text); 74 color: var(--text);
71 } 75 }
72 76
73 .subsection-style { 77 .subsection-style {
74 font-size: 12pt; 78 font-size: 1.25rem;
75 font-family: "Source Sans Pro", sans-serif; 79 font-family: "Source Sans Pro", sans-serif;
76 font-variant: small-caps; 80 font-variant: small-caps;
77 color: var(--text); 81 color: var(--text);
78 } 82 }
79 83
80 .paragraph-style { 84 .paragraph-style {
81 font-size: 9pt; 85 font-size: 1rem;
82 font-family: "Source Sans Pro Light", sans-serif; 86 font-family: "Source Sans Pro Light", sans-serif;
83 color: var(--text); 87 color: var(--text);
88 line-height: 1.6;
84 } 89 }
85 90
86 .entry-title-style { 91 .entry-title-style {
87 font-size: 10pt; 92 font-size: 1.1rem;
88 font-family: "Source Sans Pro", sans-serif; 93 font-family: "Source Sans Pro", sans-serif;
89 font-weight: bold; 94 font-weight: bold;
90 color: var(--darktext); 95 color: var(--darktext);
91 } 96 }
92 97
93 .entry-position-style { 98 .entry-position-style {
94 font-size: 8pt; 99 font-size: 0.95rem;
95 font-family: "Source Sans Pro", sans-serif; 100 font-family: "Source Sans Pro", sans-serif;
96 font-variant: small-caps; 101 font-variant: small-caps;
97 color: var(--graytext); 102 color: var(--graytext);
103 letter-spacing: 0.03em;
98 } 104 }
99 105
100 .entry-date-style { 106 .entry-date-style {
101 font-size: 8pt; 107 font-size: 0.95rem;
102 font-family: "Source Sans Pro Light", sans-serif; 108 font-family: "Source Sans Pro Light", sans-serif;
103 font-style: italic; 109 font-style: italic;
104 color: var(--graytext); 110 color: var(--graytext);
105 } 111 }
106 112
107 .entry-location-style { 113 .entry-location-style {
108 font-size: 9pt; 114 font-size: 1rem;
109 font-family: "Source Sans Pro Light", sans-serif; 115 font-family: "Source Sans Pro Light", sans-serif;
110 font-style: italic; 116 font-style: italic;
111 color: var(--awesome); 117 color: var(--awesome);
112 } 118 }
113 119
114 .description-style { 120 .description-style {
115 font-size: 9pt; 121 font-size: 1rem;
116 font-family: "Source Sans Pro Light", sans-serif; 122 font-family: "Source Sans Pro Light", sans-serif;
117 color: var(--text); 123 color: var(--text);
124 line-height: 1.7;
125 }
126
127 .description-style li {
128 margin-bottom: 0.75em;
118 } 129 }
119 130
120 .subentry-title-style { 131 .subentry-title-style {
121 font-size: 8pt; 132 font-size: 0.95rem;
122 font-family: "Source Sans Pro", sans-serif; 133 font-family: "Source Sans Pro", sans-serif;
123 color: var(--graytext); 134 color: var(--graytext);
124 } 135 }
125 136
126 .subentry-position-style { 137 .subentry-position-style {
127 font-size: 7pt; 138 font-size: 0.875rem;
128 font-family: "Source Sans Pro", sans-serif; 139 font-family: "Source Sans Pro", sans-serif;
129 font-variant: small-caps; 140 font-variant: small-caps;
130 color: var(--graytext); 141 color: var(--graytext);
131 } 142 }
132 143
134 .honor-position-style, 145 .honor-position-style,
135 .honor-date-style, 146 .honor-date-style,
136 .honor-location-style, 147 .honor-location-style,
137 .skill-type-style, 148 .skill-type-style,
138 .skill-set-style { 149 .skill-set-style {
139 font-size: 9pt; 150 font-size: 1rem;
140 font-family: "Source Sans Pro", sans-serif; 151 font-family: "Source Sans Pro", sans-serif;
141 color: var(--graytext); 152 color: var(--graytext);
153 line-height: 1.6;
142 } 154 }
143 155
144 .letter-section-style, 156 .letter-section-style,
145 .recipient-title-style, 157 .recipient-title-style,
146 .letter-title-style, 158 .letter-title-style,
156 } 168 }
157 169
158 .flex-box { 170 .flex-box {
159 display: flex; 171 display: flex;
160 justify-content: space-between; 172 justify-content: space-between;
161 } 173 gap: 1em;
174 flex-wrap: wrap;
175 }
176
177 /* Mobile responsive styles */
178 @media (max-width: 720px) {
179 .header-firstname-style,
180 .header-lastname-style {
181 font-size: 2rem;
182 }
183
184 .header-position-style {
185 font-size: 0.875rem;
186 }
187
188 .header-address-style {
189 font-size: 0.95rem;
190 }
191
192 .header-social-style {
193 font-size: 0.95rem;
194 line-height: 1.8;
195 word-break: break-word;
196 }
197
198 .header-social-style p {
199 display: flex;
200 flex-direction: column;
201 gap: 0.5em;
202 }
203
204 .header-social-style a {
205 display: inline-block;
206 padding: 0.5em 0;
207 }
208
209 .section-style {
210 font-size: 1.35rem;
211 }
212
213 .subsection-style {
214 font-size: 1.15rem;
215 }
216
217 .paragraph-style {
218 font-size: 1rem;
219 line-height: 1.7;
220 }
221
222 .entry-title-style {
223 font-size: 1.1rem;
224 }
225
226 .entry-position-style,
227 .entry-date-style {
228 font-size: 0.95rem;
229 }
230
231 .entry-location-style {
232 font-size: 0.95rem;
233 }
234
235 .description-style {
236 font-size: 1rem;
237 line-height: 1.8;
238 }
239
240 .description-style li {
241 margin-bottom: 1em;
242 }
243
244 .flex-box {
245 gap: 0.5em;
246 }
247
248 .sub-header {
249 margin-top: 2em;
250 }
251
252 .info a {
253 padding: 0.5em;
254 min-height: 44px;
255 display: inline-flex;
256 align-items: center;
257 justify-content: center;
258 }
259 }