Add markdown header links

Fix links, code blocks and bold text in pages
Fix navigation creating horizontal scroll on mobile

main/css/page.css

@@ -36,6 +36,27 @@ div.contents {
     padding-left: 3em;
 }
 
+div.contents a::before {
+    margin-right: 0em;
+}
+
+a[id*="user-content-"]::before {
+    display: none;
+}
+
+a[id*="user-content-"] svg {
+    fill: #e5adea;
+    margin-right: 5px;
+    margin-left: -21px;
+    opacity: 0%;
+    transition: opacity 0.2s ease-in-out;
+}
+
+:is(h1, h2, h3, h4, h5, h6):hover a[id*="user-content-"] svg {
+    opacity: 80%;
+    transition: opacity 0.2s ease-in-out;
+}
+
 #header-icon {
     width: 10em;
     opacity: 0.6;
@@ -71,10 +92,9 @@ div.contents {
     background: linear-gradient(to right, transparent, #21192c);
 }
 
-h1, h2, h3 {
+h1, h2, h3, h4, h5, h6 {
     color: #f3c3f7;
     font-family: "Wenceslas", serif;
-    font-size: 2rem;
     border-bottom: 1px dashed #3b2d4f;
 }
 
@@ -85,6 +105,11 @@ p, ul, ol, table {
     max-width: 1000px;
 }
 
+strong {
+    font-weight: bolder;
+    text-shadow: 0px 0.5px, 0.5px 0px, 0.8px 0px;
+}
+
 img:not(#header-icon) {
     border-radius: 5px;
     max-width: 800px;
@@ -113,6 +138,12 @@ code {
     font-size: 1rem;
 }
 
+:not(pre) > code {
+    background-color: #3b2947;
+    padding: 2px;
+    border-radius: 3px;
+}
+
 code[class*="language-"], pre[class*="language-"] {
     display: block;
     background: #3b2947;
@@ -143,18 +174,26 @@ pre {
 code .highlight-line:before {
     -webkit-user-select: none;
     user-select: none;
-    border-right: 1px solid #b37ba7;
     color: #b37ba7;
     content: counter(lineNumber);
     counter-increment: lineNumber;
     display: inline-block;
     font-variant-numeric: tabular-nums;
-    margin-right: 1em;
+    /* this is Hacky but should fix wrap with line numbers */
+    /* im so sorry */
+    margin-left: -3em;
+    margin-right: 1.5em;
     padding-right: 1em;
     text-align: right;
     width: 0.5em;
 }
 
+code .highlight-line {
+    margin-left: 1.5em;
+    padding-left: 1.5em;
+    border-left: 1px solid #b37ba7;
+}
+
 /* from eleventy docs */
 .highlight-line {
     display: inline-block;
@@ -168,14 +207,6 @@ code .highlight-line:before {
 .highlight-line:empty:before {
     content: " ";
 }
-  
-.highlight-line:not(:last-child) {
-    min-width: 100%;
-}
-
-.highlight-line .highlight-line:not(:last-child) {
-    min-width: 0;
-}
 
 .highlight-line-active {
     background-color: #59447cc4;
@@ -189,14 +220,18 @@ code .highlight-line:before {
     background-color: #a5505096;
 }
 
+code[class*="language-"], pre[class*="language-"],
+pre > code:not([class]) {
+    width: auto;
+    white-space: pre-wrap;
+}
+
 @media only screen and (min-width: 1000px) {
     body {
         display: inline-block;
     }
-
+    div.contents {
-    code[class*="language-"], pre[class*="language-"],
+        max-width: 1200px;
-    pre > code:not([class]) {
-        width: max-content;
     }
 }
 
@@ -214,7 +249,7 @@ code .highlight-line:before {
         border: none;
         padding-bottom: 2em;
         padding-left: 3em;
-        width: 95%;
+        width: 90%;
         height: auto;
         position: relative;
     }
@@ -228,4 +263,9 @@ code .highlight-line:before {
         padding-left: 0.5em;
         padding-right: 0.5em;
     }
+
+    a[id*="user-content-"] {
+        margin-left: 0;
+        float: right;
+    }
 }