nextDESIGN/assets/css/main.scss

/* nextDESIGN v9
 *
 * nextDESIGN is a personal web design for mmk2410.org.
 * The current version (v9) is focused in simplicity and minimalism.
 *
 * 2020-2022 © Marcel Kapfer <opensource@mmk2410.org>
 * Licensed under the MIT License
 */

/***************
 * Variables
 ***************/

$c-bg: #fafafa;
$c-bg-inv: #333;
$c-bg-main: #fff;
$c-bg-main-inv: #222;
$c-primary: #4d3c9b;
$c-bg-category: #4d3c9b;
$c-primary-inv: #ad9bff;
$c-bg-category-inv: #755bf0;
$c-bg-tag: #8171c8;
$c-bg-tag-inv: #a49ccc;
$c-font: #333;
$c-font-inv: #fafafa;
$c-btn-font: $c-font;
$c-btn-bg: $c-bg-category;
$c-btn-shadow: #aaa;
$c-btn-shadow-inv: #000;

$s-content: 800px;
$s-nav-title: 36px;
$s-border: 2px;
$s-border-radius: 2px;
$s-comment-margin-top: 60px;
$s-font-size: 18px;

$p-box-shadow: 1px 1px 5px #888;

html {
    font-size: $s-font-size;
}

body {
    background-color: $c-bg;
    color: $c-font;
    font-family: "Raleway", sans-serif;
    line-height: 1.5;

    @media (prefers-color-scheme: dark) {
	background-color: $c-bg-inv;
	color: $c-font-inv;
    }
}

body > header {
    align-items: center;
    color: $c-font;
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;

    #title {
        color: $c-font;
	font-size: $s-nav-title;
	font-weight: 700;
        text-decoration: underline;
        text-decoration-color: $c-primary;
        text-decoration-thickness: 5px;
    }

    a {
	color: $c-primary;
	text-decoration: none;

	&:hover {
	    text-decoration: underline;
	}
    }

    nav {
	display: inline;

        a {
            text-transform: capitalize;
            padding: 5px 6px;
            display: inline-block;

            &:hover {
                text-decoration: none;

                &:after {
                    width: 100%;
                    background: $c-primary;
                }
            }

            &:after {
                content: "";
                display: block;
                margin: auto;
                height: 2px;
                width: 0;
                background: 0 0;
                transition: width .25s ease, background-color .25s ease;
            }
        }

	ul {
	    margin: 0;
	    padding: 0;
	    float: right;

	    li {
		display: inline;

		&:last-child {
		    padding-right: 0;
		}
	    }
	}
    }

    .show-menu {
	display: none;
	margin-top: 10px;
	padding: 10px;
	text-align: center;
	width: 100%;
        color: $c-primary;
        font-weight: bold;
        text-transform: uppercase;
    }

    input[type=checkbox] {
	display: none
    }

    @media screen and (max-width: 1100px) {
	border-radius: initial;
	flex-direction: column;
        background: $c-bg-main;
        padding-bottom: 0;

	nav {
	    display: none;
	    text-align: center;
	    width: 100%;

	    ul {
		float: unset;

		li {
		    display: block;
		    padding: 0;

		    a {
			display: block;
			padding: 10px 0;
		    }
		}
	    }
	}

	.show-menu {
	    display: block;
	}

	input[type=checkbox]:checked ~ nav {
	    display: block;
	}
    }

    @media (prefers-color-scheme: dark) {
        background: $c-bg-inv;

        a {
	    color: $c-primary-inv;
        }

        #title {
            color: $c-font-inv;
        }

        nav {
            a {
                &:hover {
                    &:after {
                        background: $c-primary-inv;
                    }
                }
            }
        }
    }
}

main {
    background-color: $c-bg-main;
    border: solid $s-border $c-primary;
    border-radius: 25px;
    box-shadow: $p-box-shadow;
    margin: 50px auto 100px;
    max-width: $s-content;
    padding: 20px 60px 80px;

    @media (prefers-color-scheme: dark) {
	background-color: $c-bg-main-inv;
	box-shadow: none;
    }

    article {
	margin: 40px 0;
    }

    h1, h2 {
	font-size: 3rem;
	margin: 20px 0 0;
	padding: 0;
	text-decoration: underline;
	text-decoration-color: $c-primary;
	text-decoration-thickness: 4px;

	@media (prefers-color-scheme: dark) {
	    text-decoration-color: $c-primary-inv;
	}
    }

    h2 {
	font-size: 2rem;
	margin: 40px 0 0;
	text-decoration-thickness: 3px;

	a {
	    color: $c-font;
	    text-decoration-color: $c-primary;

	    @media (prefers-color-scheme: dark) {
		color: $c-font-inv;
		text-decoration-color: $c-primary-inv;
	    }

	    &:hover {
		text-decoration: none;
	    }
	}
    }

    h3 {
        font-size: 1.3rem;
    }

    h4 {
        font-size: 1.1rem;
    }

    figure {
	margin: 0;

	img {
	    width: 100%
	}
    }

    p {
        text-align: justify;
    }

    a {
	color: $c-primary;
	text-decoration: none;

	@media (prefers-color-scheme: dark) {
	    color: $c-primary-inv;
	}

	&:hover {
	    text-decoration: underline;
	}
    }

    code {
	font-family: "JetBrains Mono", monospace;
    }

    .btn {
	border: 1px solid $c-primary;
	padding: 8px 12px;
	border-radius: 20px;
	line-height: 3;
	white-space: nowrap;
        transition: all 0.15s;
        margin-right: 5px;

        &:hover {
            box-shadow: $c-btn-shadow 1px 2px 6px;
            text-decoration: none;

	    @media (prefers-color-scheme: dark) {
	        box-shadow: $c-btn-shadow-inv 1px 2px 6px;
	    }
        }

        @media (prefers-color-scheme: dark) {
            border-color: $c-primary-inv;
        }
    }

    .highlight > pre {
	border-radius: 2px;
	overflow-y: auto;
	padding: 20px;
    }

    .pagination {
	text-align: center;
    }

    .page-item {
	display: inline;
	padding-right: 10px;

	&:last-child {
	    padding-right: 0;
	}
    }

    .comment {
        margin-top: $s-comment-margin-top;
        text-align: center;

        a {
            font-size: 1.1rem;
        }

        p {
            font-size: 0.95rem;
            text-align: center;
        }
    }

    #tags > a, #categories > a {
	font-size: 0.9rem;
	color: #fff;
	padding: 4px 8px;
	border-radius: 20px;
	white-space: nowrap;
        transition: all 0.15s;

        &:hover {
            box-shadow: $c-btn-shadow 1px 1px 4px;
            text-decoration: none;

	    @media (prefers-color-scheme: dark) {
	        box-shadow: $c-btn-shadow-inv 1px 1px 4px;
	    }
        }
    }

    #tags > a {
        color: $c-bg-tag;
        border: 1px solid $c-bg-tag;

        @media (prefers-color-scheme: dark) {
            color: $c-bg-tag-inv;
            border-color: $c-bg-tag-inv;
        }
    }

    #categories > a {
        color: $c-primary;
        border: 1px solid $c-primary;
        margin-right: 3px;

	@media (prefers-color-scheme: dark) {
	    color: $c-primary-inv;
            border: 1px solid $c-primary-inv;
	}
    }

    @media screen and (max-width: 1100px) {
	border: none;
	box-shadow: none;
	margin: 0 auto;
        padding: 0 20px 80px;

        .tagories {
            text-align: left;
        }

        #tags a, #categories a {
            line-height: 35px;
        }
    }
}

footer {
    background-color: $c-font;
    color: $c-font-inv;
    padding: 40px;
    text-align: center;

    a {
	color: $c-font-inv;
	text-decoration: none;

	&:hover {
	    text-decoration: underline;
	}
    }
 }