KT-personal-website/public/assets/css/app.css

:root {
    color-scheme: dark light;

    --primary: #cc2027;
    --primary-darken: #8E161B;
    --primary-lighten: #D64C52;
    --primary-text-contrast: #FFF;

    --secondary: #20ccc5;
    --secondary-darken: #168E89;
    --secondary-lighten: #4CD6D0;
    --secondary-text-contrast: #000;

    --error: #c43933;
    --error-darken: #892723;
    --error-lighten: #CF605B;
    --error-text-contrast: #FFF;

    --info: #206ccc;
    --info-darken: #164B8E;
    --info-lighten: #4C89D6;
    --info-text-contrast: #FFF;

    --success: #7dcc20;
    --success-darken: #578E16;
    --success-lighten: #97D64C;
    --success-text-contrast: #000;

    --warning: #cc5e20;
    --warning-darken: #8E4116;
    --warning-lighten: #D67E4C;
    --warning-text-contrast: #FFF;

    --background-color: light-dark(#fffbfb, #171414);
    --background-color-darken: light-dark(#B2AFAF, #100E0E);
    --background-color-lighten: light-dark(#FFFBFB, #454343);

    --light-background-color: #fffbfb;
    --dark-background-color: #171414;

    --header-background-color: light-dark(#171414, #fffbfb);
    --header-background-color-darken: light-dark(#100E0E, #B2AFAF);
    --header-background-color-lighten: light-dark(#454343, #FFFBFB);

    --header-text-color: light-dark(#fffbfb, #171414);
    --header-text-color-secondary: #ffffffb3;
    --header-text-color-disable: light-dark(#ffffff80, #454343);

    --text-color: light-dark(#171414, #fffbfb);
    --text-color-secondary: #ffffffb3;
    --text-color-disable: light-dark(#454343, #ffffff80);

    --light-text-color: #171414;
    --dark-text-color: #fffbfb;

    --text-color-inverse: light-dark(#fffbfb, #171414);
    --text-color-secondary-inverse: #ffffffb3;
    --text-color-disable-inverse: light-dark(#ffffff80, #454343);

    --box-shadow-light: .4rem .4rem 0px .1rem #B2AFAF;
    --box-shadow-dark: .4rem .4rem 0px .1rem #454343;
    --box-shadow-auto: .4rem .4rem 0px .1rem light-dark(#B2AFAF, #454343);

    --h1-color: var(--primary);
    --h2-color: #c33d35;
    --h3-color: #b94f44;
    --h4-color: #ae5e52;
    --h5-color: #a16a61;
    --h6-color: #927671;

    --font-size: 1.1em;
    --default-space: .2em;
}

[data-theme=dark] {
    color-scheme: dark;
}

[data-theme="light"] {
    color-scheme: light;
}


/* RESET CSS BY Piccalil.li */
/* https://piccalil.li/blog/a-more-modern-css-reset/ */
/* License https://creativecommons.org/licenses/by/3.0/ */


/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
h4,
h5,
h6,
button,
input,
label {
    line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
    margin: calc(var(--default-space)*2);
}

/* Make images easier to work with */
/*img,
picture {
    max-width: 100%;
    display: block;
}*/

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--primary-lighten);
    text-decoration: underline var(--primary-darken);
}

a[target="_blank"]::after,
a.external::after {
    content: '&nsp;';
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -6 24 28'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6H7a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-5m-6 0l7.5-7.5M15 3h6v6'/%3E%3C/svg%3E");
    background-color: currentColor;
    mask-image: var(--svg);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

h1 {
    color: var(--h1-color);
    font-size: calc(var(--font-size) * 1.6);
}

h2 {
    color: var(--h2-color);
    font-size: calc(var(--font-size) * 1.5);
}

h3 {
    color: var(--h3-color);
    font-size: calc(var(--font-size) * 1.4);
}

h4 {
    color: var(--h4-color);
    font-size: calc(var(--font-size) * 1.3);
}

h5 {
    color: var(--h5-color);
    font-size: calc(var(--font-size) * 1.2);
}

h6 {
    color: var(--h6-color);
    font-size: calc(var(--font-size) * 1.1);
}

table {
    border-collapse: collapse;
}

table,
th,
td {
    border: 1px solid var(--primary-darken);
}

th {
    padding: calc(var(--default-space)*2);
    background-color: var(--primary-lighten);
    color: var(--primary-text-contrast);
}

td {
    padding: var(--default-space)
}

html {
    background-color: var(--background-color);
    scroll-behavior: smooth;
}

body {
    width: 80vw;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    text-rendering: optimizeSpeed;
    font-size: var(--font-size);
}

header {
    background-color: transparent;
}

header h1 img {
    display: inline;
}

header h1 {
    color: var(--primary);
}

header svg {
    fill: var(--primary-lighten);
    vertical-align: middle;
}

nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

nav h1,
nav ul {
    margin: 0;
}

nav h1 img {
    margin-right: var(--default-space);
    vertical-align: middle;
}

nav ul {
    display: flex;
    gap: calc(var(--default-space) * 2);
    flex-wrap: wrap;
    padding: 0;
}

nav li {
    margin: var(--default-space);
    list-style: none;
    font-size: calc(var(--font-size) * 1.2);
}

nav li a {
    color: var(--primary-lighten);
}

nav li a:hover, nav .active {
    color: var(--primary-lighten);
    text-decoration: underline var(--primary-darken);
    text-decoration-thickness: var(--default-space);
}

section h2 {
    font-size: calc(var(--font-size) * 1.6);
    color: var(--h2-color);
    margin: 0;
}

section,
article {
    align-self: center;
    color: var(--light-text-color);
    background-color: var(--light-background-color);
    padding: calc(var(--default-space) * 2);
    border: 1px solid var(--background-color-darken);
    border-radius: calc(var(--default-space) * 1.2);
    margin: calc(var(--default-space) *5) 0;
    box-shadow: var(--box-shadow-light);
}

.last-pics article {
    box-shadow: none;
}

.home {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: calc(var(--default-space) *5);
    width: 100%;
    height: 100%;

    article {
        margin: var(--default-space) 0;
        padding: 0;
    }

    .last-pics article {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        box-shadow: none;
        border: none;
    }

    figure {
        width: min-content;
        display: grid;
    }

    figcaption {
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.blog {
    section {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        justify-content: space-around;
        gap: calc(var(--default-space)*3);
    }

    .article-card article {
        width: 24vw;
        padding: var(--default-space);
        border-radius: calc(var(--default-space) *2);
    }

    .breadcrumb {
        ul {
            gap: 0;
        }

        li {
            margin: auto 0;
        }

        li:not(:last-child)::after {
            content: " > ";
        }
    }

    .blog-page-number {
        text-align: left;
        display: inherit;
    }

    .card {
        box-shadow: none;
        width: 25vw;
    }
}

.pagination {
    gap: 0;
}

.pagination li {
    border: 1px solid var(--primary-darken);
    margin: 0;
}

.pagination li a {
    padding: var(--default-space) calc(var(--default-space)*2);
    display: block;
}

.pagination li a:hover,
.pagination li a.current {
    text-decoration: none;
    background-color: var(--primary-lighten);
    color: var(--primary-text-contrast);
}

.table-of-contents {
    float: right;
    width: 25vw;
    background-color: rgb(178, 175, 175);
    border: 1px solid var(--primary-lighten);
    border-radius: calc(var(--default-space) * 1.2);
    position: sticky;
    top: calc(var(--default-space) * 2);
}

.table-of-contents a {
    text-decoration: none;
}

.table-of-contents a:hover,
.table-of-contents a:active {
    text-decoration: underline;
}

.article-footer {
    border-top: 1px solid var(--light-text-color);
    margin-top: calc(var(--default-space)*3);
    font-size: 1rem;
}

footer {
    text-align: center;
    margin: calc(var(--default-space) *2) auto 0 auto;
    background-color: transparent;
    width: fit-content;
    padding: var(--default-space);
}

footer .a {
    color: var(--primary-lighten);
}

footer p {
    margin: var(--default-space);
    font-size: .9rem;
}

pre {
    background-color: var(--dark-background-color);
    color: var(--dark-text-color);
    padding: calc(var(--default-space) * 4);
}

/* Smaller than 992px */

@media (max-width: 992px) {
    .table-of-contents {
        float: none;
        width: auto;
    }

    .home {
        grid-template-columns: 1fr;
    }

    .what-is-this {
        grid-area: 1 / 1 / 2 / 2;
    }

    .social-networks {
        grid-area: 2 / 1 / 3 / 2;
    }

    .last-posts {
        grid-area: 3 / 1 / 4 / 2;
    }

    .last-shaares {
        grid-area: 4 / 1 / 5 / 2;
    }

    .last-apps-updates {
        grid-area: 5 / 1 / 6 / 2;
    }

    .last-pics {
        grid-area: 6 / 1 / 7 / 2;
    }
}

/* Larger than 992px */
@media (min-width: 992px) {
    .home {
        grid-template-columns: repeat(7, 1fr);
    }

    .what-is-this {
        grid-area: 1 / 1 / 2 / 6;
    }

    .social-networks {
        grid-area: 1 / 6 / 2 / 8;
    }

    .last-posts {
        grid-area: 2 / 1 / 4 / 4;
    }

    .last-shaares {
        grid-area: 2 / 5 / 4 / 8;
    }

    .last-apps-updates {
        grid-area: 4 / 1 / 5 / 2;
    }

    .last-pics {
        grid-area: 4 / 2 / 5 / 8;
    }
}