fix: html/css fixes

src/_includes/post-coding.njk

@@ -5,9 +5,9 @@
 {% endif %}
 
 <article class="post post--coding">
-  <a href="{{ project.url | url }}" class="post__image">
-    <iframe height="100%" style="width: 100%;" scrolling="no" title="{{ project.data.title }}" src="https://codepen.io/MyXoToD/embed/{{ project.data.codepen }}?default-tab=result&editable=true&theme-id=dark&data-show-tab-bar=no" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
-  </a>
+  <div class="post__image">
+    <iframe title="{{ project.data.title }}" src="https://codepen.io/MyXoToD/embed/{{ project.data.codepen }}?default-tab=result&editable=true&theme-id=dark&data-show-tab-bar=no" loading="lazy"></iframe>
+  </div>
   <div class="post__data">
     <div class="post__date">{{ project.date | formatDate }}</div>
     <h2 class="post__title"><a href="{{ project.url | url }}">{{ project.data.title }}</a></h2>

src/_layouts/post-coding.njk

@@ -30,6 +30,6 @@ include_prism: true
 
     {{ content | safe }}
 
-    <iframe height="100%" style="width: 100%;" scrolling="no" title="{{ title }}" src="https://codepen.io/MyXoToD/embed/{{ codepen }}?default-tab=result&editable=true&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
+    <iframe title="{{ title }}" src="https://codepen.io/MyXoToD/embed/{{ codepen }}?default-tab=result&editable=true&theme-id=dark" loading="lazy"></iframe>
   </article>
 </div>

src/assets/stylesheets/_base.scss

@@ -34,13 +34,6 @@ a {
   // font-size: 18px;
   line-height: 1.4;
   overflow-x: clip;
-
-  @media (prefers-reduced-motion: no-preference) {
-    opacity: 0;
-    animation: fadeIn both linear;
-    animation-timeline: view();
-    animation-range: entry 20% entry 40%;
-  }
 
   &--wide {
     grid-template-columns: minmax(1rem, 1fr) minmax(auto, var(--max-content-width-wide)) minmax(1rem, 1fr);
@@ -145,10 +138,4 @@ a {
   &--light {
     display: none;
   }
-}
-
-@keyframes fadeIn {
-  to {
-    opacity: 1;
-  }
 }

src/assets/stylesheets/_hobby.scss

@@ -6,7 +6,7 @@
 
   @media (prefers-reduced-motion: no-preference) {
     opacity: 0;
-    translate: 0% 100%;
+    transform: translate(0%, 100%);
     animation: hobby-fade-in both linear;
     animation-timeline: view();
     animation-range: entry 0% entry 50vh;
@@ -16,7 +16,7 @@
     grid-column: 1 / 1;
 
     img {
-      scale: 1.45;
+      transform: scale(1.45);
       transform-origin: center right;
       width: 100%;
       aspect-ratio: 1 / 1;
@@ -34,7 +34,7 @@
 @keyframes hobby-fade-in {
   to {
     opacity: 1;
-    translate: 0% 0%;
+    transform: translate(0%, 0%);
   }
 }
 
@@ -45,7 +45,7 @@
 
       img {
         height: 150px;
-        scale: unset;
+        transform: scale(1);
         clip-path: unset;
       }
     }

src/blog/2022/03/12-first-successful-blindsolve/index.md

@@ -52,6 +52,6 @@ With that being said, I've spent some days doing the whole memo thing and solvin
 
 If you want to follow along, this is the scramble: `F L2 U2 L' D2 B2 L' F2 D2 R2 D2 B' L2 U' R F D' R2 D Rw2 Uw'`
 
-<iframe width="560" height="315" id="video" src="https://www.youtube.com/embed/FDicNFKlGig?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe width="560" height="315" id="video" src="https://www.youtube.com/embed/FDicNFKlGig?rel=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 That's it. I'm happy and satisfied. For now. See you when it is time to break my personal best time :P