Merge pull request #68 from hacks/mobile-comfort

Added mobile & accessible changes

Author: indefinities

src/assets/speech-bubble.svg

@@ -1,10 +1,16 @@
 <template>
   <div class="hacks-nav">
     <div class="hacks-nav__container" v-if="!isMobile">
-      <router-link v-for="r in routes" :key="r.path" :to="r.path">{{ r.name }}</router-link>
+      <router-link v-for="r in routes" :key="r.path" :to="r.path">{{
+        r.name
+      }}</router-link>
     </div>
 
-    <div class="hacks-nav__button" v-if="isMobile" @click="menuOpen = !menuOpen">
+    <div
+      class="hacks-nav__button"
+      v-if="isMobile"
+      @click="menuOpen = !menuOpen"
+    >
       <h2>≡</h2>
     </div>
 
@@ -37,26 +43,26 @@ import { routes } from "../router";
 export default {
   name: "hacks-nav",
   components: {
-    HacksModal
+    HacksModal,
   },
   props: {
     isMobile: {
       type: Boolean,
       required: true,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
       menuOpen: false,
-      routes: routes
+      routes: routes,
     };
   },
   methods: {
     closeModal() {
       this.menuOpen = !this.menuOpen;
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -67,22 +73,23 @@ export default {
   font-variant: small-caps;
   text-transform: lowercase;
   font-weight: lighter;
-  width: $hacks-page-width;
   display: block;
   margin: auto;
+  width: fit-content;
 
   &__button {
-    line-height: 48px;
     cursor: pointer;
     display: block;
     width: 100vw;
+    line-height: 3em;
     top: 0;
     right: 0;
 
     h2 {
       margin: unset;
       text-align: right;
-      font-size: 108px !important;
+      padding-right: 0.1em;
+      font-size: $hacks-hamburger-size;
     }
   }
 
@@ -92,14 +99,17 @@ export default {
     list-style-type: none;
     display: block;
     margin: 15vh auto;
-    font-size: 72px;
+    font-size: $hacks-mobile-menu-text;
+
+    > li {
+      padding: 1em 0;
+    }
   }
 
   a {
     position: relative;
     text-decoration: none;
     font-weight: 900;
-    size: 14px !important;
     color: $hacks-nav-inactive-color !important;
     font-size: $hacks-h2;
     padding: 0.5em;
@@ -113,8 +123,7 @@ export default {
       &:not(.router-link-exact-active) {
         @keyframes focusin {
           from {
-            text-shadow: 3px 3px rgba($color: red, $alpha: 0.4),
-              -3px -3px rgba($color: cyan, $alpha: 0.4);
+            text-shadow: $hacks-three-dee;
           }
           to {
             text-shadow: unset;
@@ -130,10 +139,15 @@ export default {
   &__container {
     display: flex;
     flex-wrap: wrap;
+    width: $hacks-page-width;
     align-items: baseline;
     margin: unset;
     margin-top: 1em;
 
+    @media (max-width: $hacks-page-width) {
+      width: 80vw;
+    }
+
     :nth-child(1) {
       padding-left: unset;
     }

src/components/hacks-nav.vue

@@ -1,6 +1,6 @@
 .hacks {
   &-small-caps {
-    font-size: $hacks-text;
+    font-size: $hacks-small-caps-size;
     font-weight: $hacks-small-caps-weight;
     font-variant: small-caps;
     text-transform: lowercase;

src/styles/_default.scss

@@ -1,11 +1,33 @@
 // Text
-$hacks-h1: 48px;
-$hacks-h2: 36px;
-$hacks-text: 24px;
+$hacks-h1: 3em;
+$hacks-h2: 2em;
+$hacks-text: 1.5em;
 $hacks-text-spacing: 2em;
+$hacks-small-caps-size: 2.2em;
 $hacks-small-caps-weight: 600;
+$hacks-hamburger-size: 8em;
+$hacks-mobile-menu-text: em(72px);
 
 $hacks-border: 5px dotted rgba(white, 0.5);
+$hacks-three-dee: 3px 3px
+    rgba(
+      $color: red,
+      $alpha: 0.4,
+    ),
+  -3px -3px
+    rgba(
+      $color: cyan,
+      $alpha: 0.4,
+    );
+$hacks-title-three-dee: 2px 0px
+    rgba(
+      $color: red,
+      $alpha: 0.4,
+    ),
+  -2px 0px rgba(
+      $color: cyan,
+      $alpha: 0.4,
+    );
 
 // Sizes
 $hacks-page-width: 981px;

src/styles/_variables.scss

@@ -16,9 +16,7 @@
       is. Here are some that we think are memorable:
     </p>
     <ul>
-      <li>
-        Hacks is a place where cool people build cool stuff because it's cool
-      </li>
+      <li>Hacks is a place where cool people build cool stuff because it's cool</li>
       <li>Tech tastemakers</li>
       <li>We sit around and watch train videos</li>
       <li>Social club for nerds</li>
@@ -29,14 +27,16 @@
     </ul>
     <p>
       If you want to add your own description come to a hacks meeting or email
-      <a href="mailto:eboard@nuhacks.io">eboard@nuhacks.io</a>
+      <a
+        href="mailto:eboard@nuhacks.io"
+      >eboard@nuhacks.io</a>
     </p>
   </section>
 </template>
 
 <script>
 export default {
-  name: "hacks-about",
+  name: "hacks-about"
 };
 </script>
 
@@ -66,7 +66,6 @@ export default {
 
     li:before {
       content: "⮑";
-      font-size: 18px;
       vertical-align: top;
       padding-right: 1em;
     }

src/views/About.vue

@@ -145,7 +145,6 @@ export default {
 
   &__position {
     opacity: 0.7;
-    width: 10em;
     word-wrap: break-word;
   }
 

src/views/EBoard.vue

@@ -17,7 +17,7 @@
         </em>
       </p>
 
-      <div class="hacks-homepage__email">
+      <div>
         <span class="hacks-small-caps">Questions?</span>
         <p>Email us at eboard@nuhacks.io</p>
       </div>
@@ -50,13 +50,13 @@
           <hacks-button
             link="https://nuhacks.us4.list-manage.com/subscribe?u=cbcce83bcf3543d25bd103865&id=6c0da9d34e"
           >
-            <img src="../assets/mail.svg"/>
+            <img src="../assets/mail.svg" />
             <h3>Mailing List</h3>
           </hacks-button>
           <hacks-button
             link="https://join.slack.com/t/nuhacks/shared_invite/zt-fgvmdpo1-KzxoPn2ematExVMDKEK1zQ"
           >
-            <img src="../assets/slack-black.svg">
+            <img src="../assets/slack-black.svg" />
             <h3>Slack</h3>
           </hacks-button>
         </div>
@@ -73,8 +73,8 @@ export default {
   name: "hacks-homepage",
   components: {
     HacksButton,
-    HacksAnnounce
-  }
+    HacksAnnounce,
+  },
 };
 </script>
 
@@ -88,27 +88,19 @@ export default {
   }
 
   &__slogan {
-    width: 500px;
+    width: 600px;
     line-height: $hacks-text-spacing;
-
-    @media (max-width: 500px) {
-      width: 100%;
-    }
-  }
-
-  &__email {
-    padding-left: 3em;
+    margin-right: 1em;
+    margin-bottom: 1em;
   }
 
   &__join {
     font-weight: $hacks-small-caps-weight;
-    font-size: 36px !important;
     padding-left: 0.3em;
   }
 
   &__title {
-    text-shadow: 2px 0px rgba($color: red, $alpha: 0.4),
-      -2px 0px rgba($color: cyan, $alpha: 0.4);
+    text-shadow: $hacks-title-three-dee;
     color: rgba($color: white, $alpha: 0.7);
   }
 

src/views/Home.vue

@@ -90,14 +90,6 @@ export default {
     flex-flow: row wrap;
   }
 
-  &__ccs {
-    display: block;
-    margin: auto;
-    color: $hacks-background-color;
-    font-size: 18px;
-    text-transform: uppercase;
-  }
-
   &__member {
     margin: 1em;
     margin-left: unset;
@@ -121,7 +113,6 @@ export default {
           content: ">";
           padding-right: 1em;
           vertical-align: top;
-          font-size: 18px;
         }
       }
     }