Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Markdown styling fixes (#268)

Browse Source 
* Add table color variables (+ prettier fixes)

* Add details and table styling to .markdown-body
This commit is contained in:
venashial 2021-06-21 19:06:11 +00:00 committed by GitHub
parent fea6f0ce81
commit be0e18d4b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 95 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
assets/styles/components.scss
View File

@ -75,9 +75,21 @@
}
.markdown-body {
blockquote,
details,
dl,
ol,
p,
code,
pre,
table,
ul {
margin-top: 0;
margin-bottom: 16px;
}
p {
padding: 0;
margin: 0;
line-height: 1.5;
word-wrap: break-word;
}
@ -89,7 +101,6 @@
}
blockquote {
margin: 15px 0;
padding: 0 1em;
color: var(--color-text);
border-left: 0.25em solid var(--color-block-quote);
@ -105,9 +116,11 @@
}
pre {
padding: 15px 10px;
margin-top: 1rem;
padding: 14px;
border-radius: var(--size-rounded-control);
background-color: var(--color-code-bg);
overflow-x: auto;
code {
font-size: 80%;
@ -128,6 +141,58 @@
margin: 20px 0;
color: var(--color-divider);
}
table {
display: block;
width: max-content;
max-width: 100%;
overflow: auto;
border-collapse: collapse;
line-height: 1.5;
th {
font-weight: 600;
}
td,
th {
padding: 0.4rem 0.85rem;
border: 0.1rem solid var(--color-table-border);
}
tr:nth-child(2n) {
background-color: var(--color-table-alternate-row);
}
}
details {
border: 0.15rem solid var(--color-button-bg);
border-radius: var(--size-rounded-control);
padding: 0.5rem 0.5rem 0;
summary {
font-weight: bold;
margin: -0.5rem -0.5rem 0;
padding: 0.5rem 0.8rem;
cursor: pointer;
background-color: var(--color-button-bg);
&:hover {
background-color: var(--color-button-bg-hover);
}
}
&[open] {
padding: 0.5rem;
summary {
margin-bottom: 0.5rem;
}
}
}
> :last-child {
margin-bottom: 0 !important;
}
}
.tooltip {

24
assets/styles/global.scss
View File

@ -1,8 +1,8 @@
.light-mode {
--color-icon: #718096;
--color-text:#4A5568;
--color-text: #4a5568;
--color-text-medium: #2a303d;
--color-text-dark:#1A202C;
--color-text-dark: #1a202c;
--color-heading: #2c313d;
--color-heading-light: #777e8d;
--color-bg: #edf2f7;
@ -67,6 +67,9 @@
--color-block-quote: var(--color-tooltip-bg);
--color-header-underline: var(--color-tooltip-text);
--color-hr: var(--color-text);
--color-table-border: #dfe2e5;
--color-table-alternate-row: #f6f8fa;
}
.dark-mode {
@ -137,13 +140,17 @@
--color-block-quote: var(--color-code-bg);
--color-header-underline: var(--color-tooltip-text);
--color-hr: var(--color-text);
--color-table-border: #4f5864;
--color-table-alternate-row: #262a30;
}
body {
// Defaults
background-color: var(--color-bg);
color: var(--color-text);
--font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
--font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family: var(--font-standard);
font-size: 16px;
font-weight: var(--font-weight-medium);
@ -281,9 +288,8 @@ button {
// @import "vue-select/src/scss/vue-select.scss";
@import "~assets/styles/highlightjs.scss";
@import "~assets/styles/layout.scss";
@import "~assets/styles/utils.scss";
@import "~assets/styles/components.scss";
@import "~assets/styles/normalize.scss";
@import '~assets/styles/highlightjs.scss';
@import '~assets/styles/layout.scss';
@import '~assets/styles/utils.scss';
@import '~assets/styles/components.scss';
@import '~assets/styles/normalize.scss';