@krudi/styles 0.1.0

package/src/styles/base/_typography.css

@@ -0,0 +1,121 @@
+h1,
+.h1 {
+    font-weight: 700;
+    font-size: var(--heading-1);
+    font-family: var(--heading-font-family);
+    line-height: 1.1;
+    display: block;
+    margin-block-end: var(--spacer);
+}
+
+h2,
+.h2 {
+    font-weight: 700;
+    font-size: var(--heading-2);
+    font-family: var(--heading-font-family);
+    line-height: 1.15;
+    display: block;
+    margin-block-end: var(--spacer);
+}
+
+h3,
+.h3 {
+    font-weight: 700;
+    font-size: var(--heading-3);
+    font-family: var(--heading-font-family);
+    line-height: 1.2;
+    display: block;
+    margin-block-end: var(--spacer);
+}
+
+h4,
+.h4 {
+    font-weight: 700;
+    font-size: var(--heading-4);
+    font-family: var(--heading-font-family);
+    line-height: 1.25;
+    display: block;
+    margin-block-end: var(--spacer);
+}
+
+h5,
+.h5 {
+    font-weight: 700;
+    font-size: var(--heading-5);
+    font-family: var(--heading-font-family);
+    line-height: 1.3;
+    display: block;
+    margin-block-end: var(--spacer);
+}
+
+h6,
+.h6 {
+    font-weight: 700;
+    font-size: var(--heading-6);
+    font-family: var(--heading-font-family);
+    line-height: 1.4;
+    display: block;
+    margin-block-end: var(--spacer);
+}
+
+.p,
+p {
+    margin-block-end: var(--p-margin-block-start);
+    line-height: var(--p-line-height);
+    color: var(--p-color);
+    font-size: var(--p-font-size);
+}
+
+.p,
+p:last-child {
+    margin-block-end: 0;
+}
+
+.a,
+a {
+    color: var(--a-color);
+    text-decoration-style: var(--a-text-decoration-style);
+    text-decoration-thickness: var(--a-text-decoration-thickness);
+    text-underline-offset: var(--a-text-underline-offset);
+    font-size: var(--a-font-size);
+}
+
+a:is(:hover, :focus) {
+    text-decoration-style: var(--a-text-decoration-style-hover);
+    color: var(--c-black);
+}
+
+: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 {
+    width: 1em;
+    height: 1em;
+    margin-inline: 0.25rem;
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: inline-block;
+    content: ' ';
+    vertical-align: middle;
+    color: var(--a-color);
+}
+
+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');
+}

package/src/styles/base/index.css

@@ -0,0 +1,5 @@
+/* Base reset + typography foundations */
+@import './_reset.css' layer(base);
+@import './_base.css' layer(base);
+@import './_focus.css' layer(base);
+@import './_typography.css' layer(base);

package/src/styles/components/_badge.css

@@ -0,0 +1,69 @@
+.badge {
+    padding-block: var(--badge-padding-block);
+    padding-inline: var(--badge-padding-inline);
+    background-color: var(--badge-background-color);
+    display: inline-flex;
+    color: var(--badge-color);
+    border-width: var(--badge-border-width);
+    border-style: var(--badge-border-style);
+    border-color: var(--badge-border-color);
+    border-radius: var(--badge-border-radius);
+    font-size: var(--badge-font-size);
+    font-weight: var(--badge-font-weight);
+}
+
+.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;
+}

package/src/styles/components/_skeleton.css

@@ -0,0 +1,6 @@
+.skeleton-line {
+    display: block;
+    height: 0.75rem;
+    background-color: var(--c-white-200);
+    border-radius: var(--border-radius-md);
+}

package/src/styles/components/index.css

@@ -0,0 +1,3 @@
+/* Component bundle */
+@import './_badge.css' layer(components);
+@import './_skeleton.css' layer(components);

package/src/styles/elements/_github-activity.css

@@ -0,0 +1,77 @@
+.activity {
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    gap: var(--spacer-n2);
+}
+
+.activity-list {
+    height: 100%;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    padding-inline-start: 0;
+    display: flex;
+    gap: var(--spacer-3);
+    flex-direction: column;
+    list-style: none;
+}
+
+.activity-list-item {
+    width: 100%;
+}
+
+.activity-list-item-link {
+    padding-block: 1.5rem;
+    padding-inline: 1.5rem;
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer);
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--c-white-200);
+    border-radius: var(--border-radius-md);
+    transition: border-color var(--transition-duration);
+    min-height: 10rem;
+}
+
+.activity-list-item-link:hover,
+.activity-list-item-link:focus-visible {
+    border-color: var(--c-primary-hover);
+}
+
+.activity-list-item-link-title {
+    font-weight: 700;
+}
+
+.activity-list-item-link-language {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-n2);
+}
+
+.activity-list-item-link-language-dot {
+    width: 0.75rem;
+    height: 0.75rem;
+    display: inline-block;
+    border-radius: var(--border-radius-full);
+    background-color: var(--c-white-200);
+}
+
+.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 {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--spacer);
+    margin-bottom: var(--spacer-n1);
+    flex-wrap: wrap;
+}

package/src/styles/elements/_github-projects.css

@@ -0,0 +1,65 @@
+.github-projects-list {
+    margin-block-start: 0;
+    margin-block-end: 0;
+    padding-inline-start: 0;
+    list-style: none;
+}
+
+.github-projects-list-item {
+    width: 100%;
+}
+
+.github-projects-list-item-link {
+    padding-block: 1.5rem;
+    padding-inline: 1.5rem;
+    height: 100%;
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
+    gap: var(--spacer);
+    overflow: hidden;
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--c-white-200);
+    border-radius: var(--border-radius-md);
+    transition: border-color var(--transition-duration);
+}
+
+.github-projects-list-item-link:hover,
+.github-projects-list-item-link:focus-visible {
+    border-color: var(--c-primary-hover);
+}
+
+.github-projects-list-item-link-star {
+    padding-inline: 1rem;
+    padding-block: 0.25rem;
+    background-color: var(--c-white-200);
+    top: 0;
+    right: 0;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    border-radius: 0 0 0 var(--border-radius-md);
+}
+
+.github-projects-list-item-link-title {
+    font-weight: 700;
+}
+
+.github-projects-list-item-link-language {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-n2);
+}
+
+.github-projects-list-item-link-language-dot {
+    width: 0.75rem;
+    height: 0.75rem;
+    display: inline-block;
+    border-radius: var(--border-radius-full);
+    background-color: var(--c-white-200);
+    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-black) 12%, transparent);
+}

package/src/styles/elements/_header.css

@@ -0,0 +1,31 @@
+.header {
+    max-width: 48rem;
+    display: grid;
+    gap: var(--spacer);
+}
+
+.header-subtitle {
+    width: fit-content;
+    position: relative;
+
+    &::before {
+        z-index: -1;
+        content: '';
+        background: var(--c-white-200);
+        background: linear-gradient(90deg, var(--c-white-200) 0%, var(--c-white) 90%);
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+        position: absolute;
+        border-radius: var(--border-radius-md);
+        rotate: 3deg;
+    }
+}
+
+.header-social-links {
+    display: inline-flex;
+    gap: var(--spacer-2);
+    align-items: center;
+    flex-wrap: wrap;
+}

package/src/styles/elements/_section-contact.css

@@ -0,0 +1,11 @@
+.section-contact {
+    padding-inline: 1.5rem;
+    padding-block: 3.5rem;
+    background: var(--c-white-200);
+    background: linear-gradient(90deg, var(--c-white-200) 0%, var(--c-white) 90%);
+    color: var(--c-white-200-background-color-emphasis);
+    border-radius: var(--border-radius-md);
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--c-white-200);
+}

package/src/styles/elements/index.css

@@ -0,0 +1,5 @@
+/* Site-specific elements */
+@import './_github-projects.css' layer(elements);
+@import './_github-activity.css' layer(elements);
+@import './_section-contact.css' layer(elements);
+@import './_header.css' layer(elements);

package/src/styles/html/_img.css

@@ -0,0 +1,9 @@
+picture {
+    position: relative;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--border-radius-sm);
+}

package/src/styles/html/_svg.css

@@ -0,0 +1,5 @@
+svg {
+    width: var(--svg-width);
+    height: var(--svg-height);
+    fill: currentcolor;
+}

package/src/styles/html/index.css

@@ -0,0 +1,3 @@
+/* HTML element adjustments */
+@import './_svg.css' layer(html);
+@import './_img.css' layer(html);

package/src/styles/layout/_container.css

@@ -0,0 +1,8 @@
+.container {
+    width: min(1080px, 100% - var(--spacer-3));
+    margin-inline: auto;
+}
+
+.container-fluid {
+    width: min(1080px, 100% - var(--spacer-3));
+}

package/src/styles/layout/_gird.css

@@ -0,0 +1,70 @@
+.row {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: var(--spacer);
+}
+
+.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;
+}
+
+@media screen and (max-width: 992px) {
+    .col-1,
+    .col-2,
+    .col-3,
+    .col-4,
+    .col-5,
+    .col-6,
+    .col-7,
+    .col-8,
+    .col-9,
+    .col-10,
+    .col-11,
+    .col-12 {
+        grid-column: span 12;
+    }
+}

package/src/styles/layout/index.css

@@ -0,0 +1,3 @@
+/* Layout primitives */
+@import './_container.css' layer(layout);
+@import './_gird.css' layer(layout);

package/src/styles/styles.css

@@ -0,0 +1,10 @@
+@layer variables, theme, base, layout, html, elements, components, utilities;
+
+@import './theme.css' layer(theme);
+@import './variables.css' layer(variables);
+@import './base/index.css' layer(base);
+@import './layout/index.css' layer(layout);
+@import './html/index.css' layer(html);
+@import './elements/index.css' layer(elements);
+@import './components/index.css' layer(components);
+@import './utilities/index.css' layer(utilities);

package/src/styles/theme.css

@@ -0,0 +1,98 @@
+@layer theme {
+    :root {
+        /* Theme variable colors */
+        --c-white: #ffffff;
+        --c-black: #1c222e;
+        --c-gray: #4e596a;
+        --c-primary: #216e7d;
+        --c-secondary: #353b48;
+        --c-success: #27ae60;
+        --c-info: #0dccf2;
+        --c-warning: #ffc105;
+        --c-danger: #dc3848;
+
+        /* Palette */
+        --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);
+
+        /* Theme colors */
+
+        /* White */
+        --c-white-hover: color-mix(in oklab, var(--c-white) 70%, var(--c-white));
+        --c-white-background-color-emphasis: var(--c-black);
+
+        /* Black */
+        --c-black-hover: color-mix(in oklab, var(--c-black) 70%, var(--c-black));
+        --c-black-background-color-emphasis: var(--c-white);
+
+        /* Gray */
+        --c-gray-hover: color-mix(in oklab, var(--c-black) 70%, var(--c-black));
+        --c-gray-background-color-emphasis: var(--c-white);
+
+        /* Primary */
+        --c-primary-hover: color-mix(in oklab, var(--c-primary) 70%, var(--c-white));
+        --c-primary-background-color-emphasis: var(--c-white);
+
+        /* Secondary */
+        --c-secondary-hover: color-mix(in oklab, var(--c-secondary) 70%, var(--c-white));
+        --c-secondary-background-color-emphasis: var(--c-white);
+
+        /* Success */
+        --c-success-hover: color-mix(in oklab, var(--c-success) 70%, var(--c-white));
+        --c-success-background-color-emphasis: var(--c-white);
+
+        /* Info */
+        --c-info-hover: color-mix(in oklab, var(--c-info) 70%, var(--c-white));
+        --c-info-background-color-emphasis: var(--c-white);
+
+        /* Warning */
+        --c-warning-hover: color-mix(in oklab, var(--c-warning) 70%, var(--c-white));
+        --c-warning-background-color-emphasis: var(--c-white);
+
+        /* Danger */
+        --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: #ffffff;
+
+        /* Theme variable colors */
+        --c-primary: #474f58;
+        --c-secondary: #d2e0fb;
+        --c-success: #27ae60;
+        --c-info: #0dccf2;
+        --c-warning: #ffc105;
+        --c-danger: #dc3848;
+
+        /* Palette */
+        --c-white-100: #151515;
+        --c-white-200: #2c2c2d;
+        --c-black-100: #302c40;
+        --c-black-300: #4a455a;
+        --c-white-400: #423e4e;
+
+        /* Primary */
+        --c-primary-background-color-emphasis: var(--c-black);
+
+        /* Secondary */
+        --c-secondary-background-color-emphasis: var(--c-black);
+
+        /* Success */
+        --c-success-background-color-emphasis: var(--c-white);
+
+        /* Info */
+        --c-info-background-color-emphasis: var(--c-white);
+
+        /* Warning */
+        --c-warning-background-color-emphasis: var(--c-white);
+
+        /* Danger */
+        --c-danger-background-color-emphasis: var(--c-white);
+    }
+}

package/src/styles/utilities/_background-colors.css

@@ -0,0 +1,59 @@
+.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);
+}