WIP styling backlink section

components/MDContent.js

@@ -6,22 +6,29 @@ import Link from 'next/link'
 
 function BackLinks({linkList}) {
 
-    return (<ul>
+    return (<div className="note-footer">
-        {
+            {(linkList != null && linkList.length > 0)
-            (linkList != null && linkList.length > 0)
                 ?
-                linkList.map(aLink =>
+                <>
-                    <li>
+                    <h3 className="backlink-heading">Link to this note</h3>
+
+                    <div className="backlink-container">
+                    {linkList.map(aLink =>
+                    <div className="backlink">
                         <Link href={aLink.slug}>
                             <a >
-                             {aLink.title}
+                                    <p className="backlink-title">{aLink.title}</p>
+                                    <p className="backlink-preview">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum  </p>
                             </a>
                         </Link>
-                    </li>
+
-                )
+                    </div>
-                : <h1>No Back link found</h1>
+                    )}
-        }
+                    </div>
-    </ul>);
+                </>
+
+                : <></>}
+    </div>);
 }
 
 function MDContent({content, fileNames, backLinks, handleOpenNewContent}) {

styles/style.css

@@ -16,6 +16,69 @@ a:hover {
     flex-direction: row;
     justify-content: center;
 }
+/* Foooter section BEGIN */
+.note-footer {
+    display: block;
+    background-color: rgba(238, 238, 238, 0.8);
+    border-radius: 16px;
+    margin-top: 24px;
+    padding: 16px;
+}
+
+.backlink-container {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    position: relative;
+    /*background-color: #f8bbbb;*/
+    flex-direction: row;
+    display: flex;
+}
+
+.note-footer .backlink-heading {
+    display: block;
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 600;
+    color: var(--text-muted);
+}
+
+.backlink-container .backlink {
+    /*background-color: #f8f2f2;*/
+    margin: 8px;
+    height: 118px;
+    width: 318px;
+    text-decoration: none;
+    display: block;
+    overflow: hidden;
+    border-radius: 8px;
+    /*padding-bottom: 8px;*/
+}
+
+.backlink-container .backlink:hover {
+    background-color: rgba(180, 177, 177, 0.3);
+}
+
+.backlink-container  .backlink-title {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.backlink-container a{
+    text-decoration: none;
+    color: var(--text-muted);
+}
+
+.backlink-container  .backlink-preview {
+    font-size: 12px;
+    line-height: 16px;
+    overflow: hidden;
+}
+.backlink-container p {
+    margin: 12px 0px;
+}
+/* Foooter section END */
 
 .markdown-rendered {
     font-size: 18px;