💄 Update publish style sheet for mmk2410.org
publish
Details
publish
Details
The updated style sheet reflects the lastest version of nextDESGIN as it is also currently used on mmk2410.org
This commit is contained in:
parent
3ee3cc8f6d
commit
0d52c0a776
GPG Key ID:
CADE6F0C09F21B09
|
|
@ -4,7 +4,7 @@
|
|||
* 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-2022 © Marcel Kapfer <opensource@mmk2410.org>
|
||||
* Licensed under the MIT License
|
||||
*/
|
||||
html {
|
||||
|
|
@ -26,18 +26,21 @@ body {
|
|||
|
||||
body > #preamble {
|
||||
align-items: center;
|
||||
color: #f4f4f4;
|
||||
color: #333;
|
||||
display: flex;
|
||||
background-color: #4d3c9b;
|
||||
justify-content: space-between;
|
||||
padding: 20px 40px;
|
||||
}
|
||||
body > #preamble #title {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #4d3c9b;
|
||||
text-decoration-thickness: 5px;
|
||||
}
|
||||
body > #preamble a {
|
||||
color: #f4f4f4;
|
||||
color: #4d3c9b;
|
||||
text-decoration: none;
|
||||
}
|
||||
body > #preamble a:hover {
|
||||
|
|
@ -46,6 +49,27 @@ body > #preamble a:hover {
|
|||
body > #preamble nav {
|
||||
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 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -53,7 +77,6 @@ body > #preamble nav ul {
|
|||
}
|
||||
body > #preamble nav ul li {
|
||||
display: inline;
|
||||
padding-right: 10px;
|
||||
}
|
||||
body > #preamble nav ul li:last-child {
|
||||
padding-right: 0;
|
||||
|
|
@ -64,14 +87,24 @@ body > #preamble .show-menu {
|
|||
padding: 10px;
|
||||
text-align: center;
|
||||
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] {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 1000px) {
|
||||
@media screen and (max-width: 1100px) {
|
||||
body > #preamble {
|
||||
border-radius: initial;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
body > #preamble nav {
|
||||
display: none;
|
||||
|
|
@ -96,14 +129,30 @@ body > #preamble input[type=checkbox] {
|
|||
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 {
|
||||
background-color: #fff;
|
||||
border: solid 2px #4d3c9b;
|
||||
border-radius: 25px;
|
||||
box-shadow: 1px 1px 5px #888;
|
||||
margin: 100px auto;
|
||||
margin: 50px auto 100px;
|
||||
max-width: 800px;
|
||||
padding: 40px;
|
||||
padding: 20px 60px 80px;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#content {
|
||||
|
|
@ -114,7 +163,7 @@ body > #preamble input[type=checkbox] {
|
|||
#content article {
|
||||
margin: 40px 0;
|
||||
}
|
||||
#content h1, #content h2, #content h3 {
|
||||
#content h1, #content h2 {
|
||||
font-size: 3rem;
|
||||
margin: 20px 0 0;
|
||||
padding: 0;
|
||||
|
|
@ -123,8 +172,8 @@ body > #preamble input[type=checkbox] {
|
|||
text-decoration-thickness: 4px;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#content h1, #content h2, #content h3 {
|
||||
text-decoration-color: #755bf0;
|
||||
#content h1, #content h2 {
|
||||
text-decoration-color: #ad9bff;
|
||||
}
|
||||
}
|
||||
#content h2 {
|
||||
|
|
@ -139,7 +188,7 @@ body > #preamble input[type=checkbox] {
|
|||
@media (prefers-color-scheme: dark) {
|
||||
#content h2 a {
|
||||
color: #fafafa;
|
||||
text-decoration-color: #755bf0;
|
||||
text-decoration-color: #ad9bff;
|
||||
}
|
||||
}
|
||||
#content h2 a:hover {
|
||||
|
|
@ -147,21 +196,6 @@ body > #preamble input[type=checkbox] {
|
|||
}
|
||||
#content h3 {
|
||||
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 {
|
||||
font-size: 1.1rem;
|
||||
|
|
@ -171,6 +205,7 @@ body > #preamble input[type=checkbox] {
|
|||
}
|
||||
#content figure img {
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
#content p {
|
||||
text-align: justify;
|
||||
|
|
@ -178,21 +213,10 @@ body > #preamble input[type=checkbox] {
|
|||
#content a {
|
||||
color: #4d3c9b;
|
||||
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) {
|
||||
#content a {
|
||||
color: #755bf0;
|
||||
color: #ad9bff;
|
||||
}
|
||||
}
|
||||
#content a:hover {
|
||||
|
|
@ -205,15 +229,32 @@ code, pre {
|
|||
font-family: "JetBrains Mono", monospace;
|
||||
}
|
||||
#content .btn {
|
||||
color: #f4f4f4;
|
||||
background: #4d3c9b;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #4d3c9b;
|
||||
padding: 8px 12px;
|
||||
border-radius: 20px;
|
||||
line-height: 3;
|
||||
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 {
|
||||
border-radius: 2px;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -244,39 +285,61 @@ code, pre {
|
|||
padding: 4px 8px;
|
||||
border-radius: 20px;
|
||||
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 {
|
||||
background: #8171c8;
|
||||
color: #8171c8;
|
||||
border: 1px solid #8171c8;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#content #tags > a {
|
||||
background: #4d3c9b;
|
||||
color: #a49ccc;
|
||||
border-color: #a49ccc;
|
||||
}
|
||||
}
|
||||
#content #categories > a {
|
||||
background: #4d3c9b;
|
||||
color: #4d3c9b;
|
||||
border: 1px solid #4d3c9b;
|
||||
margin-right: 3px;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
#content #categories > a {
|
||||
background: #755bf0;
|
||||
color: #ad9bff;
|
||||
border: 1px solid #ad9bff;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1000px) {
|
||||
@media screen and (max-width: 1100px) {
|
||||
#content {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px 80px;
|
||||
}
|
||||
#content .tagories {
|
||||
text-align: left;
|
||||
}
|
||||
#content #tags a, #content #categories a {
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
#postamble {
|
||||
background-color: #4d3c9b;
|
||||
color: #f4f4f4;
|
||||
background-color: #333;
|
||||
color: #fafafa;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
#postamble a {
|
||||
color: #f4f4f4;
|
||||
color: #fafafa;
|
||||
text-decoration: none;
|
||||
}
|
||||
#postamble a:hover {
|
||||
|
|
|
|||
Loading…
Reference in New Issue