[
https://issues.apache.org/jira/browse/FINERACT-2503?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=18063001#comment-18063001
]
Ali Mahmood edited comment on FINERACT-2503 at 3/4/26 7:09 PM:
---------------------------------------------------------------
You're right, and I apologize for the incorrect claim. Hugo Pipes can compile
SCSS natively using *resources.Get | toCSS* — no extra dependency, no new
tooling, it's built into Hugo.
This directly solves the !important concern as well: instead of fighting
Materialize's specificity with *!important*, SCSS nesting lets me write
selectors like #contribute .chip .material-icons.left { float: none; } which
naturally outranks Materialize's .chip i { float: left; } without forcing
anything.
My plan for the next push:
1. Move *fineract.css* → site-src/assets/css/fineract.scss
2. Replace remaining *!important* overrides with properly nested
high-specificity selectors
3. Update Hugo layout templates to compile SCSS via resources.Get | toCSS |
resources.Fingerprint (which also replaces the manual ?v= cache-bust hack)
4. Keep PR #54 (colors/contrast only) and PR #55 (layout/nav only)
non-overlapping
was (Author: JIRAUSER312525):
You're right, and I apologize for the incorrect claim. Hugo Pipes can compile
SCSS natively using resources.Get | toCSS — no extra dependency, no new
tooling, it's built into Hugo.
This directly solves the !important concern as well: instead of fighting
Materialize's specificity with !important, SCSS nesting lets me write selectors
like #contribute .chip .material-icons.left { float: none; } which naturally
outranks Materialize's .chip i { float: left; } without forcing anything.
My plan for the next push:
Move fineract.css → site-src/assets/css/fineract.scss
Replace remaining !important overrides with properly nested high-specificity
selectors
Update Hugo layout templates to compile SCSS via resources.Get | toCSS |
resources.Fingerprint (which also replaces the manual ?v= cache-bust hack)
Keep PR #54 (colors/contrast only) and PR #55 (layout/nav only) non-overlapping
> [fineract-site] Fix WCAG 2.1 AA contrast violations and improve mobile
> responsiveness
> -------------------------------------------------------------------------------------
>
> Key: FINERACT-2503
> URL: https://issues.apache.org/jira/browse/FINERACT-2503
> Project: Apache Fineract
> Issue Type: Improvement
> Reporter: Ali Mahmood
> Assignee: Adam Monsen
> Priority: Minor
> Labels: accessibility, fineract-site, wcag
> Attachments: AIM Score.png, fineract footer.png, fineract.png
>
>
> Here is the quick summary of what fixes I made regarding both WCAG Contrast
> and responsivness across all devices :
> *Responsiveness Fixes* :
> *Fixed the Sidebar:* I fixed the responsiveness of sidebar with following
> changes:
> 1. Added closing button
> 2. Fixed alignment of both logo and organization name
> 3. Added proper padding for all sidebar options
> *Cleaned Up the Header:* I centered the logo and moved the menu button to the
> left. I also removed the cluttered links from the top bar to make it look
> much cleaner on mobile.
> *Uniform Boxes & Spacing*: I made all the feature boxes the same size so they
> look balanced and reduced the extra "empty space" between sections to make
> the page scroll better.
> *Better Mobile View:* Fixed overlapping text and icons so the site works
> perfectly on small phone screens (like 375px).
> *Contrast Fixes :*
> *Switched to Light Theme Footer:* I moved the footer/reference section to a
> light theme with dark teal text. This fixed the remaining accessibility
> issues—we now have 0 contrast errors!
> *Switched to Light Theme Navbar :* I moved the navbar section to light theme
> so it contrasts perfectly with apache fineract's original theme and looks
> good.
> Improved AIM Score : Before contrast fixes ,AIM Score was *1.7*. Now the AIM
> score is *"9.8"*
> Related: FINERACT-2484
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
