@krudi/styles 0.1.0 → 0.1.2

package/src/styles/elements/_header.css

@@ -1,31 +0,0 @@
-.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

@@ -1,11 +0,0 @@
-.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

@@ -1,5 +0,0 @@
-/* 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

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

package/src/styles/html/_svg.css

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

package/src/styles/html/index.css

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

package/src/styles/layout/_container.css

@@ -1,8 +0,0 @@
-.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

@@ -1,70 +0,0 @@
-.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

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

package/src/styles/styles.css

@@ -1,10 +0,0 @@
-@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

@@ -1,98 +0,0 @@
-@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

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

package/src/styles/utilities/_color.css

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

package/src/styles/utilities/_font-size.css

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

package/src/styles/utilities/_font-weight.css

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

package/src/styles/utilities/_margin.css

@@ -1,235 +0,0 @@
-/* Margin Positions */
-.mx-auto {
-    margin: 0 auto;
-}
-
-/* Margin */
-.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);
-}
-
-/* Margin Top */
-.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);
-}
-
-/* Margin Bottom */
-.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);
-}
-
-/* Margin Left */
-.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);
-}
-
-/* Margin Right */
-.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);
-}
-
-/* Margin Inline (Horizontal) */
-.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);
-}
-
-/* Margin Block (Vertical) */
-.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);
-}