Merge pull request #6 from haideralipunjabi/feature/improve-css

Improved CSS

src/components/App.css

@@ -1,30 +1,46 @@
-.navbar{
-    color:#ffffff;
-    padding-left:40px;
-    background-color: #6272a4;
-    padding:5px 5px 5px 35px;
-    font-family:segoe ui;
+html,
+body,
+#root {
+  height: 100%;
 }
-.logo{
-   height:30px;
-   width:30px;
-   margin-right:10px;
+.navbar {
+  color: #ffffff;
+  padding-left: 40px;
+  background-color: #6272a4;
+  padding: 5px 5px 5px 35px;
+  font-family: segoe ui;
+}
+.navbar h4 {
+    margin-bottom: 0;
+}
+.logo {
+  height: 30px;
+  width: 30px;
+  margin-right: 10px;
+}
+.outerContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
 }
 a {
-   color:inherit;
+  color: inherit;
 }
-a i:hover{
-   color:#f2f2f2;
+a i:hover {
+  color: #f2f2f2;
 }
-footer{
-    height:40px;
+footer {
+  height: 40px;
   text-align: center;
-    background-color:#ffffff;
-    padding:10px;
+  background-color: #ffffff;
+  padding: 10px;
   font-size: 14px;
-    border-top:1px solid  #cccccc;
+  border-top: 1px solid #cccccc;
 }
 
-@media screen and (max-width:600px){
-    footer{margin-top:40px;}
+@media screen and (max-width: 600px) {
+  footer {
+    margin-top: 40px;
+  }
 }

src/components/App.js

@@ -6,7 +6,7 @@ class App extends React.Component {
 
     render() {
         return (
-            <div>
+            <div className={"outerContainer"}>
                 <Navbar />
                 <ConfigCover />
                 <Footer />

src/components/ConfigCover.css

@@ -8,7 +8,7 @@ body {
 	align-items: center;  */
 	display: flex;
 	flex-direction: row;
-
+	align-items: center;
 }
 .tagline {
 	max-width: 300px;
@@ -85,7 +85,7 @@ svg {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin:60px;
+	width: 100%;
 	}
 label{
 	margin: 5px;

src/components/CoverImage.css

@@ -31,7 +31,6 @@ i{
     margin-left:2vw;
 }
 .author{
-    float:right;
     margin-right:3vw;
 }
 .meta{
@@ -41,7 +40,9 @@ i{
     height:42px;
     padding :4px;
     font-weight: 500;
-    vertical-align: middle;    
+    display: flex;
+    align-items: center;
+    justify-content: space-between  
 }
 
 h1{