Conversation
✅ Deploy Preview for rubycon ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request implements a major UI refactoring for the Rubycon.it website, transitioning to a 'Roman' theme with a Wine Red and Cream color palette. The changes include a new Figma-based design system, updated typography using the Cinzel font, and a complete redesign of the Header, Footer, Hero, and various section includes. The feedback focuses on improving the maintainability of this new design system by centralizing hardcoded colors into the Tailwind configuration and SCSS variables, as well as removing redundant inline styles that conflict with global CSS rules.
rubycon.it/_includes/hero.html
Outdated
| </div> | ||
| <div id="home" class="relative text-white flex items-center bg-cover bg-center" style="min-height: 80vh; background-image: url('{{ "/assets/images/ambasciatori.jpg" | relative_url }}');"> | ||
| <!-- Wine Red Overlay --> | ||
| <div class="absolute inset-0 bg-[#802126] opacity-85"></div> |
There was a problem hiding this comment.
Throughout the refactored files, theme colors are hardcoded using Tailwind's arbitrary value syntax (e.g., bg-[#802126], text-[#fcf7e8]). This undermines the goal of a centralized design system and makes future theme adjustments difficult.
For better maintainability, these colors should be defined in your tailwind.config.js file and then used as standard utility classes.
For example, in tailwind.config.js:
module.exports = {
theme: {
extend: {
colors: {
'wine-red': '#802126',
'cream': '#fcf7e8',
},
},
},
}Then you can use classes like bg-wine-red and text-cream across the site. This is a recurring pattern throughout the pull request.
rubycon.it/_includes/about.html
Outdated
| <p class="text-gray-600">{{ card.description }}</p> | ||
| <div class="grid md:grid-cols-2 gap-x-16 gap-y-12"> | ||
| <div data-aos="fade-up"> | ||
| <h3 class="text-2xl font-bold mb-4" style="color: #802126;">Talks that go deep</h3> |
There was a problem hiding this comment.
The inline style style="color: #802126;" is redundant here. Your updated style.scss already applies the correct color to all <h3> elements globally:
// assets/css/style.scss:25
h1, h2, h3, h4, h5, h6 {
font-family: "Cinzel", serif;
color: variables.$ruby-wine-red; // This is #802126
...
}Removing these unnecessary inline styles will make the code cleaner and rely on the central stylesheet as intended. This pattern of redundant inline styles appears on h3 and other elements in several files (footer.html, schedule.html, etc.).
<h3 class="text-2xl font-bold mb-4">Talks that go deep</h3>
| color: variables.$text-color-dark; | ||
| // Alternate sections | ||
| section:nth-of-type(even) { | ||
| background-color: #f5f0e1; // Slightly darker cream for depth |
There was a problem hiding this comment.
This file contains several hardcoded colors that should use the new SCSS variables for consistency.
For example:
- This line uses
#f5f0e1. This color should be defined as a variable invariables.scss(e.g.,$ruby-cream-dark) and used here. - Other lines (e.g., 49, 102, 110) use
rgba(128, 33, 38, 0.1). This should bergba(variables.$ruby-wine-red, 0.1)to ensure it updates if the theme color changes.
Using variables consistently is key to a maintainable theme.
- Changed layout from 'page' to 'default' and updated title to 'Sponsors'. - Revised introductory text to emphasize community support and sponsorship benefits. - Added new sections for custom sponsorship opportunities and benefits. - Included a contact link for potential sponsors. - Updated the overall design for better readability and engagement. - Introduced a new SVG image for sponsor branding.
…proved readability
… layout consistency
2 participants
This PR implements the new 'Roman' theme for Rubycon.it, as specified in Figma (#88).
Changes:
Closes #88