SevenOfAces/personal-site
1
1
Fork 0
Code Issues Pull requests 10 Projects Releases Packages 1 Wiki Activity Actions

Sweeping readability imrpovements

Browse source
This commit is contained in:
Mrrp 2025-01-01 00:26:10 -08:00
parent 5eb48fb4b6
commit ebaff6dea0
13 changed files with 1678 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

71
components/Markdown.vue
View file

@ -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>