My-Dings-Css-File

Define Variables

:Root {
    --Dings-Green-Right-Dark:   #257336;
    --Dings-Green-Right:        #11ad33;
    --Dings-Red-Wrong-Dark:     #b00000;
    --Dings-Red-Wrong:      #f52525;
    --Dings-Red-010:        #f46d34;
    --Dings-Blue-040:       #506e9d;
    --Dings-Grey-007:       #191919;
    --Dings-Grey-010:       #444444;
    --Dings-Gray-015:       #616161;
    --Dings-Grey-020:       #a1a1a1;
    --Dings-Grey-022:       #d1d1d1;
    --Dings-Grey-025:       #e7e7e7;
    --Dings-Grey-040:       #f8f8f8;
    --Dings-Grey-900:       #fdfdfd;
    --Dings-Yellow-900:     #f0f0e3;
    --Dings-Yellow-910:     #f2f2ea;
    --Dings-Color-Button:       #fafbfc;
    --Dings-Color-Button-Hoover:    #f3f4f6;
    --Dings-Color-Button-Active:    #edeff2;
    --Dings-Color-Button-Texte: #24292e;
    --Dings-Content-Width:      800px;
    --Dings-Side-Bar-Width:     200px;
}

Top Navigation Bar

Link: https://www.w3schools.com/howto/howto_js_Dings-Top-Nav.asp

.Dings-Top-Nav {
    Overflow: Hidden;
    Background-color: var(--Dings-Grey-010);
    Position: Fixed;
    Top: 0;
    Z-index: 3;
    Transition: Top 0.3s;
    Box-Shadow: 0px 4px 5px rgba(0, 0, 0, 0.4);
    Width: 100%;
}

.Dings-Top-Nav a {
    Float: Left;
    Display: Block;
    Color: #f2f2f2;
    Text-Align: Center;
    Padding: 14px 16px;
    Text-Decoration: None;
    Font-Size: 17px;
}

.Dings-Top-Nav a:hover {
    Background-Color: var(--Dings-Grey-022);
    Color: Black;
}

.Dings-Top-Nav a.active {
    Background-Color: var(--Dings-Red-010);
    Color: White;
}

.Dings-Top-Nav .icon {
    Display: None;
}

Responsive Side Bar

Link: https://www.w3schools.com/howto/howto_css_sidebar_responsive.asp

.Dings-Side-Bar-Hide {
    Display: None;
}

.Dings-Side-Bar {
    Margin: 0;
    Padding: 0;
    Transition: Margin-Top 0.3s;
    Width: var(--Dings-Side-Bar-Width);
    Background-Color: #bbbbbb;
    Margin-Top: 10px;
    Position: fixed;
    Height: 100%;
    Overflow: auto;
    Align-Self: start;
}

.Dings-Side-Bar a {
    Transition: all 100ms ease-in-out;
    Display: block;
    Color: black;
    Padding-right: 16px;
    Padding-top: 4px;
    Padding-bottom: 4px;
    Text-Decoration: none;
    Text-Align: Left;
}

.Dings-Side-Bar a.Heading_1 {
    Padding-Left: 8px;
    Font-Size: 17px;
    Color: Black;
}

.Dings-Side-Bar a.Heading_2 {
    Padding-Left: 14px;
    Font-Size: 16px;
    Color: black;
}

.Dings-Side-Bar a.Heading_3 {
    Padding-Left: 16px;
    Font-Size: 15px;
    Color: #222;
}

.Dings-Side-Bar a.Heading_4 {
    Padding-Left: 20px;
    Font-Size: 14px;
    Color: #333;
}

.Dings-Side-Bar a.Heading_5 {
    Padding-Left: 24px;
    Font-Size: 13px;
    Color: #444;
}

.Dings-Side-Bar a.Heading_6 {
    Padding-Left: 28px;
    Font-Size: 12px;
    Color: #555;
}

.Dings-Side-Bar a.active {
    Background-Color: var(--Dings-Grey-010);
    Color: white;
}

.Dings-Side-Bar a:hover:not(.active) {
    Background-Color: #555;
    Color: white;
}

Scroll-Padding to ensur, that Anchors are accessed right

Link: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html

html {
    Scroll-Padding-Top: 6rem;
}

Content

Content without Side-Bar

div.Dings-Content {
    Margin-Top: 50px;
    Margin-Left: auto;
    Margin-Right: auto;
    Padding-Top: 10px;
    Padding-Bottom: 10px;
    Padding-Left: 16px;
    Padding-Right: 16px;
    Background-Color: var(--Dings-Yellow-910);
    Max-Width: var(--Dings-Content-Width);
}

Content with Side-Bar

div.Dings-Content-With-Side-Bar {
    Margin-Top: 50px;
    Margin-Left: var(--Dings-Side-Bar-Width);
    Padding-Top: 10px;
    Padding-Bottom: 10px;
    Padding-Left: 16px;
    Padding-Right: 16px;
    Max-Width: var(--Dings-Content-Width);
}

Media-Queries for smaller Screens

@media screen and (Max-Width: 600px) {
    /* Dings-Top-Nav */
    .Dings-Top-Nav a:not(:first-child) {
        Display: None;
    }
    .Dings-Top-Nav a.icon {
        Float: Right;
        Display: Block;
    }
    .Dings-Top-Nav.responsive {
        Position: Fixed;
    }
    .Dings-Top-Nav.responsive .icon {
        Position: Absolute;
        Right: 0;
        Top: 0;
    }
    .Dings-Top-Nav.responsive a:not(.Dings-Toggle-Side-Bar) {
        Float: None;
        Display: Block;
        Text-Align: Left;
    }
    /* Side-Bar */
    .Dings-Side-Bar {
        Display: None;
    }
    /* Content */
    div.Dings-Content {
        Margin-Left: 0;
    }
    div.Dings-Content-With-Side-Bar {
        Margin-Left: 0;
    }
}

Definitions for Content

Scrolling

html {
    scroll-behavior: smooth;
}

Document-Body

Body {
    Font-Family: "Times New Roman", Times, serif;
    Background-Color: var(--Dings-Yellow-900);
    Hyphens: Auto;
    Line-Height: 1.3;
    /* Margin: 0 Auto; */
    Overflow-Wrap: Break-Word;
    Text-Align: Justify;
    Text-Rendering: OptimizeLegibility;
    Margin-Left: 0px;
}

Links

A {
    Color: var(--Dings-Grey-007);
}

Blockquote

Blockquote {
    Border-Left: 2px solid var(--Dings-Grey-020);
    Color: var(--Dings-Grey-007);
    Margin: 1em 0 1em 0.8em;
    Padding-Left: 0.7em;
}

FigCaption Link

FigCaption a {
    Color: var(--Dings-Gray-007);
}

FigCaption

FigCaption {
    Font-Style: italic;
    Border: 0;
    Margin: 0;
    Padding: 0;
    Padding-Top: 15px;
    Text-Align: Center;
}

Figure

Figure {
    Border-Radius: 7px;
    Border: 1px Solid var(--Dings-Grey-020);
    Margin: 0;
    Margin-Bottom: 7px;
    Padding-Left: 7px;
    Padding-Right: 7px;
    Padding-Top: 7px;
    Padding-Bottom: 7px;
    Background-Color: var(--Dings-Yellow-910);
}

Header

Header {
    Margin-Bottom: 4em;
    Text-Align: Center;
}

Headings

General Settings

H1, H2, H3, H4, H5, H6 {
    Margin: 0;
    Text-Align: Left;
    Margin-Bottom: 0.5em;
}

H1 {
    Font-Size: 2em;
}

H3 {
    Font-Size: 1.3em;
}

H4 {
    Font-Size: 1.1em;
}

H5, H6 {
    Font-Size: 1.1em;
    Font-Style: italic;
}

H6 is used for Dings-Topics:

H6 {
    Font-Weight: Normal;
    Margin-Top:-7px;
    Margin-Bottom:-3px;
}

Horizontal-Ruler

Hr {
    Background-Color: var(--Dings-Grey-007);
    Border: None;
    Height: 1px;
    Margin: 1em 0;
}

Image

Img {
    Max-Width: 100%;
}

Overlay-Image

.Overlay-Image-Container {
    position: relative;
}

.Overlay-Image-Parent {
    position: relative;
    z-index: 0;
}

.Overlay-Image-Child {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

Ordered-Lists and Unordered-Lists

Ol, Ul {
    Padding-Left: 1.7em;
    Text-Align: Left;
}

Ul {
    List-Style-Type: Circle;
}

New Paragraph

P {
    Margin: 1em 0;
}

Pre-Format and Code

Pre {
    Background-Color: var(--Dings-Grey-040);
    Border: 1px Solid var(--Dings-Grey-022);
    Border-Left: 3px Solid var(--Dings-Red-010);
    Color: var(--Dings-Gray-015);
    Font-Family: Menlo, Monaco, Consolas, 'Lucida Console', Monospace;
    Font-Size: 13.5px;
    Hyphens: None;
    Margin-Bottom: 1.6em;
    Max-Height: 250px;
    Max-Width: 100%;
    Overflow: Auto;
    Padding: 1em 1.5em;
}

Code {
}

Table

Table {
    Border-Collapse: Collapse;
    Font-Variant-Numeric: Lining-Nums Tabular-Nums;
    Margin: 1em 0;
    Overflow-x: Auto;
    Width: 100%;
}

Table Caption {
    Margin-Bottom: 0.75em;
}

Tbody {
    Border-Bottom: 1px Solid var(--Dings-Grey-007);
    Border-Top: 1px Solid var(--Dings-Grey-007);
    Margin-Top: 0.5em;
}

Th {
    Border-Top: 1px Solid var(--Dings-Grey-007);
    Padding: 0.25em 0.5em 0.25em 0.5em;
}

Td {
    Padding: 0.125em 0.5em 0.25em 0.5em;
}

TeX-Table

.TeX-Table {
    Border: none;
    Border-Collapse: unset;
    Width: 100%;
}
.TeX-Tr {
    Border: none;
}

.TeX-Td-Left {
    Border: none;
    Width: 10%;
}

.TeX-Td-Equation {
    Border: none;
    Width: 80%;
}

.TeX-Td-Right {
    Text-Align: Right;
    Border: none;
    Width: 80%;
}

Audio Controls

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 100%;
    height: 50px;
}

Button

Button {
    Font-Family: "Times New Roman", Times, serif;
    Appearance: None;
    Background-Color: var(--Dings-Color-Button);
    Border: none;
    Box-Shadow: rgba(27, 31, 35, 0.04) 0 2px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
    Box-Sizing: border-box;
    Color: var(--Dings-Button-Color-Text);
    Cursor: Pointer;
    Display: Inline-Block;
    Font-Size: 14px;
    Font-Weight: 500;
    Line-Height: 20px;
    List-Style: none;
    Position: Relative;
    Transition: Background-Color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
    User-Select: none;
    -webkit-user-select: none;
    Touch-Action: Manipulation;
    Vertical-Align: Middle;
    White-Space: nowrap;
    Word-Wrap: Break-Word;
}

Button:Hover:Enabled {
    /* Background-Color: var(--Dings-Color-Button-Hover); */
    Text-Decoration: None;
    Transition-Duration: 0.1s;
}

Button:Disabled {
    Border-Color: rgba(27, 31, 35, 0.15);
    Cursor: Default;
}

Button:Active {
    Background-Color: var(--Dings-Color-Button-Active);
    Box-Shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
    Transition: none 0s;
}

Button:Focus {
    Outline: 1px transparent;
}

Button:Before {
    Display: None;
}

Button:-webkit-details-marker {
    Display: none;
}

Iframe

Iframe {
    Width: 100%;
    Aspect-Ratio: 16/9;
}

Auto-Generated: 2023.12.10-17:03:45