feat(sitcon): SITCON 2026 event page full redesign#45
feat(sitcon): SITCON 2026 event page full redesign#45w-club wants to merge 2 commits intoai-twinkle:rollingfrom
Conversation
…assmorphism UI, mascot integration
Summary of ChangesHello, 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 comprehensive redesign of the SITCON 2026 event page, transforming its visual identity and user experience. The changes focus on creating a more engaging and modern interface, incorporating dynamic background elements and a new mascot, while also refining the presentation of key information and interactive components. The goal is to provide a more immersive and aesthetically pleasing experience for visitors. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. 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. Footnotes
|
There was a problem hiding this comment.
Code Review
This pull request significantly redesigns the sitcon-2026.vue page, introducing a new visual aesthetic with background effects like a night sky gradient, noise overlay, and animated shooting stars. The layout for the hero section, project links, free LLM API section, and community links has been revamped, including the addition of a mascot. The styling has been completely rewritten to support this new design, and font imports have been updated. Feedback indicates that new user-facing strings need to be internationalized, inline styles for animations should be moved to CSS, and the use of !important in CSS should be refactored for better maintainability.
… remove !important
|
/gemini review again |
There was a problem hiding this comment.
Code Review
This pull request completely redesigns the sitcon-2026.vue page, introducing a new "night-sky" aesthetic with updated layouts for project contributions, a free LLM API section, and social links, alongside new internationalization keys. A critical security vulnerability was identified where the API key is exposed client-side due to being sourced from runtimeConfig.public and hardcoded, requiring it to be moved to a secure server-side environment variable. Further feedback includes suggestions to improve code maintainability by refactoring inline layout styles into dedicated CSS classes and adding a comment to explain the touchstart.passive listener workaround for :active styles on iOS devices.
|
|
||
| <NuxtLink to="/" class="back-link anim-in" style="--d:0.40s">← 回到 Twinkle AI 官網</NuxtLink> | ||
| <!-- BACK BUTTON --> | ||
| <div class="anim-fade-up" style="--d: 0.4s; display: flex; justify-content: center; width: 100%;"> |
There was a problem hiding this comment.
Using inline styles for layout properties like display: flex and justify-content: center reduces maintainability and makes overriding styles more difficult. It's better to define these styles in a dedicated CSS class.
You can add the following class to your <style> block:
.back-button-wrapper {
display: flex;
justify-content: center;
width: 100%;
}And then apply it to the div.
<div class="anim-fade-up back-button-wrapper" style="--d: 0.4s;">
| /* ── MOBILE TOUCH ACTIVE ── */ | ||
| .sitcon-page .project-card:active, | ||
| .sitcon-page .btn:active, | ||
| .sitcon-page .social-btn:active, | ||
| .sitcon-page .btn-back-gorgeous:active { | ||
| transform: translateY(1px) scale(0.95); | ||
| box-shadow: 0 2px 8px rgba(12,8,5,0.06); | ||
| transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.08s cubic-bezier(0.4, 0, 0.2, 1); | ||
| } |
There was a problem hiding this comment.
These :active styles won't work on some touch devices (like iOS) without a touchstart event listener on the element or a parent. The <main> element has an empty @touchstart.passive listener for this purpose. For better maintainability, it would be beneficial to add a comment here explaining this dependency.
/* ── MOBILE TOUCH ACTIVE ── */
/* Note: The empty @touchstart listener on the <main> element is a workaround
to enable these :active pseudo-class styles on iOS. */
.sitcon-page .project-card:active,
.sitcon-page .btn:active,
.sitcon-page .social-btn:active,
.sitcon-page .btn-back-gorgeous:active {
transform: translateY(1px) scale(0.95);
box-shadow: 0 2px 8px rgba(12,8,5,0.06);
transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.08s cubic-bezier(0.4, 0, 0.2, 1);
}
|
/gemini |
|
Understood. I will ensure that the |
mascot integration and starry sky