made some css styles for the pages so its easier to deal with

Relates #16
GSG-G7 · Aug 28, 2019 · 3bc9b66 · 3bc9b66
1 parent d751fa4
commit 3bc9b66
Show file tree

Hide file tree

Showing 7 changed files with 188 additions and 23 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -0,0 +1,164 @@
+@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Montserrat:400,700|Roboto:400,700&display=swap');
+
+/*
+font-family: 'Roboto', sans-serif;
+font-family: 'Lato', sans-serif;
+font-family: 'Montserrat', sans-serif;
+*/
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+}
+
+.header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 10px 20px;
+  background: #eee;
+}
+
+.header-login {
+  background: #333;
+  color: #fff;
+  font-weight: 700;
+  padding: 5px 10px;
+  text-decoration: none;
+}
+
+.home {
+  width: 100%;
+  height: 90vh;
+  text-align: center;
+  position: relative;
+}
+
+.home-intro {
+  width: 100%;
+  height: 60vh;
+  padding: 20px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.home-heading {
+  font-size: 24px;
+  font-weight: 700;
+  margin: 20px 0;
+}
+
+.home-paragraph {
+  color: rgb(110, 110, 110);
+  margin: 10px 0 30px 0;
+}
+
+.home-signup {
+  background: rgb(27, 152, 255);
+  color: #fff;
+  text-decoration: none;
+  padding: 10px 40px;
+  font-weight: 700;
+}
+
+.login,
+.signup {
+  width: 100%;
+  height: 60vh;
+  padding: 20px;
+}
+
+.login-form,
+.signup-form {
+  width: 70%;
+  margin: 0 auto;
+  height: 80vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.login-form input,
+.signup-form input,
+.signup-form select {
+  display: block;
+  margin: 15px 0;
+  padding: 10px 20px;
+  border: 1px solid rgb(27, 152, 255);
+  outline: none;
+}
+
+.login-button,
+.signup-button {
+  background: rgb(27, 152, 255);
+  color: #fff;
+  font-weight: 700;
+}
+
+.header-nav {
+  width: 100%;
+  padding: 10px 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.header-list ul {
+  display: none;
+}
+
+.posts {
+  width: 100%;
+  padding: 20px;
+  min-height: 90vh;
+}
+
+.post {
+  background: #eee;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.post .top {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.post .top .image {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+}
+
+.post .top .user-time span {
+  display: block;
+}
+
+.post .content {
+  margin: 5px 0 0 0;
+}
+
+.post .comments {
+  margin: 10px 0 0 0;
+}
+
+.post .comments img {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+}
+
+.footer {
+  width: 100%;
+  text-align: center;
+  background: #eee;
+  padding: 10px 20px;
+  position: absolute;
+  bottom: 0;
+}
diff --git a/server/views/home.hbs b/server/views/home.hbs
@@ -1,10 +1,10 @@
 {{> header}}
 <section class="home">
-    <section class="home__intro">
-        <h1 class="home__heading">Home Title Here...</h1>
-        <p class="home__paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti dignissimos
+    <section class="home-intro">
+        <h1 class="home-heading">Home Title Here...</h1>
+        <p class="home-paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corrupti dignissimos
             distinctio quae labore velit harum ipsum deleniti error eligendi consequuntur?</p>
-        <a href="/signup" class="home__signup">Sign Up</a>
+        <a href="/signup" class="home-signup">Sign Up</a>
     </section>
 </section>
 {{> footer}}
diff --git a/server/views/layouts/main.hbs b/server/views/layouts/main.hbs
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Thoughts</title>
+    <link rel="stylesheet" href="css/style.css">
 </head>
 
 <body>

diff --git a/server/views/login.hbs b/server/views/login.hbs
@@ -1,10 +1,10 @@
 {{> header}}
 
 <section class="login">
-    <form action="/login-data" method="post" class="login__form">
-        <input type="email" name="email" class="login__email" placeholder="Enter Your Email">
-        <input type="password" name="password" class="login__password" placeholder="Enter Your password">
-        <input type="submit" name="submit" value="Login" class="login__button">
+    <form action="/login-data" method="post" class="login-form">
+        <input type="email" name="email" placeholder="Enter Your Email">
+        <input type="password" name="password" placeholder="Enter Your password">
+        <input type="submit" name="submit" value="Login" class="login-button">
     </form>
 </section>
 

diff --git a/server/views/partials/header.hbs b/server/views/partials/header.hbs
@@ -1,4 +1,4 @@
 <header class="header">
-    <div class="header__logo">LOGO</div>
-    <a href="/login" class="header__login">Login</a>
+    <div class="header-logo">LOGO</div>
+    <a href="/login" class="header-login">Login</a>
 </header>
diff --git a/server/views/posts.hbs b/server/views/posts.hbs
@@ -1,10 +1,10 @@
 <header class="header">
-    <nav class="header__nav">
-        <div class="header__logo">LOGO</div>
+    <nav class="header-nav">
+        <div>LOGO</div>
         <div>
-            <a href="#" class="header__home">Home</a>
+            <a href="#">Home</a>
         </div>
-        <div class="header__list">
+        <div>
             <a>Username</a>
             <ul>
                 <li><a href="/profile">profile</a></li>

diff --git a/server/views/signup.hbs b/server/views/signup.hbs
@@ -1,19 +1,19 @@
 {{> header}}
 
-<section class="Signup">
-    <form action="/signup-data" method="POST" class="Signup__form">
-        <input type="text" name="username" class="Signup__username" placeholder="Enter Your Username">
-        <input type="email" name="email" class="Signup__email" placeholder="Enter Your Email">
-        <input type="password" name="password" class="Signup__password" placeholder="Enter Your password">
-        <input type="password" name="confirmPassword" class="Signup__password" placeholder="Confirm Your password">
-        <select name="gender" class="Signup__gender">
+<section class="signup">
+    <form action="/signup-data" method="POST" class="signup-form">
+        <input type="text" name="username" placeholder="Enter Your Username">
+        <input type="email" name="email" placeholder="Enter Your Email">
+        <input type="password" name="password" placeholder="Enter Your password">
+        <input type="password" name="confirmPassword" placeholder="Confirm Your password">
+        <select name="gender">
             <option value="Male">Male</option>
             <option value="Female">Female</option>
         </select>
-        <input type="date" name="date" class="Signup__date" placeholder="Enter Your birthday">
+        <input type="date" name="date" placeholder="Enter Your birthday">
         <input type="text" name="country" class="country" placeholder="Enter Your country">
         <input type="text" name="bio" class="bio" placeholder="Enter your bio">
-        <input type="submit" name="submit" value="Signup" class="Signup__button">
+        <input type="submit" name="submit" value="Signup" class="signup-button">
 
     </form>
 </section>