Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make landing page project cards use actual links instead of JS (#896)

Browse Source 
* Make landing page project cards use actual links instead of JS

* Make landing page links animate like other clickable elements
This commit is contained in:
Prospector 2023-01-11 09:32:32 -08:00 committed by GitHub
parent d4a131ad31
commit 2d9293732b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
pages/index.vue
View File

@ -51,11 +51,11 @@
:aria-hidden="n === 1" :aria-hidden="n === 1"
:class="{ offset: index % 2 }" :class="{ offset: index % 2 }"
> >
<article <nuxt-link
v-for="project in row" v-for="project in row"
:key="project.id" :key="project.id"
class="project gradient-border" class="project gradient-border button-animation"
@click="$router.push(`/${project.project_type}/${project.slug}`)" :to="`/${project.project_type}/${project.slug}`"
> >
<Avatar <Avatar
:src="project.icon_url" :src="project.icon_url"
@ -64,19 +64,14 @@
loading="lazy" loading="lazy"
/> />
<div class="project-info"> <div class="project-info">
<nuxt-link <span class="title">
:to="`/${project.project_type}/${project.slug}`"
class="title"
>
<p>
{{ project.title }} {{ project.title }}
</p> </span>
</nuxt-link>
<span class="description"> <span class="description">
{{ project.description }} {{ project.description }}
</span> </span>
</div> </div>
</article> </nuxt-link>
</div> </div>
</div> </div>
</div> </div>
@ -780,7 +775,7 @@ export default {
padding: 1rem; padding: 1rem;
gap: 1rem; gap: 1rem;
border-radius: 1rem; border-radius: 1rem;
transition: background 0.5s ease-in-out; transition: background 0.5s ease-in-out, transform 0.05s ease-in-out;
// Removed due to lag on mobile :( // Removed due to lag on mobile :(
// backdrop-filter: blur(0.25rem); // backdrop-filter: blur(0.25rem);
@ -797,7 +792,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
} }
.title p { .title {
color: var(--landing-color-heading); color: var(--landing-color-heading);
max-width: 13.75rem; max-width: 13.75rem;
overflow: hidden; overflow: hidden;