Responsive

src/components/Hero.vue

@@ -24,8 +24,11 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+@import '~bulma/sass/utilities/mixins'
+
 section
   margin-bottom: 2rem
-.is-three-quarters
++desktop
-  width: 75%
+  .is-three-quarters
+    width: 75%
 </style>

src/containers/Blog.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-#blog
+#blog.has-text-centered-mobile
   h1.title coming soon!
 </template>
 

src/containers/Home.vue

@@ -9,7 +9,6 @@
             i'm a communist, a
             #[a(href='https://mattandmack.website' target='_blank') spouse-to-be],
             a recently graduated student, and a software developer at yelp.
-      .tile.placeholder.notification.is-white
       .tile.is-9
         .notification.is-warning
           h1.title.is-4 what's inspiring me now
@@ -39,8 +38,3 @@ export default {
   name: 'Home',
 };
 </script>
-
-<style lang="sass" scoped>
-.placeholder
-  height: 1rem
-</style>

src/containers/Projects.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-#projects
+#projects.is-half.has-text-centered-mobile
   p.content check out my #[a(href='https://github.com/matthewess') github account]!
   h1.title #[a(href='https://github.com/matthewess/boilertalk-frontend') Boilertalk]
   p.content.
@@ -34,6 +34,9 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-#projects
+@import '~bulma/sass/utilities/mixins'
-  width: 50%
+
++desktop
+  .is-half
+    width: 50%
 </style>

src/containers/Resume.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-#resume
+#resume.is-half.has-text-centered-mobile
   .content
     h1.title matthew ess
     h2.subtitle software developer
@@ -48,12 +48,15 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+@import '~bulma/sass/utilities/mixins'
+
 $pink: #f8a5c2
 
 hr
   width: 75%
   height: 0.5rem
   background: $pink
-.content
++desktop
-  width: 50%
+  .is-half
+    width: 50%
 </style>