nextDESIGN/assets/css/main.scss

304 lines
4.5 KiB
SCSS
Raw Normal View History

2020-05-15 20:17:59 +02:00
/* 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>
2020-05-15 20:17:59 +02:00
* Licensed under the MIT License
*/
/***************
* Variables
***************/
$c-bg: #fafafa;
2020-09-23 21:19:33 +02:00
$c-bg-inv: #333;
2020-05-15 20:17:59 +02:00
$c-bg-main: #fff;
2020-09-23 21:19:33 +02:00
$c-bg-main-inv: #222;
2020-05-15 20:17:59 +02:00
$c-primary: #4d3c9b;
2020-09-23 21:19:33 +02:00
$c-primary-inv: #755bf0;
2020-05-15 20:17:59 +02:00
$c-bg-category: #4d3c9b;
2020-09-23 21:19:33 +02:00
$c-bg-category-inv: #755bf0;
2020-05-15 20:17:59 +02:00
$c-bg-tag: #8171c8;
2020-09-23 21:19:33 +02:00
$c-bg-tag-inv: #4d3c9b;
2020-05-15 20:17:59 +02:00
$c-font: #333;
2020-09-23 21:19:33 +02:00
$c-font-inv: #fafafa;
2020-05-15 20:17:59 +02:00
$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;
2021-08-18 22:32:56 +02:00
$s-font-size: 18px;
2020-05-15 20:17:59 +02:00
$p-box-shadow: 1px 1px 5px #888;
2021-08-18 22:32:56 +02:00
html {
font-size: $s-font-size;
}
2020-05-15 20:17:59 +02:00
body {
background-color: $c-bg;
color: $c-font;
font-family: "Raleway", sans-serif;
line-height: 1.5;
2021-08-18 22:33:38 +02:00
text-align: justify;
2020-09-23 21:19:33 +02:00
@media (prefers-color-scheme: dark) {
background-color: $c-bg-inv;
color: $c-font-inv;
}
2020-05-15 20:17:59 +02:00
}
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;
2020-09-23 21:19:33 +02:00
@media (prefers-color-scheme: dark) {
background-color: $c-bg-main-inv;
box-shadow: none;
}
2020-05-15 20:17:59 +02:00
article {
margin: 40px 0;
}
h1, h2 {
2021-08-18 22:32:56 +02:00
font-size: 3rem;
2020-05-15 20:17:59 +02:00
margin: 20px 0 0;
padding: 0;
text-decoration: underline;
text-decoration-color: $c-primary;
text-decoration-thickness: 4px;
2020-09-23 21:19:33 +02:00
@media (prefers-color-scheme: dark) {
text-decoration-color: $c-primary-inv;
}
2020-05-15 20:17:59 +02:00
}
h2 {
2021-08-18 22:32:56 +02:00
font-size: 2rem;
2020-05-15 20:17:59 +02:00
margin: 40px 0 0;
text-decoration-thickness: 3px;
a {
color: $c-font;
text-decoration-color: $c-primary;
2020-09-23 21:19:33 +02:00
@media (prefers-color-scheme: dark) {
color: $c-font-inv;
text-decoration-color: $c-primary-inv;
}
2020-05-15 20:17:59 +02:00
&:hover {
text-decoration: none;
}
}
}
2021-08-18 22:32:56 +02:00
h3 {
font-size: 1.3rem;
}
h4 {
font-size: 1.1rem;
}
2020-05-15 20:17:59 +02:00
figure {
margin: 0;
img {
width: 100%
}
}
a {
color: $c-primary;
text-decoration: none;
2020-09-23 21:19:33 +02:00
@media (prefers-color-scheme: dark) {
color: $c-primary-inv;
}
2020-05-15 20:17:59 +02:00
&:hover {
text-decoration: underline;
}
}
code {
font-family: "JetBrains Mono", monospace;
2020-05-15 20:17:59 +02:00
}
.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 {
2021-08-18 22:32:56 +02:00
font-size: 0.9rem;
2020-05-15 20:17:59 +02:00
color: #fff;
padding: 4px 8px;
border-radius: 20px;
white-space: nowrap;
}
#tags > a {
background: $c-bg-tag;
2020-09-23 21:19:33 +02:00
@media (prefers-color-scheme: dark) {
background: $c-bg-tag-inv;
}
2020-05-15 20:17:59 +02:00
}
#categories > a {
background: $c-bg-category;
2020-09-23 21:19:33 +02:00
@media (prefers-color-scheme: dark) {
background: $c-bg-category-inv;
}
2020-05-15 20:17:59 +02:00
}
@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;
}
}
}