Added multilingual and theme switching support, fixed multiple
positioning issues, added articles to sidebar
This commit is contained in:
+338
-28
@@ -1,4 +1,4 @@
|
||||
@import url("pygments.css");
|
||||
@import url("pygments.css");
|
||||
@import url("pygments-dark.css") (prefers-color-theme: dark);
|
||||
|
||||
@font-face {
|
||||
@@ -50,7 +50,7 @@
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
:root:not([data-theme]) {
|
||||
--main-bg-color: hsl(0, 5%, 10%);
|
||||
--main-text-color: hsl(210, 20%, 98%);
|
||||
--main-link-color: hsl(0, 100%, 65%);
|
||||
@@ -59,6 +59,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--main-bg-color: hsl(0, 5%, 10%);
|
||||
--main-text-color: hsl(210, 20%, 98%);
|
||||
--main-link-color: hsl(0, 100%, 65%);
|
||||
--table-border-color: hsl(0, 0%, 15%);
|
||||
--table-head-border-color: hsl(0, 0%, 30%);
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
--main-bg-color: hsl(210, 20%, 98%);
|
||||
--main-text-color: hsl(0, 5%, 10%);
|
||||
--main-link-color: hsl(0, 100%, 35%);
|
||||
--table-border-color: hsl(0, 0%, 85%);
|
||||
--table-head-border-color: hsl(0, 0%, 70%);
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -92,6 +108,37 @@ body {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0;
|
||||
margin: -1.75rem -0.5rem 0 0;
|
||||
}
|
||||
|
||||
.header-delimiter {
|
||||
color: var(--table-border-color);
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.lang-switcher {
|
||||
position: static;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
@@ -165,25 +212,48 @@ ul, ol {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.menuitems {
|
||||
list-style: none;
|
||||
margin: 3rem 0 0 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#theme-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
color: var(--main-link-color);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
#theme-toggle:hover,
|
||||
#theme-toggle:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#theme-toggle:focus-visible {
|
||||
outline: 2px solid hsl(220, 90%, 52%);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
#banner, #contentinfo {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#categories {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
#categories:before {
|
||||
content: "Categories:";
|
||||
}
|
||||
|
||||
#contentinfo {
|
||||
flex-shrink: 0;
|
||||
margin-top: 40px
|
||||
}
|
||||
|
||||
|
||||
#container {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
@@ -201,21 +271,95 @@ ul, ol {
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
#pages:before {
|
||||
content: "Pages:";
|
||||
}
|
||||
|
||||
#recent-articles:before {
|
||||
content: "Recent Articles:";
|
||||
}
|
||||
|
||||
#categories:before {
|
||||
content: "Categories:";
|
||||
}
|
||||
|
||||
#translations {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#translations:before {
|
||||
content: "Translations: ";
|
||||
}
|
||||
|
||||
html[lang="de"] {
|
||||
#pages:before {
|
||||
content: "Seiten:";
|
||||
}
|
||||
|
||||
#recent-articles:before {
|
||||
content: "Neueste Artikel:";
|
||||
}
|
||||
|
||||
#categories:before {
|
||||
content: "Kategorien:";
|
||||
}
|
||||
|
||||
#translations:before {
|
||||
content: "Übersetzungen:";
|
||||
}
|
||||
}
|
||||
|
||||
.menuitems {
|
||||
list-style: none;
|
||||
margin: 3rem 0 0 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.menuitems li {
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.menuitems:before {
|
||||
display: block;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.8rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.menuitems a {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.3;
|
||||
text-decoration: none;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.menuitems a:hover,
|
||||
.menuitems a:focus-visible {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/*#post-list > li:first-child > article > header > h2,
|
||||
main h2:first-child{
|
||||
margin-top: 0;
|
||||
}*/
|
||||
|
||||
#post-list li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.post-info {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -234,22 +378,87 @@ footer.post-info {
|
||||
}
|
||||
|
||||
/*
|
||||
* Links
|
||||
* ToC
|
||||
*/
|
||||
|
||||
.toc a,
|
||||
.entry-content a.headerlink {
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toc {
|
||||
padding: 1rem 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.toc ul {
|
||||
list-style: none;
|
||||
padding-left: 1.25rem;
|
||||
margin: 0.25rem 0;
|
||||
counter-reset: toc-item;
|
||||
}
|
||||
|
||||
.toc > ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.toc li {
|
||||
counter-increment: toc-item;
|
||||
}
|
||||
|
||||
.toc li::before {
|
||||
content: counters(toc-item, '.') '. ';
|
||||
padding-right: 0.5rem;
|
||||
color: var(--main-link-color);
|
||||
}
|
||||
|
||||
.toc a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.toc a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*
|
||||
* Headings
|
||||
*/
|
||||
|
||||
.entry-content {
|
||||
counter-reset: entrylinks 0 figures 0 tables 0 listings 0;
|
||||
counter-reset: entrylinks 0 figures 0 tables 0 listings 0 h2counter 0;
|
||||
}
|
||||
|
||||
.entry-content a {
|
||||
counter-increment: entrylinks;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
outline: none;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
.entry-content a:after {
|
||||
|
||||
.entry-content a.headerlink {
|
||||
opacity: 0;
|
||||
margin-left: 0.5rem;
|
||||
text-decoration: none;
|
||||
color: var(--main-link-color);
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
#
|
||||
.entry-content h1:hover a.headerlink,
|
||||
.entry-content h2:hover a.headerlink,
|
||||
.entry-content h3:hover a.headerlink,
|
||||
.entry-content h4:hover a.headerlink,
|
||||
.entry-content h5:hover a.headerlink,
|
||||
.entry-content h6:hover a.headerlink {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.entry-content a:not(.toc a):not(.headerlink) {
|
||||
counter-increment: entrylinks;
|
||||
}
|
||||
|
||||
.entry-content a:not(.toc a):not(.headerlink):after {
|
||||
content: '[' counter(entrylinks) ']';
|
||||
margin-left: 2px;
|
||||
color: var(--main-link-color);
|
||||
@@ -257,6 +466,36 @@ footer.post-info {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Heading numbering
|
||||
*/
|
||||
|
||||
.entry-content h2 {
|
||||
counter-reset: h3counter;
|
||||
counter-increment: h2counter;
|
||||
}
|
||||
|
||||
.entry-content h3 {
|
||||
counter-reset: h4counter;
|
||||
counter-increment: h3counter;
|
||||
}
|
||||
|
||||
.entry-content h4 {
|
||||
counter-increment: h4counter;
|
||||
}
|
||||
|
||||
.entry-content h2::before {
|
||||
content: counter(h2counter) '. ';
|
||||
}
|
||||
|
||||
.entry-content h3::before {
|
||||
content: counter(h2counter) '.' counter(h3counter) '. ';
|
||||
}
|
||||
|
||||
.entry-content h4::before {
|
||||
content: counter(h2counter) '.' counter(h3counter) '.' counter(h4counter) '. ';
|
||||
}
|
||||
|
||||
/*
|
||||
* Lists
|
||||
*/
|
||||
@@ -281,6 +520,7 @@ footer.post-info {
|
||||
max-width: 80%;
|
||||
margin: 0 auto 0 auto;
|
||||
padding: 1rem;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.entry-content img~em{
|
||||
@@ -294,6 +534,89 @@ footer.post-info {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*
|
||||
* Lightbox
|
||||
*/
|
||||
|
||||
.lightbox-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
z-index: 1000;
|
||||
cursor: zoom-out;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lightbox-overlay.active {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.lightbox-overlay .lightbox-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 95vw;
|
||||
max-height: 95vh;
|
||||
}
|
||||
|
||||
.lightbox-overlay img {
|
||||
max-width: 95vw;
|
||||
max-height: 85vh;
|
||||
object-fit: contain;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.lightbox-overlay #lightbox-caption {
|
||||
color: #111;
|
||||
text-align: center;
|
||||
margin-top: 0.75rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.lightbox-overlay #lightbox-caption .fig-number {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Fallback: Systemeinstellung, nur falls kein manueller Override gesetzt ist */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme]) .lightbox-overlay {
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
:root:not([data-theme]) .lightbox-overlay img {
|
||||
background: transparent;
|
||||
}
|
||||
:root:not([data-theme]) .lightbox-overlay #lightbox-caption {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Manueller Override, gewinnt immer gegen Media-Query */
|
||||
:root[data-theme="dark"] .lightbox-overlay {
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
:root[data-theme="dark"] .lightbox-overlay img {
|
||||
background: transparent;
|
||||
}
|
||||
:root[data-theme="dark"] .lightbox-overlay #lightbox-caption {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] .lightbox-overlay {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
:root[data-theme="light"] .lightbox-overlay img {
|
||||
background: #fff;
|
||||
}
|
||||
:root[data-theme="light"] .lightbox-overlay #lightbox-caption {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
/*
|
||||
* Tables
|
||||
*/
|
||||
@@ -405,19 +728,6 @@ footer.post-info {
|
||||
|
||||
/* This is old stuff, inherited from LaTeX.css, probably unused */
|
||||
|
||||
/* Nested ordered list for ToC */
|
||||
.toc ol {
|
||||
counter-reset: item;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
.toc li {
|
||||
display: block;
|
||||
}
|
||||
.toc li:before {
|
||||
content: counters(item, '.') ' ';
|
||||
counter-increment: item;
|
||||
padding-right: 0.85rem;
|
||||
}
|
||||
|
||||
/* Make footnote text smaller and left align it (looks bad with long URLs) */
|
||||
.footnotes p {
|
||||
|
||||
Reference in New Issue
Block a user