Archive/HeimerdingerLoL
1
0
Fork 0
mirror of https://github.com/rico-vz/HeimerdingerLoL.git synced 2025-12-06 18:20:48 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: Update CSS classes for video aspect ratio

Browse Source 
- Updated CSS classes in grid_info.blade.php to use 'aspect-video' for maintaining video aspect ratio styling.
This commit is contained in:
Rico van Zelst
2024-03-26 11:27:28 +01:00
parent 99a5fea8f3
commit 4f22451be3
5 changed files with 27 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/views/components/champions/grid_info.blade.php
View File

@@ -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">

14
resources/views/components/posts/listposts.blade.php
View File

@@ -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>

2
resources/views/components/skins/grid_info.blade.php
View File

@@ -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"