diff --git a/src/components/ModelDescription.vue b/src/components/ModelDescription.vue index b42204a..266d20b 100644 --- a/src/components/ModelDescription.vue +++ b/src/components/ModelDescription.vue @@ -16,7 +16,7 @@ >
-
+
{{ $t('tapToChange') }} diff --git a/src/style.css b/src/style.css index 6d7905a..0e8980d 100644 --- a/src/style.css +++ b/src/style.css @@ -82,26 +82,69 @@ .markdown-it { font-family: theme('fontFamily.sans'); + font-size: theme('fontSize.base'); line-height: theme('lineHeight.relaxed'); word-break: break-word; margin: 0; + &::before { + display: table; + content: ''; + } + + &::after { + display: table; + content: ''; + clear: both; + } + + > *:first-child { + margin-top: 0 !important; + } + + > *:last-child { + margin-bottom: 0 !important; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + margin-top: 1.5em; + margin-bottom: 1em; + font-weight: 600; + line-height: 1.25; + } + h1 { - font-size: theme('fontSize.2xl'); - font-weight: theme('fontWeight.bold'); - border-bottom: 1px solid #ddd; - margin-top: theme('margin.4'); - margin-bottom: theme('margin.4'); - padding-bottom: theme('padding[2.5]'); + font-size: 2em; + padding-bottom: 0.3em; + border-bottom: 1px solid var(--p-surface-700); } h2 { - font-size: theme('fontSize.xl'); - font-weight: theme('fontWeight.bold'); + font-size: 1.5em; + padding-bottom: 0.3em; + border-bottom: 1px solid var(--p-surface-700); } h3 { - font-size: theme('fontSize.lg'); + font-size: 1.25em; + } + + h4 { + font-size: 1em; + } + + h5 { + font-size: 0.875em; + } + + h6 { + font-size: 0.85em; + color: var(--p-surface-500); } a { @@ -114,8 +157,16 @@ text-decoration: underline; } - p { - margin: 1em 0; + p, + blockquote, + ul, + ol, + dl, + table, + pre, + details { + margin-top: 0; + margin-bottom: 1em; } p img { @@ -126,7 +177,6 @@ ul, ol { - margin: 1em 0; padding-left: 2em; } @@ -135,23 +185,38 @@ } blockquote { - border-left: 5px solid #ddd; - padding: 10px 20px; - margin: 1.5em 0; - background: #f9f9f9; + padding: 0px 1em; + border-left: 0.25em solid var(--p-surface-500); + color: var(--p-surface-500); + margin: 1em 0; } - code, - pre { - background: #f9f9f9; - padding: 3px 5px; - border: 1px solid #ddd; - border-radius: 3px; - font-family: 'Courier New', Courier, monospace; + blockquote > *:first-child { + margin-top: 0; + } + + blockquote > *:last-child { + margin-bottom: 0; } pre { - padding: 10px; + font-size: 85%; + border-radius: 6px; + padding: 8px 16px; overflow-x: auto; + background: var(--p-dialog-background); + filter: invert(10%); + } + + pre code, + pre tt { + display: inline; + padding: 0; + margin: 0; + overflow: visible; + line-height: inherit; + word-wrap: normal; + background-color: transparent; + border: 0; } }