fixed background

app.vue

@@ -12,6 +12,7 @@ import './assets/style.css'
         name: 'page',
         mode: 'out-in'
       }" />
+  <div></div>
   <background-calm />
 </template>
 

assets/markdown_conf.ts

@@ -1,5 +1,6 @@
-import hljs from 'highlight.js';
+import hljs from "highlight.js";
-import MarkdownIt from 'markdown-it';
+import MarkdownIt from "markdown-it";
+import Token from "markdown-it/lib/token.mjs";
 
 export default function configured_markdown(): MarkdownIt {
     const md: MarkdownIt = MarkdownIt({
@@ -10,27 +11,35 @@ export default function configured_markdown(): MarkdownIt {
             if (lang && hljs.getLanguage(lang)) {
                 try {
                     return '<pre><code class="hljs">' +
-                        hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
+                        hljs.highlight(str, {
-                        '</code></pre>';
+                            language: lang,
-                } catch (__) { }
+                            ignoreIllegals: true,
+                        }).value +
+                        "</code></pre>";
+                } catch (__) {}
             }
-    
+
-            return '<pre><code class="hljs">' + md.utils.escapeHtml(str) + '</code></pre>';
+            return '<pre><code class="hljs">' + md.utils.escapeHtml(str) +
-        }
+                "</code></pre>";
-    })
+        },
-    
+    });
-    
+
-    md.renderer.rules.hr = function (tokens, idx, options, env, self) {
+    md.renderer.rules.h6 = function (tokens, idx, options, env, self) {
-        return '<div class="rounded-full h-0.5 bg-purple-500 my-3"></div>'
+        return '<h6 class="text-lg font-semibold my-3"><br>' +
-    }
+            tokens[idx].content + "</h6>";
-    
+    };
+
     md.renderer.rules.softbreak = function (tokens, idx, options, env, self) {
-        return '<br>'
+        return "<br>";
-    }
+    };
-    
+
     md.renderer.rules.hardbreak = function (tokens, idx, options, env, self) {
-        return '<br><br>'
+        return "<br><br>";
+    };
+
+    md.renderer.rules.text = function (tokens, idx, options, env, self) {
+        return tokens[idx].content;
     }
 
     return md;
-}
+}

assets/style.css

@@ -15,6 +15,7 @@ h1 {
 }
 
 h2 {
+    font-family: 'Lobster', cursive, 'Courier New', Courier, monospace;
     @apply text-2xl font-bold;
 }
 
@@ -35,7 +36,7 @@ h6 {
 }
 
 a {
-    @apply transition text-purple-400 hover:text-purple-500;
+    @apply transition text-purple-400 hover:text-purple-600;
 }
 
 
@@ -82,6 +83,19 @@ code {
     @apply p-1 border-purple-800 border rounded-lg;
 }
 
+/* Markdown improvements to headers when a descendent of class="md-contents" */
+/* h1 to h2; Add a border to the bottom of the header */
+.md-contents h1:not(.md-override) {
+    @apply border-b-4 border-purple-600 mb-3;
+}
+.md-contents h2:not(.md-override) {
+    @apply border-b border-purple-600 mb-3;
+}
+
+.md-contents div:not(.md-override) {
+    @apply mb-3 mt-3;
+}
+
 /* Code theme */
 
 .hljs {

components/BackgroundCalm.vue

@@ -7,17 +7,18 @@ const onLoad = (container: Container) => {
 </script>
 
 <template>
+    <div>
     <NuxtParticles
-            class="fixed w-full h-full"
+            class="w-full h-full z-0"
             id="tsparticles"
             @load="onLoad"
             :particlesInit="particlesInit"
             :options="{
                     fullScreen: {
                         enable: true,
-                        zIndex: -1
+                        zIndex: -10
                     },
-                    fpsLimit: 60,
+                    fpsLimit: 40,
                     interactivity: {
                         detect_on: 'window',
                         events: {
@@ -34,7 +35,7 @@ const onLoad = (container: Container) => {
                         }
                     },
                     particles: {
-                        zIndex: -10,
+                        zIndex: 0,
                         color: {
                             value: '#A020F0'
                         },
@@ -74,4 +75,5 @@ const onLoad = (container: Container) => {
         >
     </NuxtParticles>
     <slot></slot>
+</div>
 </template>

components/Markdown.vue

@@ -31,5 +31,5 @@ watch(() => props.text, (newVal) => {
     <div v-if="loading" class="text-center animate-pulse">
         <h2>Loading...</h2>
     </div>
-    <div v-html="text"></div>
+    <div class="md-contents" v-html="text"></div>
 </template>

pages/blog.vue

@@ -162,7 +162,7 @@ watch(url, async () => {
                         </div>
                         <div
                             class="text-pretty min-w-96 text-left max-w-4xl mt-4 p-6 max-md:w-screen rounded-md container bg-opacity-90 bg-purple-950">
-                            <div v-html="text"></div>
+                            <div class="md-contents" v-html="text"></div>
                         </div>
                     </div>
                 </Transition>

pages/index.vue

@@ -17,15 +17,15 @@ fetch("/about_me.md")
 </script>
 
 <template>
-	<div class="relative z-50 flex w-full justify-center text-white">
+	<div class="relative flex w-full justify-center text-white">
 		<div class="mt-8 flex-col text-center">
 			<div class="flex justify-center">
 				<div class="p-2 shadow-md rounded-full bg-pink-500">
-					<img class="z-20 transition-all w-40 h-40 md:w-56 md:h-56 rounded-full"
+					<img class="transition-all w-40 h-40 md:w-56 md:h-56 rounded-full"
 						src="https://avatars.githubusercontent.com/u/94077364?v=4" alt="User PFP" />
 				</div>
 			</div>
-			<div class="max-w-4xl mt-4 p-6 max-md:w-screen rounded-md container bg-opacity-70 bg-purple-950">
+			<div class="max-w-4xl mt-4 p-6 max-md:w-screen rounded-md container bg-opacity-90 bg-purple-950">
 				<Markdown :text="aboutMe"></Markdown>
 			</div>
 		</div>

public/about_me.md

@@ -1,12 +1,8 @@
-# Helau! :3
+<h1 class="md-override">Helau! :3</h1>
 
 ## 🌙 Luna - She/Her
 
-<a href="mailto: thelunacy@proton.me">`thelunacy@proton.me`</a>
+[`thelunacy@proton.me`](mailto:thelunacy@proton.me)
-
-###### This is a specific email for contact.
-
-<br>
 
 ###### 🏳️‍⚧️ I am exploring identity, so this may change or I might go by different things elsewhere.
 
@@ -15,6 +11,7 @@
 <div style="color: pink">
 
 *Queer rights are human rights.*
+
 </div>
 
 ---