mmk2410/dot-emacs
1
0
Fork 0
Code Issues Pull requests Activity Actions

💄 Update publish style sheet for mmk2410.org

Browse source 
The updated style sheet reflects the lastest version of nextDESGIN as
it is also currently used on mmk2410.org
This commit is contained in:
Marcel Kapfer 2023-04-11 19:01:42 +02:00
parent 3ee3cc8f6d
commit 0d52c0a776
Signed by: mmk2410
GPG key ID: CADE6F0C09F21B09
1 changed files with 115 additions and 52 deletions

167
publish/assets/layout.css
View file

@ -4,7 +4,7 @@
* nextDESIGN is a personal web design for mmk2410.org. * nextDESIGN is a personal web design for mmk2410.org.
* The current version (v9) is focused in simplicity and minimalism. * The current version (v9) is focused in simplicity and minimalism.
* *
* 2020-2021 © Marcel Kapfer <opensource@mmk2410.org> * 2020-2022 © Marcel Kapfer <opensource@mmk2410.org>
* Licensed under the MIT License * Licensed under the MIT License
*/ */
html { html {
@ -26,18 +26,21 @@ body {
body > #preamble { body > #preamble {
align-items: center; align-items: center;
color: #f4f4f4; color: #333;
display: flex; display: flex;
background-color: #4d3c9b;
justify-content: space-between; justify-content: space-between;
padding: 20px 40px; padding: 20px 40px;
} }
body > #preamble #title { body > #preamble #title {
font-size: 24px; color: #333;
font-size: 36px;
font-weight: 700; font-weight: 700;
text-decoration: underline;
text-decoration-color: #4d3c9b;
text-decoration-thickness: 5px;
} }
body > #preamble a { body > #preamble a {
color: #f4f4f4; color: #4d3c9b;
text-decoration: none; text-decoration: none;
} }
body > #preamble a:hover { body > #preamble a:hover {
@ -46,6 +49,27 @@ body > #preamble a:hover {
body > #preamble nav { body > #preamble nav {
display: inline; display: inline;
} }
body > #preamble nav a {
text-transform: capitalize;
padding: 5px 6px;
display: inline-block;
}
body > #preamble nav a:hover {
text-decoration: none;
}
body > #preamble nav a:hover:after {
width: 100%;
background: #4d3c9b;
}
body > #preamble nav a:after {
content: "";
display: block;
margin: auto;
height: 2px;
width: 0;
background: 0 0;
transition: width 0.25s ease, background-color 0.25s ease;
}
body > #preamble nav ul { body > #preamble nav ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -53,7 +77,6 @@ body > #preamble nav ul {
} }
body > #preamble nav ul li { body > #preamble nav ul li {
display: inline; display: inline;
padding-right: 10px;
} }
body > #preamble nav ul li:last-child { body > #preamble nav ul li:last-child {
padding-right: 0; padding-right: 0;
@ -64,14 +87,24 @@ body > #preamble .show-menu {
padding: 10px; padding: 10px;
text-align: center; text-align: center;
width: 100%; width: 100%;
color: #4d3c9b;
font-weight: bold;
text-transform: uppercase;
}
@media (prefers-color-scheme: dark) {
body > #preamble .show-menu {
color: #ad9bff;
}
} }
body > #preamble input[type=checkbox] { body > #preamble input[type=checkbox] {
display: none; display: none;
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1100px) {
body > #preamble { body > #preamble {
border-radius: initial; border-radius: initial;
flex-direction: column; flex-direction: column;
background: #fff;
padding-bottom: 0;
} }
body > #preamble nav { body > #preamble nav {
display: none; display: none;
@ -96,14 +129,30 @@ body > #preamble input[type=checkbox] {
display: block; display: block;
} }
} }
@media (prefers-color-scheme: dark) {
body > #preamble {
background: #333;
}
body > #preamble a {
color: #ad9bff;
}
body > #preamble #title {
color: #fafafa;
text-decoration-color: #ad9bff;
}
body > #preamble nav a:hover:after {
background: #ad9bff;
}
}
#content { #content {
background-color: #fff; background-color: #fff;
border: solid 2px #4d3c9b; border: solid 2px #4d3c9b;
border-radius: 25px;
box-shadow: 1px 1px 5px #888; box-shadow: 1px 1px 5px #888;
margin: 100px auto; margin: 50px auto 100px;
max-width: 800px; max-width: 800px;
padding: 40px; padding: 20px 60px 80px;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
#content { #content {
@ -114,7 +163,7 @@ body > #preamble input[type=checkbox] {
#content article { #content article {
margin: 40px 0; margin: 40px 0;
} }
#content h1, #content h2, #content h3 { #content h1, #content h2 {
font-size: 3rem; font-size: 3rem;
margin: 20px 0 0; margin: 20px 0 0;
padding: 0; padding: 0;
@ -123,8 +172,8 @@ body > #preamble input[type=checkbox] {
text-decoration-thickness: 4px; text-decoration-thickness: 4px;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
#content h1, #content h2, #content h3 { #content h1, #content h2 {
text-decoration-color: #755bf0; text-decoration-color: #ad9bff;
} }
} }
#content h2 { #content h2 {
@ -139,7 +188,7 @@ body > #preamble input[type=checkbox] {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
#content h2 a { #content h2 a {
color: #fafafa; color: #fafafa;
text-decoration-color: #755bf0; text-decoration-color: #ad9bff;
} }
} }
#content h2 a:hover { #content h2 a:hover {
@ -147,21 +196,6 @@ body > #preamble input[type=checkbox] {
} }
#content h3 { #content h3 {
font-size: 1.3rem; font-size: 1.3rem;
margin: 40px 0 0;
text-decoration-thickness: 3px;
}
#content h3 a {
color: #333;
text-decoration-color: #4d3c9b;
}
@media (prefers-color-scheme: dark) {
#content h3 a {
color: #fafafa;
text-decoration-color: #755bf0;
}
}
#content h3 a:hover {
text-decoration: none;
} }
#content h4 { #content h4 {
font-size: 1.1rem; font-size: 1.1rem;
@ -171,6 +205,7 @@ body > #preamble input[type=checkbox] {
} }
#content figure img { #content figure img {
width: 100%; width: 100%;
border-radius: 20px;
} }
#content p { #content p {
text-align: justify; text-align: justify;
@ -178,21 +213,10 @@ body > #preamble input[type=checkbox] {
#content a { #content a {
color: #4d3c9b; color: #4d3c9b;
text-decoration: none; text-decoration: none;
/* BEGIN: From https://css-tricks.com/better-line-breaks-for-long-urls/ */
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
hyphens: auto;
/* END: From https://css-tricks.com/better-line-breaks-for-long-urls/ */
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
#content a { #content a {
color: #755bf0; color: #ad9bff;
} }
} }
#content a:hover { #content a:hover {
@ -205,15 +229,32 @@ code, pre {
font-family: "JetBrains Mono", monospace; font-family: "JetBrains Mono", monospace;
} }
#content .btn { #content .btn {
color: #f4f4f4; border: 1px solid #4d3c9b;
background: #4d3c9b; padding: 8px 12px;
padding: 8px 16px;
border-radius: 20px; border-radius: 20px;
line-height: 3; line-height: 3;
white-space: nowrap; white-space: nowrap;
transition: all 0.15s;
margin-right: 5px;
}
#content .btn:hover {
box-shadow: #aaa 1px 2px 6px;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
#content .btn:hover {
box-shadow: #000 1px 2px 6px;
}
}
@media (prefers-color-scheme: dark) {
#content .btn {
border-color: #ad9bff;
}
}
#content .org-src-container {
border-radius: 20px;
} }
#content .org-src-container > pre { #content .org-src-container > pre {
border-radius: 2px;
overflow-y: auto; overflow-y: auto;
padding: 20px; padding: 20px;
} }
@ -244,39 +285,61 @@ code, pre {
padding: 4px 8px; padding: 4px 8px;
border-radius: 20px; border-radius: 20px;
white-space: nowrap; white-space: nowrap;
transition: all 0.15s;
}
#content #tags > a:hover, #content #categories > a:hover {
box-shadow: #aaa 1px 1px 4px;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
#content #tags > a:hover, #content #categories > a:hover {
box-shadow: #000 1px 1px 4px;
}
} }
#content #tags > a { #content #tags > a {
background: #8171c8; color: #8171c8;
border: 1px solid #8171c8;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
#content #tags > a { #content #tags > a {
background: #4d3c9b; color: #a49ccc;
border-color: #a49ccc;
} }
} }
#content #categories > a { #content #categories > a {
background: #4d3c9b; color: #4d3c9b;
border: 1px solid #4d3c9b;
margin-right: 3px;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
#content #categories > a { #content #categories > a {
background: #755bf0; color: #ad9bff;
border: 1px solid #ad9bff;
} }
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1100px) {
#content { #content {
border: none; border: none;
box-shadow: none; box-shadow: none;
margin: 0 auto; margin: 0 auto;
padding: 0 20px 80px;
}
#content .tagories {
text-align: left;
}
#content #tags a, #content #categories a {
line-height: 35px;
} }
} }
#postamble { #postamble {
background-color: #4d3c9b; background-color: #333;
color: #f4f4f4; color: #fafafa;
padding: 40px; padding: 40px;
text-align: center; text-align: center;
} }
#postamble a { #postamble a {
color: #f4f4f4; color: #fafafa;
text-decoration: none; text-decoration: none;
} }
#postamble a:hover { #postamble a:hover {