style(theme): update font sizes and spacing for better readability
Adjust default font size from 13px to 14px and modify blockquote styling Convert fixed pixel values to relative em units for better scalability Improve spacing and typography consistency across components
This commit is contained in:
@@ -20,7 +20,7 @@ const FONT_SIZE_STORAGE_KEY = 'ev-doc-font-size'
|
|||||||
const LINE_HEIGHT_STORAGE_KEY = 'ev-doc-line-height'
|
const LINE_HEIGHT_STORAGE_KEY = 'ev-doc-line-height'
|
||||||
const MIN_FONT_SIZE = 12
|
const MIN_FONT_SIZE = 12
|
||||||
const MAX_FONT_SIZE = 18
|
const MAX_FONT_SIZE = 18
|
||||||
const DEFAULT_FONT_SIZE = 13
|
const DEFAULT_FONT_SIZE = 14
|
||||||
const MIN_LINE_HEIGHT = 1.25
|
const MIN_LINE_HEIGHT = 1.25
|
||||||
const MAX_LINE_HEIGHT = 1.8
|
const MAX_LINE_HEIGHT = 1.8
|
||||||
const DEFAULT_LINE_HEIGHT = 1.65
|
const DEFAULT_LINE_HEIGHT = 1.65
|
||||||
|
|||||||
@@ -110,19 +110,19 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
|
|||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
font-size: 20px;
|
font-size: 1.4em;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 14px;
|
font-size: 1em;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
font-size: 16px;
|
font-size: 1.15em;
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
color: var(--vp-c-text-1);
|
color: var(--vp-c-text-1);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@@ -135,14 +135,14 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
|
|||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
.description-text {
|
.description-text {
|
||||||
font-size: 16px;
|
font-size: 1.15em;
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
color: var(--vp-c-text-1);
|
color: var(--vp-c-text-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.description-text.has-tags {
|
.description-text.has-tags {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
font-size: 14px;
|
font-size: 1em;
|
||||||
color: var(--vp-c-text-2);
|
color: var(--vp-c-text-2);
|
||||||
border-top: 1px solid var(--vp-c-divider);
|
border-top: 1px solid var(--vp-c-divider);
|
||||||
padding-top: 12px;
|
padding-top: 12px;
|
||||||
@@ -155,7 +155,7 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
|
|||||||
background-color: var(--vp-c-bg-alt);
|
background-color: var(--vp-c-bg-alt);
|
||||||
border: 1px solid var(--vp-c-divider);
|
border: 1px solid var(--vp-c-divider);
|
||||||
border-radius: 99px;
|
border-radius: 99px;
|
||||||
font-size: 14px;
|
font-size: 1em;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--vp-c-text-1);
|
color: var(--vp-c-text-1);
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
@@ -193,7 +193,7 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-icon {
|
.card-icon {
|
||||||
font-size: 24px;
|
font-size: 1.7em;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
}
|
}
|
||||||
@@ -205,7 +205,7 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-label {
|
.card-label {
|
||||||
font-size: 12px;
|
font-size: 0.85em;
|
||||||
color: var(--vp-c-text-2);
|
color: var(--vp-c-text-2);
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -213,7 +213,7 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
|
|||||||
}
|
}
|
||||||
|
|
||||||
.card-value {
|
.card-value {
|
||||||
font-size: 14px;
|
font-size: 1em;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: var(--vp-c-text-1);
|
color: var(--vp-c-text-1);
|
||||||
}
|
}
|
||||||
@@ -222,7 +222,7 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: var(--vp-c-brand-dark);
|
color: var(--vp-c-brand-dark);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
font-size: 16px;
|
font-size: 1.15em;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -234,7 +234,7 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
|
|||||||
}
|
}
|
||||||
|
|
||||||
.core-output {
|
.core-output {
|
||||||
font-size: 18px;
|
font-size: 1.3em;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: var(--vp-c-brand);
|
color: var(--vp-c-brand);
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
@@ -242,7 +242,7 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
|
|||||||
}
|
}
|
||||||
|
|
||||||
.output-desc {
|
.output-desc {
|
||||||
font-size: 13px;
|
font-size: 0.93em;
|
||||||
color: var(--vp-c-text-2);
|
color: var(--vp-c-text-2);
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
/* Easy-Vibe Theme Fix v2025-01-12 */
|
/* Easy-Vibe Theme Fix v2025-01-12 */
|
||||||
/* 通过变量控制分组底部留白(默认 24px) */
|
/* 通过变量控制分组底部留白(默认 24px) */
|
||||||
--vp-sidebar-nav-section-gap: 8px;
|
--vp-sidebar-nav-section-gap: 8px;
|
||||||
--ev-doc-font-size: 13px;
|
--ev-doc-font-size: 14px;
|
||||||
--ev-doc-line-height: 1.65;
|
--ev-doc-line-height: 1.65;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -29,13 +29,25 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.vp-doc blockquote {
|
.vp-doc blockquote {
|
||||||
font-size: 0.9em !important;
|
font-size: inherit !important;
|
||||||
|
line-height: var(--ev-doc-line-height) !important;
|
||||||
color: var(--vp-c-text-2);
|
color: var(--vp-c-text-2);
|
||||||
|
margin: 16px 0 !important;
|
||||||
|
padding: 0 0 0 16px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vp-doc blockquote p {
|
.vp-doc blockquote p {
|
||||||
font-size: inherit !important;
|
font-size: inherit !important;
|
||||||
line-height: 1.4 !important;
|
line-height: inherit !important;
|
||||||
|
margin: 8px 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc blockquote p:first-child {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vp-doc blockquote p:last-child {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vp-doc :where(li) {
|
.vp-doc :where(li) {
|
||||||
|
|||||||
Reference in New Issue
Block a user