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

/* 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;
    }
}