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

Landing + other fixes (#909)

Browse Source
This commit is contained in:
Geometrically 2023-01-13 12:01:20 -07:00 committed by GitHub
parent 17f00e6fea
commit 6a52d03329
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/styles/global.scss
View File

@ -111,6 +111,7 @@ html {
rgba(129, 137, 175, 0.75) 0%, rgba(129, 137, 175, 0.75) 0%,
rgba(66, 71, 97, 0.34) 100% rgba(66, 71, 97, 0.34) 100%
); );
--landing-border-color: rgba(129, 137, 175, 0.55);
--landing-creator-gradient: linear-gradient( --landing-creator-gradient: linear-gradient(
180deg, 180deg,
#f8f8f8 0%, #f8f8f8 0%,
@ -242,6 +243,7 @@ html {
rgba(168, 177, 221, 0.75) 0%, rgba(168, 177, 221, 0.75) 0%,
rgba(168, 177, 221, 0.18) 100% rgba(168, 177, 221, 0.18) 100%
); );
--landing-border-color: rgba(168, 177, 221, 0.55);
--landing-creator-gradient: linear-gradient(180deg, #000000 0%, #0e101d 100%); --landing-creator-gradient: linear-gradient(180deg, #000000 0%, #0e101d 100%);
--landing-blob-gradient: radial-gradient( --landing-blob-gradient: radial-gradient(

20
components/ui/Modal.vue
View File

@ -9,17 +9,15 @@
@click="hide" @click="hide"
/> />
<div class="modal-body" :class="{ shown: shown }"> <div class="modal-body" :class="{ shown: shown }">
<template v-if="shown"> <div v-if="header" class="header">
<div v-if="header" class="header"> <h1>{{ header }}</h1>
<h1>{{ header }}</h1> <button class="iconified-button icon-only transparent" @click="hide">
<button class="iconified-button icon-only transparent" @click="hide"> <CrossIcon />
<CrossIcon /> </button>
</button> </div>
</div> <div class="content">
<div class="content"> <slot></slot>
<slot></slot> </div>
</div>
</template>
</div> </div>
</div> </div>
</template> </template>

5
pages/index.vue
View File

@ -54,7 +54,7 @@
<nuxt-link <nuxt-link
v-for="project in row" v-for="project in row"
:key="project.id" :key="project.id"
class="project gradient-border button-animation" class="project button-animation"
:to="`/${project.project_type}/${project.slug}`" :to="`/${project.project_type}/${project.slug}`"
> >
<Avatar <Avatar
@ -775,9 +775,9 @@ export default {
padding: 1rem; padding: 1rem;
gap: 1rem; gap: 1rem;
border-radius: 1rem; border-radius: 1rem;
border: 1px solid var(--landing-border-color);
transition: background 0.5s ease-in-out, transform 0.05s 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);
&:hover { &:hover {
z-index: -2; z-index: -2;
@ -802,6 +802,7 @@ export default {
font-weight: 600; font-weight: 600;
font-size: 1.25rem; font-size: 1.25rem;
line-height: 110%; line-height: 110%;
display: block;
} }
.description { .description {

14
pages/search.vue
View File

@ -886,20 +886,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// Mobile-first CSS: search page is grid on mobile...
.search-page {
display: grid;
grid-template-rows: auto;
grid-template-columns: 100%;
// ...and flex on desktop
@media screen and (min-width: 1024px) {
display: flex;
// Note that the actual flex layout properties come from .normal-page
}
}
.normal-page__content { .normal-page__content {
// Passthrough children as grid items on mobile // Passthrough children as grid items on mobile
display: contents; display: contents;