fix: Refactor CSS on post images to reduce Cumulative Layout Shift

scalastic · Jul 30, 2023 · 3498fc5 · 3498fc5
1 parent 0e55dfa
commit 3498fc5
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 23 deletions.
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -12,7 +12,7 @@
  {{ "/assets/img/" | prepend: site.baseurl | append : page.img}} 16:9 center
  tablet: {{ "/assets/img/" | prepend: site.baseurl | append : page.img}} 16:9 center
  mobile: {{ "/assets/img/" | prepend: site.baseurl | append : page.img}} 4:3 center
- --alt {{page.title}} --class page-image
+ --alt {{page.title}} --img class="page-image"
  %}
  {% if page.fig-caption -%}
  <figcaption>{{page.fig-caption}}</figcaption>

diff --git a/_sass/parts/_post-page.scss b/_sass/parts/_post-page.scss
@@ -444,24 +444,6 @@
  background-color: var(--body-background);
  border-radius: 10px;
  overflow: hidden;
- animation: bounce 0.8s linear;
- position: -1000px;
- @keyframes bounce {
- 0% {
- opacity: 0;
- transform: translateY(-2000px);
- }
- 60% {
- opacity: 1;
- transform: translateY(30px);
- }
- 80% {
- transform: translateY(-10px);
- }
- 100% {
- transform: translateY(0);
- }
- }
 
  figure {
  position: relative;
@@ -478,10 +460,6 @@
  text-transform: uppercase;
  font-size: 10px;
  }
- .page-image {
- width: 100%;
- height: 100%;
- }
 }
 
 .hr-text {