Hello everyone,
My name is Alankrit dabral.I have done my Bachelor’s degree in Computer Science and Engineering from Graphic Era Hill University, followed by a six-month full-stack development internship where I built and maintained web applications.
This summer, I aim to achieve one of the goals I set during my college years: to actively contribute to an open-source project and further strengthen my skills through real-world collaboration.
1 Like
I’ve been working on implementing dark theme for the website modernization and would appreciate feedback from the community.
Changes Pr )
Implemented a consistent dark theme across the website
Created dedicated icons and SVG assets optimized for dark mode
Introduced a _light and _dark naming convention for images to enable theme-based switching
Generated dark-mode SVGs using the SVG Gobbler extension in VS Code
Produced dark-themed images using Google Gemini, followed by refinement in GIMP to improve styling and remove watermarks
Compressed images to > 500kb using pngquant
Added and adjusted CSS rules to ensure consistent rendering across components
You can view the current state of the website here: Website Preview
Fix remaining Pages/images to dark theme
Ensure consistent styling across the entire website
Fix broken or inconsistent CSS files
Resolve styling issues that existed prior to the dark theme implementation
Reduced dependency on custom CSS by improving inline styling.
Upgrade Bootstrap css version and later move to Tailwind css for more performance and flexibility as i mentioned in my GSOC proposal.
I would really appreciate any feedback on:
Visual consistency and readability
Any UI issues or regressions
Suggestions for improving the dark theme
Thank you!
Updates
Issues Opened
#885 - Improvement: Prevent full-page reload when clicking active navigation links
Pull request Opened:
#31-Avoid reloading the current page from active navigation links
BootStrap Migration:-
master ← upgrade-bootstrap
opened 04:38PM - 19 Apr 26 UTC
# Bootstrap 5 Migration Progress Report
## Summary
The migration from Bootst… rap 3.x to Bootstrap 5.3.8 is currently in progress. The core infrastructure and the **Navbar** component have been successfully modernized while maintaining the original preCICE visual identity.
## Completed Tasks
### 1. Framework & Infrastructure
- **Version Upgrade**: Site now uses Bootstrap 5.3.8 (via CDN in `head.html`).
- **State Classes**: Systematically replaced `.navbar-inverse` with `.navbar`, `.open` with `.show`, and `.navbar-toggle` with `.navbar-toggler` across all CSS files.
- **Toggler Modernization**: Updated `.navbar-toggle` to `.navbar-toggler`.
### 2. Navbar Migration (`_includes/topnav.html` & CSS)
- **Responsiveness**: Changed breakpoint from `lg` to `xl` (`navbar-expand-xl`) to ensure the menu collapses correctly on screens up to 1200px.
- **Visual Consistency**:
- Restored the classic "three-bar" (icon-bar) menu button for the toggler.
- Updated toggler padding to `9px 10px` to match the previous size.
- Grouped social icons into a single line under the search box when collapsed using `d-flex flex-row`.
- Set `.navbar` padding to `0 !important` and margin to `0 0 20px 0`.
- Increased social icon sizes to `30px` using specific overrides in `customstyles-precice.css`.
- **Functionality**:
- Fixed a critical bug where `display: none !important` in legacy CSS was preventing the menu from opening.
- Updated dropdowns to use BS5 `data-bs-toggle="dropdown"`.
- Removed redundant `role` and `aria` attributes to let BS5 manage state natively.
### 3. Sidebar Migration (`_includes/sidebar.html`, `_includes/sidebar_recursive.html` & JS)
- **Modernization**: Replaced `navgoco` jQuery plugin with a custom recursive Bootstrap 5 `collapse` implementation.
- **Recursive Logic**:
- Introduced `sidebar_recursive.html` to handle arbitrary nesting depths (Level 1 to 4+).
- Implemented a robust `any_active` check to ensure the correct path is expanded on page load.
- Used unique ID generation and nested `div` containers to ensure perfect accordion behavior across all levels.
- **Highlighting & Logic**:
- **Level 1 (Open)**: Blue (`#347DBE`).
- **Level 2, 3, 4 (Open)**: Orange (`#ED762C`).
- **Hover (All Levels)**: Orange (`#ED762C`).
- **Active Page (Leaf or Collapsed)**: Gray (`#8D8D8D`).
- Added JS to ensure that clicking a leaf link automatically collapses open siblings, maintaining "exclusive focus."
- **Cleanup**:
- Decoupled sidebar from the legacy `.nav` class to prevent CSS conflicts.
- Removed all `navgoco` dependencies.
### 4. Landing Page Updates (`content/index.html`)
- **Full Card Migration**: Converted all remaining `.panel` elements to `.card` elements in `content/index.html`.
- **Styling**:
- Added `.card-precice` and `.card-header-precice` to `css/customstyles-precice.css` to maintain preCICE aesthetics.
- Set `min-height: 4em` and `display: flex` on `.card-header-precice` to ensure headers are equal height and vertically centered.
- Removed `padding-top` from `.card-precice` and negative `margin-bottom` from `.card-header-precice` to ensure the blue header correctly "sticks" to the top of the card.
- Added `.card-primary` to `css/theme-precice.css` to match the brand color.
- Updated `css/landing-page.css` to support `.card-primary` for the adapter section.
- **News Section**:
- Updated `js/news-collect.js` to use BS5 classes and flex utilities (`h-100`, `d-flex flex-column`).
- Fixed an issue where news cards had different heights by using flexbox and removing conflicting custom CSS in `landing-page.css`.
- **Logowall Section**:
- Migrated the nested grid structure to a more compact `d-flex flex-wrap` layout for better visual density.
- **Grid & Layout**:
- Replaced `img-responsive` with `img-fluid`.
- Replaced `center-block` with `mx-auto d-block`.
- Updated `col-md-offset-1` to `offset-md-1` in various documentation files.
- Added `mb-3` margin between USP images and their respective cards.
- **Documentation**: Migrated panels to cards in:
- `content/docs/fundamentals/fundamentals-literature-guide.md`
- `content/docs/adapters/fenics/adapter-fenics.md`
- `content/community/workshops/precice-workshop-organizing.md`
### 5. Global Attribute Update
- **Attribute Migration**: Systematically replaced legacy Bootstrap data attributes with BS5-compliant versions project-wide.
- `data-toggle` -> `data-bs-toggle`
- `data-target` -> `data-bs-target`
- `data-placement` -> `data-bs-placement`
- **Scope**: Applied to all `.html`, `.md`, `.js`, and `.css` files in `content/`, `_includes/`, `_layouts/`, `js/`, and `css/`.
- **Verification**: Confirmed that all tooltips, tabs, and collapses in documentation and tutorials now use the modern BS5 naming convention.
## Modified Files
- `_includes/topnav.html`
- `_includes/sidebar.html`
- `_layouts/default.html`
- `_includes/head.html`
- `content/index.html`
- `js/customscripts.js`
- `js/news-collect.js`
- `css/customstyles.css`
- `css/customstyles-precice.css`
- `css/theme-precice.css`
- `css/theme-blue.css`
- `css/theme-green.css`
- `css/landing-page.css`
- `css/printstyles.css`
- `content/docs/fundamentals/fundamentals-literature-guide.md`
- `content/docs/adapters/fenics/adapter-fenics.md`
- `content/community/workshops/precice-workshop-organizing.md`
- `content/docs/couple-your-code/step-by-step/*.md` (multiple files)
## Known Issues / Next Steps
1. **CSS Cleanup**: Systematic removal or renaming of legacy `.panel` selectors in `css/` files once conversion is fully verified.
2. **Logo fix on navbar and transparent style fix on sidebar
1 Like