projectforge.scss| Commit | Date | Message |
|---|---|---|
ac75fabf3 | 2021-08-10 | Github pages migrated to Asciidoc |
site/_sass/theme/ — a SEPARATE directory from _sass/uikit/theme/. It's imported AFTER all 63 UIkit theme files, giving it maximum specificity to override any UIkit default with ProjectForge's brand identity.p a, li a, table td a {
color: #BF4040; // ProjectForge red — NOT UIkit's default blue
}Every link in paragraphs, list items, and table cells gets #BF4040 — a muted red. This is THE ProjectForge brand color for links. UIkit's default link color is its primary blue ($global-primary-background ≈ #1e87f0). This single rule is what makes the ProjectForge site visually distinct from any other UIkit site. The specificity via element+context selectors (p a, not just a) ensures it only affects content links, not navigation or button links.
.uk-navbar-nav > li > a {
font-weight: 700; // Bold nav items — stronger than UIkit default
}
.uk-navbar-dropdown {
padding: 10px 20px; // Overrides theme's 25px padding
top: 60px !important; // FORCED position — overrides JS-calculated position
}font-weight: 700 — makes nav items bolder than UIkit's normal weight. Combined with the theme's UPPERCASE transform, this creates a very assertive navigation style.
top: 60px !important — the !important is notable. UIkit's Drop component calculates the dropdown position via JavaScript and sets it inline. The !important overrides the inline style to force a consistent 60px gap. Without this, dropdowns might appear too close or far from the nav depending on viewport. This is a "fighting JavaScript with CSS" pattern.
table {
width: auto; // Tables don't stretch full width
th { background: #f2f2f2; } // Light gray header — clearer than theme's muted
th:first-child, td:first-child { padding-left: 10px; }
}width: auto — prevents tables from stretching to 100% of their container. On documentation pages with narrow content (comparison tables, parameter lists), full-width tables waste space. Auto-width lets tables be only as wide as their content.
pre {
color: #b90505; // Dark red code text
font-size: .775rem; // Smaller than body text
&.highlight {
padding: 15px; background: #f4f4f4; // Highlighted code background
}
}
.listingblock {
pre code table { margin: 0; } // AsciiDoc code listing — remove margins
table.linenotable td { margin: 0; padding: 0; } // Line number table — compact
}#b90505 code color — dark red for code text. An unusual choice (most sites use dark gray/black). This ties code visually to the brand's red palette.
.listingblock rules — these fix AsciiDoc's rendered code blocks. AsciiDoc generates nested table > pre > code structures with default margins that create excessive whitespace. These rules collapse those margins. The table.linenotable selector targets AsciiDoc's line-numbered code blocks specifically.
#pf-faq .uk-section {
padding-top: 0; padding-bottom: 20px;
.uk-accordion li a.uk-accordion-title {
border-bottom: 1px solid #ebecee !important; // Subtle border between FAQ items
font-weight: 600; padding: 10px; font-size: 16px; // Larger clickable area
}
> :nth-child(n+2) { margin-top: 10px; } // Space between items
}FAQ-specific styling scoped under #pf-faq. Each accordion title gets a light border separator, bold weight, and generous padding for touch-friendliness. The !important on border overrides UIkit's accordion default.
The CSS compilation order that makes these overrides work:
variables.scss (#4091) — core UIkit variablesvariables-theme.scss (#4092) — ProjectForge theme overrides_import.scss (#4052) — UIkit component themingprojectforge.scss (this file) — ProjectForge BRAND overrides (LAST)Because this file loads last, its rules have higher specificity than any UIkit style loaded before it. This is the "brand override layer" — everything above is framework, this file is identity.
Unlike the 63 UIkit theme files (which mostly define variables and leave hooks commented), this file contains actual CSS rules — 110 lines of explicit overrides organized by visual area: