From 2965f957b5cd01cf89e5096f3f788e170559086c Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Mon, 9 Sep 2024 14:29:45 +0200
Subject: [PATCH] feat: enhance article navigation and add code block styling

Added new styles for article navigation, including previous/next links, to improve user experience by making navigation more intuitive and visually appealing. Introduced styles for code block elements to ensure better readability and consistent design. Adjusted link styles to prevent overflow issues.
---
 src/ducksforducks/static/css/style.css | 85 +++++++++++++++++++++++---
 1 file changed, 75 insertions(+), 10 deletions(-)

diff --git a/src/ducksforducks/static/css/style.css b/src/ducksforducks/static/css/style.css
index 8c423ca..b5169df 100644
--- a/src/ducksforducks/static/css/style.css
+++ b/src/ducksforducks/static/css/style.css
@@ -6,6 +6,24 @@
     display: none;
 }
 
+.text {
+    margin-top: 2em;
+}
+
+/* Code tags */
+pre {
+    background-color: #f4f4f4;
+    padding: 1em;
+    border-radius: 5px;
+    overflow-x: auto;
+}
+
+/* Links to GFG / external */
+.gfg-link {
+    width: unset !important;
+    text-overflow: unset !important;
+}
+
 a.gfg-link::after {
     content: " (opens on geeksforgeeks.org)";
     font-size: 0.8em;
@@ -18,18 +36,65 @@ a.external-link::after {
     color: #888;
 }
 
-.text {
-    margin-top: 2em;
+/* Article Navigation Links */
+.content-bw {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-top: 20px;
+    padding: 10px;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    background-color: #f9f9f9;
 }
 
-pre {
-    background-color: #f4f4f4;
-    padding: 1em;
-    border-radius: 5px;
-    overflow-x: auto;
+.article-pgnavi_prev,
+.article-pgnavi_next {
+    max-width: 45%;
+    text-align: left;
 }
 
-.gfg-link {
-	width: unset !important;
-	text-overflow: unset !important;
+.pg-head {
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    text-decoration: none;
+    color: #007bff;
+    margin-bottom: 5px;
+    transition: color 0.3s ease;
+}
+
+.pg-head:hover {
+    color: #0056b3;
+}
+
+.pg-head .gfg-icon {
+    font-size: 16px;
+}
+
+.pg-main a {
+    display: block;
+    text-decoration: none;
+    color: #333;
+    font-size: 14px;
+    padding-left: 22px;
+    /* Indent to align with the arrow icon */
+}
+
+.pg-main a:hover {
+    text-decoration: underline;
+    color: #0056b3;
+}
+
+.article-pgnavi_prev .pg-head .gfg-icon_previous {
+    margin-right: 5px;
+}
+
+.article-pgnavi_next .pg-head .gfg-icon_next {
+    margin-left: 5px;
+}
+
+.article-pgnavi_prev .pg-main,
+.article-pgnavi_next .pg-main {
+    margin-top: 10px;
 }
\ No newline at end of file