💄 Make you nauseous

frontend/src/App.module.css

@@ -1,3 +1,42 @@
 .app {
-  margin: 16px;
+  margin: 1rem auto;
+  max-width: 1220px;
+}
+
+.wireframe {
+  position: absolute;
+  bottom: calc(22% - 512px);
+  left: calc(50% - 512px);
+  width: 1024px;
+  height: 1024px;
+  display: grid;
+  grid-template-columns: repeat(8, 128px);
+  animation-iteration-count: infinite;
+  animation-name: isometric-rotate;
+  animation-duration: 10s;
+  animation-timing-function: linear;
+  pointer-events: none;
+}
+
+.cell {
+  border-bottom: 2px solid var(--sun);
+  border-right: 2px solid var(--sun);
+
+}
+
+.cell:nth-child(8n) {
+  border-right: none;
+}
+
+.cell:nth-child(n+57) {
+  border-bottom: none;
+}
+
+@keyframes isometric-rotate {
+  0% {
+    transform: rotateX(70deg) rotateY(0deg) rotateZ(-45deg);
+  }
+  100% {
+    transform: rotateX(70deg) rotateY(0deg) rotateZ(-405deg);
+  }
 }

frontend/src/App.tsx

@@ -18,6 +18,11 @@ const App: React.FC = () => (
         <Header />
         <div className={styles.app}>
           <Routes />
+          <div className={styles.wireframe}>
+            {[...Array(64)].map((_, idx) => (
+              <div key={idx} className={styles.cell} />
+            ))}
+          </div>
         </div>
         <Footer />
         <Toast />

frontend/src/components/Header.module.css

@@ -1,9 +1,15 @@
+.header {
+  margin: 1rem auto;
+  max-width: 1220px;
+}
+
 .nav {
   display: flex;
   height: 5rem;
   align-items: center;
   text-transform: uppercase;
 }
+
 .navLink:after {
   position: absolute;
   right: 12px;
@@ -15,13 +21,14 @@
   content: "";
   transform: rotate(-2.5deg);
 }
+
 .navLink:hover:after {
   background-color: var(--brand);
   box-shadow: 0 0 4px var(--brand), 0 0 11px var(--brand), 0 0 19px var(--brand), 0 0 30px var(--brand);
 }
 
 .logoNav {
-  margin-left: 1.5rem;
+  margin-left: 8px;
 }
 
 .navItems {

frontend/src/components/Header.tsx

@@ -10,7 +10,7 @@ const navLinkStyles = ({ isActive }: { isActive: boolean }) => clsx(styles.navLi
 
 export const Header: React.FC = () => {
   return (
-    <header>
+    <header className={styles.header}>
       <nav className={styles.nav}>
         <NavLink to="/" className={styles.logoNav}>
           <div className={styles.brand}>BBS</div>

frontend/src/components/UserCard.module.css

@@ -8,6 +8,7 @@
   border-radius: 4px;
   color: var(--text);
   transition: background-color 0.1s ease-out, border 0.1s ease-out;
+  max-height: 100px;
 }
 
 .user:hover {