[WIP] Rework design (#34)

* WIP: Redesign the default layout * Merge old & new default layouts * Fix login logic; add proper user controls dropdown * Fix latest version listing (#31) (#32) Co-authored-by: Aeledfyr <45501007+Aeledfyr@users.noreply.github.com> * First pass of design cleanup * Improve ad integration and fix light theme * Begin splitting up variables, change some styling to new mockup * Continue redesign progress * Work on some more pages * Add missing dark theme variables for text * Continue working on modularizing * Continue progress, redo pagination * Fix auth buttons in navbar layout * Continue progress * Continue progress more * Redo ModResult * Scope ModPage :irritater: * Continue Dashboard * Continue progress on Dashboard and cleanup * Add missing variables for dark theme * Small tweaks, cleanup, and continue mod page progress * Fix user not being able to see hidden mods that they own * Start reworking mod creation * Continue revamp of mod creation page * Yank v-html out * Hotfix markdown rendering and some spacing issues * Move legal; continue with mod creation; create reusable footer * Create README.md * Update README.md * Update README.md * Add in basic usage instructions * Fix some stuff * Continue with mod creation; fix some CSS errors * Start user page * Start transition to vue-select; fix a few bugs * Continue mod creation page * Finish mod pages * Add very raw version editing * Mod editing + creation * Fixed versions that were in processing causing a 404 (#39) Co-authored-by: Mikhail Oleynikov <falseresync@gmail.com> Co-authored-by: Aeledfyr <45501007+Aeledfyr@users.noreply.github.com> Co-authored-by: Jai A <jai.a@tuta.io> Co-authored-by: MulverineX <mulverin3@gmail.com> Co-authored-by: diabolical17 <calumproh28@gmail.com> Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
2020-11-30 13:55:01 -08:00
parent e025df0824
commit 7b84d8c3d5
70 changed files with 10339 additions and 3284 deletions
@@ -0,0 +1,87 @@
+%card {
+  background: var(--color-raised-bg);
+  border-radius: var(--size-rounded-card);
+}
+
+%card-spaced-b {
+  @extend %card;
+  margin-bottom: var(--spacing-card-md);
+}
+
+%row {
+  display: flex;
+  flex-direction: row;
+}
+
+%column {
+  display: flex;
+  flex-direction: column;
+}
+
+%transparent-clickable {
+  border-radius: var(--size-rounded-control);
+  color: var(--color-text);
+  background-color: transparent;
+  &:focus,
+  &:hover,
+  &.selected,
+  &.nuxt-link-exact-active {
+    color: var(--color-transparent-button-text-hover);
+    background-color: var(--color-transparent-button-bg-hover);
+  }
+  &:active {
+    color: var(--color-transparent-button-text-active);
+    background-color: var(--color-transparent-button-bg-active);
+  }
+}
+
+%label {
+  color: var(--color-text);
+  font-weight: var(--font-weight-extrabold);
+  letter-spacing: 0.02rem;
+  margin: 0;
+  margin-bottom: 0.25em;
+  text-transform: uppercase;
+}
+
+%small-label {
+  @extend %label;
+  color: var(--color-text);
+  font-size: var(--font-size-xs);
+  letter-spacing: 0.02rem;
+}
+
+%large-label {
+  @extend %label;
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+  margin-bottom: 0.5em;
+}
+
+%stat {
+  margin-top: 0.5rem;
+  margin-right: 1rem;
+  @extend %row;
+
+  @media screen and (min-width: 900px) {
+    margin-top: 0;
+  }
+  svg {
+    margin: auto 0.5rem auto 0;
+    height: 1.5rem;
+    width: 1.5rem;
+    color: var(--color-icon);
+  }
+  .info {
+    margin: auto 0;
+    white-space: nowrap;
+    h4 {
+      @extend %small-label;
+    }
+    .value {
+      font-size: var(--font-size-sm);
+      margin: 0;
+      color: var(--color-text-dark);
+    }
+  }
+}