updates

src/pages/About.vue

@@ -1,49 +1,22 @@
 <template lang="html">
-  <b-container>
-    <h2>About Gamebrary</h2>
-
-    <vue-markdown
-      class="w-100"
-      v-if="readme"
-      :source="readme"
+  <b-container-fluid>
+    <b-jumbotron
+      header="About Gamebrary"
+      header-level="5"
+      fluid
+      lead="Links to github here"
     />
 
-    <div v-if="repo">
-      <b-button
-        size="sm"
-        href="https://github.com/romancm/gamebrary/subscription"
-        target="_blank"
-      >
-        Watch <b-badge variant="light">{{ repo.watchers }}</b-badge>
-      </b-button>
+    <b-container>
+      <vue-markdown
+        class="w-100"
+        v-if="readme"
+        :source="readme"
+      />
 
-      <b-button
-        size="sm"
-        href="https://github.com/romancm/gamebrary"
-        target="_blank"
-      >
-        Star <b-badge variant="light">{{ repo.stargazers_count }}</b-badge>
-      </b-button>
-
-      <b-button
-        size="sm"
-        href="https://github.com/romancm/gamebrary/fork"
-        target="_blank"
-      >
-        Fork <b-badge variant="light">{{ repo.forks }}</b-badge>
-      </b-button>
-
-      <b-button
-        size="sm"
-        href="https://github.com/romancm/gamebrary/issues"
-        target="_blank"
-      >
-        Issues <b-badge variant="light">{{ repo.open_issues }}</b-badge>
-      </b-button>
-    </div>
-
-    <small>©{{ currentYear }} Gamebrary</small>
-  </b-container>
+      <small>©{{ currentYear }} Gamebrary</small>
+    </b-container>
+  </b-container-fluid>
 </template>
 
 <script>

src/pages/Releases.vue

@@ -1,36 +1,65 @@
 <template lang="html">
   <b-container-fluid>
     <b-jumbotron
-      header="Themes"
+      header="Releases"
       header-level="5"
       fluid
       lead="Select a theme below"
     />
 
     <b-container>
-      <!-- TODO: add releases selector, only display latest by default -->
-      <b-card
-        v-for="release in releases"
-        :key="release.id"
-        header-tag="header"
-        hide-footer
-        class="mb-3"
-      >
-        <template v-slot:header>
-          <h6 class="mb-0">
-            <b-badge>{{ release.tag_name }}</b-badge>
-            {{ release.name }}
-          </h6>
-        </template>
+      <b-row>
+        <b-col>
+          <!-- TODO: add releases selector, only display latest by default -->
+          <b-card
+            v-for="release in releases"
+            :key="release.id"
+            header-tag="header"
+            hide-footer
+            class="mb-3"
+          >
+            <template v-slot:header>
+              <h6 class="mb-0">
+                <b-badge>{{ release.tag_name }}</b-badge>
+                {{ release.name }}
+              </h6>
+            </template>
 
-        <small class="text-muted">
-          {{ $t('releases.published', { date: formatDate(release.published_at) }) }}
-        </small>
+            <small class="text-muted">
+              {{ $t('releases.published', { date: formatDate(release.published_at) }) }}
+            </small>
+
+            </b-card-text>
+          </b-card>
+        </b-col>
+
+        <b-col cols="8">
+          <!-- TODO: add releases selector, only display latest by default -->
+          <b-card
+            v-for="release in releases"
+            :key="release.id"
+            header-tag="header"
+            hide-footer
+            class="mb-3"
+          >
+            <template v-slot:header>
+              <h6 class="mb-0">
+                <b-badge>{{ release.tag_name }}</b-badge>
+                {{ release.name }}
+              </h6>
+            </template>
+
+            <small class="text-muted">
+              {{ $t('releases.published', { date: formatDate(release.published_at) }) }}
+            </small>
+
+            <b-card-text>
+              <vue-markdown :source="release.body" class="w-100 releases" />
+            </b-card-text>
+          </b-card>
+        </b-col>
+      </b-row>
 
-        <b-card-text>
-          <vue-markdown :source="release.body" class="w-100 releases" />
-        </b-card-text>
-      </b-card>
     </b-container>
   </b-container-fluid>
 </template>
@@ -45,6 +74,12 @@ export default {
     VueMarkdown,
   },
 
+  data() {
+    return {
+      selectedRelease: null,
+    };
+  },
+
   computed: {
     ...mapState(['releases', 'notification', 'settings']),
   },

src/pages/Themes.vue

@@ -10,10 +10,8 @@
     <b-container>
       <b-row>
         <b-col
-          cols="6"
           lg="3"
-          md="1"
-          sm="1"
+          md="4"
           v-for="theme in themes"
           :key="theme.name"
           class="mb-4"