fix: center icon show + add alt to img

This commit is contained in:
Rico van Zelst
2023-11-27 20:48:33 +01:00
parent 3e7592fa9c
commit 0723d5aa72
3 changed files with 93 additions and 80 deletions

View File

@@ -58,7 +58,7 @@
<div class="container mx-auto p-4 flex items-center justify-center mt-3 flex-grow"> <div class="container mx-auto p-4 flex items-center justify-center mt-3 flex-grow">
<div class="text-center items-center justify-center align-middle"> <div class="text-center items-center justify-center align-middle">
<img class="items-center mx-auto" src="{{asset('img/heimerdinger-emote.webp')}}"> <img class="items-center mx-auto" src="{{asset('img/heimerdinger-emote.webp')}}" alt="Heimerdinger Emote">
<p class="text-gray-100">Tired of endless browsing to find that one icon or emote you love?</p> <p class="text-gray-100">Tired of endless browsing to find that one icon or emote you love?</p>
<p class="text-gray-100 ">We got you covered! Search through <span <p class="text-gray-100 ">We got you covered! Search through <span
class="underline decoration-orange-500/50 font-medium">all</span> class="underline decoration-orange-500/50 font-medium">all</span>

View File

@@ -1,4 +1,5 @@
<section class="max-w-screen-xl mx-auto mt-12"> <section class="min-h-[80vh] flex items-center justify-center">
<div class="my-auto mx-auto items-center justify-center align-middle">
<p class="sr-only">Heimerdinger Presents:</p> <p class="sr-only">Heimerdinger Presents:</p>
<h3 <h3
class="text-sm font-bold text-center text-transparent uppercase sm:text-md class="text-sm font-bold text-center text-transparent uppercase sm:text-md
@@ -13,9 +14,8 @@
bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text"> bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
Released in: {{$icon->release_year}}</h2> Released in: {{$icon->release_year}}</h2>
<div class="container mx-auto p-4 flex items-center justify-center mt-3"> <div class="container mx-auto p-4 flex items-center justify-center mt-3 my-auto">
<div class="w-screen grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="w-screen grid grid-cols-1 md:grid-cols-2 gap-8">
<div <div
class="items-center align-middle flex flex-col rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm shadow-stone-800/80"> class="items-center align-middle flex flex-col rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm shadow-stone-800/80">
<h4 class="text-center text-2xl font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mb-3"> <h4 class="text-center text-2xl font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mb-3">
@@ -41,41 +41,54 @@
<span class="font-bold">Icon ID:</span> <span class="font-bold">Icon ID:</span>
<span class="font-mono font-semibold">{{$icon->icon_id}}</span> <span class="font-mono font-semibold">{{$icon->icon_id}}</span>
</li> </li>
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en"> <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
lang="en">
<span class="font-bold">Icon Name:</span> {{$icon->title}} <span class="font-bold">Icon Name:</span> {{$icon->title}}
</li> </li>
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en"> <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
lang="en">
<span class="font-bold">Release Year:</span> {{$icon->release_year}} <span class="font-bold">Release Year:</span> {{$icon->release_year}}
</li> </li>
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en"> <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
<span class="font-bold">Legacy<span class="font-extralight">*</span>:</span> {{$icon->legacy ? 'Yes' : 'No'}} lang="en">
<span class="font-bold">Legacy<span
class="font-extralight">*</span>:</span> {{$icon->legacy ? 'Yes' : 'No'}}
</li> </li>
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en"> <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
<span class="font-bold">Esports Icon:</span> {{$icon->esports_team || $icon->esports_region || $icon->esports_event ? 'Yes' : 'No'}} lang="en">
<span
class="font-bold">Esports Icon:</span> {{$icon->esports_team || $icon->esports_region || $icon->esports_event ? 'Yes' : 'No'}}
</li> </li>
@if($icon->esports_team || $icon->esports_region || $icon->esports_event) @if($icon->esports_team || $icon->esports_region || $icon->esports_event)
@if($icon->esports_team) @if($icon->esports_team)
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en"> <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
lang="en">
<span class="font-bold">Esports Team:</span> {{$icon->esports_team}} <span class="font-bold">Esports Team:</span> {{$icon->esports_team}}
</li> </li>
@endif @endif
@if($icon->esports_region) @if($icon->esports_region)
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en"> <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
lang="en">
<span class="font-bold">Esports Region:</span> {{$icon->esports_region}} <span class="font-bold">Esports Region:</span> {{$icon->esports_region}}
</li> </li>
@endif @endif
@if($icon->esports_event) @if($icon->esports_event)
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en"> <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
lang="en">
<span class="font-bold">Esports Event:</span> {{$icon->esports_event}} <span class="font-bold">Esports Event:</span> {{$icon->esports_event}}
</li> </li>
@endif @endif
@endif @endif
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en"> <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
lang="en">
<span class="font-bold">Description:</span> {{$icon->description}} <span class="font-bold">Description:</span> {{$icon->description}}
</li> </li>
<li class="text-neutral-100 hyphens-auto font-light text-sm leading-loose items-center mt-8" lang="en"> <li class="text-neutral-100 hyphens-auto font-light text-sm leading-loose items-center mt-8"
<span class="font-bold">* Legacy Icons:</span> Legacy Icons don't act the same as legacy skins. lang="en">
It seems like some icons that are marked as legacy are still obtainable or the other way around <span class="font-bold">* Legacy Icons:</span> Legacy Icons don't act the same as legacy
skins.
It seems like some icons that are marked as legacy are still obtainable or the other way
around
where some icons that are not marked as legacy are not obtainable anymore. where some icons that are not marked as legacy are not obtainable anymore.
</li> </li>
</ul> </ul>
@@ -84,5 +97,5 @@
</div> </div>
</div> </div>
</div>
</section> </section>
1

View File

@@ -44,7 +44,7 @@
@vite(['resources/css/app.css', 'resources/js/app.js']) @vite(['resources/css/app.css', 'resources/js/app.js'])
</head> </head>
<body class="antialiased bg-stone-900 dark scroll-smooth"> <body class="antialiased bg-stone-900 dark scroll-smooth min-h-screen">
<x-navbar/> <x-navbar/>
<x-icons.view_grid :icon="$icon"/> <x-icons.view_grid :icon="$icon"/>
<x-footer/> <x-footer/>