damage calculator
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: provide font files

serenity b4c24774 0514e8af

+285 -170
+1 -1
app/index.html
··· 4 4 <head> 5 5 <meta charset="UTF-8" /> 6 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 - <title>dijiang-app</title> 7 + <title>OMV Dijiang</title> 8 8 </head> 9 9 <body> 10 10 <div id="app"></div>
app/public/fonts/Avenir-Bold.ttf

This is a binary file and will not be displayed.

app/public/fonts/Avenir-BoldOblique.ttf

This is a binary file and will not be displayed.

app/public/fonts/Avenir-ExtraBold.ttf

This is a binary file and will not be displayed.

app/public/fonts/Avenir-ExtraBoldOblique.ttf

This is a binary file and will not be displayed.

app/public/fonts/Avenir-ExtraLight.ttf

This is a binary file and will not be displayed.

app/public/fonts/Avenir-ExtraLightOblique.ttf

This is a binary file and will not be displayed.

app/public/fonts/Avenir-Light.ttf

This is a binary file and will not be displayed.

app/public/fonts/Avenir-LightOblique.ttf

This is a binary file and will not be displayed.

app/public/fonts/Avenir-Medium.ttf

This is a binary file and will not be displayed.

app/public/fonts/Avenir-MediumOblique.ttf

This is a binary file and will not be displayed.

app/public/fonts/Avenir-Oblique.ttf

This is a binary file and will not be displayed.

app/public/fonts/Avenir-Regular.ttf

This is a binary file and will not be displayed.

+284 -169
app/src/styles.css
··· 1 - @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap"); 2 - @import "tailwindcss"; 1 + @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap'); 2 + @import 'tailwindcss'; 3 3 @plugin "@tailwindcss/typography"; 4 4 5 + @font-face { 6 + font-family: Avenir; 7 + font-style: normal; 8 + font-weight: 200; 9 + font-display: swap; 10 + src: url('/fonts/Avenir-ExtraLight.ttf') format('truetype'); 11 + } 12 + 13 + @font-face { 14 + font-family: Avenir; 15 + font-style: oblique; 16 + font-weight: 200; 17 + font-display: swap; 18 + src: url('/fonts/Avenir-ExtraLightOblique.ttf') format('truetype'); 19 + } 20 + 21 + @font-face { 22 + font-family: Avenir; 23 + font-style: normal; 24 + font-weight: 300; 25 + font-display: swap; 26 + src: url('/fonts/Avenir-Light.ttf') format('truetype'); 27 + } 28 + 29 + @font-face { 30 + font-family: Avenir; 31 + font-style: oblique; 32 + font-weight: 300; 33 + font-display: swap; 34 + src: url('/fonts/Avenir-LightOblique.ttf') format('truetype'); 35 + } 36 + 37 + @font-face { 38 + font-family: Avenir; 39 + font-style: normal; 40 + font-weight: 400; 41 + font-display: swap; 42 + src: url('/fonts/Avenir-Regular.ttf') format('truetype'); 43 + } 44 + 45 + @font-face { 46 + font-family: Avenir; 47 + font-style: oblique; 48 + font-weight: 400; 49 + font-display: swap; 50 + src: url('/fonts/Avenir-Oblique.ttf') format('truetype'); 51 + } 52 + 53 + @font-face { 54 + font-family: Avenir; 55 + font-style: normal; 56 + font-weight: 500; 57 + font-display: swap; 58 + src: url('/fonts/Avenir-Medium.ttf') format('truetype'); 59 + } 60 + 61 + @font-face { 62 + font-family: Avenir; 63 + font-style: oblique; 64 + font-weight: 500; 65 + font-display: swap; 66 + src: url('/fonts/Avenir-MediumOblique.ttf') format('truetype'); 67 + } 68 + 69 + @font-face { 70 + font-family: Avenir; 71 + font-style: normal; 72 + font-weight: 700; 73 + font-display: swap; 74 + src: url('/fonts/Avenir-Bold.ttf') format('truetype'); 75 + } 76 + 77 + @font-face { 78 + font-family: Avenir; 79 + font-style: oblique; 80 + font-weight: 700; 81 + font-display: swap; 82 + src: url('/fonts/Avenir-BoldOblique.ttf') format('truetype'); 83 + } 84 + 85 + @font-face { 86 + font-family: Avenir; 87 + font-style: normal; 88 + font-weight: 800; 89 + font-display: swap; 90 + src: url('/fonts/Avenir-ExtraBold.ttf') format('truetype'); 91 + } 92 + 93 + @font-face { 94 + font-family: Avenir; 95 + font-style: oblique; 96 + font-weight: 800; 97 + font-display: swap; 98 + src: url('/fonts/Avenir-ExtraBoldOblique.ttf') format('truetype'); 99 + } 100 + 5 101 @theme { 6 - --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif; 102 + --font-sans: 'Avenir', ui-sans-serif, system-ui, sans-serif; 103 + } 104 + 105 + .italic { 106 + font-style: oblique; 7 107 } 8 108 9 109 :root { 10 - --sea-ink: #173a40; 11 - --sea-ink-soft: #416166; 12 - --lagoon: #4fb8b2; 13 - --lagoon-deep: #328f97; 14 - --palm: #2f6a4a; 15 - --sand: #e7f0e8; 16 - --foam: #f3faf5; 17 - --surface: rgba(255, 255, 255, 0.74); 18 - --surface-strong: rgba(255, 255, 255, 0.9); 19 - --line: rgba(23, 58, 64, 0.14); 20 - --inset-glint: rgba(255, 255, 255, 0.82); 21 - --kicker: rgba(47, 106, 74, 0.9); 22 - --bg-base: #e7f3ec; 23 - --header-bg: rgba(251, 255, 248, 0.84); 24 - --chip-bg: rgba(255, 255, 255, 0.8); 25 - --chip-line: rgba(47, 106, 74, 0.18); 26 - --link-bg-hover: rgba(255, 255, 255, 0.9); 27 - --hero-a: rgba(79, 184, 178, 0.36); 28 - --hero-b: rgba(47, 106, 74, 0.2); 110 + --sea-ink: #173a40; 111 + --sea-ink-soft: #416166; 112 + --lagoon: #4fb8b2; 113 + --lagoon-deep: #328f97; 114 + --palm: #2f6a4a; 115 + --sand: #e7f0e8; 116 + --foam: #f3faf5; 117 + --surface: rgba(255, 255, 255, 0.74); 118 + --surface-strong: rgba(255, 255, 255, 0.9); 119 + --line: rgba(23, 58, 64, 0.14); 120 + --inset-glint: rgba(255, 255, 255, 0.82); 121 + --kicker: rgba(47, 106, 74, 0.9); 122 + --bg-base: #e7f3ec; 123 + --header-bg: rgba(251, 255, 248, 0.84); 124 + --chip-bg: rgba(255, 255, 255, 0.8); 125 + --chip-line: rgba(47, 106, 74, 0.18); 126 + --link-bg-hover: rgba(255, 255, 255, 0.9); 127 + --hero-a: rgba(79, 184, 178, 0.36); 128 + --hero-b: rgba(47, 106, 74, 0.2); 29 129 } 30 130 31 - :root[data-theme="dark"] { 32 - --sea-ink: #d7ece8; 33 - --sea-ink-soft: #afcdc8; 34 - --lagoon: #60d7cf; 35 - --lagoon-deep: #8de5db; 36 - --palm: #6ec89a; 37 - --sand: #0f1a1e; 38 - --foam: #101d22; 39 - --surface: rgba(16, 30, 34, 0.8); 40 - --surface-strong: rgba(15, 27, 31, 0.92); 41 - --line: rgba(141, 229, 219, 0.18); 42 - --inset-glint: rgba(194, 247, 238, 0.14); 43 - --kicker: #b8efe5; 44 - --bg-base: #0a1418; 45 - --header-bg: rgba(10, 20, 24, 0.8); 46 - --chip-bg: rgba(13, 28, 32, 0.9); 47 - --chip-line: rgba(141, 229, 219, 0.24); 48 - --link-bg-hover: rgba(24, 44, 49, 0.8); 49 - --hero-a: rgba(96, 215, 207, 0.18); 50 - --hero-b: rgba(110, 200, 154, 0.12); 131 + :root[data-theme='dark'] { 132 + --sea-ink: #d7ece8; 133 + --sea-ink-soft: #afcdc8; 134 + --lagoon: #60d7cf; 135 + --lagoon-deep: #8de5db; 136 + --palm: #6ec89a; 137 + --sand: #0f1a1e; 138 + --foam: #101d22; 139 + --surface: rgba(16, 30, 34, 0.8); 140 + --surface-strong: rgba(15, 27, 31, 0.92); 141 + --line: rgba(141, 229, 219, 0.18); 142 + --inset-glint: rgba(194, 247, 238, 0.14); 143 + --kicker: #b8efe5; 144 + --bg-base: #0a1418; 145 + --header-bg: rgba(10, 20, 24, 0.8); 146 + --chip-bg: rgba(13, 28, 32, 0.9); 147 + --chip-line: rgba(141, 229, 219, 0.24); 148 + --link-bg-hover: rgba(24, 44, 49, 0.8); 149 + --hero-a: rgba(96, 215, 207, 0.18); 150 + --hero-b: rgba(110, 200, 154, 0.12); 51 151 } 52 152 53 153 @media (prefers-color-scheme: dark) { 54 - :root:not([data-theme="light"]) { 55 - --sea-ink: #d7ece8; 56 - --sea-ink-soft: #afcdc8; 57 - --lagoon: #60d7cf; 58 - --lagoon-deep: #8de5db; 59 - --palm: #6ec89a; 60 - --sand: #0f1a1e; 61 - --foam: #101d22; 62 - --surface: rgba(16, 30, 34, 0.8); 63 - --surface-strong: rgba(15, 27, 31, 0.92); 64 - --line: rgba(141, 229, 219, 0.18); 65 - --inset-glint: rgba(194, 247, 238, 0.14); 66 - --kicker: #b8efe5; 67 - --bg-base: #0a1418; 68 - --header-bg: rgba(10, 20, 24, 0.8); 69 - --chip-bg: rgba(13, 28, 32, 0.9); 70 - --chip-line: rgba(141, 229, 219, 0.24); 71 - --link-bg-hover: rgba(24, 44, 49, 0.8); 72 - --hero-a: rgba(96, 215, 207, 0.18); 73 - --hero-b: rgba(110, 200, 154, 0.12); 74 - } 154 + :root:not([data-theme='light']) { 155 + --sea-ink: #d7ece8; 156 + --sea-ink-soft: #afcdc8; 157 + --lagoon: #60d7cf; 158 + --lagoon-deep: #8de5db; 159 + --palm: #6ec89a; 160 + --sand: #0f1a1e; 161 + --foam: #101d22; 162 + --surface: rgba(16, 30, 34, 0.8); 163 + --surface-strong: rgba(15, 27, 31, 0.92); 164 + --line: rgba(141, 229, 219, 0.18); 165 + --inset-glint: rgba(194, 247, 238, 0.14); 166 + --kicker: #b8efe5; 167 + --bg-base: #0a1418; 168 + --header-bg: rgba(10, 20, 24, 0.8); 169 + --chip-bg: rgba(13, 28, 32, 0.9); 170 + --chip-line: rgba(141, 229, 219, 0.24); 171 + --link-bg-hover: rgba(24, 44, 49, 0.8); 172 + --hero-a: rgba(96, 215, 207, 0.18); 173 + --hero-b: rgba(110, 200, 154, 0.12); 174 + } 75 175 } 76 176 77 177 * { 78 - box-sizing: border-box; 178 + box-sizing: border-box; 79 179 } 80 180 81 181 html, 82 182 body, 83 183 #app { 84 - min-height: 100%; 184 + min-height: 100%; 85 185 } 86 186 87 187 body { 88 - margin: 0; 89 - color: var(--sea-ink); 90 - font-family: var(--font-sans); 91 - background-color: var(--bg-base); 92 - background: 93 - radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%), 94 - radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%), 95 - radial-gradient(720px 380px at 50% 115%, rgba(79, 184, 178, 0.1), transparent 68%), 96 - linear-gradient(180deg, color-mix(in oklab, var(--sand) 68%, white) 0%, var(--foam) 44%, var(--bg-base) 100%); 97 - overflow-x: hidden; 98 - -webkit-font-smoothing: antialiased; 99 - -moz-osx-font-smoothing: grayscale; 188 + margin: 0; 189 + color: var(--sea-ink); 190 + font-family: var(--font-sans); 191 + background-color: var(--bg-base); 192 + background: 193 + radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%), 194 + radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%), 195 + radial-gradient(720px 380px at 50% 115%, 196 + rgba(79, 184, 178, 0.1), 197 + transparent 68%), 198 + linear-gradient(180deg, 199 + color-mix(in oklab, var(--sand) 68%, white) 0%, 200 + var(--foam) 44%, 201 + var(--bg-base) 100%); 202 + overflow-x: hidden; 203 + -webkit-font-smoothing: antialiased; 204 + -moz-osx-font-smoothing: grayscale; 100 205 } 101 206 102 207 body::before { 103 - content: ""; 104 - position: fixed; 105 - inset: 0; 106 - pointer-events: none; 107 - z-index: -1; 108 - opacity: 0.28; 109 - background: 110 - radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.8), transparent 34%), 111 - radial-gradient(circle at 78% 26%, rgba(79, 184, 178, 0.2), transparent 42%), 112 - radial-gradient(circle at 42% 82%, rgba(47, 106, 74, 0.14), transparent 36%); 208 + content: ''; 209 + position: fixed; 210 + inset: 0; 211 + pointer-events: none; 212 + z-index: -1; 213 + opacity: 0.28; 214 + background: 215 + radial-gradient(circle at 20% 15%, 216 + rgba(255, 255, 255, 0.8), 217 + transparent 34%), 218 + radial-gradient(circle at 78% 26%, 219 + rgba(79, 184, 178, 0.2), 220 + transparent 42%), 221 + radial-gradient(circle at 42% 82%, rgba(47, 106, 74, 0.14), transparent 36%); 113 222 } 114 223 115 224 body::after { 116 - content: ""; 117 - position: fixed; 118 - inset: 0; 119 - pointer-events: none; 120 - z-index: -1; 121 - opacity: 0.14; 122 - background-image: 123 - linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), 124 - linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); 125 - background-size: 28px 28px; 126 - mask-image: radial-gradient(circle at 50% 30%, black, transparent 78%); 225 + content: ''; 226 + position: fixed; 227 + inset: 0; 228 + pointer-events: none; 229 + z-index: -1; 230 + opacity: 0.14; 231 + background-image: 232 + linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), 233 + linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); 234 + background-size: 28px 28px; 235 + mask-image: radial-gradient(circle at 50% 30%, black, transparent 78%); 127 236 } 128 237 129 238 a { 130 - color: var(--lagoon-deep); 131 - text-decoration-color: rgba(50, 143, 151, 0.4); 132 - text-decoration-thickness: 1px; 133 - text-underline-offset: 2px; 239 + color: var(--lagoon-deep); 240 + text-decoration-color: rgba(50, 143, 151, 0.4); 241 + text-decoration-thickness: 1px; 242 + text-underline-offset: 2px; 134 243 } 135 244 136 245 a:hover { 137 - color: #246f76; 246 + color: #246f76; 138 247 } 139 248 140 249 code { 141 - font-size: 0.9em; 142 - border: 1px solid var(--line); 143 - background: color-mix(in oklab, var(--surface-strong) 82%, white 18%); 144 - border-radius: 7px; 145 - padding: 2px 7px; 250 + font-size: 0.9em; 251 + border: 1px solid var(--line); 252 + background: color-mix(in oklab, var(--surface-strong) 82%, white 18%); 253 + border-radius: 7px; 254 + padding: 2px 7px; 146 255 } 147 256 148 257 pre code { 149 - border: 0; 150 - background: transparent; 151 - padding: 0; 152 - border-radius: 0; 153 - font-size: inherit; 154 - color: inherit; 258 + border: 0; 259 + background: transparent; 260 + padding: 0; 261 + border-radius: 0; 262 + font-size: inherit; 263 + color: inherit; 155 264 } 156 265 157 266 .page-wrap { 158 - width: min(1080px, calc(100% - 2rem)); 159 - margin-inline: auto; 267 + width: min(1080px, calc(100% - 2rem)); 268 + margin-inline: auto; 160 269 } 161 270 162 271 .display-title { 163 - font-family: "Fraunces", Georgia, serif; 272 + font-family: 'Fraunces', Georgia, serif; 164 273 } 165 274 166 275 .island-shell { 167 - border: 1px solid var(--line); 168 - background: linear-gradient(165deg, var(--surface-strong), var(--surface)); 169 - box-shadow: 170 - 0 1px 0 var(--inset-glint) inset, 171 - 0 22px 44px rgba(30, 90, 72, 0.1), 172 - 0 6px 18px rgba(23, 58, 64, 0.08); 173 - backdrop-filter: blur(4px); 276 + border: 1px solid var(--line); 277 + background: linear-gradient(165deg, var(--surface-strong), var(--surface)); 278 + box-shadow: 279 + 0 1px 0 var(--inset-glint) inset, 280 + 0 22px 44px rgba(30, 90, 72, 0.1), 281 + 0 6px 18px rgba(23, 58, 64, 0.08); 282 + backdrop-filter: blur(4px); 174 283 } 175 284 176 285 .feature-card { 177 - background: linear-gradient(165deg, color-mix(in oklab, var(--surface-strong) 93%, white 7%), var(--surface)); 178 - box-shadow: 179 - 0 1px 0 var(--inset-glint) inset, 180 - 0 18px 34px rgba(30, 90, 72, 0.1), 181 - 0 4px 14px rgba(23, 58, 64, 0.06); 286 + background: linear-gradient(165deg, 287 + color-mix(in oklab, var(--surface-strong) 93%, white 7%), 288 + var(--surface)); 289 + box-shadow: 290 + 0 1px 0 var(--inset-glint) inset, 291 + 0 18px 34px rgba(30, 90, 72, 0.1), 292 + 0 4px 14px rgba(23, 58, 64, 0.06); 182 293 } 183 294 184 295 .feature-card:hover { 185 - transform: translateY(-2px); 186 - border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line)); 296 + transform: translateY(-2px); 297 + border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line)); 187 298 } 188 299 189 300 button, 190 301 .island-shell, 191 302 a { 192 - transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, 193 - transform 180ms ease; 303 + transition: 304 + background-color 180ms ease, 305 + color 180ms ease, 306 + border-color 180ms ease, 307 + transform 180ms ease; 194 308 } 195 309 196 310 .island-kicker { 197 - letter-spacing: 0.16em; 198 - text-transform: uppercase; 199 - font-weight: 700; 200 - font-size: 0.69rem; 201 - color: var(--kicker); 311 + letter-spacing: 0.16em; 312 + text-transform: uppercase; 313 + font-weight: 700; 314 + font-size: 0.69rem; 315 + color: var(--kicker); 202 316 } 203 317 204 318 .nav-link { 205 - position: relative; 206 - display: inline-flex; 207 - align-items: center; 208 - text-decoration: none; 209 - color: var(--sea-ink-soft); 319 + position: relative; 320 + display: inline-flex; 321 + align-items: center; 322 + text-decoration: none; 323 + color: var(--sea-ink-soft); 210 324 } 211 325 212 326 .nav-link::after { 213 - content: ""; 214 - position: absolute; 215 - left: 0; 216 - bottom: -6px; 217 - width: 100%; 218 - height: 2px; 219 - transform: scaleX(0); 220 - transform-origin: left; 221 - background: linear-gradient(90deg, var(--lagoon), #7ed3bf); 222 - transition: transform 170ms ease; 327 + content: ''; 328 + position: absolute; 329 + left: 0; 330 + bottom: -6px; 331 + width: 100%; 332 + height: 2px; 333 + transform: scaleX(0); 334 + transform-origin: left; 335 + background: linear-gradient(90deg, var(--lagoon), #7ed3bf); 336 + transition: transform 170ms ease; 223 337 } 224 338 225 339 .nav-link:hover, 226 340 .nav-link.is-active { 227 - color: var(--sea-ink); 341 + color: var(--sea-ink); 228 342 } 229 343 230 344 .nav-link:hover::after, 231 345 .nav-link.is-active::after { 232 - transform: scaleX(1); 346 + transform: scaleX(1); 233 347 } 234 348 235 349 @media (max-width: 640px) { 236 - .nav-link::after { 237 - bottom: -4px; 238 - } 350 + .nav-link::after { 351 + bottom: -4px; 352 + } 239 353 } 240 354 241 355 .site-footer { 242 - border-top: 1px solid var(--line); 243 - background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%); 356 + border-top: 1px solid var(--line); 357 + background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%); 244 358 } 245 359 246 360 .rise-in { 247 - animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; 361 + animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; 248 362 } 249 363 250 364 @keyframes rise-in { 251 - from { 252 - opacity: 0; 253 - transform: translateY(12px); 254 - } 255 - to { 256 - opacity: 1; 257 - transform: translateY(0); 258 - } 365 + from { 366 + opacity: 0; 367 + transform: translateY(12px); 368 + } 369 + 370 + to { 371 + opacity: 1; 372 + transform: translateY(0); 373 + } 259 374 }