/******************************************************************************
Article Widget
Dieterle Programmierung
https://www.dieterle-programmierung.de
Version : 2.0.0 (Dark theme â matches the site background #3c3f43)
Central stylesheet for all articles (DE / EN).
Screen : dark theme, sits directly on the site background.
Print : light "paper" theme for the PDF export (see @media print).
******************************************************************************/
/******************************************************************************
Design Tokens (aligned with project-widget.css)
******************************************************************************/
.Article {
--Accent : #FFC439; /* brand gold */
--Link : #FFC439;
--LinkHover : #ffd669;
--Heading : #ffffff;
--Text : #e6e8eb; /* comfortable light text */
--TextMuted : #aab0b7;
--Surface : #3c3f43; /* = page background */
--SurfaceAlt : #474b50; /* elevated boxes / TOC */
--SurfaceAlt2 : #40444a;
--Line : #565b61;
/* Code (dark) */
--CodeBg : #282c34;
--CodeBar : #21252b;
--CodeText : #e6e6e6;
--CodeComment : #6a9955; /* green comments */
--CodeString : #98c379;
--CodeNumber : #d19a66;
--CodeType : #56b6c2;
--CodeInline : #f0b86e;
/* Callouts */
--Note : #4aa3ff;
--Tip : #4cc38a;
--Warn : #ffca45;
max-width : 880px;
margin : 30px auto;
padding : 0 18px;
color : var(--Text);
font-family : "Segoe UI", Arial, sans-serif;
font-size : 17px;
line-height : 1.65;
}
/******************************************************************************
Headings
******************************************************************************/
.Article h1 {
font-size : 32px;
line-height : 1.2;
font-weight : 700;
margin : 0 0 8px;
color : var(--Heading);
}
.Article h2 {
font-size : 24px;
font-weight : 700;
margin : 44px 0 14px;
padding-left : 14px;
border-left : 5px solid var(--Accent);
color : var(--Heading);
scroll-margin-top : 20px;
}
.Article h3 {
font-size : 19px;
font-weight : 600;
margin : 30px 0 10px;
color : #d7dbdf;
scroll-margin-top : 20px;
}
.Article p {
margin : 0 0 16px;
}
.Article a {
color : var(--Link);
text-decoration : none;
border-bottom : 1px solid rgba(255,196,57,.35);
}
.Article a:hover {
color : var(--LinkHover);
border-bottom-color : var(--LinkHover);
}
.Article ul,
.Article ol {
margin : 0 0 16px;
padding : 0 0 0 24px;
}
.Article li {
margin : 6px 0;
}
.Article strong {
color : #f4f6f8;
}
.Article hr {
border : 0;
border-top : 1px solid var(--Line);
margin : 34px 0;
}
/******************************************************************************
Meta Bar (author / date / reading time / views)
******************************************************************************/
.ArticleMeta {
display : flex;
flex-wrap : wrap;
align-items : center;
gap : 18px;
margin : 6px 0 26px;
padding-bottom : 18px;
border-bottom : 1px solid var(--Line);
color : var(--TextMuted);
font-size : 14px;
}
.ArticleMeta span {
display : inline-flex;
align-items : center;
gap : 6px;
}
.ArticleMeta b {
color : var(--Text);
}
/******************************************************************************
Language Switcher
******************************************************************************/
.ArticleLang {
display : flex;
gap : 8px;
margin-left : auto;
}
.ArticleLang a {
border : 1px solid var(--Line);
border-radius : 6px;
padding : 3px 9px;
font-size : 13px;
color : var(--TextMuted);
background : transparent;
}
.ArticleLang a.Active,
.ArticleLang a:hover {
border-color : var(--Accent);
color : var(--Accent);
background : rgba(255,196,57,.14);
}
/******************************************************************************
Table of Contents
******************************************************************************/
.ArticleToc {
background : var(--SurfaceAlt);
border : 1px solid var(--Line);
border-radius : 10px;
padding : 18px 22px;
margin : 0 0 30px;
}
.ArticleToc-Title {
font-weight : 700;
font-size : 14px;
text-transform : uppercase;
letter-spacing : .5px;
color : var(--TextMuted);
margin-bottom : 10px;
}
.ArticleToc ul {
list-style : none;
margin : 0;
padding : 0;
}
.ArticleToc li {
margin : 4px 0;
}
.ArticleToc li.Sub {
padding-left : 16px;
font-size : 15px;
}
.ArticleToc a {
border : 0;
color : var(--Accent);
}
.ArticleToc a:hover {
color : var(--LinkHover);
}
/******************************************************************************
Callout Boxes
******************************************************************************/
.ArticleNote,
.ArticleTip,
.ArticleWarning {
position : relative;
margin : 22px 0;
padding : 16px 18px 16px 52px;
border-radius : 10px;
border-left : 5px solid;
color : var(--Text);
line-height : 1.55;
}
.ArticleNote { border-left-color : var(--Note); background : rgba(74,163,255,.12); }
.ArticleTip { border-left-color : var(--Tip); background : rgba(76,195,138,.12); }
.ArticleWarning { border-left-color : var(--Warn); background : rgba(255,196,69,.12); }
.ArticleNote strong { color : #9ecbff; }
.ArticleTip strong { color : #84e0b0; }
.ArticleWarning strong { color : #ffd98a; }
.ArticleNote::before,
.ArticleTip::before,
.ArticleWarning::before {
position : absolute;
left : 16px;
top : 15px;
font-size : 20px;
line-height : 1;
}
.ArticleNote::before { content : "\2139\FE0F"; } /* âšī¸ */
.ArticleTip::before { content : "\1F4A1"; } /* đĄ */
.ArticleWarning::before { content : "\26A0\FE0F"; } /* â ī¸ */
.ArticleNote > :last-child,
.ArticleTip > :last-child,
.ArticleWarning > :last-child {
margin-bottom : 0;
}
/******************************************************************************
Inline Code
******************************************************************************/
.Article :not(pre) > code {
background : var(--SurfaceAlt2);
border : 1px solid var(--Line);
border-radius : 5px;
padding : 2px 6px;
font-family : "Cascadia Code", Consolas, "Courier New", monospace;
font-size : .88em;
color : var(--CodeInline);
}
/******************************************************************************
Code Blocks
(JS wraps in .ArticleCodeWrap and adds the bar + copy button)
******************************************************************************/
.ArticleCodeWrap {
margin : 22px 0;
border-radius : 10px;
overflow : hidden;
box-shadow : 0 4px 14px rgba(0,0,0,.30);
border : 1px solid #1b1e24;
}
.ArticleCodeBar {
display : flex;
align-items : center;
justify-content : space-between;
background : var(--CodeBar);
padding : 8px 14px;
font-family : "Segoe UI", Arial, sans-serif;
}
.ArticleCodeLang {
font-size : 12px;
letter-spacing : .5px;
text-transform : uppercase;
color : #9aa0aa;
font-weight : 600;
}
.ArticleCopy {
display : inline-flex;
align-items : center;
gap : 6px;
background : transparent;
border : 1px solid #3a3f47;
border-radius : 6px;
color : #cfd3da;
font-size : 12px;
padding : 4px 10px;
cursor : pointer;
transition : .2s;
}
.ArticleCopy:hover {
border-color : var(--Accent);
color : var(--Accent);
}
.ArticleCopy.Copied {
border-color : var(--Tip);
color : var(--Tip);
}
.Article pre {
margin : 0;
background : var(--CodeBg);
color : var(--CodeText);
padding : 16px 18px;
overflow-x : auto;
font-family : "Cascadia Code", Consolas, "Courier New", monospace;
font-size : 14.5px;
line-height : 1.55;
tab-size : 4;
}
.Article pre code {
background : none;
border : 0;
padding : 0;
color : inherit;
font-size : inherit;
}
/* VBA syntax tokens (added by article.js) */
.Tok-Keyword { color : var(--Accent); font-weight : 600; }
.Tok-String { color : var(--CodeString); }
.Tok-Comment { color : var(--CodeComment); font-style : italic; }
.Tok-Number { color : var(--CodeNumber); }
.Tok-Type { color : var(--CodeType); }
/******************************************************************************
Tables
(JS wraps in .ArticleTableWrap for horizontal scroll)
******************************************************************************/
.ArticleTableWrap {
overflow-x : auto;
margin : 22px 0;
}
.Article table {
width : 100%;
border-collapse : collapse;
font-size : 15px;
border : 1px solid var(--Line);
border-radius : 8px;
overflow : hidden;
}
.Article th {
background : #2f3236;
color : #ffffff;
text-align : left;
padding : 11px 14px;
font-weight : 600;
}
.Article td {
padding : 10px 14px;
border-top : 1px solid var(--Line);
vertical-align : top;
color : var(--Text);
}
.Article tbody tr:nth-child(even) {
background : rgba(255,255,255,.035);
}
/******************************************************************************
Figures / Images
******************************************************************************/
.Article figure {
margin : 26px 0;
text-align : center;
}
.Article img {
max-width : 100%;
height : auto;
border-radius : 8px;
border : 1px solid var(--Line);
}
.Article figcaption {
margin-top : 8px;
font-size : 14px;
color : var(--TextMuted);
}
/******************************************************************************
Lead / Intro
******************************************************************************/
.ArticleLead {
font-size : 19px;
color : #c4c9cf;
margin : 0 0 26px;
}
/******************************************************************************
Download Intro (info line above the ProjectWidget)
******************************************************************************/
.ArticleDownload {
margin : 40px 0 0;
}
.ArticleDownloadLead {
font-size : 17px;
color : var(--Text);
margin : 0 0 10px;
}
.ArticleDownloadMeta {
font-size : 15px;
color : var(--TextMuted);
margin : 4px 0;
}
.ArticleDownloadMeta strong {
color : var(--Text);
}
/******************************************************************************
Responsive
******************************************************************************/
@media (max-width:600px) {
.Article {
font-size : 16px;
}
.Article h1 { font-size : 26px; }
.Article h2 { font-size : 21px; }
.ArticleLang {
margin-left : 0;
width : 100%;
}
}
/******************************************************************************
Print (light "paper" theme for the PDF export via headless Edge)
******************************************************************************/
@page {
margin : 18mm 16mm;
}
@media print {
.Article {
max-width : none;
margin : 0;
padding : 0;
font-size : 11pt;
color : #1a1c1e;
}
.Article h1 { color : #000; }
.Article h2 { color : #000; }
.Article h3 { color : #111; }
.Article strong { color : #000; }
.ArticleLead { color : #333; }
.ArticleMeta {
color : #555;
border-bottom-color : #ccc;
}
.ArticleMeta b { color : #000; }
.ArticleLang,
.ArticleCopy {
display : none !important;
}
.Article a {
color : #000;
border-bottom : 0;
}
.Article :not(pre) > code {
background : #f0f0f0;
border : 1px solid #ddd;
color : #b2560d;
}
.ArticleToc {
background : #f6f7f9;
border : 1px solid #ddd;
}
.ArticleToc-Title { color : #555; }
.ArticleToc a { color : #0a58a6; }
.ArticleNote,
.ArticleTip,
.ArticleWarning {
color : #1a1c1e;
}
.ArticleNote { background : #eef5fc; }
.ArticleTip { background : #edf8f1; }
.ArticleWarning { background : #fff6e6; }
.ArticleNote strong,
.ArticleTip strong,
.ArticleWarning strong {
color : #000;
}
.Article th {
background : #eaeaea;
color : #000;
}
.Article td {
border-top-color : #ddd;
color : #000;
}
.Article tbody tr:nth-child(even) {
background : #f6f7f9;
}
.Article figcaption { color : #555; }
.ArticleDownloadLead { color : #1a1c1e; }
.ArticleDownloadMeta { color : #555; }
.ArticleDownloadMeta strong { color : #000; }
/* Keep code blocks dark â they read as intentional code panels in print */
.Article h2,
.Article h3 {
break-after : avoid;
}
.ArticleCodeWrap {
box-shadow : none;
break-inside : avoid;
}
.ArticleNote,
.ArticleTip,
.ArticleWarning,
.Article figure,
.Article table {
break-inside : avoid;
}
}
/******************************************************************************
End of File
******************************************************************************/