style tweaks

src/js/actions/Actions.js

@@ -154,6 +154,7 @@ Actions.downvotePost.listen((userId, postId) => {
     });
 });
 
+
 /* Comment Actions
 =============================== */
 

src/scss/_general.scss

@@ -3,15 +3,18 @@
 ====================================== */
 
 h1 { margin-top: 0; }
-h1,h2,h3,h4,h5,h6 {
+h1, h2, h3, h4, h5, h6 {
     font-family: $heading-font;
 }
 
 a {
     color: $link;
     cursor: pointer;
     text-decoration: none;
-    &:hover { text-decoration: underline; }
+
+    &:hover {
+        text-decoration: underline;
+    }
 }
 
 hr {

src/scss/_helpers.scss

@@ -108,17 +108,6 @@
     }
 }
 
-// .button-gray {
-//     background: $dark-gray;
-
-//     &:active {
-//         border-bottom-width: 1px;
-//     }
-//     &:hover {
-//         background: darken($button, 3%);
-//     }
-// }
-
 .error {
     color: $error;
 }

src/scss/_modal.scss

@@ -55,13 +55,23 @@
     right: 5px;
     width: 40px;
     height: 40px;
-    line-height: 40px;
     text-align: center;
-    color: $dark-gray;
     border-radius: 50%;
     background: transparent;
     transition: background 150ms;
 
+    svg {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: inline-block;
+        vertical-align: middle;
+        width: 15px;
+        height: 15px;
+        fill: $dark-gray;
+    }
+
     &:hover {
         background: rgba(#000, 0.05);
     }

src/scss/_navbar.scss

@@ -17,17 +17,20 @@
 }
 
 .menu-title {
-    padding: $x-small $small;
-}
-
-.newpost-link {
     display: inline-block;
-    vertical-align: middle;
-    margin-left: 0.5rem;
-    padding: 0 1rem;
-    line-height: 1;
-    font-size: 2em;
-    cursor: pointer;
+    vertical-align: top;
+    padding: 0 $small;
+
+    span {
+        display: inline-block;
+        margin-top: -0.3rem;
+        vertical-align: middle;
+        line-height: 1;
+    }
+
+    &:hover span {
+        text-decoration: underline;
+    }
 }
 
 .header-title {
@@ -40,18 +43,50 @@
 
 .profile-link {
     display: inline-block;
+    vertical-align: top;
+
+    &:hover .username {
+        text-decoration: underline;
+    }
+}
+
+.profile-pic,
+.username {
+    display: inline-block;
+    margin-top: -0.3rem;
+    vertical-align: middle;
+    line-height: 1;
 }
 
 .profile-pic {
     width: $medium;
     height: $medium;
-    margin: 0 0.8rem;
-    vertical-align: middle;
+    margin-left: 0.8rem;
     border-radius: 50%;
-    // filter: grayscale(100%);
+
     @media screen and (max-width: 600px) {
         display: none;
     }
 }
 
-// .username {}
+.newpost-link {
+    position: relative;
+    display: inline-block;
+    height: $nav-height;
+    width: 64px;
+    vertical-align: top;
+    margin-left: 0.5rem;
+    padding: 0 1rem;
+    font-size: 2em;
+    cursor: pointer;
+
+    svg {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 30px;
+        height: 30px;
+        fill: #fff;
+    }
+}

src/scss/_posts.scss

@@ -42,19 +42,33 @@
 // .comments-link {}
 
 .upvote {
+    display: inline-block;
     color: $dark-gray;
     user-select: none;
+    line-height: 1;
 
     &:hover {
         text-decoration: none;
     }
 
-    &.upvoted {
-        color: $upvoted;
+    &.updating {
+        opacity: 0.8;
     }
 
-    &.updating {
-        transform: scale(0.8);
+    > * {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    svg {
+        width: 12px;
+        height: 12px;
+        margin-left: 3px;
+        fill: $dark-gray;
+    }
+
+    &.upvoted svg {
+        fill: $upvoted;
     }
 }