Project, Search, User redesign (#1281)

* New project page

* fix silly icon tailwind classes

* Start new versions page, add new ButtonStyled component

* Pagination and finish mocking up versions page functionality

* green download button

* hover animation

* New Modal, Avatar refactor, subpages in NavTabs

* lint

* Download modal

* New user page + fix lint

* fix ui lint

* Download animation fix

* Versions filter + finish project page

* Improve consistency of buttons on home page

* Fix ButtonStyled breaking

* Fix margin on version summary

* finish search, new modals, user + project page mobile

* fix gallery image pages

* New project header

* Fix gallery tab showing improperly

* Use auto direction + position for all popouts

* Preliminary user page

* test to see if this fixes login stuff

* remove extra slash

* Add version actions, move download button on versions page

* Listed -> public

* Shorten download modal selector height

* Fix user menu open direction

* Change breakpoint for header collapse

* Only underline title

* Tighten padding on stats a little

* New nav

* Make mobile breakpoint more consistent

* fix header breakpoint regression

* Add sign in button

* Fix edit icon color

* Fix margin at top of screen

* Fix user bios and ad width

* Fix user nav showing when there's only one type of project

* Fix plural projects on user page & extract i18n

* Remove ads on mobile for now

* Fix overflow menu showing hidden items

* NavTabs on mobile

* Fix navbar z index

* Search filter overhaul + negative filters

* fix no-max-height

* port version filters, fix following/collections, lint

* hide promos

* ui lint

* Disable modal background animation to reduce reported motion sickness

* Hide install with modrinth app button on mobile

---------

Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
Co-authored-by: Prospector <prospectordev@gmail.com>

apps/frontend/src/assets/styles/layout.scss

@@ -64,10 +64,6 @@
   }
 }
 
-.site-header {
-  margin: 0 0.75rem;
-}
-
 @media (min-width: 1024px) {
   .full-page {
     margin: 0 auto;
@@ -84,14 +80,14 @@
       "sidebar content" auto
       "info content" auto
       "dummy content" 1fr
-      / 20rem 1fr;
+      / 18.75rem 1fr;
 
     &.alt-layout {
       grid-template:
         "content sidebar" auto
         "content info" auto
         "content dummy" 1fr
-        / 1fr 20rem;
+        / 1fr 18.75rem;
     }
 
     &.no-sidebar {
@@ -110,11 +106,59 @@
   }
 
   .normal-page__sidebar {
-    min-width: 20rem;
-    width: 20rem;
+    min-width: 18.75rem;
+    width: 18.75rem;
   }
 
   .normal-page__content {
-    max-width: calc(60rem - 0.75rem);
+    max-width: calc(80rem - 18.75rem - 0.75rem);
+    //overflow-x: hidden;
+  }
+}
+
+.new-page {
+  display: grid;
+  margin: 0 auto;
+  max-width: 80rem;
+  column-gap: 0.75rem;
+  padding: 0 0.75rem;
+
+  grid-template:
+    "header"
+    "content"
+    "sidebar"
+    / 100%;
+
+  @media screen and (min-width: 1024px) {
+    &.sidebar {
+      grid-template:
+        "header header" auto
+        "content sidebar" auto
+        "content dummy" 1fr
+        / 1fr 18.75rem;
+
+      &.alt-layout {
+        grid-template:
+          "header header" auto
+          "sidebar content" auto
+          "dummy content" 1fr
+          / 18.75rem 1fr;
+      }
+    }
+
+    .normal-page__sidebar {
+      min-width: 18.75rem;
+      width: 18.75rem;
+    }
+  }
+
+  .normal-page__sidebar {
+    grid-area: sidebar;
+  }
+
+  .normal-page__content {
+    grid-area: content;
+    max-width: calc(80rem - 18.75rem - 0.75rem);
+    //overflow-x: hidden;
   }
 }