From 8dfc43cb022e698b7124753b0086cd9cbf2711ac Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel-git@c0ntroller.de>
Date: Sun, 23 Oct 2022 14:58:10 +0200
Subject: [PATCH] Short links

---
 components/Blog/DiaryPageSelector.tsx     |  8 ++++----
 styles/Blog/DiaryPageSelector.module.scss | 18 +++++++++++++++++-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/components/Blog/DiaryPageSelector.tsx b/components/Blog/DiaryPageSelector.tsx
index 5363510..7d1f5f2 100644
--- a/components/Blog/DiaryPageSelector.tsx
+++ b/components/Blog/DiaryPageSelector.tsx
@@ -43,8 +43,8 @@ const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSel
         await router.push(link);
     };
 
-    const prev = <span className={styles.leftSelectSpace}>{prevLink ? <Link href={prevLink}><a className={styles.barLink}>&lt; {pageSelected - 1 === 0 ? `${title} (Main Page)` : pages[pageSelected - 2]}</a></Link> : null}</span>;
-    const next = <span className={styles.rightSelectSpace}>{nextLink ? <Link href={nextLink}><a className={styles.barLink}>{pages[pageSelected]} &gt;</a></Link> : null}</span>;
+    const prev = <span className={styles.leftSelectSpace}>{prevLink ? <Link href={prevLink}><a>&lt;<span className={styles.longLink}> {pageSelected - 1 === 0 ? "Main Page" : pages[pageSelected - 2]}</span><span className={styles.shortLink}>&lt;</span></a></Link> : null}</span>;
+    const next = <span className={styles.rightSelectSpace}>{nextLink ? <Link href={nextLink}><a><span className={styles.longLink}>{pages[pageSelected]} </span><span className={styles.shortLink}>&gt;</span>&gt;</a></Link> : null}</span>;
 
     const select = (
         <select onChange={onSelection} value={pageSelected}>
@@ -77,12 +77,12 @@ const PageSelector: NextPage<IContentNav> = (content) => {
         <div className={styles.nav}>
             <PageSelectorBar pages={entries} name={content.name} title={content.title} pageSelected={content.pageSelected} mobile />
             
-            <div className={`${styles.sideNav} ${styles.desktop}`}>
+            <aside className={`${styles.sideNav} ${styles.desktop}`}>
                 <Link href={`/blog/diary/${content.name}`}><a><h4 className={content.pageSelected === 0 ? styles.thisPage : undefined}>{content.title}</h4></a></Link>
                 <ol>
                     {entries.map((e, idx) => <li key={idx} className={content.pageSelected - 1 === idx ? styles.thisPage : undefined}><Link href={`/blog/diary/${content.name}/${idx + 1}`}><a>{e}</a></Link></li>)}
                 </ol>
-            </div>
+            </aside>
         </div>
     );
 };
diff --git a/styles/Blog/DiaryPageSelector.module.scss b/styles/Blog/DiaryPageSelector.module.scss
index 7dcdf07..20eb277 100644
--- a/styles/Blog/DiaryPageSelector.module.scss
+++ b/styles/Blog/DiaryPageSelector.module.scss
@@ -58,7 +58,6 @@
     padding: 10px;
 
     select {
-        font-size: 110%;
         padding: 5px;
         border-radius: 1em;
         border: 1px solid var(--blog_content-border);
@@ -79,10 +78,27 @@
         color: inherit;
         text-decoration: none;
         font-weight: bold;
+        text-overflow: clip;
     }
     a:hover {
         text-decoration: underline;
     }
+
+    .longLink {
+        display: inline;
+    }
+    .shortLink {
+        display: none;
+    }
+
+    @media screen and (max-width: 599px) {
+        .longLink {
+            display: none;
+        }
+        .shortLink {
+            display: inline;
+        }
+    }
 }
 
 /* TODO: Move to asciidoc footer in Content.module.scss */