MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New project cards (#5298)

Browse Source 
* New project card

* no shadow on icons

* Remove updated label

* reduce tag count to 5

* improve envs

* fix: project card bottom row not growing

* move actions in grid mode

* focus changes + new project list component

* Allow more tags in grid mode, deprioritize non-loader tags

* fix prod deploy robots.txt

* remove unused id

* App cards

* prepr

* publish date + fix router links

* fix author hover underline in firefox

* perf: preload on search item hover

* remove unused filter

* remove option for old grid view

---------

Co-authored-by: tdgao <mr.trumgao@gmail.com>
Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>
This commit is contained in:
Prospector
2026-02-07 11:18:59 -08:00
committed by GitHub
parent b6c22d6ca6
commit b005c1f522
46 changed files with 1343 additions and 1759 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/assets/styles/accessibility.scss
View File

@@ -1,6 +1,6 @@
button:focus-visible,
a:focus-visible,
[tabindex='0']:focus-visible {
outline: 0.25rem solid #ea80ff;
border-radius: 0.25rem;
button:focus-visible:not(.custom-focus-indicator),
a:focus-visible:not(.custom-focus-indicator),
[tabindex='0']:focus-visible:not(.custom-focus-indicator),
[type='button']:focus-visible:not(.custom-focus-indicator) {
outline: 0.25rem solid var(--color-focus-ring);
}

54
packages/assets/styles/classes.scss
View File

@@ -217,7 +217,7 @@
}
// CLICKABLES/BUTTONS
a,
a:not(.no-click-animation),
.clickable {
transition:
opacity 0.5s ease-in-out,
@@ -522,58 +522,6 @@ a,
}
}
// PROJECT CARDS
.project-list {
width: 100%;
gap: var(--gap-md);
overflow: hidden;
&:not(:first-child) {
margin-top: var(--gap-md);
}
&:not(:empty) {
margin-bottom: var(--gap-md);
}
}
.project-list.display-mode--list {
display: flex;
flex-direction: column;
}
.project-list.display-mode--gallery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@media screen and (max-width: 750px) {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
.project-list.display-mode--grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
@media screen and (max-width: 80rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (max-width: 1024px) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (max-width: 860px) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (max-width: 550px) {
display: flex;
flex-direction: column;
}
}
// CARDS
.base-card {
padding: var(--gap-xl);

2
packages/assets/styles/variables.scss
View File

@@ -211,6 +211,8 @@ html {
--color-link-active: var(--color-blue) !important; // DEPRECATED, use filters in future
--shadow-button: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.15);
--color-focus-ring: #ea80ff;
}
.light-mode,