@krudi/styles 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -16
- package/dist/styles/base/_typography.css +1 -1
- package/dist/styles/base/index.css +1 -1
- package/dist/styles/styles.css +1 -1
- package/package.json +5 -8
- package/src/scripts/index.ts +0 -3
- package/src/styles/base/_base.css +0 -15
- package/src/styles/base/_focus.css +0 -19
- package/src/styles/base/_reset.css +0 -50
- package/src/styles/base/_typography.css +0 -121
- package/src/styles/base/index.css +0 -5
- package/src/styles/components/_badge.css +0 -69
- package/src/styles/components/_skeleton.css +0 -6
- package/src/styles/components/index.css +0 -3
- package/src/styles/elements/_github-activity.css +0 -77
- package/src/styles/elements/_github-projects.css +0 -65
- package/src/styles/elements/_header.css +0 -31
- package/src/styles/elements/_section-contact.css +0 -11
- package/src/styles/elements/index.css +0 -5
- package/src/styles/html/_img.css +0 -9
- package/src/styles/html/_svg.css +0 -5
- package/src/styles/html/index.css +0 -3
- package/src/styles/layout/_container.css +0 -8
- package/src/styles/layout/_gird.css +0 -70
- package/src/styles/layout/index.css +0 -3
- package/src/styles/styles.css +0 -10
- package/src/styles/theme.css +0 -98
- package/src/styles/utilities/_background-colors.css +0 -59
- package/src/styles/utilities/_color.css +0 -47
- package/src/styles/utilities/_font-size.css +0 -19
- package/src/styles/utilities/_font-weight.css +0 -35
- package/src/styles/utilities/_margin.css +0 -235
- package/src/styles/utilities/_padding.css +0 -230
- package/src/styles/utilities/_text-decoration.css +0 -35
- package/src/styles/utilities/_text.css +0 -55
- package/src/styles/utilities/index.css +0 -9
- package/src/styles/variables.css +0 -93
package/README.md
CHANGED
|
@@ -3,21 +3,6 @@
|
|
|
3
3
|
Reusable CSS design tokens, reset styles, layout primitives, and early components/utilities. Built for personal
|
|
4
4
|
projects.
|
|
5
5
|
|
|
6
|
-
## Scripts
|
|
7
|
-
|
|
8
|
-
| Command | Description |
|
|
9
|
-
| ---------------------------- | ---------------------------- |
|
|
10
|
-
| `npm run build` | Build CSS + types to `dist/` |
|
|
11
|
-
| `npm run dev` | TypeScript watch |
|
|
12
|
-
| `npm run lint:eslint` | Lint TS |
|
|
13
|
-
| `npm run lint:eslint:fix` | Fix TS lint issues |
|
|
14
|
-
| `npm run lint:stylelint` | Lint CSS |
|
|
15
|
-
| `npm run lint:stylelint:fix` | Fix CSS lint issues |
|
|
16
|
-
| `npm run lint:prettier` | Check formatting |
|
|
17
|
-
| `npm run lint:prettier:fix` | Format write |
|
|
18
|
-
| `npm run typecheck` | TypeScript type checks |
|
|
19
|
-
| `npm run clean` | Remove caches/node_modules |
|
|
20
|
-
|
|
21
6
|
## Using `@krudi/styles`
|
|
22
7
|
|
|
23
8
|
Install:
|
|
@@ -29,7 +14,7 @@ npm install @krudi/styles
|
|
|
29
14
|
Import everything:
|
|
30
15
|
|
|
31
16
|
```css
|
|
32
|
-
@import '@krudi/styles/
|
|
17
|
+
@import '@krudi/styles/ui';
|
|
33
18
|
```
|
|
34
19
|
|
|
35
20
|
Or compose layers with CSS cascade layers:
|
|
@@ -72,3 +57,18 @@ Import the layers first, then override inside the matching layer so specificity
|
|
|
72
57
|
}
|
|
73
58
|
}
|
|
74
59
|
```
|
|
60
|
+
|
|
61
|
+
## Scripts
|
|
62
|
+
|
|
63
|
+
| Command | Description |
|
|
64
|
+
| ---------------------------- | ---------------------------- |
|
|
65
|
+
| `npm run build` | Build CSS + types to `dist/` |
|
|
66
|
+
| `npm run dev` | TypeScript watch |
|
|
67
|
+
| `npm run lint:eslint` | Lint TS |
|
|
68
|
+
| `npm run lint:eslint:fix` | Fix TS lint issues |
|
|
69
|
+
| `npm run lint:stylelint` | Lint CSS |
|
|
70
|
+
| `npm run lint:stylelint:fix` | Fix CSS lint issues |
|
|
71
|
+
| `npm run lint:prettier` | Check formatting |
|
|
72
|
+
| `npm run lint:prettier:fix` | Format write |
|
|
73
|
+
| `npm run typecheck` | TypeScript type checks |
|
|
74
|
+
| `npm run clean` | Remove caches/node_modules |
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.h1,h1{font-size:var(--heading-1);line-height:1.1}.h1,.h2,h1,h2{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h2,h2{font-size:var(--heading-2);line-height:1.15}.h3,h3{font-size:var(--heading-3);line-height:1.2}.h3,.h4,h3,h4{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h4,h4{font-size:var(--heading-4);line-height:1.25}.h5,h5{font-size:var(--heading-5);line-height:1.3}.h5,.h6,h5,h6{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h6,h6{font-size:var(--heading-6);line-height:1.4}.p,p{color:var(--p-color);font-size:var(--p-font-size);line-height:var(--p-line-height);margin-block-end:var(--p-margin-block-start)}.p,p:last-child{margin-block-end:0}.a,a{color:var(--a-color);font-size:var(--a-font-size);text-decoration-style:var(--a-text-decoration-style);text-decoration-thickness:var(--a-text-decoration-thickness);text-underline-offset:var(--a-text-underline-offset)}a:is(:hover,:focus){color:var(--c-black);text-decoration-style:var(--a-text-decoration-style-hover)}:is(a[href^="tel:"]:not([class]),a[href^="mailto:"]:not([class]),a[download]:not([class]),a[href^="http://"]:not([class]),a[href^="https://"]:not([class])):not(:has(img)):after{background-repeat:no-repeat;background-size:contain;color:var(--a-color);content:" ";display:inline-block;height:1em;margin-inline:.25rem;vertical-align:middle;width:1em}a[href^="tel:"]:after{background-image:url(
|
|
1
|
+
.h1,h1{font-size:var(--heading-1);line-height:1.1}.h1,.h2,h1,h2{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h2,h2{font-size:var(--heading-2);line-height:1.15}.h3,h3{font-size:var(--heading-3);line-height:1.2}.h3,.h4,h3,h4{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h4,h4{font-size:var(--heading-4);line-height:1.25}.h5,h5{font-size:var(--heading-5);line-height:1.3}.h5,.h6,h5,h6{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h6,h6{font-size:var(--heading-6);line-height:1.4}.p,p{color:var(--p-color);font-size:var(--p-font-size);line-height:var(--p-line-height);margin-block-end:var(--p-margin-block-start)}.p,p:last-child{margin-block-end:0}.a,a{color:var(--a-color);font-size:var(--a-font-size);text-decoration-style:var(--a-text-decoration-style);text-decoration-thickness:var(--a-text-decoration-thickness);text-underline-offset:var(--a-text-underline-offset)}a:is(:hover,:focus){color:var(--c-black);text-decoration-style:var(--a-text-decoration-style-hover)}:is(a[href^="tel:"]:not([class]),a[href^="mailto:"]:not([class]),a[download]:not([class]),a[href^="http://"]:not([class]),a[href^="https://"]:not([class])):not(:has(img)):after{background-repeat:no-repeat;background-size:contain;color:var(--a-color);content:" ";display:inline-block;height:1em;margin-inline:.25rem;vertical-align:middle;width:1em}a[href^="tel:"]:after{background-image:url(@krudi/icons/phone.svg)}a[href^="mailto:"]:after{background-image:url(@krudi/icons/envelope.svg)}a[download]:after{background-image:url(@krudi/icons/download.svg)}a[href^="http://"]:after,a[href^="https://"]:after{background-image:url(@krudi/icons/external-link.svg)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base{*,:after,:before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{line-height:1.5;min-height:100vh;text-rendering:optimizespeed}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}html{scroll-behavior:smooth}body{background-color:var(--body-background-color);line-height:var(--body-line-height);margin:0;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;color:var(--body-color);font-family:var(--body-font-family);font-size:var(--body-font-size);overflow-x:hidden;text-rendering:optimizelegibility}}@layer base{}@layer base{:is(a,button,input,textarea,summary){--outline-size:max(2px,0.08em);--outline-style:solid;--outline-color:currentcolor}:is(a,button,input,textarea,summary):focus{outline:var(--outline-size) var(--outline-style) var(--outline-color);outline-offset:var(--outline-offset,var(--outline-size))}:is(a,button,input,textarea,summary):focus-visible{outline:var(--outline-size) var(--outline-style) var(--outline-color);outline-offset:var(--outline-offset,var(--outline-size))}:is(a,button,input,textarea,summary):focus:not(:focus-visible){outline:none}}@layer base{.h1,h1{font-size:var(--heading-1);line-height:1.1}.h1,.h2,h1,h2{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h2,h2{font-size:var(--heading-2);line-height:1.15}.h3,h3{font-size:var(--heading-3);line-height:1.2}.h3,.h4,h3,h4{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h4,h4{font-size:var(--heading-4);line-height:1.25}.h5,h5{font-size:var(--heading-5);line-height:1.3}.h5,.h6,h5,h6{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h6,h6{font-size:var(--heading-6);line-height:1.4}.p,p{color:var(--p-color);font-size:var(--p-font-size);line-height:var(--p-line-height);margin-block-end:var(--p-margin-block-start)}.p,p:last-child{margin-block-end:0}.a,a{color:var(--a-color);font-size:var(--a-font-size);text-decoration-style:var(--a-text-decoration-style);text-decoration-thickness:var(--a-text-decoration-thickness);text-underline-offset:var(--a-text-underline-offset)}a:is(:hover,:focus){color:var(--c-black);text-decoration-style:var(--a-text-decoration-style-hover)}:is(a[href^="tel:"]:not([class]),a[href^="mailto:"]:not([class]),a[download]:not([class]),a[href^="http://"]:not([class]),a[href^="https://"]:not([class])):not(:has(img)):after{background-repeat:no-repeat;background-size:contain;color:var(--a-color);content:" ";display:inline-block;height:1em;margin-inline:.25rem;vertical-align:middle;width:1em}a[href^="tel:"]:after{background-image:url(
|
|
1
|
+
@layer base{*,:after,:before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{line-height:1.5;min-height:100vh;text-rendering:optimizespeed}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}html{scroll-behavior:smooth}body{background-color:var(--body-background-color);line-height:var(--body-line-height);margin:0;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;color:var(--body-color);font-family:var(--body-font-family);font-size:var(--body-font-size);overflow-x:hidden;text-rendering:optimizelegibility}}@layer base{}@layer base{:is(a,button,input,textarea,summary){--outline-size:max(2px,0.08em);--outline-style:solid;--outline-color:currentcolor}:is(a,button,input,textarea,summary):focus{outline:var(--outline-size) var(--outline-style) var(--outline-color);outline-offset:var(--outline-offset,var(--outline-size))}:is(a,button,input,textarea,summary):focus-visible{outline:var(--outline-size) var(--outline-style) var(--outline-color);outline-offset:var(--outline-offset,var(--outline-size))}:is(a,button,input,textarea,summary):focus:not(:focus-visible){outline:none}}@layer base{.h1,h1{font-size:var(--heading-1);line-height:1.1}.h1,.h2,h1,h2{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h2,h2{font-size:var(--heading-2);line-height:1.15}.h3,h3{font-size:var(--heading-3);line-height:1.2}.h3,.h4,h3,h4{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h4,h4{font-size:var(--heading-4);line-height:1.25}.h5,h5{font-size:var(--heading-5);line-height:1.3}.h5,.h6,h5,h6{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h6,h6{font-size:var(--heading-6);line-height:1.4}.p,p{color:var(--p-color);font-size:var(--p-font-size);line-height:var(--p-line-height);margin-block-end:var(--p-margin-block-start)}.p,p:last-child{margin-block-end:0}.a,a{color:var(--a-color);font-size:var(--a-font-size);text-decoration-style:var(--a-text-decoration-style);text-decoration-thickness:var(--a-text-decoration-thickness);text-underline-offset:var(--a-text-underline-offset)}a:is(:hover,:focus){color:var(--c-black);text-decoration-style:var(--a-text-decoration-style-hover)}:is(a[href^="tel:"]:not([class]),a[href^="mailto:"]:not([class]),a[download]:not([class]),a[href^="http://"]:not([class]),a[href^="https://"]:not([class])):not(:has(img)):after{background-repeat:no-repeat;background-size:contain;color:var(--a-color);content:" ";display:inline-block;height:1em;margin-inline:.25rem;vertical-align:middle;width:1em}a[href^="tel:"]:after{background-image:url(@krudi/icons/phone.svg)}a[href^="mailto:"]:after{background-image:url(@krudi/icons/envelope.svg)}a[download]:after{background-image:url(@krudi/icons/download.svg)}a[href^="http://"]:after,a[href^="https://"]:after{background-image:url(@krudi/icons/external-link.svg)}}
|
package/dist/styles/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer variables, theme, base, layout, html, elements, components, utilities;@layer theme{@layer theme{:root{--c-white:#fff;--c-black:#1c222e;--c-gray:#4e596a;--c-primary:#216e7d;--c-secondary:#353b48;--c-success:#27ae60;--c-info:#0dccf2;--c-warning:#ffc105;--c-danger:#dc3848;--c-white-100:#f6f7fb;--c-white-100-hover:color-mix(in oklab,var(--c-white-100) 70%,var(--c-white-100));--c-white-100-background-color-emphasis:var(--c-black);--c-white-200:#efefef;--c-white-200-hover:color-mix(in oklab,var(--c-white-200) 70%,var(--c-white-200));--c-white-200-background-color-emphasis:var(--c-black);--c-white-hover:color-mix(in oklab,var(--c-white) 70%,var(--c-white));--c-white-background-color-emphasis:var(--c-black);--c-black-hover:color-mix(in oklab,var(--c-black) 70%,var(--c-black));--c-black-background-color-emphasis:var(--c-white);--c-gray-hover:color-mix(in oklab,var(--c-black) 70%,var(--c-black));--c-gray-background-color-emphasis:var(--c-white);--c-primary-hover:color-mix(in oklab,var(--c-primary) 70%,var(--c-white));--c-primary-background-color-emphasis:var(--c-white);--c-secondary-hover:color-mix(in oklab,var(--c-secondary) 70%,var(--c-white));--c-secondary-background-color-emphasis:var(--c-white);--c-success-hover:color-mix(in oklab,var(--c-success) 70%,var(--c-white));--c-success-background-color-emphasis:var(--c-white);--c-info-hover:color-mix(in oklab,var(--c-info) 70%,var(--c-white));--c-info-background-color-emphasis:var(--c-white);--c-warning-hover:color-mix(in oklab,var(--c-warning) 70%,var(--c-white));--c-warning-background-color-emphasis:var(--c-white);--c-danger-hover:color-mix(in oklab,var(--c-danger) 70%,var(--c-white));--c-danger-background-color-emphasis:var(--c-white)}.dark{--c-white:#1c222e;--c-black:#fff;--c-primary:#474f58;--c-secondary:#d2e0fb;--c-success:#27ae60;--c-info:#0dccf2;--c-warning:#ffc105;--c-danger:#dc3848;--c-white-100:#151515;--c-white-200:#2c2c2d;--c-black-100:#302c40;--c-black-300:#4a455a;--c-white-400:#423e4e;--c-primary-background-color-emphasis:var(--c-black);--c-secondary-background-color-emphasis:var(--c-black);--c-success-background-color-emphasis:var(--c-white);--c-info-background-color-emphasis:var(--c-white);--c-warning-background-color-emphasis:var(--c-white);--c-danger-background-color-emphasis:var(--c-white)}}}@layer variables{@layer variables{:root{--spacer-n3:0.5rem;--spacer-n2:0.5rem;--spacer-n1:0.875rem;--spacer:1rem;--spacer-1:calc(var(--spacer)*1.25);--spacer-2:calc(var(--spacer)*1.5);--spacer-3:calc(var(--spacer)*2);--spacer-4:calc(var(--spacer)*6);--grid-spacing:var(--spacer-4);--container-spacer:var(--spacer);--heading-1:clamp(1.75rem,2.8vw,2rem);--heading-2:clamp(1.5rem,2.6vw,1.75rem);--heading-3:clamp(1.375rem,2.4vw,1.625rem);--heading-4:clamp(1.25rem,2.2vw,1.5rem);--heading-5:clamp(1.125rem,2vw,1.375rem);--heading-6:var(--fs-md);--heading-font-family:"Lora",system-ui,-apple-system,"Segoe UI",roboto,helvetica,arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";--fs-xs:0.875rem;--fs-sm:1rem;--fs-md:1.375rem;--fs-lg:clamp(1.125rem,2.2vw,1.5rem);--fs-xl:clamp(1.25rem,2.2vw,1765rem);--a-color:var(--c-black);--a-color-hover:var(--c-black);--a-text-decoration-style:dashed;--a-text-decoration-style-hover:solid;--a-text-decoration-thickness:0.125rem;--a-text-underline-offset:0.5rem;--a-font-size:var(--fs-md);--p-margin-block-start:var(--spacer-n2);--p-line-height:var(--large-line-height);--p-font-size:var(--fs-md);--p-color:var(--c-gray);--svg-width:1em;--svg-height:1em;--base-line-height:1.5;--large-line-height:1.8125;--transition-duration:0.3s;--transition-decorative-duration:0.1s;--focus-default:0 0 0 0.125em var(--c-white),0 0 0 0.25em var(--c-primary);--border-radius-sm:0.5rem;--border-radius-md:1rem;--border-radius-lg:1.5rem;--border-radius-xl:2rem;--border-radius-full:50%;--box-shadow-default:0 0.375rem 1rem -0.5rem rgba(0,0,0,.1);--body-background-color:var(--c-white);--body-line-height:var(--base-line-height);--body-color:var(--c-black);--body-font-size:var(--fs-md);--body-font-family:system-ui,-apple-system,"Segoe UI",roboto,helvetica,arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";--badge-padding-block:0.5rem;--badge-padding-inline:1rem;--badge-border-radius:var(--border-radius-sm);--badge-font-size:var(--fs-xs);--badge-font-weight:600}}}@layer base{}@layer base{@layer base{*,:after,:before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{line-height:1.5;min-height:100vh;text-rendering:optimizespeed}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}html{scroll-behavior:smooth}body{background-color:var(--body-background-color);line-height:var(--body-line-height);margin:0;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;color:var(--body-color);font-family:var(--body-font-family);font-size:var(--body-font-size);overflow-x:hidden;text-rendering:optimizelegibility}}}@layer base{@layer base{}}@layer base{@layer base{:is(a,button,input,textarea,summary){--outline-size:max(2px,0.08em);--outline-style:solid;--outline-color:currentcolor}:is(a,button,input,textarea,summary):focus{outline:var(--outline-size) var(--outline-style) var(--outline-color);outline-offset:var(--outline-offset,var(--outline-size))}:is(a,button,input,textarea,summary):focus-visible{outline:var(--outline-size) var(--outline-style) var(--outline-color);outline-offset:var(--outline-offset,var(--outline-size))}:is(a,button,input,textarea,summary):focus:not(:focus-visible){outline:none}}}@layer base{@layer base{.h1,h1{font-size:var(--heading-1);line-height:1.1}.h1,.h2,h1,h2{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h2,h2{font-size:var(--heading-2);line-height:1.15}.h3,h3{font-size:var(--heading-3);line-height:1.2}.h3,.h4,h3,h4{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h4,h4{font-size:var(--heading-4);line-height:1.25}.h5,h5{font-size:var(--heading-5);line-height:1.3}.h5,.h6,h5,h6{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h6,h6{font-size:var(--heading-6);line-height:1.4}.p,p{color:var(--p-color);font-size:var(--p-font-size);line-height:var(--p-line-height);margin-block-end:var(--p-margin-block-start)}.p,p:last-child{margin-block-end:0}.a,a{color:var(--a-color);font-size:var(--a-font-size);text-decoration-style:var(--a-text-decoration-style);text-decoration-thickness:var(--a-text-decoration-thickness);text-underline-offset:var(--a-text-underline-offset)}a:is(:hover,:focus){color:var(--c-black);text-decoration-style:var(--a-text-decoration-style-hover)}:is(a[href^="tel:"]:not([class]),a[href^="mailto:"]:not([class]),a[download]:not([class]),a[href^="http://"]:not([class]),a[href^="https://"]:not([class])):not(:has(img)):after{background-repeat:no-repeat;background-size:contain;color:var(--a-color);content:" ";display:inline-block;height:1em;margin-inline:.25rem;vertical-align:middle;width:1em}a[href^="tel:"]:after{background-image:url(../../assets/icons/square-phone-solid-full.svg)}a[href^="mailto:"]:after{background-image:url(../../assets/icons/envelope-regular-full.svg)}a[download]:after{background-image:url(../../assets/icons/download-solid-full.svg)}a[href^="http://"]:after,a[href^="https://"]:after{background-image:url(../../assets/icons/arrow-up-right-from-square-solid-full.svg)}}}@layer layout{}@layer layout{@layer layout{.container{margin-inline:auto}.container,.container-fluid{width:min(1080px,100% - var(--spacer-3))}.row{display:grid;gap:var(--spacer);grid-template-columns:repeat(12,1fr)}.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}}}@layer layout{@layer layout{@media screen and (max-width:992px){.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{grid-column:span 12}}}}@layer html{}@layer html{@layer html{svg{fill:currentcolor;height:var(--svg-height);width:var(--svg-width)}picture{position:relative}img{border-radius:var(--border-radius-sm);height:auto;max-width:100%}}}@layer html{@layer html{}}@layer elements{}@layer elements{@layer elements{.github-projects-list{list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.github-projects-list-item{width:100%}.github-projects-list-item-link{border-color:var(--c-white-200);border-radius:var(--border-radius-md);border-style:solid;border-width:1px;display:flex;flex-direction:column;gap:var(--spacer);height:100%;justify-content:space-between;overflow:hidden;padding-block:1.5rem;padding-inline:1.5rem;position:relative;text-decoration:none;transition:border-color var(--transition-duration)}.github-projects-list-item-link:focus-visible,.github-projects-list-item-link:hover{border-color:var(--c-primary-hover)}.github-projects-list-item-link-star{align-items:center;background-color:var(--c-white-200);border-radius:0 0 0 var(--border-radius-md);display:flex;gap:.25rem;padding-block:.25rem;padding-inline:1rem;position:absolute;right:0;top:0}.github-projects-list-item-link-title{font-weight:700}.github-projects-list-item-link-language{align-items:center;display:flex;gap:var(--spacer-n2)}.github-projects-list-item-link-language-dot{background-color:var(--c-white-200);border-radius:var(--border-radius-full);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c-black) 12%,transparent);display:inline-block;height:.75rem;width:.75rem}.activity{gap:var(--spacer-n2);justify-content:space-between}.activity,.activity-list{display:flex;flex-direction:column;height:100%}.activity-list{gap:var(--spacer-3);list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.activity-list-item{width:100%}.activity-list-item-link{border-color:var(--c-white-200);border-radius:var(--border-radius-md);border-style:solid;border-width:1px;display:flex;flex-direction:column;gap:var(--spacer);min-height:10rem;padding-block:1.5rem;padding-inline:1.5rem;text-decoration:none;transition:border-color var(--transition-duration)}}}@layer elements{@layer elements{.activity-list-item-link:focus-visible,.activity-list-item-link:hover{border-color:var(--c-primary-hover)}.activity-list-item-link-title{font-weight:700}.activity-list-item-link-language{align-items:center;display:flex;gap:var(--spacer-n2)}.activity-list-item-link-language-dot{background-color:var(--c-white-200);border-radius:var(--border-radius-full);display:inline-block;height:.75rem;width:.75rem}.activity-list-item-link-language.state-closed .activity-list-item-link-language-dot{background-color:var(--c-danger)}.activity-list-item-link-language.state-open .activity-list-item-link-language-dot{background-color:var(--c-success)}.activity-section-heading{align-items:baseline;display:flex;flex-wrap:wrap;gap:var(--spacer);justify-content:space-between;margin-bottom:var(--spacer-n1)}.section-contact{background:var(--c-white-200);background:linear-gradient(90deg,var(--c-white-200) 0,var(--c-white) 90%);border-color:var(--c-white-200);border-radius:var(--border-radius-md);border-style:solid;border-width:1px;color:var(--c-white-200-background-color-emphasis);padding-block:3.5rem;padding-inline:1.5rem}.header{display:grid;gap:var(--spacer);max-width:48rem}.header-subtitle{position:relative;width:-moz-fit-content;width:fit-content}.header-subtitle:before{background:var(--c-white-200);background:linear-gradient(90deg,var(--c-white-200) 0,var(--c-white) 90%);border-radius:var(--border-radius-md);content:"";height:100%;left:0;position:absolute;rotate:3deg;top:0;width:100%;z-index:-1}.header-social-links{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--spacer-2)}}}@layer elements{@layer elements{}}@layer elements{@layer elements{}}@layer components{}@layer components{@layer components{.badge{background-color:var(--badge-background-color);border-color:var(--badge-border-color);border-radius:var(--badge-border-radius);border-style:var(--badge-border-style);border-width:var(--badge-border-width);color:var(--badge-color);display:inline-flex;font-size:var(--badge-font-size);font-weight:var(--badge-font-weight);padding-block:var(--badge-padding-block);padding-inline:var(--badge-padding-inline)}.badge-white{--badge-background-color:var(--c-white);--badge-color:var(--c-white-background-color-emphasis);--badge-border-width:1px;--badge-border-style:solid;--badge-border-color:var(--c-white-300)}.badge-primary{--badge-background-color:var(--c-primary);--badge-color:var(--c-primary-background-color-emphasis);--badge-border-width:0;--badge-border-style:initial;--badge-border-color:none}.badge-secondary{--badge-background-color:var(--c-secondary);--badge-color:var(--c-secondary-background-color-emphasis);--badge-border-width:0;--badge-border-style:initial;--badge-border-color:none}.badge-success{--badge-background-color:var(--c-success);--badge-color:var(--c-success-background-color-emphasis);--badge-border-width:0;--badge-border-style:initial;--badge-border-color:none}.badge-info{--badge-background-color:var(--c-info);--badge-color:var(--c-info-background-color-emphasis);--badge-border-width:0;--badge-border-style:initial;--badge-border-color:none}.badge-warning{--badge-background-color:var(--c-warning);--badge-color:var(--c-warning-background-color-emphasis);--badge-border-width:0;--badge-border-style:initial;--badge-border-color:none}.badge-danger{--badge-background-color:var(--c-danger);--badge-color:var(--c-danger-background-color-emphasis);--badge-border-width:0;--badge-border-style:initial;--badge-border-color:none}.skeleton-line{background-color:var(--c-white-200);border-radius:var(--border-radius-md);display:block;height:.75rem}}}@layer components{@layer components{}}@layer utilities{}@layer utilities{@layer utilities{.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-3{-webkit-line-clamp:3}.line-clamp-3,.line-clamp-4{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-4{-webkit-line-clamp:4}.line-clamp-5{-webkit-line-clamp:5}.line-clamp-5,.line-clamp-6{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-6{-webkit-line-clamp:6}.line-clamp-7{-webkit-line-clamp:7}.line-clamp-7,.line-clamp-8{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-8{-webkit-line-clamp:8}.bg-white{background-color:var(--c-white);color:var(--c-white-background-color-emphasis)}.bg-white-100{background-color:var(--c-white-100);color:var(--c-white-100-background-color-emphasis)}.bg-white-200{background-color:var(--c-white-200);color:var(--c-white-200-background-color-emphasis)}.bg-black{background-color:var(--c-black);color:var(--c-black-background-color-emphasis)}.bg-gray{background-color:var(--c-gray);color:var(--c-gray-background-color-emphasis)}.bg-beige{background-color:var(--c-beige);color:var(--c-beige-background-color-emphasis)}.bg-primary{background-color:var(--c-primary);color:var(--c-primary-background-color-emphasis)}.bg-secondary{background-color:var(--c-secondary);color:var(--c-secondary-background-color-emphasis)}.bg-success{background-color:var(--c-success);color:var(--c-success-background-color-emphasis)}.bg-info{background-color:var(--c-info);color:var(--c-info-background-color-emphasis)}.bg-warning{background-color:var(--c-warning);color:var(--c-warning-background-color-emphasis)}.bg-danger{background-color:var(--c-danger);color:var(--c-danger-background-color-emphasis)}.text-white{color:var(--c-white)}.text-white-100{color:var(--c-white-100)}.text-white-200{color:var(--c-white-200)}.text-black{color:var(--c-black)}.text-gray{color:var(--c-gray)}.text-beige{color:var(--c-beige)}.text-primary{color:var(--c-primary)}.text-secondary{color:var(--c-secondary)}.text-success{color:var(--c-success)}.text-info{color:var(--c-info)}.text-warning{color:var(--c-warning)}.text-danger{color:var(--c-danger)}.mx-auto{margin:0 auto}.m-0{margin:0}.m-n1{margin:var(--spacer-n1)}.m-n2{margin:var(--spacer-n2)}.m-1{margin:var(--spacer-1)}.m-2{margin:var(--spacer-2)}.m-3{margin:var(--spacer-3)}.m-4{margin:var(--spacer-4)}.m-default{margin:var(--spacer)}.mt-0{margin-block-start:0}.mt-n1{margin-block-start:var(--spacer-n1)}.mt-n2{margin-block-start:var(--spacer-n2)}.mt-1{margin-block-start:var(--spacer-1)}.mt-2{margin-block-start:var(--spacer-2)}.mt-3{margin-block-start:var(--spacer-3)}.mt-4{margin-block-start:var(--spacer-4)}.mt-default{margin-block-start:var(--spacer)}.mb-0{margin-block-end:0}.mb-n1{margin-block-end:var(--spacer-n1)}.mb-n2{margin-block-end:var(--spacer-n2)}.mb-1{margin-block-end:var(--spacer-1)}.mb-2{margin-block-end:var(--spacer-2)}.mb-3{margin-block-end:var(--spacer-3)}.mb-4{margin-block-end:var(--spacer-4)}.mb-default{margin-block-end:var(--spacer)}.ml-0{margin-inline-start:0}.ml-n1{margin-inline-start:var(--spacer-n1)}.ml-n2{margin-inline-start:var(--spacer-n2)}.ml-1{margin-inline-start:var(--spacer-1)}.ml-2{margin-inline-start:var(--spacer-2)}.ml-3{margin-inline-start:var(--spacer-3)}.ml-4{margin-inline-start:var(--spacer-4)}.ml-default{margin-inline-start:var(--spacer)}.mr-0{margin-inline-end:0}.mr-n1{margin-inline-end:var(--spacer-n1)}.mr-n2{margin-inline-end:var(--spacer-n2)}.mr-1{margin-inline-end:var(--spacer-1)}.mr-2{margin-inline-end:var(--spacer-2)}.mr-3{margin-inline-end:var(--spacer-3)}.mr-4{margin-inline-end:var(--spacer-4)}.mr-default{margin-inline-end:var(--spacer)}.mx-0{margin-inline:0}.mx-n1{margin-inline:var(--spacer-n1)}.mx-n2{margin-inline:var(--spacer-n2)}.mx-1{margin-inline:var(--spacer-1)}.mx-2{margin-inline:var(--spacer-2)}.mx-3{margin-inline:var(--spacer-3)}.mx-4{margin-inline:var(--spacer-4)}.mx-default{margin-inline:var(--spacer)}.my-0{margin-block:0}.my-n1{margin-block:var(--spacer-n1)}.my-n2{margin-block:var(--spacer-n2)}.my-1{margin-block:var(--spacer-1)}.my-2{margin-block:var(--spacer-2)}.my-3{margin-block:var(--spacer-3)}.my-4{margin-block:var(--spacer-4)}.my-default{margin-block:var(--spacer)}.p-0{padding:0}.p-n1{padding:var(--spacer-n1)}.p-n2{padding:var(--spacer-n2)}.p-1{padding:var(--spacer-1)}.p-2{padding:var(--spacer-2)}.p-3{padding:var(--spacer-3)}.p-4{padding:var(--spacer-4)}.p-default{padding:var(--spacer)}.pt-0{padding-block-start:0}.pt-n1{padding-block-start:var(--spacer-n1)}.pt-n2{padding-block-start:var(--spacer-n2)}.pt-1{padding-block-start:var(--spacer-1)}.pt-2{padding-block-start:var(--spacer-2)}.pt-3{padding-block-start:var(--spacer-3)}.pt-4{padding-block-start:var(--spacer-4)}.pt-default{padding-block-start:var(--spacer)}.pb-0{padding-block-end:0}.pb-n1{padding-block-end:var(--spacer-n1)}.pb-n2{padding-block-end:var(--spacer-n2)}.pb-1{padding-block-end:var(--spacer-1)}.pb-2{padding-block-end:var(--spacer-2)}.pb-3{padding-block-end:var(--spacer-3)}.pb-4{padding-block-end:var(--spacer-4)}.pb-default{padding-block-end:var(--spacer)}.pl-0{padding-inline-start:0}.pl-n1{padding-inline-start:var(--spacer-n1)}.pl-n2{padding-inline-start:var(--spacer-n2)}.pl-1{padding-inline-start:var(--spacer-1)}.pl-2{padding-inline-start:var(--spacer-2)}.pl-3{padding-inline-start:var(--spacer-3)}.pl-4{padding-inline-start:var(--spacer-4)}.pl-default{padding-inline-start:var(--spacer)}.pr-0{padding-inline-end:0}.pr-n1{padding-inline-end:var(--spacer-n1)}.pr-n2{padding-inline-end:var(--spacer-n2)}.pr-1{padding-inline-end:var(--spacer-1)}.pr-2{padding-inline-end:var(--spacer-2)}.pr-3{padding-inline-end:var(--spacer-3)}.pr-4{padding-inline-end:var(--spacer-4)}.pr-default{padding-inline-end:var(--spacer)}.px-0{padding-inline:0}.px-n1{padding-inline:var(--spacer-n1)}.px-n2{padding-inline:var(--spacer-n2)}.px-1{padding-inline:var(--spacer-1)}.px-2{padding-inline:var(--spacer-2)}.px-3{padding-inline:var(--spacer-3)}.px-4{padding-inline:var(--spacer-4)}.px-default{padding-inline:var(--spacer)}.py-0{padding-block:0}.py-n1{padding-block:var(--spacer-n1)}.py-n2{padding-block:var(--spacer-n2)}.py-1{padding-block:var(--spacer-1)}.py-2{padding-block:var(--spacer-2)}.py-3{padding-block:var(--spacer-3)}.py-4{padding-block:var(--spacer-4)}.py-default{padding-block:var(--spacer)}.fw-100{font-weight:100}.fw-200{font-weight:200}.fw-300{font-weight:300}.fw-400{font-weight:400}.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}.fw-900{font-weight:900}.text-xs{font-size:var(--fs-xs)}.text-sm{font-size:var(--fs-sm)}.text-md{font-size:var(--fs-md)}.text-lg{font-size:var(--fs-lg)}.text-xl{font-size:var(--fs-xl)}.text-decoration-none{text-decoration:none}.text-decoration-underline{text-decoration-line:underline}.text-decoration-overline{text-decoration-line:overline}.text-decoration-line-through{text-decoration-line:line-through}.text-decoration-solid{text-decoration-style:solid}.text-decoration-dashed{text-decoration-style:dashed}.text-decoration-dotted{text-decoration-style:dotted}.text-decoration-double{text-decoration-style:double}.text-decoration-wavy{text-decoration-style:wavy}}}@layer utilities{@layer utilities{}}@layer utilities{@layer utilities{}}@layer utilities{@layer utilities{}}@layer utilities{@layer utilities{}}@layer utilities{@layer utilities{}}@layer utilities{@layer utilities{}}@layer utilities{@layer utilities{}}
|
|
1
|
+
@layer variables, theme, base, layout, html, elements, components, utilities;@layer theme{@layer theme{:root{--c-white:#fff;--c-black:#1c222e;--c-gray:#4e596a;--c-primary:#216e7d;--c-secondary:#353b48;--c-success:#27ae60;--c-info:#0dccf2;--c-warning:#ffc105;--c-danger:#dc3848;--c-white-100:#f6f7fb;--c-white-100-hover:color-mix(in oklab,var(--c-white-100) 70%,var(--c-white-100));--c-white-100-background-color-emphasis:var(--c-black);--c-white-200:#efefef;--c-white-200-hover:color-mix(in oklab,var(--c-white-200) 70%,var(--c-white-200));--c-white-200-background-color-emphasis:var(--c-black);--c-white-hover:color-mix(in oklab,var(--c-white) 70%,var(--c-white));--c-white-background-color-emphasis:var(--c-black);--c-black-hover:color-mix(in oklab,var(--c-black) 70%,var(--c-black));--c-black-background-color-emphasis:var(--c-white);--c-gray-hover:color-mix(in oklab,var(--c-black) 70%,var(--c-black));--c-gray-background-color-emphasis:var(--c-white);--c-primary-hover:color-mix(in oklab,var(--c-primary) 70%,var(--c-white));--c-primary-background-color-emphasis:var(--c-white);--c-secondary-hover:color-mix(in oklab,var(--c-secondary) 70%,var(--c-white));--c-secondary-background-color-emphasis:var(--c-white);--c-success-hover:color-mix(in oklab,var(--c-success) 70%,var(--c-white));--c-success-background-color-emphasis:var(--c-white);--c-info-hover:color-mix(in oklab,var(--c-info) 70%,var(--c-white));--c-info-background-color-emphasis:var(--c-white);--c-warning-hover:color-mix(in oklab,var(--c-warning) 70%,var(--c-white));--c-warning-background-color-emphasis:var(--c-white);--c-danger-hover:color-mix(in oklab,var(--c-danger) 70%,var(--c-white));--c-danger-background-color-emphasis:var(--c-white)}.dark{--c-white:#1c222e;--c-black:#fff;--c-primary:#474f58;--c-secondary:#d2e0fb;--c-success:#27ae60;--c-info:#0dccf2;--c-warning:#ffc105;--c-danger:#dc3848;--c-white-100:#151515;--c-white-200:#2c2c2d;--c-black-100:#302c40;--c-black-300:#4a455a;--c-white-400:#423e4e;--c-primary-background-color-emphasis:var(--c-black);--c-secondary-background-color-emphasis:var(--c-black);--c-success-background-color-emphasis:var(--c-white);--c-info-background-color-emphasis:var(--c-white);--c-warning-background-color-emphasis:var(--c-white);--c-danger-background-color-emphasis:var(--c-white)}}}@layer variables{@layer variables{:root{--spacer-n3:0.5rem;--spacer-n2:0.5rem;--spacer-n1:0.875rem;--spacer:1rem;--spacer-1:calc(var(--spacer)*1.25);--spacer-2:calc(var(--spacer)*1.5);--spacer-3:calc(var(--spacer)*2);--spacer-4:calc(var(--spacer)*6);--grid-spacing:var(--spacer-4);--container-spacer:var(--spacer);--heading-1:clamp(1.75rem,2.8vw,2rem);--heading-2:clamp(1.5rem,2.6vw,1.75rem);--heading-3:clamp(1.375rem,2.4vw,1.625rem);--heading-4:clamp(1.25rem,2.2vw,1.5rem);--heading-5:clamp(1.125rem,2vw,1.375rem);--heading-6:var(--fs-md);--heading-font-family:"Lora",system-ui,-apple-system,"Segoe UI",roboto,helvetica,arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";--fs-xs:0.875rem;--fs-sm:1rem;--fs-md:1.375rem;--fs-lg:clamp(1.125rem,2.2vw,1.5rem);--fs-xl:clamp(1.25rem,2.2vw,1765rem);--a-color:var(--c-black);--a-color-hover:var(--c-black);--a-text-decoration-style:dashed;--a-text-decoration-style-hover:solid;--a-text-decoration-thickness:0.125rem;--a-text-underline-offset:0.5rem;--a-font-size:var(--fs-md);--p-margin-block-start:var(--spacer-n2);--p-line-height:var(--large-line-height);--p-font-size:var(--fs-md);--p-color:var(--c-gray);--svg-width:1em;--svg-height:1em;--base-line-height:1.5;--large-line-height:1.8125;--transition-duration:0.3s;--transition-decorative-duration:0.1s;--focus-default:0 0 0 0.125em var(--c-white),0 0 0 0.25em var(--c-primary);--border-radius-sm:0.5rem;--border-radius-md:1rem;--border-radius-lg:1.5rem;--border-radius-xl:2rem;--border-radius-full:50%;--box-shadow-default:0 0.375rem 1rem -0.5rem rgba(0,0,0,.1);--body-background-color:var(--c-white);--body-line-height:var(--base-line-height);--body-color:var(--c-black);--body-font-size:var(--fs-md);--body-font-family:system-ui,-apple-system,"Segoe UI",roboto,helvetica,arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";--badge-padding-block:0.5rem;--badge-padding-inline:1rem;--badge-border-radius:var(--border-radius-sm);--badge-font-size:var(--fs-xs);--badge-font-weight:600}}}@layer base{}@layer base{@layer base{*,:after,:before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}ol[role=list],ul[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{line-height:1.5;min-height:100vh;text-rendering:optimizespeed}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img,picture{display:block;max-width:100%}button,input,select,textarea{font:inherit}html{scroll-behavior:smooth}body{background-color:var(--body-background-color);line-height:var(--body-line-height);margin:0;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;color:var(--body-color);font-family:var(--body-font-family);font-size:var(--body-font-size);overflow-x:hidden;text-rendering:optimizelegibility}}}@layer base{@layer base{}}@layer base{@layer base{:is(a,button,input,textarea,summary){--outline-size:max(2px,0.08em);--outline-style:solid;--outline-color:currentcolor}:is(a,button,input,textarea,summary):focus{outline:var(--outline-size) var(--outline-style) var(--outline-color);outline-offset:var(--outline-offset,var(--outline-size))}:is(a,button,input,textarea,summary):focus-visible{outline:var(--outline-size) var(--outline-style) var(--outline-color);outline-offset:var(--outline-offset,var(--outline-size))}:is(a,button,input,textarea,summary):focus:not(:focus-visible){outline:none}}}@layer base{@layer base{.h1,h1{font-size:var(--heading-1);line-height:1.1}.h1,.h2,h1,h2{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h2,h2{font-size:var(--heading-2);line-height:1.15}.h3,h3{font-size:var(--heading-3);line-height:1.2}.h3,.h4,h3,h4{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h4,h4{font-size:var(--heading-4);line-height:1.25}.h5,h5{font-size:var(--heading-5);line-height:1.3}.h5,.h6,h5,h6{display:block;font-family:var(--heading-font-family);font-weight:700;margin-block-end:var(--spacer)}.h6,h6{font-size:var(--heading-6);line-height:1.4}.p,p{color:var(--p-color);font-size:var(--p-font-size);line-height:var(--p-line-height);margin-block-end:var(--p-margin-block-start)}.p,p:last-child{margin-block-end:0}.a,a{color:var(--a-color);font-size:var(--a-font-size);text-decoration-style:var(--a-text-decoration-style);text-decoration-thickness:var(--a-text-decoration-thickness);text-underline-offset:var(--a-text-underline-offset)}a:is(:hover,:focus){color:var(--c-black);text-decoration-style:var(--a-text-decoration-style-hover)}:is(a[href^="tel:"]:not([class]),a[href^="mailto:"]:not([class]),a[download]:not([class]),a[href^="http://"]:not([class]),a[href^="https://"]:not([class])):not(:has(img)):after{background-repeat:no-repeat;background-size:contain;color:var(--a-color);content:" ";display:inline-block;height:1em;margin-inline:.25rem;vertical-align:middle;width:1em}a[href^="tel:"]:after{background-image:url(@krudi/icons/phone.svg)}a[href^="mailto:"]:after{background-image:url(@krudi/icons/envelope.svg)}a[download]:after{background-image:url(@krudi/icons/download.svg)}a[href^="http://"]:after,a[href^="https://"]:after{background-image:url(@krudi/icons/external-link.svg)}}}@layer layout{}@layer layout{@layer layout{.container{margin-inline:auto}.container,.container-fluid{width:min(1080px,100% - var(--spacer-3))}.row{display:grid;gap:var(--spacer);grid-template-columns:repeat(12,1fr)}.col-1{grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-9{grid-column:span 9}.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}}}@layer layout{@layer layout{@media screen and (max-width:992px){.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{grid-column:span 12}}}}@layer html{}@layer html{@layer html{svg{fill:currentcolor;height:var(--svg-height);width:var(--svg-width)}picture{position:relative}img{border-radius:var(--border-radius-sm);height:auto;max-width:100%}}}@layer html{@layer html{}}@layer elements{}@layer elements{@layer elements{.github-projects-list{list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.github-projects-list-item{width:100%}.github-projects-list-item-link{border-color:var(--c-white-200);border-radius:var(--border-radius-md);border-style:solid;border-width:1px;display:flex;flex-direction:column;gap:var(--spacer);height:100%;justify-content:space-between;overflow:hidden;padding-block:1.5rem;padding-inline:1.5rem;position:relative;text-decoration:none;transition:border-color var(--transition-duration)}.github-projects-list-item-link:focus-visible,.github-projects-list-item-link:hover{border-color:var(--c-primary-hover)}.github-projects-list-item-link-star{align-items:center;background-color:var(--c-white-200);border-radius:0 0 0 var(--border-radius-md);display:flex;gap:.25rem;padding-block:.25rem;padding-inline:1rem;position:absolute;right:0;top:0}.github-projects-list-item-link-title{font-weight:700}.github-projects-list-item-link-language{align-items:center;display:flex;gap:var(--spacer-n2)}.github-projects-list-item-link-language-dot{background-color:var(--c-white-200);border-radius:var(--border-radius-full);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c-black) 12%,transparent);display:inline-block;height:.75rem;width:.75rem}.activity{gap:var(--spacer-n2);justify-content:space-between}.activity,.activity-list{display:flex;flex-direction:column;height:100%}.activity-list{gap:var(--spacer-3);list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.activity-list-item{width:100%}.activity-list-item-link{border-color:var(--c-white-200);border-radius:var(--border-radius-md);border-style:solid;border-width:1px;display:flex;flex-direction:column;gap:var(--spacer);min-height:10rem;padding-block:1.5rem;padding-inline:1.5rem;text-decoration:none;transition:border-color var(--transition-duration)}}}@layer elements{@layer elements{.activity-list-item-link:focus-visible,.activity-list-item-link:hover{border-color:var(--c-primary-hover)}.activity-list-item-link-title{font-weight:700}.activity-list-item-link-language{align-items:center;display:flex;gap:var(--spacer-n2)}.activity-list-item-link-language-dot{background-color:var(--c-white-200);border-radius:var(--border-radius-full);display:inline-block;height:.75rem;width:.75rem}.activity-list-item-link-language.state-closed .activity-list-item-link-language-dot{background-color:var(--c-danger)}.activity-list-item-link-language.state-open .activity-list-item-link-language-dot{background-color:var(--c-success)}.activity-section-heading{align-items:baseline;display:flex;flex-wrap:wrap;gap:var(--spacer);justify-content:space-between;margin-bottom:var(--spacer-n1)}.section-contact{background:var(--c-white-200);background:linear-gradient(90deg,var(--c-white-200) 0,var(--c-white) 90%);border-color:var(--c-white-200);border-radius:var(--border-radius-md);border-style:solid;border-width:1px;color:var(--c-white-200-background-color-emphasis);padding-block:3.5rem;padding-inline:1.5rem}.header{display:grid;gap:var(--spacer);max-width:48rem}.header-subtitle{position:relative;width:-moz-fit-content;width:fit-content}.header-subtitle:before{background:var(--c-white-200);background:linear-gradient(90deg,var(--c-white-200) 0,var(--c-white) 90%);border-radius:var(--border-radius-md);content:"";height:100%;left:0;position:absolute;rotate:3deg;top:0;width:100%;z-index:-1}.header-social-links{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--spacer-2)}}}@layer elements{@layer elements{}}@layer elements{@layer elements{}}@layer components{}@layer components{@layer components{.badge{background-color:var(--badge-background-color);border-color:var(--badge-border-color);border-radius:var(--badge-border-radius);border-style:var(--badge-border-style);border-width:var(--badge-border-width);color:var(--badge-color);display:inline-flex;font-size:var(--badge-font-size);font-weight:var(--badge-font-weight);padding-block:var(--badge-padding-block);padding-inline:var(--badge-padding-inline)}.badge-white{--badge-background-color:var(--c-white);--badge-color:var(--c-white-background-color-emphasis);--badge-border-width:1px;--badge-border-style:solid;--badge-border-color:var(--c-white-300)}.badge-primary{--badge-background-color:var(--c-primary);--badge-color:var(--c-primary-background-color-emphasis);--badge-border-width:0;--badge-border-style:initial;--badge-border-color:none}.badge-secondary{--badge-background-color:var(--c-secondary);--badge-color:var(--c-secondary-background-color-emphasis);--badge-border-width:0;--badge-border-style:initial;--badge-border-color:none}.badge-success{--badge-background-color:var(--c-success);--badge-color:var(--c-success-background-color-emphasis);--badge-border-width:0;--badge-border-style:initial;--badge-border-color:none}.badge-info{--badge-background-color:var(--c-info);--badge-color:var(--c-info-background-color-emphasis);--badge-border-width:0;--badge-border-style:initial;--badge-border-color:none}.badge-warning{--badge-background-color:var(--c-warning);--badge-color:var(--c-warning-background-color-emphasis);--badge-border-width:0;--badge-border-style:initial;--badge-border-color:none}.badge-danger{--badge-background-color:var(--c-danger);--badge-color:var(--c-danger-background-color-emphasis);--badge-border-width:0;--badge-border-style:initial;--badge-border-color:none}.skeleton-line{background-color:var(--c-white-200);border-radius:var(--border-radius-md);display:block;height:.75rem}}}@layer components{@layer components{}}@layer utilities{}@layer utilities{@layer utilities{.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-3{-webkit-line-clamp:3}.line-clamp-3,.line-clamp-4{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-4{-webkit-line-clamp:4}.line-clamp-5{-webkit-line-clamp:5}.line-clamp-5,.line-clamp-6{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-6{-webkit-line-clamp:6}.line-clamp-7{-webkit-line-clamp:7}.line-clamp-7,.line-clamp-8{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-8{-webkit-line-clamp:8}.bg-white{background-color:var(--c-white);color:var(--c-white-background-color-emphasis)}.bg-white-100{background-color:var(--c-white-100);color:var(--c-white-100-background-color-emphasis)}.bg-white-200{background-color:var(--c-white-200);color:var(--c-white-200-background-color-emphasis)}.bg-black{background-color:var(--c-black);color:var(--c-black-background-color-emphasis)}.bg-gray{background-color:var(--c-gray);color:var(--c-gray-background-color-emphasis)}.bg-beige{background-color:var(--c-beige);color:var(--c-beige-background-color-emphasis)}.bg-primary{background-color:var(--c-primary);color:var(--c-primary-background-color-emphasis)}.bg-secondary{background-color:var(--c-secondary);color:var(--c-secondary-background-color-emphasis)}.bg-success{background-color:var(--c-success);color:var(--c-success-background-color-emphasis)}.bg-info{background-color:var(--c-info);color:var(--c-info-background-color-emphasis)}.bg-warning{background-color:var(--c-warning);color:var(--c-warning-background-color-emphasis)}.bg-danger{background-color:var(--c-danger);color:var(--c-danger-background-color-emphasis)}.text-white{color:var(--c-white)}.text-white-100{color:var(--c-white-100)}.text-white-200{color:var(--c-white-200)}.text-black{color:var(--c-black)}.text-gray{color:var(--c-gray)}.text-beige{color:var(--c-beige)}.text-primary{color:var(--c-primary)}.text-secondary{color:var(--c-secondary)}.text-success{color:var(--c-success)}.text-info{color:var(--c-info)}.text-warning{color:var(--c-warning)}.text-danger{color:var(--c-danger)}.mx-auto{margin:0 auto}.m-0{margin:0}.m-n1{margin:var(--spacer-n1)}.m-n2{margin:var(--spacer-n2)}.m-1{margin:var(--spacer-1)}.m-2{margin:var(--spacer-2)}.m-3{margin:var(--spacer-3)}.m-4{margin:var(--spacer-4)}.m-default{margin:var(--spacer)}.mt-0{margin-block-start:0}.mt-n1{margin-block-start:var(--spacer-n1)}.mt-n2{margin-block-start:var(--spacer-n2)}.mt-1{margin-block-start:var(--spacer-1)}.mt-2{margin-block-start:var(--spacer-2)}.mt-3{margin-block-start:var(--spacer-3)}.mt-4{margin-block-start:var(--spacer-4)}.mt-default{margin-block-start:var(--spacer)}.mb-0{margin-block-end:0}.mb-n1{margin-block-end:var(--spacer-n1)}.mb-n2{margin-block-end:var(--spacer-n2)}.mb-1{margin-block-end:var(--spacer-1)}.mb-2{margin-block-end:var(--spacer-2)}.mb-3{margin-block-end:var(--spacer-3)}.mb-4{margin-block-end:var(--spacer-4)}.mb-default{margin-block-end:var(--spacer)}.ml-0{margin-inline-start:0}.ml-n1{margin-inline-start:var(--spacer-n1)}.ml-n2{margin-inline-start:var(--spacer-n2)}.ml-1{margin-inline-start:var(--spacer-1)}.ml-2{margin-inline-start:var(--spacer-2)}.ml-3{margin-inline-start:var(--spacer-3)}.ml-4{margin-inline-start:var(--spacer-4)}.ml-default{margin-inline-start:var(--spacer)}.mr-0{margin-inline-end:0}.mr-n1{margin-inline-end:var(--spacer-n1)}.mr-n2{margin-inline-end:var(--spacer-n2)}.mr-1{margin-inline-end:var(--spacer-1)}.mr-2{margin-inline-end:var(--spacer-2)}.mr-3{margin-inline-end:var(--spacer-3)}.mr-4{margin-inline-end:var(--spacer-4)}.mr-default{margin-inline-end:var(--spacer)}.mx-0{margin-inline:0}.mx-n1{margin-inline:var(--spacer-n1)}.mx-n2{margin-inline:var(--spacer-n2)}.mx-1{margin-inline:var(--spacer-1)}.mx-2{margin-inline:var(--spacer-2)}.mx-3{margin-inline:var(--spacer-3)}.mx-4{margin-inline:var(--spacer-4)}.mx-default{margin-inline:var(--spacer)}.my-0{margin-block:0}.my-n1{margin-block:var(--spacer-n1)}.my-n2{margin-block:var(--spacer-n2)}.my-1{margin-block:var(--spacer-1)}.my-2{margin-block:var(--spacer-2)}.my-3{margin-block:var(--spacer-3)}.my-4{margin-block:var(--spacer-4)}.my-default{margin-block:var(--spacer)}.p-0{padding:0}.p-n1{padding:var(--spacer-n1)}.p-n2{padding:var(--spacer-n2)}.p-1{padding:var(--spacer-1)}.p-2{padding:var(--spacer-2)}.p-3{padding:var(--spacer-3)}.p-4{padding:var(--spacer-4)}.p-default{padding:var(--spacer)}.pt-0{padding-block-start:0}.pt-n1{padding-block-start:var(--spacer-n1)}.pt-n2{padding-block-start:var(--spacer-n2)}.pt-1{padding-block-start:var(--spacer-1)}.pt-2{padding-block-start:var(--spacer-2)}.pt-3{padding-block-start:var(--spacer-3)}.pt-4{padding-block-start:var(--spacer-4)}.pt-default{padding-block-start:var(--spacer)}.pb-0{padding-block-end:0}.pb-n1{padding-block-end:var(--spacer-n1)}.pb-n2{padding-block-end:var(--spacer-n2)}.pb-1{padding-block-end:var(--spacer-1)}.pb-2{padding-block-end:var(--spacer-2)}.pb-3{padding-block-end:var(--spacer-3)}.pb-4{padding-block-end:var(--spacer-4)}.pb-default{padding-block-end:var(--spacer)}.pl-0{padding-inline-start:0}.pl-n1{padding-inline-start:var(--spacer-n1)}.pl-n2{padding-inline-start:var(--spacer-n2)}.pl-1{padding-inline-start:var(--spacer-1)}.pl-2{padding-inline-start:var(--spacer-2)}.pl-3{padding-inline-start:var(--spacer-3)}.pl-4{padding-inline-start:var(--spacer-4)}.pl-default{padding-inline-start:var(--spacer)}.pr-0{padding-inline-end:0}.pr-n1{padding-inline-end:var(--spacer-n1)}.pr-n2{padding-inline-end:var(--spacer-n2)}.pr-1{padding-inline-end:var(--spacer-1)}.pr-2{padding-inline-end:var(--spacer-2)}.pr-3{padding-inline-end:var(--spacer-3)}.pr-4{padding-inline-end:var(--spacer-4)}.pr-default{padding-inline-end:var(--spacer)}.px-0{padding-inline:0}.px-n1{padding-inline:var(--spacer-n1)}.px-n2{padding-inline:var(--spacer-n2)}.px-1{padding-inline:var(--spacer-1)}.px-2{padding-inline:var(--spacer-2)}.px-3{padding-inline:var(--spacer-3)}.px-4{padding-inline:var(--spacer-4)}.px-default{padding-inline:var(--spacer)}.py-0{padding-block:0}.py-n1{padding-block:var(--spacer-n1)}.py-n2{padding-block:var(--spacer-n2)}.py-1{padding-block:var(--spacer-1)}.py-2{padding-block:var(--spacer-2)}.py-3{padding-block:var(--spacer-3)}.py-4{padding-block:var(--spacer-4)}.py-default{padding-block:var(--spacer)}.fw-100{font-weight:100}.fw-200{font-weight:200}.fw-300{font-weight:300}.fw-400{font-weight:400}.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}.fw-900{font-weight:900}.text-xs{font-size:var(--fs-xs)}.text-sm{font-size:var(--fs-sm)}.text-md{font-size:var(--fs-md)}.text-lg{font-size:var(--fs-lg)}.text-xl{font-size:var(--fs-xl)}.text-decoration-none{text-decoration:none}.text-decoration-underline{text-decoration-line:underline}.text-decoration-overline{text-decoration-line:overline}.text-decoration-line-through{text-decoration-line:line-through}.text-decoration-solid{text-decoration-style:solid}.text-decoration-dashed{text-decoration-style:dashed}.text-decoration-dotted{text-decoration-style:dotted}.text-decoration-double{text-decoration-style:double}.text-decoration-wavy{text-decoration-style:wavy}}}@layer utilities{@layer utilities{}}@layer utilities{@layer utilities{}}@layer utilities{@layer utilities{}}@layer utilities{@layer utilities{}}@layer utilities{@layer utilities{}}@layer utilities{@layer utilities{}}@layer utilities{@layer utilities{}}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/package.json",
|
|
3
3
|
"name": "@krudi/styles",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.2",
|
|
5
5
|
"private": false,
|
|
6
6
|
"description": "Reusable CSS foundations, components, and utilities extracted from krudi-io for sharing across projects.",
|
|
7
7
|
"keywords": [
|
|
@@ -26,15 +26,10 @@
|
|
|
26
26
|
"email": "patryk.kudlik@gmail.com",
|
|
27
27
|
"url": "https://github.com/krudi"
|
|
28
28
|
},
|
|
29
|
-
"sideEffects": [
|
|
30
|
-
"./**/*.css",
|
|
31
|
-
"./**/*.svg"
|
|
32
|
-
],
|
|
33
29
|
"type": "module",
|
|
34
30
|
"exports": {
|
|
35
31
|
".": "./dist/styles/styles.css",
|
|
36
|
-
"./
|
|
37
|
-
"./core": "./dist/styles/styles.css",
|
|
32
|
+
"./ui": "./dist/styles/styles.css",
|
|
38
33
|
"./theme": "./dist/styles/theme.css",
|
|
39
34
|
"./variables": "./dist/styles/variables.css",
|
|
40
35
|
"./base": "./dist/styles/base/index.css",
|
|
@@ -47,7 +42,6 @@
|
|
|
47
42
|
"main": "./dist/styles/styles.css",
|
|
48
43
|
"style": "./dist/styles/styles.css",
|
|
49
44
|
"files": [
|
|
50
|
-
"src",
|
|
51
45
|
"assets",
|
|
52
46
|
"dist",
|
|
53
47
|
"README.md",
|
|
@@ -65,6 +59,9 @@
|
|
|
65
59
|
"lint:stylelint:fix": "stylelint --cache --cache-location .cache/.stylelintcache -c ./stylelint.config.mjs --fix \"**/*.css\"",
|
|
66
60
|
"typecheck": "tsc -p tsconfig.json --noEmit"
|
|
67
61
|
},
|
|
62
|
+
"dependencies": {
|
|
63
|
+
"@krudi/icons": "*"
|
|
64
|
+
},
|
|
68
65
|
"devDependencies": {
|
|
69
66
|
"@krudi/eslint-config": "^0.1.8",
|
|
70
67
|
"@krudi/prettier-config": "^0.1.8",
|
package/src/scripts/index.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
html {
|
|
2
|
-
scroll-behavior: smooth;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
body {
|
|
6
|
-
margin: 0;
|
|
7
|
-
background-color: var(--body-background-color);
|
|
8
|
-
line-height: var(--body-line-height);
|
|
9
|
-
text-size-adjust: 100%;
|
|
10
|
-
text-rendering: optimizelegibility;
|
|
11
|
-
color: var(--body-color);
|
|
12
|
-
font-family: var(--body-font-family);
|
|
13
|
-
font-size: var(--body-font-size);
|
|
14
|
-
overflow-x: hidden;
|
|
15
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
:is(a, button, input, textarea, summary) {
|
|
2
|
-
--outline-size: max(2px, 0.08em);
|
|
3
|
-
--outline-style: solid;
|
|
4
|
-
--outline-color: currentcolor;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
:is(a, button, input, textarea, summary):focus {
|
|
8
|
-
outline: var(--outline-size) var(--outline-style) var(--outline-color);
|
|
9
|
-
outline-offset: var(--outline-offset, var(--outline-size));
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
:is(a, button, input, textarea, summary):focus-visible {
|
|
13
|
-
outline: var(--outline-size) var(--outline-style) var(--outline-color);
|
|
14
|
-
outline-offset: var(--outline-offset, var(--outline-size));
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
:is(a, button, input, textarea, summary):focus:not(:focus-visible) {
|
|
18
|
-
outline: none;
|
|
19
|
-
}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
*,
|
|
2
|
-
*::before,
|
|
3
|
-
*::after {
|
|
4
|
-
box-sizing: border-box;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
body,
|
|
8
|
-
h1,
|
|
9
|
-
h2,
|
|
10
|
-
h3,
|
|
11
|
-
h4,
|
|
12
|
-
p,
|
|
13
|
-
figure,
|
|
14
|
-
blockquote,
|
|
15
|
-
dl,
|
|
16
|
-
dd {
|
|
17
|
-
margin: 0;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
ul[role='list'],
|
|
21
|
-
ol[role='list'] {
|
|
22
|
-
list-style: none;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
html:focus-within {
|
|
26
|
-
scroll-behavior: smooth;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
body {
|
|
30
|
-
min-height: 100vh;
|
|
31
|
-
text-rendering: optimizespeed;
|
|
32
|
-
line-height: 1.5;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
a:not([class]) {
|
|
36
|
-
text-decoration-skip-ink: auto;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
img,
|
|
40
|
-
picture {
|
|
41
|
-
max-width: 100%;
|
|
42
|
-
display: block;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
input,
|
|
46
|
-
button,
|
|
47
|
-
textarea,
|
|
48
|
-
select {
|
|
49
|
-
font: inherit;
|
|
50
|
-
}
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
h1,
|
|
2
|
-
.h1 {
|
|
3
|
-
font-weight: 700;
|
|
4
|
-
font-size: var(--heading-1);
|
|
5
|
-
font-family: var(--heading-font-family);
|
|
6
|
-
line-height: 1.1;
|
|
7
|
-
display: block;
|
|
8
|
-
margin-block-end: var(--spacer);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
h2,
|
|
12
|
-
.h2 {
|
|
13
|
-
font-weight: 700;
|
|
14
|
-
font-size: var(--heading-2);
|
|
15
|
-
font-family: var(--heading-font-family);
|
|
16
|
-
line-height: 1.15;
|
|
17
|
-
display: block;
|
|
18
|
-
margin-block-end: var(--spacer);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
h3,
|
|
22
|
-
.h3 {
|
|
23
|
-
font-weight: 700;
|
|
24
|
-
font-size: var(--heading-3);
|
|
25
|
-
font-family: var(--heading-font-family);
|
|
26
|
-
line-height: 1.2;
|
|
27
|
-
display: block;
|
|
28
|
-
margin-block-end: var(--spacer);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
h4,
|
|
32
|
-
.h4 {
|
|
33
|
-
font-weight: 700;
|
|
34
|
-
font-size: var(--heading-4);
|
|
35
|
-
font-family: var(--heading-font-family);
|
|
36
|
-
line-height: 1.25;
|
|
37
|
-
display: block;
|
|
38
|
-
margin-block-end: var(--spacer);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
h5,
|
|
42
|
-
.h5 {
|
|
43
|
-
font-weight: 700;
|
|
44
|
-
font-size: var(--heading-5);
|
|
45
|
-
font-family: var(--heading-font-family);
|
|
46
|
-
line-height: 1.3;
|
|
47
|
-
display: block;
|
|
48
|
-
margin-block-end: var(--spacer);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
h6,
|
|
52
|
-
.h6 {
|
|
53
|
-
font-weight: 700;
|
|
54
|
-
font-size: var(--heading-6);
|
|
55
|
-
font-family: var(--heading-font-family);
|
|
56
|
-
line-height: 1.4;
|
|
57
|
-
display: block;
|
|
58
|
-
margin-block-end: var(--spacer);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.p,
|
|
62
|
-
p {
|
|
63
|
-
margin-block-end: var(--p-margin-block-start);
|
|
64
|
-
line-height: var(--p-line-height);
|
|
65
|
-
color: var(--p-color);
|
|
66
|
-
font-size: var(--p-font-size);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.p,
|
|
70
|
-
p:last-child {
|
|
71
|
-
margin-block-end: 0;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
.a,
|
|
75
|
-
a {
|
|
76
|
-
color: var(--a-color);
|
|
77
|
-
text-decoration-style: var(--a-text-decoration-style);
|
|
78
|
-
text-decoration-thickness: var(--a-text-decoration-thickness);
|
|
79
|
-
text-underline-offset: var(--a-text-underline-offset);
|
|
80
|
-
font-size: var(--a-font-size);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
a:is(:hover, :focus) {
|
|
84
|
-
text-decoration-style: var(--a-text-decoration-style-hover);
|
|
85
|
-
color: var(--c-black);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
:is(
|
|
89
|
-
a[href^='tel:']:not([class]),
|
|
90
|
-
a[href^='mailto:']:not([class]),
|
|
91
|
-
a[download]:not([class]),
|
|
92
|
-
a[href^='http://']:not([class]),
|
|
93
|
-
a[href^='https://']:not([class])
|
|
94
|
-
):not(:has(img))::after {
|
|
95
|
-
width: 1em;
|
|
96
|
-
height: 1em;
|
|
97
|
-
margin-inline: 0.25rem;
|
|
98
|
-
background-repeat: no-repeat;
|
|
99
|
-
background-size: contain;
|
|
100
|
-
display: inline-block;
|
|
101
|
-
content: ' ';
|
|
102
|
-
vertical-align: middle;
|
|
103
|
-
color: var(--a-color);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
a[href^='tel:']::after {
|
|
107
|
-
background-image: url('../../assets/icons/square-phone-solid-full.svg');
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
a[href^='mailto:']::after {
|
|
111
|
-
background-image: url('../../assets/icons/envelope-regular-full.svg');
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
a[download]::after {
|
|
115
|
-
background-image: url('../../assets/icons/download-solid-full.svg');
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
a[href^='http://']::after,
|
|
119
|
-
a[href^='https://']::after {
|
|
120
|
-
background-image: url('../../assets/icons/arrow-up-right-from-square-solid-full.svg');
|
|
121
|
-
}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
.badge {
|
|
2
|
-
padding-block: var(--badge-padding-block);
|
|
3
|
-
padding-inline: var(--badge-padding-inline);
|
|
4
|
-
background-color: var(--badge-background-color);
|
|
5
|
-
display: inline-flex;
|
|
6
|
-
color: var(--badge-color);
|
|
7
|
-
border-width: var(--badge-border-width);
|
|
8
|
-
border-style: var(--badge-border-style);
|
|
9
|
-
border-color: var(--badge-border-color);
|
|
10
|
-
border-radius: var(--badge-border-radius);
|
|
11
|
-
font-size: var(--badge-font-size);
|
|
12
|
-
font-weight: var(--badge-font-weight);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.badge-white {
|
|
16
|
-
--badge-background-color: var(--c-white);
|
|
17
|
-
--badge-color: var(--c-white-background-color-emphasis);
|
|
18
|
-
--badge-border-width: 1px;
|
|
19
|
-
--badge-border-style: solid;
|
|
20
|
-
--badge-border-color: var(--c-white-300);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.badge-primary {
|
|
24
|
-
--badge-background-color: var(--c-primary);
|
|
25
|
-
--badge-color: var(--c-primary-background-color-emphasis);
|
|
26
|
-
--badge-border-width: 0;
|
|
27
|
-
--badge-border-style: initial;
|
|
28
|
-
--badge-border-color: none;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.badge-secondary {
|
|
32
|
-
--badge-background-color: var(--c-secondary);
|
|
33
|
-
--badge-color: var(--c-secondary-background-color-emphasis);
|
|
34
|
-
--badge-border-width: 0;
|
|
35
|
-
--badge-border-style: initial;
|
|
36
|
-
--badge-border-color: none;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.badge-success {
|
|
40
|
-
--badge-background-color: var(--c-success);
|
|
41
|
-
--badge-color: var(--c-success-background-color-emphasis);
|
|
42
|
-
--badge-border-width: 0;
|
|
43
|
-
--badge-border-style: initial;
|
|
44
|
-
--badge-border-color: none;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.badge-info {
|
|
48
|
-
--badge-background-color: var(--c-info);
|
|
49
|
-
--badge-color: var(--c-info-background-color-emphasis);
|
|
50
|
-
--badge-border-width: 0;
|
|
51
|
-
--badge-border-style: initial;
|
|
52
|
-
--badge-border-color: none;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.badge-warning {
|
|
56
|
-
--badge-background-color: var(--c-warning);
|
|
57
|
-
--badge-color: var(--c-warning-background-color-emphasis);
|
|
58
|
-
--badge-border-width: 0;
|
|
59
|
-
--badge-border-style: initial;
|
|
60
|
-
--badge-border-color: none;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.badge-danger {
|
|
64
|
-
--badge-background-color: var(--c-danger);
|
|
65
|
-
--badge-color: var(--c-danger-background-color-emphasis);
|
|
66
|
-
--badge-border-width: 0;
|
|
67
|
-
--badge-border-style: initial;
|
|
68
|
-
--badge-border-color: none;
|
|
69
|
-
}
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
.activity {
|
|
2
|
-
height: 100%;
|
|
3
|
-
display: flex;
|
|
4
|
-
justify-content: space-between;
|
|
5
|
-
flex-direction: column;
|
|
6
|
-
gap: var(--spacer-n2);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.activity-list {
|
|
10
|
-
height: 100%;
|
|
11
|
-
margin-block-start: 0;
|
|
12
|
-
margin-block-end: 0;
|
|
13
|
-
padding-inline-start: 0;
|
|
14
|
-
display: flex;
|
|
15
|
-
gap: var(--spacer-3);
|
|
16
|
-
flex-direction: column;
|
|
17
|
-
list-style: none;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.activity-list-item {
|
|
21
|
-
width: 100%;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.activity-list-item-link {
|
|
25
|
-
padding-block: 1.5rem;
|
|
26
|
-
padding-inline: 1.5rem;
|
|
27
|
-
text-decoration: none;
|
|
28
|
-
display: flex;
|
|
29
|
-
flex-direction: column;
|
|
30
|
-
gap: var(--spacer);
|
|
31
|
-
border-width: 1px;
|
|
32
|
-
border-style: solid;
|
|
33
|
-
border-color: var(--c-white-200);
|
|
34
|
-
border-radius: var(--border-radius-md);
|
|
35
|
-
transition: border-color var(--transition-duration);
|
|
36
|
-
min-height: 10rem;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.activity-list-item-link:hover,
|
|
40
|
-
.activity-list-item-link:focus-visible {
|
|
41
|
-
border-color: var(--c-primary-hover);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.activity-list-item-link-title {
|
|
45
|
-
font-weight: 700;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.activity-list-item-link-language {
|
|
49
|
-
display: flex;
|
|
50
|
-
align-items: center;
|
|
51
|
-
gap: var(--spacer-n2);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.activity-list-item-link-language-dot {
|
|
55
|
-
width: 0.75rem;
|
|
56
|
-
height: 0.75rem;
|
|
57
|
-
display: inline-block;
|
|
58
|
-
border-radius: var(--border-radius-full);
|
|
59
|
-
background-color: var(--c-white-200);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.activity-list-item-link-language.state-closed .activity-list-item-link-language-dot {
|
|
63
|
-
background-color: var(--c-danger);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.activity-list-item-link-language.state-open .activity-list-item-link-language-dot {
|
|
67
|
-
background-color: var(--c-success);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.activity-section-heading {
|
|
71
|
-
display: flex;
|
|
72
|
-
justify-content: space-between;
|
|
73
|
-
align-items: baseline;
|
|
74
|
-
gap: var(--spacer);
|
|
75
|
-
margin-bottom: var(--spacer-n1);
|
|
76
|
-
flex-wrap: wrap;
|
|
77
|
-
}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
.github-projects-list {
|
|
2
|
-
margin-block-start: 0;
|
|
3
|
-
margin-block-end: 0;
|
|
4
|
-
padding-inline-start: 0;
|
|
5
|
-
list-style: none;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.github-projects-list-item {
|
|
9
|
-
width: 100%;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.github-projects-list-item-link {
|
|
13
|
-
padding-block: 1.5rem;
|
|
14
|
-
padding-inline: 1.5rem;
|
|
15
|
-
height: 100%;
|
|
16
|
-
text-decoration: none;
|
|
17
|
-
display: flex;
|
|
18
|
-
flex-direction: column;
|
|
19
|
-
justify-content: space-between;
|
|
20
|
-
position: relative;
|
|
21
|
-
gap: var(--spacer);
|
|
22
|
-
overflow: hidden;
|
|
23
|
-
border-width: 1px;
|
|
24
|
-
border-style: solid;
|
|
25
|
-
border-color: var(--c-white-200);
|
|
26
|
-
border-radius: var(--border-radius-md);
|
|
27
|
-
transition: border-color var(--transition-duration);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.github-projects-list-item-link:hover,
|
|
31
|
-
.github-projects-list-item-link:focus-visible {
|
|
32
|
-
border-color: var(--c-primary-hover);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.github-projects-list-item-link-star {
|
|
36
|
-
padding-inline: 1rem;
|
|
37
|
-
padding-block: 0.25rem;
|
|
38
|
-
background-color: var(--c-white-200);
|
|
39
|
-
top: 0;
|
|
40
|
-
right: 0;
|
|
41
|
-
position: absolute;
|
|
42
|
-
display: flex;
|
|
43
|
-
align-items: center;
|
|
44
|
-
gap: 0.25rem;
|
|
45
|
-
border-radius: 0 0 0 var(--border-radius-md);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.github-projects-list-item-link-title {
|
|
49
|
-
font-weight: 700;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.github-projects-list-item-link-language {
|
|
53
|
-
display: flex;
|
|
54
|
-
align-items: center;
|
|
55
|
-
gap: var(--spacer-n2);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.github-projects-list-item-link-language-dot {
|
|
59
|
-
width: 0.75rem;
|
|
60
|
-
height: 0.75rem;
|
|
61
|
-
display: inline-block;
|
|
62
|
-
border-radius: var(--border-radius-full);
|
|
63
|
-
background-color: var(--c-white-200);
|
|
64
|
-
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-black) 12%, transparent);
|
|
65
|
-
}
|