new tools modules & sass opti

2026-07-21 13:01:14 +02:00 · 2026-07-21 13:01:14 +02:00 · 9e275e0167
commit 9e275e0167
parent 821e8e0a36
24 changed files with 3266 additions and 2372 deletions
--- a/website/src/styles/_responsive.scss
+++ b/website/src/styles/_responsive.scss
@ -0,0 +1,208 @@
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+@media (max-width: 1024px) {
+  .app-shell {
+    grid-template-columns: 72px minmax(0, 1fr);
+  }
+
+  .sidebar {
+    padding: var(--space-4) 10px;
+  }
+
+  .brand span:last-child,
+  .nav-item strong,
+  .sidebar-note {
+    display: none;
+  }
+
+  .brand,
+  .nav-item {
+    justify-content: center;
+  }
+}
+
+@media (max-width: 760px) {
+  .app-shell {
+    display: block;
+    padding-bottom: 76px;
+  }
+
+  .sidebar {
+    display: none;
+  }
+
+  .topbar,
+  .page-heading,
+  .toolbox-head,
+  .module header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .topbar {
+    padding: var(--space-4);
+  }
+
+  .topbar-actions {
+    display: flex;
+  }
+
+  .topbar-actions > * {
+    width: 100%;
+  }
+
+  .hero,
+  .game-hero,
+  .origin-section,
+  .section-grid,
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .hero,
+  .game-hero {
+    min-height: auto;
+    padding: var(--space-6);
+  }
+
+  .home-visual {
+    justify-self: center;
+    width: min(320px, 100%);
+    min-height: 240px;
+  }
+
+  .home-visual img {
+    object-fit: contain;
+  }
+
+  .origin-section {
+    padding: var(--space-5);
+  }
+
+  .home-dialogue {
+    padding-left: 0;
+  }
+
+  .origin-copy {
+    padding-right: 0;
+    padding-bottom: var(--space-5);
+    border-right: 0;
+    border-bottom: 2px solid rgba(34, 211, 238, 0.66);
+  }
+
+  .dialogue-line {
+    max-width: 92%;
+  }
+
+  .dialogue-line-app {
+    max-width: 92%;
+  }
+
+  .home-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  main {
+    width: min(100% - 24px, 1180px);
+    padding-top: var(--space-5);
+  }
+
+  .modules,
+  .modules[data-layout-cols="1"],
+  .modules[data-layout-cols="2"] {
+    grid-template-columns: 1fr;
+  }
+
+  .module-column {
+    display: contents;
+  }
+
+  .mhwilds-home-grid,
+  .mhwilds-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .mhwilds-filters {
+    position: static;
+  }
+
+  .filter-options {
+    max-height: none;
+  }
+
+  .inline-form {
+    grid-template-columns: 1fr;
+  }
+
+  .tool-add-modal {
+    width: min(420px, calc(100vw - 32px));
+  }
+
+  .tool-add-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .mobile-nav {
+    position: fixed;
+    right: 12px;
+    bottom: 12px;
+    left: 12px;
+    z-index: 60;
+    display: grid;
+    grid-template-columns: 1fr 1fr 52px 1fr;
+    gap: 8px;
+    align-items: center;
+    padding: 8px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-xl);
+    background: rgba(11, 14, 27, 0.9);
+    backdrop-filter: blur(18px);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .mobile-nav a,
+  .mobile-nav button {
+    min-height: 44px;
+    padding: 0 8px;
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+  }
+
+  .mobile-nav a {
+    display: grid;
+    place-items: center;
+    color: var(--color-text-secondary);
+  }
+
+  .mobile-nav a.active {
+    background: var(--color-primary-soft);
+    color: var(--color-text-primary);
+  }
+
+  .drawer-panel {
+    min-width: 0;
+    width: min(720px, 94vw);
+  }
+
+  .drawer-resize-handle {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .home-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .tool-add-grid {
+    grid-template-columns: 1fr;
+  }
+}