Documentation for New Website

$ tree antora-ui-default/src
antora-ui-default/src
├── css
│   ├── base.css
│   ├── body.css
│   ├── breadcrumbs.css
│   ├── doc.css
│   ├── footer.css
│   ├── header.css
│   ├── highlight.css
│   ├── main.css
│   ├── nav.css
│   ├── page-versions.css
│   ├── pagination.css
│   ├── print.css
│   ├── prism.css
│   ├── site.css
│   ├── toc.css
│   ├── toolbar.css
│   ├── typeface-roboto.css
│   ├── typeface-roboto-mono.css
│   ├── vars.css
│   └── vendor
│       └── prism.css
├── helpers
│   ├── and.js
│   ├── detag.js
│   ├── eq.js
│   ├── increment.js
│   ├── ne.js
│   ├── not.js
│   ├── or.js
│   ├── relativize.js
│   └── year.js
├── img
│   ├── back.svg
│   ├── caret.svg
│   ├── chevron.svg
│   ├── favicon.ico
│   ├── home-o.svg
│   ├── home.svg
│   ├── menu.svg
│   └── octicons-16.svg
├── js
│   ├── 01-nav.js
│   ├── 02-on-this-page.js
│   ├── 03-fragment-jumper.js
│   ├── 04-page-versions.js
│   ├── 05-mobile-navbar.js
│   ├── 06-copy-to-clipboard.js
│   ├── 07-breadcrumbs.js
│   └── vendor
│       └── prism.js
├── layouts
│   ├── 404.hbs
│   └── default.hbs
└── partials
    ├── article-404.hbs
    ├── article.hbs
    ├── body.hbs
    ├── breadcrumbs.hbs
    ├── edit-this-page.hbs
    ├── footer-content.hbs
    ├── footer.hbs
    ├── footer-scripts.hbs
    ├── header-content.hbs
    ├── header.hbs
    ├── header-scripts.hbs
    ├── head.hbs
    ├── head-icons.hbs
    ├── head-info.hbs
    ├── head-meta.hbs
    ├── head-prelude.hbs
    ├── head-scripts.hbs
    ├── head-styles.hbs
    ├── head-title.hbs
    ├── main.hbs
    ├── nav-explore.hbs
    ├── nav.hbs
    ├── nav-menu.hbs
    ├── nav-toggle.hbs
    ├── nav-tree.hbs
    ├── page-versions.hbs
    ├── pagination.hbs
    ├── toc.hbs
    └── toolbar.hbs

/* --- ASCIIDOCTOR CLASSIC LOOK OVERRIDES --- */

/* 1. Headings: Sizes and Underlines */
.doc h1.page { font-size: 2.125rem !important; border-bottom: 1px solid #dddddd; padding-bottom: 0.3em; }
.doc h2 { font-size: 1.6875rem !important; border-bottom: 1px solid #dddddd; padding-bottom: 0.3em; margin-top: 1.5rem; }
.doc h3 { font-size: 1.375rem !important; margin-top: 1.25rem; }
.doc h1, .doc h2, .doc h3 { color: #333333; font-weight: 400; }

/* 2. TOC: Blue and Underlined */
.toc .toc-menu a {
    color: #0056b3 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    font-size: 0.9rem !important;
}
.toc .toc-menu a:hover { color: #003d80 !important; }

/* 3. Code Block Neutralization (from previous steps) */
.doc pre.highlight > code {
    overflow-x: visible !important;
    padding: 0 !important;
    background: none !important;
}

/* --- CLASSIC ASCIIDOC TYPOGRAPHY & COLORS --- */

/* 1. Use the classic Serif font stack for headings */
.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
    font-family: "Noto Serif", "Georgia", "Times New Roman", serif !important;
    font-weight: 400 !important;
    text-rendering: optimizeLegibility;
}

/* 2. Classic Asciidoc Heading Colors */
.doc h1.page {
    color: #ba3925 !important; /* The iconic dark red/brown H1 */
}

.doc h2, .doc h3, .doc h4 {
    color: #7a2518 !important; /* Darker mahogany for sub-headers */
    /* Alternatively, use #333333 if you prefer the neutral dark grey */
}

/* 3. Re-adjust the TOC Font to match */
.toc .toc-menu {
    font-family: "Noto Serif", "Georgia", serif;
}

/* --- GLOBAL TYPOGRAPHY OVERRIDE --- */

/* Change the main body text to Noto Serif */
.doc {
    font-family: "Noto Serif", "Georgia", "Times New Roman", serif !important;
    font-size: 1.0625rem; /* Classic Asciidoctor base font size */
    line-height: 1.6;     /* Comfortable reading height for serif fonts */
    color: #333333;       /* Standard Asciidoctor text color */
}

/* Ensure paragraph spacing matches the classic feel */
.doc p {
    margin-bottom: 1.25rem;
}

/* Keep the UI navigation/menus as Sans-Serif (Standard Antora behavior) */
/* If you want the navigation to stay Roboto, don't change anything else. */

/* --- PNG IMAGE HOVER EFFECT (EXCLUDING GIFS) --- */

/* 1. Target only <img> tags where the 'src' attribute ends in .png */
.doc img[src$=".png"] {
    transition: transform 0.5s ease-in-out;
    cursor: zoom-in;
    transform-origin: center center; /* Ensures it scales from the middle */
}

/* 2. Apply scale only to the PNGs on hover */
.doc img[src$=".png"]:hover {
    transform: scale(1.25);
    position: relative;
    z-index: 10;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3); /* Gives the 'popped' effect */
    border-radius: 2px; /* Optional: keeps corners clean while scaling */
}

/* 3. Explicitly ensure .gif files stay static (Optional/Safety) */
.doc img[src$=".gif"]:hover {
    transform: none !important;
    box-shadow: none !important;
}
/* Push the main page content down so the H1 isn't buried */
.doc {
    padding-top: 2rem !important;
}

/* Specifically ensure the H1 title has enough breathing room */
.doc h1.page {
    margin-top: 1.5rem !important;
    padding-top: 0.5rem;
}