Initial commit

assets/css/main.scss

@@ -0,0 +1,252 @@
+/* nextDESIGN v9
+ *
+ * nextDESIGN is a personal web design for mmk2410.org.
+ * The current version (v9) is focused in simplicity and minimalism.
+ *
+ * 2020 © Marcel Kapfer <opensource@mmk2410.org>
+ * Licensed under the MIT License
+ */
+
+/***************
+ * Variables
+ ***************/
+
+$c-bg: #fafafa;
+$c-bg-main: #fff;
+$c-primary: #4d3c9b;
+$c-bg-category: #4d3c9b;
+$c-bg-tag: #8171c8;
+$c-font: #333;
+$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;
+
+$p-box-shadow: 1px 1px 5px #888;
+
+body {
+    background-color: $c-bg;
+    color: $c-font;
+    font-family: "Raleway", sans-serif;
+    line-height: 1.5;
+}
+
+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;
+
+    article {
+	margin: 40px 0;
+    }
+
+    h1, h2 {
+	font-size: 3em;
+	margin: 20px 0 0;
+	padding: 0;
+	text-decoration: underline;
+	text-decoration-color: $c-primary;
+	text-decoration-thickness: 4px;
+    }
+
+    h2 {
+	font-size: 2em;
+	margin: 40px 0 0;
+	text-decoration-thickness: 3px;
+
+	a {
+	    color: $c-font;
+	    text-decoration-color: $c-primary;
+
+	    &:hover {
+		text-decoration: none;
+	    }
+	}
+    }
+
+    figure {
+	margin: 0;
+
+	img {
+	    width: 100%
+	}
+    }
+
+    a {
+	color: $c-primary;
+	text-decoration: none;
+
+	&:hover {
+	    text-decoration: underline;
+	}
+    }
+
+    code {
+	font-family: "Hermit", 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-notice {
+	margin-top: 50px;
+	font-size: 14px;
+    }
+
+    #tags > a, #categories > a {
+	font-size: 14px;
+	color: #fff;
+	padding: 4px 8px;
+	border-radius: 20px;
+	white-space: nowrap;
+    }
+
+    #tags > a {
+	background: $c-bg-tag;
+    }
+
+    #categories > a {
+	background: $c-bg-category;
+    }
+
+    @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;
+	}
+    }
+}