nextDESIGN/assets/css/main.scss

418 lines
7.2 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.
*
2022-02-22 17:34:43 +01:00
* 2020-2022 © 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;
$c-bg-category: #4d3c9b;
$c-primary-inv: #ad9bff;
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;
$c-bg-tag-inv: #a49ccc;
2020-05-15 20:17:59 +02:00
$c-font: #333;
2020-09-23 21:19:33 +02:00
$c-font-inv: #fafafa;
2022-02-22 17:34:43 +01:00
$c-btn-font: $c-font;
2020-05-15 20:17:59 +02:00
$c-btn-bg: $c-bg-category;
2022-02-22 17:34:43 +01:00
$c-btn-shadow: #aaa;
$c-btn-shadow-inv: #000;
2020-05-15 20:17:59 +02:00
2021-08-20 21:36:08 +02:00
$s-content: 800px;
2022-02-22 17:34:43 +01:00
$s-nav-title: 36px;
2020-05-15 20:17:59 +02:00
$s-border: 2px;
$s-border-radius: 2px;
$s-comment-margin-top: 60px;
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;
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;
2022-02-22 17:34:43 +01:00
color: $c-font;
2020-05-15 20:17:59 +02:00
display: flex;
justify-content: space-between;
padding: 20px 40px;
#title {
2022-02-22 17:34:43 +01:00
color: $c-font;
2020-05-15 20:17:59 +02:00
font-size: $s-nav-title;
font-weight: 700;
2022-02-22 17:34:43 +01:00
text-decoration: underline;
text-decoration-color: $c-primary;
text-decoration-thickness: 5px;
2020-05-15 20:17:59 +02:00
}
a {
2022-02-22 17:34:43 +01:00
color: $c-primary;
2020-05-15 20:17:59 +02:00
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
nav {
display: inline;
2022-02-22 17:34:43 +01:00
a {
text-transform: capitalize;
padding: 5px 6px;
display: inline-block;
&:hover {
text-decoration: none;
&:after {
width: 100%;
background: $c-primary;
}
}
&:after {
content: "";
display: block;
margin: auto;
height: 2px;
width: 0;
background: 0 0;
transition: width .25s ease, background-color .25s ease;
}
}
2020-05-15 20:17:59 +02:00
ul {
margin: 0;
padding: 0;
float: right;
li {
display: inline;
&:last-child {
padding-right: 0;
}
}
}
}
.show-menu {
display: none;
margin-top: 10px;
padding: 10px;
text-align: center;
width: 100%;
2022-02-22 17:34:43 +01:00
color: $c-primary;
font-weight: bold;
text-transform: uppercase;
@media (prefers-color-scheme: dark) {
color: $c-primary-inv;
}
2020-05-15 20:17:59 +02:00
}
input[type=checkbox] {
display: none
}
2022-02-22 17:34:43 +01:00
@media screen and (max-width: 1100px) {
2020-05-15 20:17:59 +02:00
border-radius: initial;
flex-direction: column;
2022-02-22 17:34:43 +01:00
background: $c-bg-main;
padding-bottom: 0;
2020-05-15 20:17:59 +02:00
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;
}
}
2022-02-22 17:34:43 +01:00
@media (prefers-color-scheme: dark) {
background: $c-bg-inv;
a {
color: $c-primary-inv;
}
2022-02-22 17:34:43 +01:00
#title {
color: $c-font-inv;
text-decoration-color: $c-primary-inv;
2022-02-22 17:34:43 +01:00
}
nav {
a {
&:hover {
&:after {
background: $c-primary-inv;
}
}
}
}
2022-02-22 17:34:43 +01:00
}
2020-05-15 20:17:59 +02:00
}
main {
background-color: $c-bg-main;
border: solid $s-border $c-primary;
2022-02-22 17:34:43 +01:00
border-radius: 25px;
2020-05-15 20:17:59 +02:00
box-shadow: $p-box-shadow;
2022-02-22 17:34:43 +01:00
margin: 50px auto 100px;
2021-08-20 21:36:08 +02:00
max-width: $s-content;
2022-02-22 17:34:43 +01:00
padding: 20px 60px 80px;
2020-05-15 20:17:59 +02:00
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%;
border-radius: 20px;
2020-05-15 20:17:59 +02:00
}
}
2021-08-19 10:44:36 +02:00
p {
text-align: justify;
}
2020-05-15 20:17:59 +02:00
a {
color: $c-primary;
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 {
border: 1px solid $c-primary;
2022-02-22 17:34:43 +01:00
padding: 8px 12px;
2020-05-15 20:17:59 +02:00
border-radius: 20px;
line-height: 3;
white-space: nowrap;
2022-02-22 17:34:43 +01:00
transition: all 0.15s;
margin-right: 5px;
2023-05-22 18:41:12 +02:00
text-decoration: none;
2022-02-22 17:34:43 +01:00
&:hover {
box-shadow: $c-btn-shadow 1px 2px 6px;
text-decoration: none;
@media (prefers-color-scheme: dark) {
box-shadow: $c-btn-shadow-inv 1px 2px 6px;
}
}
@media (prefers-color-scheme: dark) {
border-color: $c-primary-inv;
}
2020-05-15 20:17:59 +02:00
}
.highlight > pre {
border-radius: 20px;
2020-05-15 20:17:59 +02:00
overflow-y: auto;
padding: 20px;
}
.pagination {
text-align: center;
}
.page-item {
display: inline;
padding-right: 10px;
&:last-child {
padding-right: 0;
}
}
.comment {
margin-top: $s-comment-margin-top;
text-align: center;
a {
font-size: 1.1rem;
}
2021-08-20 11:11:34 +02:00
p {
font-size: 0.95rem;
text-align: center;
}
2020-05-15 20:17:59 +02:00
}
#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;
2022-02-22 17:34:43 +01:00
transition: all 0.15s;
2023-05-22 18:41:12 +02:00
text-decoration: none;
2022-02-22 17:34:43 +01:00
&:hover {
box-shadow: $c-btn-shadow 1px 1px 4px;
text-decoration: none;
@media (prefers-color-scheme: dark) {
box-shadow: $c-btn-shadow-inv 1px 1px 4px;
}
}
2020-05-15 20:17:59 +02:00
}
#tags > a {
2022-02-22 17:34:43 +01:00
color: $c-bg-tag;
border: 1px solid $c-bg-tag;
@media (prefers-color-scheme: dark) {
color: $c-bg-tag-inv;
border-color: $c-bg-tag-inv;
}
2020-05-15 20:17:59 +02:00
}
#categories > a {
2022-02-22 17:34:43 +01:00
color: $c-primary;
border: 1px solid $c-primary;
margin-right: 3px;
2020-09-23 21:19:33 +02:00
@media (prefers-color-scheme: dark) {
2022-02-22 17:34:43 +01:00
color: $c-primary-inv;
border: 1px solid $c-primary-inv;
2020-09-23 21:19:33 +02:00
}
2020-05-15 20:17:59 +02:00
}
2022-02-22 17:34:43 +01:00
@media screen and (max-width: 1100px) {
2020-05-15 20:17:59 +02:00
border: none;
box-shadow: none;
margin: 0 auto;
2022-02-22 17:34:43 +01:00
padding: 0 20px 80px;
.tagories {
text-align: left;
}
#tags a, #categories a {
line-height: 35px;
}
2020-05-15 20:17:59 +02:00
}
}
footer {
2022-02-22 17:34:43 +01:00
background-color: $c-font;
color: $c-font-inv;
2020-05-15 20:17:59 +02:00
padding: 40px;
text-align: center;
a {
2022-02-22 17:34:43 +01:00
color: $c-font-inv;
2020-05-15 20:17:59 +02:00
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
2022-02-22 17:34:43 +01:00
}