Major design overhaul

assets/main.scss

@@ -1,33 +1,24 @@
-@import '~bulma/sass/utilities/_all.sass';
+$text-light: #282c34;
+$text-dark: #f8f8f8;
 
-/* $primary: #39393a; */
-$primary: #3a445d;
-$secondary: #ebf2fa;
-$info: orange;
-$highlight: #ef8354;
+$background-light: #f8f8f8;
+$background-dark: #282c35;
 
-@import '~bulma/bulma';
+$icon-light: #282c34;
+$icon-dark: #f8f8f8;
+
+$highlight-light: #a17891;
+$highlight-dark: #c492b1;
 
 html {
   min-height: 100vh;
 }
 
 body {
-  font-family: 'Lato', sans-serif;
-  min-height: 100vh;
-}
-
-.page-enter-active,
-.page-leave-active {
-  transition: opacity 0.5s;
-}
-.page-enter,
-.page-leave-to {
-  opacity: 0;
+  font-family: 'Roboto', sans-serif;
+  margin: 0;
 }
 
-.aboutText {
-  color: #4a4a4a;
-  font-weight: 400;
-  line-height: 1.25;
+button::-moz-focus-inner {
+  border: 0;
 }

components/Article.vue

@@ -1,11 +1,13 @@
 <template>
   <section class="article">
-    <span class="date">
-      {{ date }} -
-    </span>
-    <nuxt-link
-      :to="url"
-      class="articleTitle subtitle">{{ title }}</nuxt-link>
+    <h5>
+      <nuxt-link
+        :class="{ 'darkTheme': this.$store.state.isDark }"
+        :to="url"
+        class="article-title"
+      >{{ title }}</nuxt-link>
+    </h5>
+    <time class="article-date">{{ date }}</time>
   </section>
 </template>
 
@@ -25,27 +27,29 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
 .article {
-  padding-top: 10px;
+  padding: 25px;
 }
 
-.articleTitle {
-  color: black;
+.article-title {
+  text-decoration: none;
+  font-size: 1.75em;
+  color: #111111;
+  font-weight: bold;
 }
 
-.articleTitle:hover {
-  opacity: 0.5;
+.article-title:hover {
+  opacity: 0.7;
 }
 
-.date {
-  opacity: 0.75;
-  font-size: 0.9em;
+.article-date {
+  color: $highlight-light;
+  font-weight: bold;
+  font-size: 1.25em;
 }
 
-@media only screen and (max-width: 468px) {
-  .articleTitle {
-    font-size: 1em;
-  }
+.darkTheme {
+  color: $text-dark;
 }
 </style>