hmk/pelican-latex
1
0
Fork 0
Code Issues Actions Activity

Added multilingual and theme switching support, fixed multiple

Browse Source 
positioning issues, added articles to sidebar
This commit is contained in:
haemka
2026-08-13 12:41:05 +02:00
parent bd7bf51563
commit 0faae602fa
4 changed files with 471 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/site.css
+338 -28
View File
@@ -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 {