Sweeping readability imrpovements
This commit is contained in:
parent
5eb48fb4b6
commit
ebaff6dea0
13 changed files with 1678 additions and 114 deletions
16
components/Card.vue
Normal file
16
components/Card.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<div class="m-1 p-5 rounded-lg container bg-opacity-90 bg-slate-900 border-purple-600 border-2">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
/* Glow effect on border, plus a slight response to hover by changing the border color near the cursor */
|
||||
.container {
|
||||
transition: border-color 0.5s;
|
||||
border-color: #A020F0;
|
||||
box-shadow: 0 0 10px #A020F0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -12,7 +12,8 @@ const props = defineProps({
|
|||
});
|
||||
|
||||
function render_markdown(data: string | undefined) {
|
||||
if (!data) {
|
||||
// Validate that the data is a string
|
||||
if (typeof data !== 'string') {
|
||||
loading.value = false;
|
||||
return;
|
||||
}
|
||||
|
|
@ -32,4 +33,70 @@ watch(() => props.text, (newVal) => {
|
|||
<h2>Loading...</h2>
|
||||
</div>
|
||||
<div class="md-contents" v-html="text"></div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* Note: Use `md-override` to override the default markdown styling */
|
||||
|
||||
/* Headers (1-3) get a small visual upgrade */
|
||||
.md-contents h1:not(.md-override), .md-contents h2:not(.md-override), .md-contents h3:not(.md-override) {
|
||||
border-bottom: 1px solid #A020F0;
|
||||
padding-bottom: 0.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Apply margin to code blocks */
|
||||
.md-contents pre:not(.md-override) {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
/* Apply styling to lists and list items with nesting */
|
||||
.md-contents ul:not(.md-override), .md-contents ol:not(.md-override) {
|
||||
margin: 1rem 0;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
/* Apply different bullet types to nested lists as they are nested */
|
||||
.md-contents ul:not(.md-override) ul:not(.md-override), .md-contents ol:not(.md-override) ul:not(.md-override) {
|
||||
list-style-type: circle;
|
||||
}
|
||||
|
||||
/* Apply table styling, with a pleasant glowing border effect */
|
||||
.md-contents table:not(.md-override) {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
border: 1px solid #333;
|
||||
box-shadow: 0 0 7px #A020F0
|
||||
}
|
||||
|
||||
.md-contents th:not(.md-override), .md-contents td:not(.md-override) {
|
||||
border: 1px solid #A020F0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.md-contents th:not(.md-override) {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.md-contents button:not(.md-override) {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
border: 1px solid #A020F0;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 0 7px #A020F0;
|
||||
}
|
||||
|
||||
.md-contents button:hover:not(.md-override) {
|
||||
background-color: #555;
|
||||
box-shadow: 0 0 10px #A020F0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* transition for button hover effect */
|
||||
.md-contents button:not(.md-override) {
|
||||
transition: background-color 0.5s;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -1,18 +1,22 @@
|
|||
<script setup>
|
||||
import Card from './Card.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-center">
|
||||
<div class="flex-col transition-[margin] justify-center md:rounded-md max-md:w-screen lg:mt-3 w-fit-content pr-4 pl-4 bg-purple-500 bg-opacity-25 text-white">
|
||||
<div class="flex justify-center">
|
||||
<NuxtLink href="/" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Home</NuxtLink>
|
||||
<NuxtLink href="/blog/" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Blog</NuxtLink>
|
||||
<NuxtLink href="/blog/?post=/blog/awesome.md" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Awesome</NuxtLink>
|
||||
<NuxtLink href="/blog/?post=/blog/badges.md" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Badges</NuxtLink>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<small class=" ml-3 mr-3">Hosted with <NuxtLink href="https://github.com/TheFelidae/thefelidae.github.io" class="text-blue-500">GitHub Pages</NuxtLink></small>
|
||||
</div>
|
||||
<div class="flex-col transition-[margin] justify-center md:rounded-md max-md:w-screen lg:mt-3 w-fit-content">
|
||||
<Card>
|
||||
<div class="flex justify-center">
|
||||
<NuxtLink href="/" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Home</NuxtLink>
|
||||
<NuxtLink href="/blog/" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Blog</NuxtLink>
|
||||
<NuxtLink href="/blog/?post=/blog/awesome.md" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Awesome</NuxtLink>
|
||||
<NuxtLink href="/blog/?post=/blog/badges.md" class="transition text-xl pl-2 pr-2 ease-in-out text-purple-100 hover:text-purple-400 duration-200">Badges</NuxtLink>
|
||||
</div>
|
||||
<div class="flex justify-center text-white">
|
||||
<small class="ml-3 mr-3">Hosted with <NuxtLink href="https://github.com/TheFelidae/thefelidae.github.io" class="text-blue-500">GitHub Pages</NuxtLink></small>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -4,6 +4,7 @@ import fm from 'front-matter';
|
|||
|
||||
const props = defineProps({
|
||||
url: String,
|
||||
tagFilter: Array
|
||||
});
|
||||
|
||||
const url = ref(props.url)
|
||||
|
|
@ -48,8 +49,8 @@ async function fetchData() {
|
|||
|
||||
<template>
|
||||
<NuxtLink :href="'/blog?post=' +url">
|
||||
<div class="m-4 p-3 min-h-30 w-90 text-white rounded-2xl border-2 border-purple-300 transition hover:bg-purple-600 bg-purple-700 bg-opacity-50 hover:bg-opacity-70"
|
||||
:style="{ backgroundImage: `url(${background})` }">
|
||||
<div class="m-4 min-h-30 min-width-90 text-white transition hover:bg-purple-600 bg-opacity-50 hover:bg-opacity-70">
|
||||
<Card>
|
||||
<div v-if="loading" class="text-center animate-pulse">
|
||||
</div>
|
||||
<div v-else-if="error" class="text-center">
|
||||
|
|
@ -63,12 +64,18 @@ async function fetchData() {
|
|||
</div>
|
||||
<div class="flex justify-center">
|
||||
<div v-for="tag in tags" :key="tag" class="m-1 text-center">
|
||||
<span class="text-xs bg-purple-800 border-purple-400 border text-white p-1 rounded-md">{{ tag }}</span>
|
||||
<div v-if="props.tagFilter.includes(tag)">
|
||||
<span class="text-xs bg-slate-700 border-white border-2 text-white p-1 rounded-md">{{ tag }}</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span class="text-xs bg-black border-purple-400 border-2 text-white p-1 rounded-md">{{ tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>{{ description }}</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue