style: Update CSS classes for video aspect ratio

- Updated CSS classes in grid_info.blade.php to use 'aspect-video' for maintaining video aspect ratio styling.

resources/views/components/champions/grid_info.blade.php

@@ -13,10 +13,10 @@
     <div class="container flex items-center justify-center p-4 mx-auto mt-3">
         <div class="grid w-screen grid-cols-1 gap-5 md-grid-cols-2 lg:grid-cols-3">
             <div
-                class="relative border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80 lg:col-span-2">
-                <div class="absolute inset-0 aspect-w-16 aspect-h-9 glow-shadow rounded-2xl"
+                class="relative border shadow-sm aspect-video rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80 lg:col-span-2">
+                <div class="absolute inset-0 aspect-video glow-shadow rounded-2xl"
                     style="--splash-color: {{ $champion->splash_color }}"></div>
-                <div class="relative overflow-hidden aspect-w-16 aspect-h-9 rounded-2xl">
+                <div class="relative overflow-hidden aspect-video rounded-2xl">
                     <img src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute(false) }}&w=880&output=webp&q=85&il"
                         alt="{{ $champion->name }} Splash Art"
                         class="z-10 object-cover w-full h-full transition-transform duration-700 transform scale-100 hover:scale-105">

resources/views/components/posts/listposts.blade.php

@@ -1,23 +1,23 @@
 @use('Carbon\Carbon')
 
-<div class="container mx-auto p-4 flex flex-col items-center justify-center mt-3">
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 auto-cols-max w-full">
+<div class="container flex flex-col items-center justify-center p-4 mx-auto mt-3">
+    <div class="grid w-full grid-cols-1 gap-12 md:grid-cols-2 auto-cols-max">
         @foreach($posts as $post)
             @if($post->hidden)
                 @continue
             @endif
-            <article class="inline-block text-gray-200 bg-stone-800/40 shadow-md rounded-2xl border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10 items-center h-80 relative">
+            <article class="relative items-center inline-block text-gray-200 border shadow-md bg-stone-800/40 rounded-2xl border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10 h-80">
                 <span
-                    class="absolute top-4 left-4 text-sm text-gray-100 font-medium bg-black/60 px-1 py-1 rounded-lg">
+                    class="absolute px-1 py-1 text-sm font-medium text-gray-100 rounded-lg top-4 left-4 bg-black/60">
                     <abbr itemprop="datePublished">{{ Carbon::parse($post->date)->format('F d, Y') }}</abbr>
                 </span>
-                <img src="{{ $post->thumbnail }}" alt="Post Thumbnail" class="w-full h-48 object-cover rounded-t-2xl">
+                <img src="{{ $post->thumbnail }}" alt="Post Thumbnail" class="object-cover w-full h-48 aspect-video rounded-t-2xl">
                 <div class="p-4">
-                    <h2 class="text-xl font-bold mb-2 line-clamp-1" itemprop="name">{{ $post->title }}</h2>
+                    <h2 class="mb-2 text-xl font-bold line-clamp-1" itemprop="name">{{ $post->title }}</h2>
                     <p class="text-sm line-clamp-3" itemprop="headline">{{ $post->description }}</p>
                 </div>
                 <a href="{{ route('posts.show', $post->slug)}}" itemprop="url"
-                   class="absolute bottom-4 right-4 text-sm text-orange-400 hover:text-orange-600">Read more</a>
+                   class="absolute text-sm text-orange-400 bottom-4 right-4 hover:text-orange-600">Read more</a>
             </article>
         @endforeach
     </div>

resources/views/components/skins/grid_info.blade.php

@@ -23,7 +23,7 @@
         <div class="grid w-screen grid-cols-1 gap-5 md-grid-cols-2 lg:grid-cols-3">
             <div
                 class="relative border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80 lg:col-span-2">
-                <div class="absolute inset-0 aspect-w-16 aspect-h-9 glow-shadow rounded-2xl"
+                <div class="absolute inset-0 aspect-video glow-shadow rounded-2xl"
                      style="--splash-color: {{$skin->splash_color}}"></div>
                 <img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=840&output=webp&q=70"
                      alt="{{$skin->skin_name}} Splash Art"

resources/views/posts/show.blade.php

@@ -5,7 +5,7 @@
 @section('description', 'Heimerdinger.LoL: ' . $post->description)
 
 @push('meta_tags')
-    <link rel="canonical" href="{{config('app.HEIMER_URL') . '/post/' . $post->slug}}">
+    <link rel="canonical" href="{{ config('app.HEIMER_URL') . '/post/' . $post->slug }}">
 
     <meta name="author" content="Heimerdinger.LoL">
     <meta name="robots" content="index, follow">
@@ -13,35 +13,32 @@
 @endpush
 
 @section('content')
-    <a href="{{route('posts.index')}}"
-       class="block mt-8 text-center text-orange-400 text-sm uppercase font-medium hover:underline">Back
+    <a href="{{ route('posts.index') }}"
+        class="block mt-8 text-sm font-medium text-center text-orange-400 uppercase hover:underline">Back
         to
         posts</a>
     <article class="max-w-screen-md mx-auto mt-2 prose prose-stone prose-invert" itemscope
-             itemtype="https://schema.org/BlogPosting"
-             itemid="{{url()->current()}}">
-        <meta itemprop="wordCount" content="{{str_word_count($post->contents)}}">
-        <h3 class="not-prose text-sm text-center text-orange-100 font-semibold" itemprop="datePublished">
+        itemtype="https://schema.org/BlogPosting" itemid="{{ url()->current() }}">
+        <meta itemprop="wordCount" content="{{ str_word_count($post->contents) }}">
+        <h3 class="text-sm font-semibold text-center text-orange-100 not-prose" itemprop="datePublished">
             {{ Carbon::parse($post->date)->format('F d, Y') }}
         </h3>
-        <img src="{{$post->thumbnail}}" alt="{{$post->title}} Thumbnail"
-             class="not-prose aspect-video max-h-64 w-auto mt-2 mb-2 mx-auto rounded-3xl border-orange-500/40 border-2"/>
-        <meta itemprop="thumbnailUrl" content="{{$post->thumbnail}}"/>
+        <img src="{{ $post->thumbnail }}" alt="{{ $post->title }} Thumbnail"
+            class="w-auto mx-auto mt-2 mb-2 border-2 not-prose aspect-video max-h-64 rounded-3xl border-orange-500/40" />
+        <meta itemprop="thumbnailUrl" content="{{ $post->thumbnail }}" />
         <div>
-            <h1
-                class="not-prose text-3xl font-bold text-center text-transparent uppercase sm:text-4xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text" itemprop="headline">
-                “{{$post->title}}”</h1>
-            <h2 class="not-prose text-center text-orange-400 text-sm italic" itemprop="description">
+            <h1 class="text-3xl font-bold text-center text-transparent uppercase not-prose sm:text-4xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text"
+                itemprop="headline">
+                “{{ $post->title }}”</h1>
+            <h2 class="text-sm italic text-center text-orange-400 not-prose" itemprop="description">
                 “{{ $post->description }}”
             </h2>
             <p>
-                {{$post->contents}}
+                {{ $post->contents }}
             </p>
             <p class="mt-3 text-sm text-center">
-                Tagged with: <span itemprop="keywords"
-                                   class="italic">
-                    {{ isset($post->tags) ? implode(', ', $post->tags)
-                       : 'League of Legends' }}</span>
+                Tagged with: <span itemprop="keywords" class="italic">
+                    {{ isset($post->tags) ? implode(', ', $post->tags) : 'League of Legends' }}</span>
             </p>
         </div>
     </article>