tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Markdown table styling (#32)

Browse Source
This commit is contained in:
Geometrically
2023-03-31 10:54:04 -07:00
committed by GitHub
parent 78840157ef
commit 40026fbf53
6 changed files with 82 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.vitepress/config.js
View File

@@ -38,7 +38,7 @@ export default {
{ text: 'Search Filter', link: '/components/search-filter' },
{ text: 'Toggle', link: '/components/toggle' },
{ text: 'Promotion', link: '/components/promotion' },
{ text: 'Navigation Row', link: '/components/nav-row' },
{ text: 'Markdown', link: '/components/markdown' },
],
},
],

38
docs/components/markdown.md Normal file
View File

@@ -0,0 +1,38 @@
# Markdown
<script setup>
import { renderHighlightedString } from 'omorphia';
import { ref } from 'vue';
const b = '`';
const body = ref('');
fetch('https://raw.githubusercontent.com/joeyespo/grip/master/tests/input/gfm-test.md')
.then((response) => response.text())
.then((response) => body.value = response)
</script>
:::raw
<DemoContainer>
<div style="width: 100%" class="markdown-body" v-html="renderHighlightedString(body)" />
</DemoContainer>
:::
<style lang="scss">
h1, h2, h3, h4, h5, h6 {
line-height: 1.15;
font-weight: revert;
font-size: revert;
margin: revert;
}
ul, ol {
list-style: revert;
margin: revert;
padding: revert;
}
blockquote {
margin: revert;
}
</style>

47
docs/components/nav-row.md
View File

@@ -1,47 +0,0 @@
# NavRow
Note: the links and animation do not work in the documentation as Vue Router is not used for routing
<DemoContainer>
<NavRow :links="[
{
label: 'Avatar',
href: '/components/avatar.html',
},
{
label: 'Badge',
href: '/components/nav-row.html',
},
{
label: 'Pagination',
href: '/components/Pagination.html',
},
{
label: 'NavRow',
href: '/components/nav-row.html',
}
]"
/>
</DemoContainer>
```vue
<NavRow :links="[
{
label: 'Avatar',
href: '/components/avatar.html',
},
{
label: 'Badge',
href: '/components/nav-row.html',
},
{
label: 'Pagination',
href: '/components/Pagination.html',
},
{
label: 'NavRow',
href: '/components/nav-row.html',
}
]"
/>
```

54
lib/assets/styles/classes.scss
View File

@@ -587,7 +587,7 @@ a,
h1,
h2 {
padding: 10px 0 5px;
border-bottom: 1px solid var(--color-header-underline);
border-bottom: 1px solid var(--color-gray);
}
h1,
@@ -604,21 +604,23 @@ a,
blockquote {
padding: 0 1em;
color: var(--color-text);
border-left: 0.25em solid var(--color-block-quote);
color: var(--color-base);
border-left: 0.25em solid var(--color-button-bg);
}
a {
cursor: pointer;
color: var(--color-link);
color: var(--color-blue);
&:focus-visible,
&:hover {
color: var(--color-link-hover);
filter: brightness(1.2);
text-decoration: none;
}
&:active {
color: var(--color-link-active);
filter: brightness(1.1);
text-decoration: none;
}
}
@@ -638,8 +640,8 @@ a,
pre {
margin-top: 1rem;
padding: 14px;
border-radius: var(--size-rounded-sm);
background-color: var(--color-code-bg);
border-radius: var(--radius-sm);
background-color: var(--color-button-bg);
overflow-x: auto;
code {
@@ -652,14 +654,14 @@ a,
code {
padding: 0.2em 0.4em;
font-size: 80%;
border-radius: var(--size-rounded-sm);
background-color: var(--color-code-bg);
color: var(--color-code-text);
border-radius: var(--radius-sm);
background-color: var(--color-button-bg);
color: var(--color-contrast);
}
hr {
margin: 20px 0;
color: var(--color-divider);
color: var(--color-button-bg);
}
table {
@@ -670,8 +672,8 @@ a,
border-collapse: separate;
border-spacing: 0;
line-height: 1.5;
border: 0.05rem solid var(--color-table-border);
border-radius: var(--size-rounded-sm);
border: 0.05rem solid var(--color-button-bg);
border-radius: var(--radius-sm);
th {
font-weight: 600;
@@ -680,33 +682,33 @@ a,
td,
th {
padding: 0.4rem 0.85rem;
border: 0.05rem solid var(--color-table-border);
border: 0.05rem solid var(--color-button-bg);
}
tr:nth-child(2n) {
background-color: var(--color-table-alternate-row);
background-color: var(--color-accent-contrast);
}
th:first-of-type {
border-top-left-radius: var(--size-rounded-sm);
border-top-left-radius: var(--radius-sm);
}
th:last-of-type {
border-top-right-radius: var(--size-rounded-sm);
border-top-right-radius: var(--radius-sm);
}
tr:last-of-type td:first-of-type {
border-bottom-left-radius: var(--size-rounded-sm);
border-bottom-left-radius: var(--radius-sm);
}
tr:last-of-type td:last-of-type {
border-bottom-right-radius: var(--size-rounded-sm);
border-bottom-right-radius: var(--radius-sm);
}
}
details {
border: 0.15rem solid var(--color-button-bg);
border-radius: var(--size-rounded-sm);
border-radius: var(--radius-sm);
padding: 0.5rem 0.5rem 0;
summary {
@@ -715,10 +717,10 @@ a,
padding: 0.5rem 0.8rem;
cursor: pointer;
background-color: var(--color-button-bg);
border-radius: var(--size-rounded-xs);
border-radius: var(--radius-xs);
&:hover {
background-color: var(--color-button-bg-hover);
filter: brightness(0.85);
}
}
@@ -727,7 +729,7 @@ a,
summary {
margin-bottom: 0.5rem;
border-radius: var(--size-rounded-xs) var(--size-rounded-xs) 0 0;
border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
> :last-child:not(summary) {
@@ -763,9 +765,7 @@ select {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: url(http://dropdown/arrow/url/) no-repeat;
background-position: right center;
background-color: #cccccc;
background: #cccccc url(http://dropdown/arrow/url/) no-repeat right center;
color: #000000;
border: 1px solid #000000;
}

15
lib/assets/styles/defaults.scss
View File

@@ -172,3 +172,18 @@ button {
transform: none !important;
}
}
h1 {
color: var(--color-contrast);
}
h2 {
margin-top: 0;
margin-bottom: 1rem;
color: var(--color-contrast);
}
h3 {
margin-block: var(--gap-md) var(--gap-md);
color: var(--color-contrast);
}

2
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "omorphia",
"type": "module",
"version": "0.4.2",
"version": "0.4.3",
"files": [
"dist"
],