ADD Christmas assets including logo, GIFs, and CSS #43
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request adds Christmas-themed decorations to the website, including a festive logo, animated Santa GIF, and associated CSS styling. The changes are intended to give the site a seasonal appearance during the holiday period.
Key Changes:
- Replaces the primary logo with a Christmas-themed version across the site
- Adds an animated Santa/reindeer decoration that moves across the homepage
- Introduces new CSS for the animation effect
Reviewed changes
Copilot reviewed 3 out of 6 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| layouts/_default/home.html | Adds Christmas CSS and animated Santa GIF to the homepage template |
| config/_default/params.yaml | Updates logo paths from standard logo to Christmas-themed logo |
| assets/css/christmas.css | Defines CSS styles and keyframe animation for the Santa decoration |
| assets/christmas/santa_2.gif | Binary GIF file used in the animation |
| assets/christmas/santa_1.gif | Binary GIF file (appears unused in current implementation) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -0,0 +1,32 @@ | |||
| /* Styles pour l'animation du renne de Noël */ | |||
There was a problem hiding this comment.
The CSS comment is in French ("Styles pour l'animation du renne de Noël"). Consider using English for consistency with the rest of the codebase, or ensure the project has established French as the documentation language.
| /* Styles pour l'animation du renne de Noël */ | |
| /* Styles for the Christmas reindeer animation */ |
| .christmas-reindeer-line { | ||
| display: none; | ||
| } |
There was a problem hiding this comment.
The .christmas-reindeer-line class is defined with display: none, meaning it's never visible. This appears to be unused code that should be removed to improve maintainability.
| .christmas-reindeer-line { | |
| display: none; | |
| } |
| .christmas-reindeer-container { | ||
| position: absolute; | ||
| top: 70px; |
There was a problem hiding this comment.
The value 70px for the top position is a magic number. Consider using a CSS variable or adding a comment explaining why this specific value was chosen, especially in relation to the site's header height.
| .christmas-reindeer-container { | |
| position: absolute; | |
| top: 70px; | |
| :root { | |
| /* Height of the site header. Update this variable if the header height changes. */ | |
| --site-header-height: 70px; | |
| } | |
| .christmas-reindeer-container { | |
| position: absolute; | |
| /* Position below the site header */ | |
| top: var(--site-header-height); |
| width: 65px; | ||
| height: auto; | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| animation: christmas-reindeer-move 8s linear infinite; | ||
| } | ||
|
|
||
| @keyframes christmas-reindeer-move { | ||
| 0% { | ||
| left: 100%; | ||
| } | ||
| 100% { | ||
| left: -65px; |
There was a problem hiding this comment.
The animation uses hard-coded pixel values (65px, 80px, 8s) that should be defined as CSS variables for easier maintenance and consistency. This would make it simpler to adjust the animation if needed.
| {{ $reindeer := resources.GetMatch "**christmas/santa_2.gif" }} | ||
| {{ with $reindeer }} | ||
| <div class="christmas-reindeer-container"> | ||
| <div class="christmas-reindeer-line"></div> | ||
| <img class="christmas-reindeer-gif" src="{{ $reindeer.RelPermalink }}" alt="Reindeer" /> |
There was a problem hiding this comment.
The template references santa_2.gif in the GetMatch pattern but the variable is named $reindeer. This naming inconsistency can cause confusion. Consider either renaming the variable to $santa or updating the file name to match the variable name.
| {{ $reindeer := resources.GetMatch "**christmas/santa_2.gif" }} | |
| {{ with $reindeer }} | |
| <div class="christmas-reindeer-container"> | |
| <div class="christmas-reindeer-line"></div> | |
| <img class="christmas-reindeer-gif" src="{{ $reindeer.RelPermalink }}" alt="Reindeer" /> | |
| {{ $santa := resources.GetMatch "**christmas/santa_2.gif" }} | |
| {{ with $santa }} | |
| <div class="christmas-reindeer-container"> | |
| <div class="christmas-reindeer-line"></div> | |
| <img class="christmas-reindeer-gif" src="{{ $santa.RelPermalink }}" alt="Santa" /> |
| {{ $christmasCSS := resources.Get "css/christmas.css" }} | ||
| {{ if $christmasCSS }} | ||
| <style> | ||
| {{ $christmasCSS.Content | safeCSS }} | ||
| </style> |
There was a problem hiding this comment.
Inline styles using safeCSS bypass Hugo's asset pipeline features like minification and fingerprinting. Consider using Hugo's asset pipeline with resources.Get followed by .Minify and .Fingerprint for better performance and cache control in production.
| {{ $christmasCSS := resources.Get "css/christmas.css" }} | |
| {{ if $christmasCSS }} | |
| <style> | |
| {{ $christmasCSS.Content | safeCSS }} | |
| </style> | |
| {{ $christmasCSS := resources.Get "css/christmas.css" | resources.Minify | resources.Fingerprint }} | |
| {{ if $christmasCSS }} | |
| <link rel="stylesheet" href="{{ $christmasCSS.RelPermalink }}" integrity="{{ $christmasCSS.Data.Integrity }}"> |
| {{ $christmasCSS := resources.Get "css/christmas.css" }} | ||
| {{ if $christmasCSS }} | ||
| <style> | ||
| {{ $christmasCSS.Content | safeCSS }} | ||
| </style> | ||
| {{ end }} | ||
| {{ $reindeer := resources.GetMatch "**christmas/santa_2.gif" }} | ||
| {{ with $reindeer }} | ||
| <div class="christmas-reindeer-container"> | ||
| <div class="christmas-reindeer-line"></div> | ||
| <img class="christmas-reindeer-gif" src="{{ $reindeer.RelPermalink }}" alt="Reindeer" /> | ||
| </div> | ||
| {{ end }} |
There was a problem hiding this comment.
The Christmas decorations are hard-coded into the home template without any configuration to enable/disable them. Consider adding a configuration parameter (e.g., enableChristmasTheme: true) in params.yaml to allow toggling this feature, making it easier to remove after the holiday season.
| {{ $christmasCSS := resources.Get "css/christmas.css" }} | |
| {{ if $christmasCSS }} | |
| <style> | |
| {{ $christmasCSS.Content | safeCSS }} | |
| </style> | |
| {{ end }} | |
| {{ $reindeer := resources.GetMatch "**christmas/santa_2.gif" }} | |
| {{ with $reindeer }} | |
| <div class="christmas-reindeer-container"> | |
| <div class="christmas-reindeer-line"></div> | |
| <img class="christmas-reindeer-gif" src="{{ $reindeer.RelPermalink }}" alt="Reindeer" /> | |
| </div> | |
| {{ end }} | |
| {{ if .Site.Params.enableChristmasTheme }} | |
| {{ $christmasCSS := resources.Get "css/christmas.css" }} | |
| {{ if $christmasCSS }} | |
| <style> | |
| {{ $christmasCSS.Content | safeCSS }} | |
| </style> | |
| {{ end }} | |
| {{ $reindeer := resources.GetMatch "**christmas/santa_2.gif" }} | |
| {{ with $reindeer }} | |
| <div class="christmas-reindeer-container"> | |
| <div class="christmas-reindeer-line"></div> | |
| <img class="christmas-reindeer-gif" src="{{ $reindeer.RelPermalink }}" alt="Reindeer" /> | |
| </div> | |
| {{ end }} | |
| {{ end }} |
1 participant
No description provided.