From 1d8c80c062de528b2328011893e5842b7b4b4e8e Mon Sep 17 00:00:00 2001 From: Geometrically <18202329+Geometrically@users.noreply.github.com> Date: Sat, 7 Jan 2023 18:04:43 -0700 Subject: [PATCH] New landing page (#834) * New landing page * Edit gradient * User + Creator sections, some css cleanup * Most stuff * Finish page (mostly) * Compress images * Moar compression * Fix mobile zoom + adjust wording * add utm stuff to subscribe link * Fix border overlay * Remove redundant CSS class * Fix most issues (?) * Add notifs showcase * Spacing changes, update copy, fix lag * add and * Update spacing * save work * Update mobile support * Update discovery copy * Light theme * Adjust logo banner on various screen sizes * Add launcher links * Oxipng * Switch to cdn links for images * Add animation * Fix animation * fix tags Co-authored-by: Emma Cypress Pointer-Null --- COPYING.md | 2 - assets/images/external/atlauncher.svg | 1 + assets/images/external/multimc.png | Bin 0 -> 6934 bytes assets/images/external/prism.svg | 203 +++ assets/images/illustrations/features.svg | 1 - assets/images/landing-gradient.svg | 1 - assets/images/landing.svg | 1557 ------------------- assets/images/text-logo.svg | 16 - assets/styles/global.scss | 95 +- components/ui/Avatar.vue | 5 + components/ui/ProjectCard.vue | 28 +- layouts/default.vue | 18 +- pages/_type/_id.vue | 4 +- pages/index.vue | 1785 ++++++++++++++++------ pages/user/_id.vue | 4 +- store/tag.js | 10 +- 16 files changed, 1693 insertions(+), 2037 deletions(-) create mode 100644 assets/images/external/atlauncher.svg create mode 100644 assets/images/external/multimc.png create mode 100644 assets/images/external/prism.svg delete mode 100644 assets/images/illustrations/features.svg delete mode 100644 assets/images/landing-gradient.svg delete mode 100644 assets/images/landing.svg delete mode 100644 assets/images/text-logo.svg diff --git a/COPYING.md b/COPYING.md index ab6477fb..c569708f 100644 --- a/COPYING.md +++ b/COPYING.md @@ -9,9 +9,7 @@ Any files depicting the Modrinth branding, including the wrench-in-labyrinth log This includes, but may not be limited to, the following files: - assets/images/404.svg -- assets/images/landing.svg - assets/images/logo.svg -- assets/images/text-logo.svg - components/brand/* - static/favicon.ico - static/favicon-light.ico diff --git a/assets/images/external/atlauncher.svg b/assets/images/external/atlauncher.svg new file mode 100644 index 00000000..fa2799c8 --- /dev/null +++ b/assets/images/external/atlauncher.svg @@ -0,0 +1 @@ + diff --git a/assets/images/external/multimc.png b/assets/images/external/multimc.png new file mode 100644 index 0000000000000000000000000000000000000000..5251656db3146924cddac4bc02dbfc24f3176185 GIT binary patch literal 6934 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 + + + + Prism Launcher Logo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Prism Launcher Logo + 19/10/2022 + + + Prism Launcher + + + + + AutiOne, Boba, ely, Fulmine, gon sawa, Pankakes, tobimori, Zeke + + + https://github.com/PrismLauncher/PrismLauncher + + + Prism Launcher + + + + + + + + + + + + + + + diff --git a/assets/images/illustrations/features.svg b/assets/images/illustrations/features.svg deleted file mode 100644 index b71deda8..00000000 --- a/assets/images/illustrations/features.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/images/landing-gradient.svg b/assets/images/landing-gradient.svg deleted file mode 100644 index 0c287e74..00000000 --- a/assets/images/landing-gradient.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/images/landing.svg b/assets/images/landing.svg deleted file mode 100644 index 8645a842..00000000 --- a/assets/images/landing.svg +++ /dev/null @@ -1,1557 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/images/text-logo.svg b/assets/images/text-logo.svg deleted file mode 100644 index d3f26291..00000000 --- a/assets/images/text-logo.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/assets/styles/global.scss b/assets/styles/global.scss index 9a6c05c0..18731680 100644 --- a/assets/styles/global.scss +++ b/assets/styles/global.scss @@ -1,5 +1,5 @@ html { - @extend .light-mode; + @extend .dark-mode; --dark-color-text: #b0bac5; --dark-color-text-dark: #ecf9fb; } @@ -91,6 +91,49 @@ html { hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px; --shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px; + + --landing-maze-bg: url('https://cdn.modrinth.com/landing/landing-light.png'); + --landing-maze-gradient-bg: url('https://cdn.modrinth.com/landing/landing-lower-light.png'); + --landing-maze-outer-bg: linear-gradient(180deg, #f0f0f0 0%, #ffffff 100%); + + --landing-color-heading: #000; + --landing-color-subheading: #3a3f45; + + --landing-transition-gradient-start: rgba(255, 255, 255, 0); + --landing-transition-gradient-end: #ffffff; + --landing-hover-card-gradient: radial-gradient( + 50% 50% at 50% 50%, + #fff 0%, + rgba(204, 204, 204, 0.77) 100% + ); + --landing-border-gradient: linear-gradient( + to bottom right, + rgba(129, 137, 175, 0.75) 0%, + rgba(66, 71, 97, 0.34) 100% + ); + --landing-creator-gradient: linear-gradient( + 180deg, + #f8f8f8 0%, + #f8f8f8 63.19% + ); + + --landing-blob-gradient: radial-gradient( + 50% 50% at 50% 50%, + rgba(255, 255, 255, 0.35) 0%, + rgba(255, 255, 255, 0.2695) 100% + ); + --landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16), + inset 2px 2px 64px rgba(255, 255, 255, 0.45); + + --landing-card-bg: rgba(255, 255, 255, 0.8); + --landing-card-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16); + + --landing-blue-label: #0098ba; + --landing-blue-label-bg: rgba(0, 177, 216, 0.15); + --landing-green-label: #00a936; + --landing-green-label-bg: rgba(0, 216, 69, 0.15); + + --landing-raw-bg: #fff; } .dark-mode { @@ -174,6 +217,50 @@ html { rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px; + + --landing-maze-bg: url('https://cdn.modrinth.com/landing/landing.png'); + --landing-maze-gradient-bg: linear-gradient( + 0deg, + #31375f 0%, + rgba(8, 14, 55, 0) 100% + ), + url('https://cdn.modrinth.com/landing/landing-lower.png'); + --landing-maze-outer-bg: linear-gradient(180deg, #06060d 0%, #000000 100%); + + --landing-color-heading: #fff; + --landing-color-subheading: #afb6be; + + --landing-transition-gradient-start: rgba(14, 16, 32, 0); + --landing-transition-gradient-end: #060a1c; + --landing-hover-card-gradient: radial-gradient( + 50% 50% at 50% 50%, + #2c304f 0%, + rgba(32, 35, 50, 0.77) 100% + ); + --landing-border-gradient: linear-gradient( + to bottom right, + rgba(168, 177, 221, 0.75) 0%, + rgba(168, 177, 221, 0.18) 100% + ); + --landing-creator-gradient: linear-gradient(180deg, #000000 0%, #0e101d 100%); + + --landing-blob-gradient: radial-gradient( + 50% 50% at 50% 50%, + rgba(44, 48, 79, 0.35) 0%, + rgba(32, 35, 50, 0.2695) 100% + ); + --landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16), + inset 2px 2px 64px rgba(57, 61, 94, 0.45); + + --landing-card-bg: rgba(59, 63, 85, 0.15); + --landing-card-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16); + + --landing-blue-label: #10c0e7; + --landing-blue-label-bg: rgba(0, 177, 216, 0.15); + --landing-green-label: #00d845; + --landing-green-label-bg: rgba(0, 216, 69, 0.15); + + --landing-raw-bg: #000; } .oled-mode { @@ -186,12 +273,6 @@ html { --color-button-bg-active: #3c3c40; } -.midas-mode { - @extend .dark-mode; - --color-brand: #fac413; - --color-brand-shadow: rgba(250, 196, 19, 0.7); -} - body { // Defaults background-color: var(--color-bg); diff --git a/components/ui/Avatar.vue b/components/ui/Avatar.vue index 4adc180f..0ba0597d 100644 --- a/components/ui/Avatar.vue +++ b/components/ui/Avatar.vue @@ -5,6 +5,7 @@ :class="`avatar size-${size} ${circle ? 'circle' : ''}`" :src="src" :alt="alt" + :loading="loading" /> - + diff --git a/layouts/default.vue b/layouts/default.vue index 02c5feb5..2b290fdd 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -5,7 +5,7 @@ :class="{ 'expanded-mobile-nav': isBrowseMenuOpen }" >
diff --git a/pages/user/_id.vue b/pages/user/_id.vue index 199bed05..f27710b0 100644 --- a/pages/user/_id.vue +++ b/pages/user/_id.vue @@ -15,7 +15,7 @@
-
+

{{ user.username }}

-
+
diff --git a/store/tag.js b/store/tag.js index 15eb756e..dadb19dc 100644 --- a/store/tag.js +++ b/store/tag.js @@ -22,6 +22,11 @@ export const state = () => ({ id: 'datapack', display: 'data pack', }, + { + actual: 'shader', + id: 'shader', + display: 'shader', + }, { actual: 'resourcepack', id: 'resourcepack', @@ -32,11 +37,6 @@ export const state = () => ({ id: 'modpack', display: 'modpack', }, - { - actual: 'shader', - id: 'shader', - display: 'shader', - }, ], loaderData: { pluginLoaders: ['bukkit', 'spigot', 'paper', 'purpur', 'sponge'],