Style text

SandraBergstrom · Jul 3, 2023 · 7e06766 · 7e06766
1 parent b5936ce
commit 7e06766
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/src/index.css b/src/index.css
@@ -29,6 +29,16 @@ code {
   background-color: white;
 }
 
+ h1, h2, h3, h4, h5 {
+  font-family: 'Lato' sans-serif;
+  color: var(--clr-accent-dark);
+} 
+
+p {
+  font-family: 'Roboto', sans-serif;
+  color: var(--clr-accent-dark);
+}
+
 .form-control:focus {
   color: var(--clr-primary-dark);
   background-color: var(--clr-natural-light);

diff --git a/src/pages/posts/Post.js b/src/pages/posts/Post.js
@@ -133,7 +133,7 @@ const Post = (props) => {
             {owner}
           </Link>
           <div className="d-flex align-items-center">
-            <span>{updated_at}</span>
+            <span className={styles.smallText}>{updated_at}</span>
             {is_owner && postPage && (
               <MoreDropdown
                 handleEdit={handleEdit}
@@ -147,7 +147,7 @@ const Post = (props) => {
         <Card.Img src={image} alt={title} />
       </Link>
       <Card.Body>
-        {title && <Card.Title className="text-center">{title}</Card.Title>}
+        {title && <Card.Title className={`text-center ${styles.TitleText}`}>{title}</Card.Title>}
         {truncated && content && (
           <Card.Text>{content.substring(0, 200)} ...</Card.Text>
         )}
@@ -195,7 +195,9 @@ const Post = (props) => {
         </div>
         <hr />
         <div className="d-flex align-items-center justify-content-end">
-            <span>With love from {location} in {country}</span>
+          <span className={styles.smallText}>
+            With love from {location} in {country}
+          </span>
         </div>
       </Card.Body>
     </Card>

diff --git a/src/styles/Post.module.css b/src/styles/Post.module.css
@@ -6,17 +6,16 @@
   text-align: center;
 }
 
-/* .PostImage {
-  max-height: 600px;
-  width: auto;
-  object-fit: cover;
-} */
-
 .Post figure,
 h5 {
   margin: 0 0;
 }
 
+.TitleText {
+  color: var(--clr-accent-dark);
+  font-family: 'Lato', sans-serif;
+}
+
 .Heart {
   color: var(--clr-accent-pink);
 }
@@ -28,3 +27,8 @@ h5 {
 .HeartOutline:hover {
   color: var(--clr-accent-pink);
 }
+
+.smallText {
+  font-size: small;
+  color: var(--clr-accent-dark);
+}