/* nextDESIGN v9 * * nextDESIGN is a personal web design for mmk2410.org. * The current version (v9) is focused in simplicity and minimalism. * * 2020 © Marcel Kapfer * 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; } } }