From 3970aed17639c10add79469b24f9a52b1ff847c3 Mon Sep 17 00:00:00 2001
From: Commander1024 <commander@commander1024.de>
Date: Fri, 14 Aug 2020 13:41:27 +0200
Subject: [PATCH] Added beautiful navigation icons to pagination nav-css.

---
 .../01_Atoms/pagination/_pagination.scss      | 112 +++++++++---------
 public/main.css                               |  16 ++-
 2 files changed, 71 insertions(+), 57 deletions(-)

diff --git a/components/01_Atoms/pagination/_pagination.scss b/components/01_Atoms/pagination/_pagination.scss
index 8e88e7f..3ed474c 100644
--- a/components/01_Atoms/pagination/_pagination.scss
+++ b/components/01_Atoms/pagination/_pagination.scss
@@ -1,67 +1,73 @@
 .LP-Pagination{
-	font-family: $-primary-sans-serif-font;
-	font-weight: bold;
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
+    font-family: $-primary-sans-serif-font;
+    font-weight: bold;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
 
-	.LP-Pagination__List{
-		list-style-type: none;
-		display: flex;
-		flex-direction: row;
-	}
+    .LP-Pagination__List{
+        list-style-type: none;
+        display: flex;
+        flex-direction: row;
+    }
 
-	.LP-Pagination__Item{
-		margin: 0 4px;
+    .LP-Pagination__Item{
+        margin: 0 4px;
 
-		&--current{
+        &--current{
 
-			.LP-Link{
-				background-color: $-beige;
-				border-radius: 2px;
+            .LP-Link{
+                background-color: $-beige;
+                border-radius: 2px;
 
-				&:hover{
-					background-color: $-beige;
-					color: $-grey;
-				}
-			}
-		}
+                &:hover{
+                    background-color: $-beige;
+                    color: $-grey;
+                }
+            }
+        }
 
-	}
+    }
 
-	.LP-Link{
-		padding: 15px 25px;
+    .LP-Link{
+        padding: 15px 25px;
 
-		&:active, &:hover{
-			background-color: $-beige;
-			border-radius: 2px;
-			color: $-grey;
-		}
-	}
+        &:active, &:hover{
+            background-color: $-beige;
+            border-radius: 2px;
+            color: $-grey;
+        }
+    }
 
-	.LP-Pagination__First{
-		
-		&:before{
-			content: "«";
-		}
-	}
+    .LP-Pagination__First{
+        &:before{
+            content: "⟪";
+            padding-right: 1em;
+            font-size: larger;
+        }
+    }
 
-	.LP-Pagination__Previous{
-		&:before{
-			content: "»";
-		}
-	}
+    .LP-Pagination__Previous{
+        &:before{
+            content: "⟨";
+            padding-right: 1em;
+            font-size: larger;
+        }
+    }
 
-	.LP-Pagination__Next{
-		
-		&:after{
-			content: "\f061";
-		}
-	}
+    .LP-Pagination__Next{
+        &:after{
+            content: "⟩";
+            padding-left: 1em;
+            font-size: larger;
+        }
+    }
 
-	.LP-Pagination__Last{
-		&:after{
-			content: "»";
-		}
-	}
+    .LP-Pagination__Last{
+        &:after{
+            content: "⟫";
+            padding-left: 1em;
+            font-size: larger;
+        }
+    }
 }
\ No newline at end of file
diff --git a/public/main.css b/public/main.css
index 16a276d..7321bd6 100644
--- a/public/main.css
+++ b/public/main.css
@@ -277,13 +277,21 @@ body {
       border-radius: 2px;
       color: #565656; }
   .LP-Pagination .LP-Pagination__First:before {
-    content: "«"; }
+    content: "⟪";
+    padding-right: 1em;
+    font-size: larger; }
   .LP-Pagination .LP-Pagination__Previous:before {
-    content: "»"; }
+    content: "⟨";
+    padding-right: 1em;
+    font-size: larger; }
   .LP-Pagination .LP-Pagination__Next:after {
-    content: "\f061"; }
+    content: "⟩";
+    padding-left: 1em;
+    font-size: larger; }
   .LP-Pagination .LP-Pagination__Last:after {
-    content: "»"; }
+    content: "⟫";
+    padding-left: 1em;
+    font-size: larger; }
 
 .LP-Content {
   padding: 35px; }