The design for mmk2410.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

289 lines
4.3 KiB

/* 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-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;
$p-box-shadow: 1px 1px 5px #888;
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-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: 3em;
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: 2em;
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;
}
}
}
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: "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;
@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;
}
}
}