more wip

src/components/GameCards/GameCardDefault.vue

@@ -1,7 +1,7 @@
 <template lang="html">
   <b-card
     no-body
-    bg-variant="secondary"
+    bg-variant="light"
     class="card clickable"
   >
     <b-row

src/components/Note.vue

@@ -1,6 +1,5 @@
 <template lang="html">
   <div>
-    <pre>{{ note }}</pre>
     <strong v-if="gameName">
       {{ gameName }} ({{ note.length }})
     </strong>

src/pages/BoardsPage.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <div>
+  <b-container fluid>
     <page-title
       title="Boards"
       action-text="Create board"
@@ -20,7 +20,7 @@
         Explore boards
       </b-button>
     </empty-state>
-  </div>
+</b-container>
 </template>
 
 <script>

src/pages/DevToolsPage.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <b-container>
+  <b-container fluid>
     <page-title
       title="Dev tools"
     />

src/pages/NotesPage.vue

@@ -2,7 +2,6 @@
 <!-- TODO: open notes from game modal on click? -->
 <template lang="html">
   <b-container fluid>
-    <pre>{{ notes }}</pre>
     <page-title
       title="Notes"
     >
@@ -148,9 +147,3 @@ export default {
 //   column-fill: auto;
 // }
 </style>
-
-<style lang="scss" rel="stylesheet/scss">
-img, pre {
-  max-width: 100%;
-}
-</style>

src/pages/PublicProfilesPage.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <b-container>
+  <b-container fluid>
     <page-title
       title="Profiles"
     />

src/pages/ReleasesPage.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <b-container>
+  <b-container fluid>
     <page-title
       title="Releases"
     >

src/pages/TagsPage.vue

@@ -1,6 +1,6 @@
 <!-- TODO: break this up into components -->
 <template lang="html">
-  <b-container>
+  <b-container fluid>
     <empty-state
       v-if="showEmptyState"
       :title="$t('tags.title')"

src/pages/WallpapersPage.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <b-container>
+  <b-container fluid>
     <empty-state
       v-if="showEmptyState"
       :title="$t('wallpapers.title')"

src/styles/_colors.scss

@@ -0,0 +1,32 @@
+// COLORS
+// Shared
+$muted: #7d7f8c !default;
+$danger: #ad1035 !default;
+$warning: #ffc500 !default;
+$success: #23cd69 !default;
+$white: #f8f8ff !default;
+$black: #0b0b18 !default;
+$info: #794bc4 !default;
+
+// Light theme
+$light: #e2e2e2 !default;
+$primary: #3d6692 !default;
+
+// Dark theme
+$dark: #7d7f8c !default;
+$secondary: #c0c0c0 !default;
+
+$theme-colors: () !default;
+$theme-colors: map-merge(
+  (
+    // "primary": $primary,
+    "secondary": $secondary,
+    // "success": $success,
+    // "info": $info,
+    "warning": $warning,
+    // "danger": $danger,
+    // "light": $light,
+    // "dark": $dark,
+  ),
+  $theme-colors
+);

src/styles/_helpers.scss

@@ -5,4 +5,12 @@
 .releases img {
   max-width: 100%;
   margin-top: 1rem;
-}
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.z-index-1 {
+  z-index: 1;
+}

src/styles/_overrides.scss

@@ -0,0 +1,39 @@
+.modal {
+  padding: 1rem 0 !important;
+
+  @media(max-width: 600px) {
+    padding: 0 !important;
+  }
+}
+
+.b-sidebar {
+  width: 500px;
+
+  max-width: calc(100% - 1rem);
+}
+
+/* custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: $dark;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: $secondary;
+  border-radius: $border-radius;
+  padding: 10px;
+  margin: 10px;
+  background-clip: content-box;
+
+  &:hover {
+    background-color: $light;
+  }
+}
+
+.toast-header {
+  display: none;
+}

src/styles/_theme.scss

@@ -1,33 +1,6 @@
 // TODO: organize file, break it up by sections
 @import url('https://fonts.googleapis.com/css2?family=Signika:wght@300;400;500;600;700&display=swap');
-
-// Colors
-// $light: #7d81a5 !default;
-$dark: #7d7f8c !default;
-$muted: #7d7f8c !default;
-// $danger: #ad1035 !default;
-$warning: #ffc500 !default;
-$secondary: #c0c0c0 !default;
-// $info: #794bc4 !default;
-// $primary: #000 !default;
-$white: #fff !default;
-$black: #0b0b18 !default;
-$success: #23cd69 !default;
-
-$theme-colors: () !default;
-$theme-colors: map-merge(
-  (
-    // "primary": $primary,
-    "secondary": $secondary,
-    // "success": $success,
-    // "info": $info,
-    "warning": $warning,
-    // "danger": $danger,
-    // "light": $light,
-    // "dark": $dark,
-  ),
-  $theme-colors
-);
+@import "colors";
 
 // // Options
 // //

src/styles/styles.scss

@@ -1,52 +1,5 @@
-@import "_bootstrap-theme";
+@import "theme";
 @import 'node_modules/bootstrap/scss/bootstrap';
 @import 'node_modules/bootstrap-vue/src/index.scss';
-@import "_utilities";
-
-.toast-header {
-  display: none;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.modal {
-  padding: 1rem 0 !important;
-
-  @media(max-width: 600px) {
-    padding: 0 !important;
-  }
-}
-
-.b-sidebar {
-  width: 500px;
-
-  max-width: calc(100% - 1rem);
-}
-
-/* custom scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: $dark;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: $secondary;
-  border-radius: $border-radius;
-  padding: 10px;
-  margin: 10px;
-  background-clip: content-box;
-
-  &:hover {
-    background-color: $light;
-  }
-}
-
-.z-index-1 {
-  z-index: 1;
-}
+@import "helpers";
+@import "overrides";