Feature/premium design update #4
Conversation
Key fixes: 1. Card titles now display fully (no more "AI Regula...") - High specificity selectors with !important to override theme - white-space: normal allows text wrapping 2. Reduced excessive whitespace - Hero section: 6em → 2em padding - Section margins reduced throughout - Tighter post list cards 3. Cleaner layout - Compact archive items - Better vertical rhythm - Wide screen support (1400px+) https://claude.ai/code/session_014vh1rE3SXRdNNZbCWN1a2A
…ero section and feature cards, and update changelog.
…gelog, documenting blog-specific homepage design, responsiveness, typography, and layout enhancements.
Summary of ChangesHello @HouuYa, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request delivers a substantial visual and structural upgrade to the blog's frontend. The core of the changes revolves around the introduction of a 'Premium Dark' theme, which integrates contemporary UI elements like glassmorphism and subtle neon glows. Concurrently, the site's responsiveness has been significantly improved, particularly for larger displays, ensuring a consistent and appealing user experience across a broader range of devices. Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![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 introduces a significant and impressive visual overhaul, implementing a "Premium Dark" theme with glassmorphism and other modern CSS effects. The changes are well-documented across the markdown files. The SCSS code is effective, but there are a few areas for improvement regarding code duplication and the use of !important, which I've detailed in the specific comments below. Overall, this is a great enhancement to the blog's design.
assets/css/main.scss
Outdated
| .feature__wrapper { | ||
| margin-bottom: 1.5em; | ||
| padding-bottom: 1em; | ||
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | ||
| } | ||
|
|
||
| .author__name { | ||
| // CRITICAL: Override title truncation with high specificity | ||
| .feature__wrapper .feature__item .archive__item .archive__item-body .archive__item-title, | ||
| .feature__item .archive__item .archive__item-title, | ||
| .feature__item .archive__item-title { | ||
| overflow: visible !important; | ||
| text-overflow: clip !important; | ||
| white-space: normal !important; | ||
| display: block !important; | ||
| font-size: 1.25em; | ||
| font-weight: 700; | ||
| line-height: 1.35; | ||
| margin-bottom: 0.75em; | ||
| background: linear-gradient(135deg, #fff 0%, $accent-light 100%); | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| background-clip: text; | ||
| } | ||
|
|
||
| .author__bio { | ||
| font-size: 0.85em; | ||
| line-height: 1.5; | ||
| } | ||
|
|
||
| // ============================================================================ | ||
| // FEATURE ROW (3 Column Cards) - IMPORTANT FIXES | ||
| // ============================================================================ | ||
| .feature__wrapper { | ||
| margin-bottom: 2em; | ||
| display: flex !important; | ||
| flex-wrap: wrap !important; | ||
| justify-content: space-between !important; | ||
| gap: 2rem !important; | ||
| margin-bottom: 3em !important; | ||
| padding-bottom: 1em; | ||
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | ||
| } |
There was a problem hiding this comment.
The .feature__wrapper selector is defined twice. The second definition overrides most of the first and re-declares some properties. To improve clarity and maintainability, these two rule sets should be merged into a single block.
.feature__wrapper {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
gap: 2rem !important;
margin-bottom: 3em !important;
padding-bottom: 1em;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
assets/css/main.scss
Outdated
| .feature__wrapper { | ||
| margin-bottom: 2em; | ||
| display: flex !important; | ||
| flex-wrap: wrap !important; | ||
| justify-content: space-between !important; | ||
| gap: 2rem !important; | ||
| margin-bottom: 3em !important; | ||
| padding-bottom: 1em; | ||
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | ||
| } | ||
|
|
||
| .feature__item { | ||
| // FIX: Remove title truncation - show full title | ||
| .archive__item-title { | ||
| overflow: visible; | ||
| text-overflow: clip; | ||
| white-space: normal; | ||
| font-size: 1.15em; | ||
| font-weight: 600; | ||
| margin-bottom: 0.5em; | ||
| line-height: 1.3; | ||
| } | ||
| flex: 1 1 300px !important; /* Grow, shrink, min-width */ | ||
| margin-bottom: 1em; | ||
| max-width: none !important; /* Allow expansion */ |
There was a problem hiding this comment.
There is heavy use of !important on flexbox and sizing properties. While sometimes necessary to override highly specific theme styles, this can make future CSS changes difficult and lead to specificity conflicts. It would be beneficial to investigate if these overrides can be achieved by increasing selector specificity instead. If !important is truly the only option, adding a brief comment explaining why would be helpful for future maintenance.
| // ============================================================================ | ||
| // WIDE SCREENS - Use more space | ||
| // ============================================================================ |
There was a problem hiding this comment.
This comment block for 'WIDE SCREENS' is a duplicate of the one directly above it. Removing the extra comment block will help keep the stylesheet clean.
Resolved conflict in CHANGELOG.md by restoring the file with recent design updates.
This commit updates .github/workflows/bad-pr.yml to use secrets.PAT_GITHUB instead of GITHUB_TOKEN for labeling and locking PRs, resolving permission issues.
Merged duplicate .feature__wrapper blocks, removed excessive !important usage, and deleted duplicate comment blocks in main.scss.
2 participants
Summary
Context