Skip to main content

Custom CSS

Das Custom CSS fuer dieses Wiki:

<style>
/* 1. Define Local Variable Fonts */
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    src: url('/fonts/atkinson-next-vf.woff2') format('woff2-variations'),
         url('/fonts/atkinson-next-vf.woff2') format('woff2');
    font-weight: 200 800;
    font-style: oblique 0deg 20deg;
}

@font-face {
    font-family: 'Atkinson Hyperlegible Mono';
    src: url('/fonts/atkinson-mono-vf.woff2') format('woff2-variations'),
         url('/fonts/atkinson-mono-vf.woff2') format('woff2');
    font-weight: 200 800;
    font-style: oblique 0deg 20deg;
}

/* 2. Global Application & Golden Ratio Base (20px) */
body, h1, h2, h3, h4, h5, h6, p, .page-content {
    font-family: 'Atkinson Hyperlegible Next', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-content {
    max-width: 850px;
    margin: 0 auto;
}

.page-content, 
.page-content p, 
.page-content li, 
.page-content td {
    font-size: 20px !important;
    line-height: 1.618em !important; /* Pure Golden Ratio Line Height */
}

/* Keep paragraphs spaced for high legibility */
.page-content p {
    margin-bottom: 1.5rem;
}

/* Tighten the spacing between list items (li) */
.page-content li {
    margin-bottom: 0.8rem;
}
  
/* Add a bit of space between a list and the next paragraph */
.page-content ul, .page-content ol {
    margin-bottom: 1.5rem !important;
}

/* Handle nested lists so they don't get double-margins */
.page-content li > ul, 
.page-content li > ol {
    margin-bottom: 0 !important;
    margin-top: 0.4rem !important;
}
  
/* 3. Golden Scale Headings (Base 20px) */
.page-content h1 { 
    font-size: 52px !important; 
    line-height: 1.1 !important; 
    font-weight: 800; 
    margin-top: 2rem;
}
.page-content h2 { 
    font-size: 32px !important; 
    line-height: 1.2 !important; 
    font-weight: 700; 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
    padding-bottom: 10px;
}
.page-content h3 { 
    font-size: 26px !important; 
    font-weight: 700; 
}

/* 4. Atkinson Mono for Code */
code, pre, .CodeMirror, .hljs {
    font-family: 'Atkinson Hyperlegible Mono', monospace !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    font-weight: 400;
    background: rgba(0,0,0,0.04) !important;
}

/* 5. Custom Footer Message */
footer::after {
    content: "If buying isn't owning, piracy isn't stealing. Birds aren't real.";
    display: block;
    width: 100%;
    color: #888;
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    font-family: 'Atkinson Hyperlegible Mono', monospace;
}

/* Dark Mode Adjustment for Footer & Code */
body.dark-mode::after { color: #555; }
body.dark-mode code, body.dark-mode pre { background: rgba(255,255,255,0.05) !important; }
</style>
Back to top