Merge pull request #2 from joealden/style-redesign

Style redesign

TODO.md

@@ -1,7 +1,6 @@
 # TODO
 
 - Redo README.md (React --> Vue)
-- Move from sass to postcss
 - page transitions (Vue's `transition` component)
 - vue-apollo (Nuxt Apollo module)
 - Login + signup pages (backend thought)

client/apollo/queries/subforumName.gql

@@ -0,0 +1,5 @@
+query Subforum($url: String!) {
+  Subforum(url: $url) {
+    name
+  }
+}

client/assets/styles/_accountPages.scss

@@ -1,75 +1,74 @@
-main {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+@import 'variables';
 
 section {
-  width: 34rem;
-  padding: 4rem 0;
+  width: 30rem;
+  margin: 0 auto;
+  padding: 0;
   display: flex;
   flex-direction: column;
-  background: white;
+  background-color: $primary-blue;
   border: 3px solid hsla(0, 0, 0, 0.5);
   border-radius: 5px;
-  background-color: #eee;
+  box-shadow: 10px 10px 25px #999;
 }
 
-form {
-  width: 28rem;
-  margin: 1.5rem auto;
-  padding: 0.8rem;
-  border: 3px solid hsla(0, 0, 0, 0.35);
-  border-radius: 5px;
-  background-color: white;
+img {
+  height: 6rem;
+  margin: 3rem 3rem 2rem 3rem;
 }
 
-h1 {
-  font-size: 2.2rem;
-  margin: 0.5rem 0 1.1rem 0;
+form {
+  width: 25rem;
+  margin: 0 auto;
+  padding: 0.75rem;
+  border-radius: 0.3rem;
+  background-color: white;
 }
 
 input {
-  width: 98%;
   height: 4rem;
+  width: 24.5rem;
+  margin: 0.4rem 0;
   font-size: 1.65rem;
-  margin-bottom: 0.7rem;
   text-align: center;
-  border: 2px solid hsla(0, 0, 0, 0.35);
+  border: none;
   border-radius: 5px;
+  transition: 0.2s ease-in-out;
 }
 
 input[type='text'],
 input[type='password'] {
-  background-color: rgb(245, 245, 245);
+  background-color: #eee;
 
   &:hover,
   &:focus {
-    background-color: white;
+    background-color: $border;
   }
 }
 
 input[type='submit'] {
-  width: 14rem;
-  height: 3.75rem;
-  margin-bottom: 0;
-  background-color: black;
+  background-color: $primary-blue;
   color: white;
+  margin-bottom: 0;
+  text-transform: uppercase;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-weight: 600;
+  color: $nav-hover;
 
   &:hover {
     cursor: pointer;
+    background-color: $nav-hover;
+    color: $nav-text-hover;
+    border-color: $nav-hover;
   }
 }
 
 p {
-  margin: 0;
-  font-size: 1.2rem;
-
+  font-size: 1.3rem;
+  color: white;
+  margin-top: 1.5rem;
+  margin-bottom: 3rem;
   a {
-    color: MediumSeaGreen;
+    color: $nav-hover;
   }
 }
-
-img {
-  height: 6rem;
-}

client/assets/styles/_layouts.scss

@@ -0,0 +1,32 @@
+@import 'variables';
+
+#grid {
+  height: 100vh;
+  width: 100vw;
+  display: grid;
+  grid-template-rows: 8rem auto;
+  grid-template-columns: 25em auto;
+  grid-template-areas: 'logo header' 'nav main';
+}
+
+main {
+  grid-area: main;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  background-color: #e3e4e8;
+  box-shadow: 10px 10px 30px #999 inset;
+  overflow: auto;
+}
+
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.25s ease-out;
+}
+.page-enter,
+.page-leave-active {
+  opacity: 0;
+  transform-origin: 50% 50%;
+}

client/assets/styles/_variables.scss

@@ -0,0 +1,10 @@
+$primary-blue: #101218;
+$secondary-blue: #0a0b10;
+$hover-blue: #282e37;
+
+$border: #d0d2db;
+
+$nav-hover: #53c556;
+$nav-active: #8ac8ff;
+$nav-text: #bfc1c9;
+$nav-text-hover: white;

client/assets/styles/globals.scss

@@ -1,8 +1,8 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto');
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600');
 
 // Global font settings
 html {
-  font-family: 'Roboto', sans-serif;
+  font-family: 'Source Sans Pro', sans-serif;
   font-size: 14px;
 }
 

client/components/layout/Header.vue

@@ -6,31 +6,41 @@
 </template>
 
 <style lang="scss" scoped>
+@import '../../assets/styles/variables';
+
 header {
   grid-area: header;
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  background-color: #ccc;
-  border-bottom: 2px solid black;
+  background-color: white;
+  margin-right: 3rem;
 }
 
 a {
   font-size: 1.5rem;
-  margin-right: 1.5rem;
-  padding: 0.8rem;
-  background: black;
-  color: white;
-  border: none;
-  border-radius: 7px 7px 0 7px;
-  text-decoration: none;
+  padding: 0.8rem 1.6rem;
+  background: $primary-blue;
+  color: $nav-hover;
+  border-radius: 5px;
+  text-transform: uppercase;
+  font-weight: 600;
+  transition: 0.15s ease-in-out;
+
+  &:first-child {
+    margin-right: 1.5rem;
+  }
 
   &:hover {
-    background-color: #333;
+    transform: translateY(-0.2rem); 
+    box-shadow: 0 4px 10px #999;
+    background-color: $nav-hover;
+    color: white;
   }
 }
 
 .nuxt-link-active {
-  background-color: #333;
+  background-color: $nav-hover;
+  color: white;
 }
 </style>