about.css (5555B)
1 .about-layout { 2 display: flex; 3 width: 100%; 4 height: 100%; 5 } 6 7 .about-left { 8 width: 340px; 9 flex-shrink: 0; 10 border-right: 1px solid var(--border); 11 display: flex; 12 flex-direction: column; 13 padding: 16px; 14 gap: 16px; 15 overflow-y: auto; 16 } 17 18 .about-right { 19 flex: 1; 20 padding: 24px 32px; 21 overflow-y: auto; 22 display: flex; 23 flex-direction: column; 24 justify-content: flex-start; 25 gap: 14px; 26 } 27 28 .profile-image { 29 width: 100%; 30 max-width: 300px; 31 height: auto; 32 border-radius: 4px; 33 border: 1px solid var(--border); 34 } 35 36 .contact-box { 37 border: 1px solid var(--border); 38 padding: 12px; 39 max-width: 300px; 40 } 41 42 .about-sidebar-note { 43 margin-top: auto; 44 max-width: 300px; 45 border: 1px solid var(--accent); 46 background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%); 47 padding: 10px 12px; 48 font-size: var(--fs-12); 49 } 50 51 .about-sidebar-note-title { 52 color: var(--accent); 53 font-size: var(--fs-13); 54 margin-bottom: 6px; 55 } 56 57 .about-sidebar-note-desc { 58 color: var(--fg-dim); 59 margin-bottom: 4px; 60 } 61 62 .about-sidebar-note-command-row { 63 display: flex; 64 gap: 8px; 65 align-items: stretch; 66 } 67 68 .about-sidebar-note-command { 69 margin: 0; 70 flex: 1; 71 border: 1px solid var(--border); 72 background: var(--bg); 73 padding: 6px 8px; 74 color: var(--light-blue); 75 font-size: var(--fs-13); 76 white-space: nowrap; 77 overflow-x: auto; 78 } 79 80 .about-sidebar-copy-btn { 81 border: 1px solid var(--accent-dim); 82 background: var(--bg-alt); 83 color: var(--fg); 84 padding: 0 10px; 85 font-family: inherit; 86 font-size: var(--fs-12); 87 cursor: pointer; 88 } 89 90 .about-sidebar-copy-btn:hover { 91 border-color: var(--accent); 92 color: var(--accent); 93 } 94 95 .about-sidebar-copy-btn.copied { 96 border-color: var(--green); 97 color: var(--green); 98 } 99 100 .box-title { 101 color: var(--accent); 102 font-size: var(--fs-12); 103 margin-bottom: 4px; 104 text-align: left; 105 } 106 107 .shell-prompt { 108 color: var(--fg-dim); 109 font-size: var(--fs-14); 110 margin-bottom: 3px; 111 } 112 113 .shell-user { 114 color: var(--green); 115 } 116 117 .shell-dollar { 118 color: var(--green); 119 } 120 121 .shell-host { 122 color: var(--accent); 123 } 124 125 .shell-path { 126 color: var(--cyan); 127 } 128 129 .shell-cmd { 130 color: var(--fg); 131 } 132 133 .name-ascii { 134 margin: 0; 135 color: var(--fg); 136 font-size: clamp(6px, 0.7vw + 4px, 12px); 137 line-height: 1; 138 white-space: pre; 139 overflow: clip; 140 } 141 142 @media (max-width: 1024px) { 143 .name-ascii { 144 font-size: clamp(6px, 0.5vw + 4px, var(--fs-9)); 145 line-height: 1; 146 } 147 } 148 149 .contact-item { 150 display: flex; 151 margin-bottom: 4px; 152 font-size: var(--fs-13); 153 min-width: 0; 154 } 155 156 .contact-item .label { 157 color: var(--fg-dim); 158 width: 70px; 159 flex-shrink: 0; 160 } 161 162 .contact-item a { 163 color: var(--light-blue); 164 overflow: hidden; 165 text-overflow: ellipsis; 166 white-space: nowrap; 167 direction: rtl; 168 text-align: left; 169 } 170 171 .contact-item a:hover { 172 opacity: 0.8; 173 } 174 175 .section { 176 flex-shrink: 0; 177 display: flex; 178 flex-direction: column; 179 gap: 2px; 180 } 181 182 .section .dim { 183 color: var(--fg-dim); 184 font-size: inherit; 185 } 186 187 .section .bio { 188 color: var(--fg); 189 font-size: var(--fs-14); 190 font-style: normal; 191 line-height: 1.6; 192 margin: 8px 0 0; 193 } 194 195 .info-columns { 196 display: flex; 197 gap: 30px; 198 } 199 200 .info-column { 201 flex: 1; 202 } 203 204 .info-row { 205 display: flex; 206 font-size: var(--fs-14); 207 margin-bottom: 2px; 208 } 209 210 .info-row .label { 211 color: var(--fg-dim); 212 width: 100px; 213 flex-shrink: 0; 214 } 215 216 .tags { 217 display: flex; 218 flex-wrap: wrap; 219 gap: 6px; 220 } 221 222 .weekly-stats { 223 background: var(--bg-alt); 224 border: 1px solid var(--border); 225 padding: 12px; 226 } 227 228 .weekly-ascii { 229 margin: 0; 230 color: var(--fg); 231 font-size: var(--fs-12); 232 line-height: 1.4; 233 white-space: pre; 234 overflow-x: auto; 235 font-variant-ligatures: none; 236 } 237 238 .weekly-ascii .weekly-total-label { 239 color: var(--fg); 240 } 241 242 .weekly-ascii .weekly-total-value { 243 color: var(--cyan); 244 } 245 246 .weekly-ascii .weekly-day-label, 247 .weekly-ascii .weekly-day-time { 248 color: var(--fg-dim); 249 } 250 251 .weekly-ascii .weekly-day-bar-frame { 252 color: var(--fg); 253 } 254 255 .weekly-ascii .weekly-day-bar-filled { 256 color: var(--fg); 257 } 258 259 .weekly-ascii .weekly-day-bar-empty { 260 color: var(--border); 261 } 262 263 .weekly-stats .loading-text { 264 color: var(--fg-dim); 265 font-style: italic; 266 text-align: center; 267 padding: 20px 0; 268 } 269 270 .weekly-total { 271 font-size: var(--fs-16); 272 font-weight: 500; 273 color: var(--accent); 274 margin-bottom: 12px; 275 } 276 277 .weekly-days { 278 display: flex; 279 flex-direction: column; 280 gap: 6px; 281 } 282 283 .weekly-day-row { 284 display: flex; 285 align-items: center; 286 gap: 8px; 287 font-size: var(--fs-12); 288 } 289 290 .weekly-day-name { 291 width: 32px; 292 flex-shrink: 0; 293 color: var(--fg-dim); 294 } 295 296 .weekly-day-bar-container { 297 flex: 1; 298 height: 8px; 299 background: var(--bg); 300 border-radius: 2px; 301 overflow: hidden; 302 } 303 304 .weekly-day-bar { 305 height: 100%; 306 background: var(--accent); 307 border-radius: 2px; 308 } 309 310 .weekly-day-time { 311 min-width: 50px; 312 flex-shrink: 0; 313 text-align: right; 314 color: var(--fg-dim); 315 white-space: nowrap; 316 } 317 318 @media (max-width: 768px) { 319 .about-layout { 320 flex-direction: column; 321 } 322 323 .about-left { 324 flex-direction: row; 325 width: 100%; 326 border-right: none; 327 border-bottom: 1px solid var(--border); 328 } 329 330 .profile-image { 331 width: 120px; 332 height: 120px; 333 object-fit: cover; 334 } 335 336 .contact-box { 337 flex: 1; 338 max-width: none; 339 min-width: 0; 340 } 341 342 .about-sidebar-note { 343 display: none; 344 } 345 346 .about-right { 347 padding: 16px; 348 display: block; 349 } 350 351 .section { 352 margin-bottom: 16px; 353 } 354 355 .name-ascii { 356 font-size: clamp(5px, 0.45vw + 3.2px, var(--fs-8)); 357 line-height: 1; 358 } 359 360 .info-columns { 361 flex-direction: column; 362 gap: 12px; 363 } 364 }