allowing authenticated user to comment

.gitignore

@@ -0,0 +1 @@
+.vscode

connection/connection.js

@@ -0,0 +1,10 @@
+/* Database configuration */
+const firebaseConfig = {
+    apiKey: "AIzaSyDyhJPX5hGXmkVCjWiDYDgxW8Ongh0YZqU",
+    authDomain: "capstone-d17ab.firebaseapp.com",
+    projectId: "capstone-d17ab",
+    storageBucket: "capstone-d17ab.appspot.com",
+    messagingSenderId: "658315154433",
+    appId: "1:658315154433:web:ee6855874b6ed722da1c00",
+    databaseURL:"https://capstone-d17ab-default-rtdb.europe-west1.firebasedatabase.app"
+};

css/blog.css

@@ -55,7 +55,7 @@
 .blog-card{
     /* width: 100%; */
     min-width: 250px;
-    margin: 1rem 1rem 1rem 0px;
+    margin: 16px 16px 16px 0px;
     height: 100px;
     background-color: white;
     border-radius: 10px;
@@ -184,7 +184,7 @@
     font-size: 13px;
     margin-top: 6px;    
     color:rgba(10, 10, 10, 0.651);
-    margin-top: 1rem;
+    margin-top: 16px;
     max-width: 100%;
     overflow-x: auto;
 }
@@ -202,11 +202,11 @@
 /* Icons  */
 .voting{
     width:100%;
-    margin-top: 3rem;
+    margin-top: 48px;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-bottom: 1rem;
+    margin-bottom: 16px;
 }
 .voting .icons{
     height: 20px;
@@ -381,7 +381,7 @@
     }
     .next-card-w{
         display:  block;
-        margin-top: 1rem ;
+        margin-top: 16px ;
         float: left;
         display: flex;
         justify-content: right;
@@ -457,4 +457,133 @@
         padding-right: 230px ;
     }
 }
-/*  ====== End:: Responsiviness ======  */
+/*  ====== End:: Responsiviness ======  */
+
+/*  comment style */
+
+.hidden-comment{
+    opacity: 0;
+    width: 0%;
+    transition: all 1s ease-in-out;
+    position: absolute;
+}
+.comments-class{
+    background-color: white;
+    margin: 4px;
+    padding: 10px;
+    border-radius: 10px;
+    transition: all 0.4s ease-in-out;
+}
+.user-comment{
+    display: flex;   
+}
+.user-comment .user-profile{
+    width: 15%;
+    margin-right: 12px;
+}
+.user-comment .user-comment-info{
+    width: 85%;
+}
+.commenters-details{
+    margin-top: 9px;
+}
+.blog-reading-side .user-comment-info p {
+    font-weight: 600 !important;
+    font-size: 14px;
+}
+.comment-words{
+    font-weight: 400 !important;
+    color: rgb(116, 105, 116);
+    font-size: 12px;
+}
+.send-comment .send {
+    float: left;
+    display: flex;
+    justify-content: right;
+    margin: 0px;
+    width: 100%;
+}
+.comment-information{
+    max-height: 250px;
+    overflow: auto;
+}
+.postComment textarea{
+    width: 100%;
+    height: 90px;
+    left: 468px;
+    top: 197px;
+    text-align: center;
+    font-size: 17px;
+    background: #E1F1FA;
+    box-shadow: var(--textAreaShadow);
+    border-radius: 5px;
+    border:none;
+    outline: none;
+    align-items: center;
+}
+.comment-divider{
+    width: 100%;
+    height: 0px;
+    border: 2px solid rgba(0, 0, 0, 0.15);
+    margin-top: 9px;
+    margin-bottom: 9px;
+}
+
+.link{
+    color: var(--main);
+    cursor: pointer;
+
+}
+.link:hover{
+    color: steelblue;
+
+
+}
+/* commenting responsiveness */
+@media screen and (min-width:700px) {
+
+    .comments-class{
+        box-shadow: var(--shadow);
+        width: 75%;
+        position: absolute;
+        z-index: 90;
+        right:0% ;
+        padding: 30px;
+    }
+    .user-comment .user-profile{
+        width: 10%;
+    }
+}
+@media screen and (min-width:900px) {
+
+    .comments-class{
+        width: 65%;   
+        right:6% ;     
+    }
+}
+@media screen and (min-width:1024px) {
+
+    .comments-class{
+        width: 50%;   
+        right:6% ;     
+
+    }
+}
+@media screen and (min-width:1200px) {
+    .comments-class{
+        width: 500px;   
+        right:9% ;     
+
+    }
+}
+
+@media screen and (min-width:1400px) {
+    .comments-class{
+        width: 450px;   
+        right:19% ;     
+
+    }
+    .user-comment .user-profile{
+        height: 10%;
+    }
+}

css/browse.css

@@ -10,7 +10,7 @@
 
     .leader{
         width: 340px;  
-        margin: 2rem;     
+        margin: 32px;     
     }
     .r-card{
         width: 100%;  
@@ -21,7 +21,7 @@
 @media screen and (min-width:513px){
     .leader{
         width: 80%;  
-        margin: 1rem;     
+        margin: 16px;     
     }
     .r-card{
         width: 80%;  
@@ -33,15 +33,15 @@
 
     .leader{
         width: 340px;  
-        margin: 1rem;     
+        margin: 16px;     
     }
     .r-card{
         width: 340px;  
         max-height: 712px;
     }
     .more{
         width: 100%;
-        padding-right: 1rem ;
+        padding-right: 16px ;
     }
 }
 @media screen and (min-width:900px){
@@ -138,7 +138,7 @@
 @media screen and (min-width:1400px) {
     .leader{
         width: 310px;  
-        margin: 1rem;     
+        margin: 16px;     
     }
     .r-card{
         width: 300px;  

css/form-styles.css

@@ -63,7 +63,7 @@ form.login input{
     width: 85% !important;
 }
 .login .form-fields{
-    padding: 1rem;
+    padding: 16px;
 }
 .login label{
     color: rgba(32, 32, 32, 0.624);
@@ -133,7 +133,7 @@ form.login input{
     font-family: 'Poppins' ,sans-serif;
     font-weight: 500;
     font-size: 14px;
-    padding: 1rem 0rem 1rem 1rem;
+    padding: 16px 0px 16px 16px;
 }
 
 
@@ -176,13 +176,13 @@ form.login input{
         margin-bottom: 9px;       
     }
     .footer-section{
-        margin-top: 8rem;
+        margin-top: 128px;
     }
     .form-container{
-        margin-top: 3rem;
+        margin-top: 48px;
     }
     .login .form-fields{
-        padding: 2rem;
+        padding: 32px;
     }
 }
 @media screen and (min-width: 900px ) {

css/responsiveness.css

@@ -17,7 +17,7 @@
 @media screen and (min-width:513px){
     .leader{
         width: 80%;  
-        margin: 1rem;     
+        margin: 16px;     
     }
     .r-card{
         width: 80%;  
@@ -38,15 +38,15 @@
     }    
     .leader{
         width: 340px;  
-        margin: 1rem;     
+        margin: 16px;     
     }
     .r-card{
         width: 340px;  
         max-height: 712px;
     }
     .more{
         width: 100%;
-        padding-right: 1rem ;
+        padding-right: 16px ;
     }
 }
 /* min-lapstop */
@@ -132,7 +132,7 @@
         width: 280px;
         height: 379px; 
         top: 6%;
-        background-image:  linear-gradient(0deg, rgba(0, 0, 0, 0.426), rgba(0, 0, 0, 0.363)),url("../images/8604D572-1E97-4429-BB41-8E9602F21499.png");
+        background-image:  linear-gradient(0deg, rgba(0, 0, 0, 0.426), rgba(0, 0, 0, 0.363)),url("../assets/images/8604D572-1E97-4429-BB41-8E9602F21499.png");
         z-index: 2;
         background-size: cover;
         background-repeat: no-repeat;
@@ -148,7 +148,7 @@
     /* End:: header content */
     .more{
         width: 100%;
-        padding-right: 12rem ;
+        padding-right: 132px ;
     }
 }
 
@@ -183,7 +183,7 @@
     .header-image-oscreen{    
         width: 340px;
         height: 420px;
-        background-image:  linear-gradient(0deg, rgba(0, 0, 0, 0.426), rgba(0, 0, 0, 0.363)),url("../images/8604D572-1E97-4429-BB41-8E9602F21499.png");
+        background-image:  linear-gradient(0deg, rgba(0, 0, 0, 0.426), rgba(0, 0, 0, 0.363)),url("../assets/images/8604D572-1E97-4429-BB41-8E9602F21499.png");
 
     }
     .oscreen.c-padding{
@@ -217,7 +217,7 @@
     }
     .more{
         width: 100%;
-        padding-right: 3.1rem ;
+        padding-right: 3.16px ;
     }
 }
 @media screen and (min-width:1150px) {    
@@ -236,7 +236,7 @@
 @media screen and (min-width:1400px) {
     .leader{
         width: 310px;  
-        margin: 1rem;     
+        margin: 16px;     
     }
     .r-card{
         width: 300px;  
@@ -269,6 +269,6 @@
     }
     .more{
         width: 100%;
-        padding-right: 8rem ;
+        padding-right: 128px ;
     }
 }

css/signup-style.css

@@ -68,7 +68,7 @@ form.signup input{
     width: 85% !important;
 }
 .signup .form-fields{
-    padding: 1rem;
+    padding: 16px;
 }
 .signup label{
     color: rgba(32, 32, 32, 0.624);
@@ -139,10 +139,10 @@ form.signup input{
     font-family: 'Poppins' ,sans-serif;
     font-weight: 500;
     font-size: 14px;
-    padding: 1rem 0rem 1rem 1rem;
+    padding: 16px 0px 16px 16px;
 }
 .footer-section{
-    margin-top: 10rem;
+    margin-top: 10px;
 }
 
 #continue-social button span {
@@ -183,13 +183,13 @@ form.signup input{
         margin-bottom: 9px;       
     }
     .footer-section{
-        margin-top: 6rem;
+        margin-top: 96px;
     }
     .form-container{
-        margin-top: 3rem;
+        margin-top: 48px;
     }
     .signup .form-fields{
-        padding: 2rem;
+        padding: 32px;
     }
 }
 @media screen and (min-width: 900px ) {