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-2021 © 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-primary-inv: #755bf0;
$c-bg-category: #4d3c9b;
$c-bg-category-inv: #755bf0;
$c-bg-tag: #8171c8;
$c-bg-tag-inv: #4d3c9b;
$c-font: #333;
$c-font-inv: #fafafa;
$c-nav-font: #f4f4f4;
$c-btn-font: $c-nav-font;
$c-btn-bg: $c-bg-category;

$s-content: 1000px;
$s-nav-title: 24px;
$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;
    text-align: justify;

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

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

    #title {
	font-size: $s-nav-title;
	font-weight: 700;
    }

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

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

    nav {
	display: inline;

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

	    li {
		display: inline;
		padding-right: 10px;

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

    .show-menu {
	display: none;
	margin-top: 10px;
	padding: 10px;
	text-align: center;
	width: 100%;
    }

    input[type=checkbox] {
	display: none
    }

    @media screen and (max-width: 1000px) {
	border-radius: initial;
	flex-direction: column;

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

main {
    background-color: $c-bg-main;
    border: solid $s-border $c-primary;
    box-shadow: $p-box-shadow;
    margin: 100px auto;
    max-width: 1000px;
    padding: 40px;

    @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%
	}
    }

    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 {
	color: $c-btn-font;
	background: $c-btn-bg;
	padding: 8px 16px;
	border-radius: 20px;
	line-height: 3;
	white-space: nowrap;
    }

    .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 {
        font-size: 0.95rem;
        margin-top: $s-comment-margin-top;
        text-align: center;

        a {
            font-size: 1.1rem;
        }
    }

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

    #tags > a {
	background: $c-bg-tag;

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

    #categories > a {
	background: $c-bg-category;

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

    @media screen and (max-width: 1000px) {
	border: none;
	box-shadow: none;
	margin: 0 auto;
    }
}

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

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

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