Skip to content

Commit

Permalink
feat: 美化一下样式
Browse files Browse the repository at this point in the history
  • Loading branch information
brzhang authored and brzhang committed Aug 14, 2024
1 parent 8d12093 commit e68c2f7
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 62 deletions.
180 changes: 118 additions & 62 deletions src/assets/scripts/themes/default-theme.js
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,99 @@
let baseColor = `#3f3f3f`
let baseBorderColor = `rgba(215, 16, 166, 0.8)`

export default {
BASE: {
'text-align': `left`,
'line-height': `1.75`,
},
block: {
// 一级标题样式
h1: {
'font-size': `1.2em`,
'font-size': `1.4em`,
'text-align': `center`,
'font-weight': `bold`,
display: `table`,
margin: `2em auto 1em`,
padding: `0 1em`,
'border-bottom': `2px solid rgba(0, 152, 116, 0.9)`,
padding: `0.5em 1em`,
'border-bottom': `2px solid ${baseBorderColor}`,
color: baseColor,
'text-shadow': `2px 2px 4px rgba(0,0,0,0.1)`,
transition: `all 0.3s ease`,
'&:hover': {
transform: `translateY(-3px)`,
'box-shadow': `0 10px 20px rgba(0,0,0,0.1)`,
},
},

// 二级标题样式
h2: {
'font-size': `1.2em`,
'font-size': `1.3em`,
'text-align': `center`,
'font-weight': `bold`,
display: `table`,
margin: `4em auto 2em`,
padding: `0 0.2em`,
background: `rgba(0, 152, 116, 0.9)`,
padding: `0.3em 1em`,
background: `${baseBorderColor}`,
color: `#fff`,
'border-radius': `8px`,
'box-shadow': `0 4px 6px rgba(0,0,0,0.1)`,
transition: `all 0.3s ease`,
'&:hover': {
transform: `scale(1.05)`,
'box-shadow': `0 6px 8px rgba(0,0,0,0.15)`,
},
},

// 三级标题样式
h3: {
'font-weight': `bold`,
'font-size': `1.1em`,
'font-size': `1.2em`,
margin: `2em 8px 0.75em 0`,
'line-height': `1.2`,
'padding-left': `8px`,
'border-left': `3px solid rgba(0, 152, 116, 0.9)`,
'padding-left': `12px`,
'border-left': `4px solid ${baseBorderColor}`,
'border-bottom': `1px solid ${baseBorderColor}`,
color: baseColor,
transition: `all 0.3s ease`,
'&:hover': {
'padding-left': `16px`,
'border-left-width': `6px`,
},
},

// 四级标题样式
h4: {
'font-weight': `bold`,
'font-size': `1em`,
'font-size': `1.1em`,
margin: `2em 8px 0.5em`,
color: `rgba(66, 185, 131, 0.9)`,
transition: `color 0.3s ease`,
'&:hover': {
color: `rgba(66, 185, 131, 1)`,
},
},

// 段落样式
p: {
margin: `1.5em 8px`,
'letter-spacing': `0.1em`,
color: baseColor,
'text-align': `justify`,
transition: `all 0.3s ease`,
'&:hover': {
transform: `translateX(3px)`,
},
},

// 引用样式
blockquote: {
'font-style': `normal`,
'border-left': `none`,
padding: `1em`,
'border-radius': `8px`,
color: `rgba(0,0,0,0.5)`,
background: `#f7f7f7`,
'font-style': `italic`,
'border-left': `4px solid ${baseBorderColor}`,
padding: `1em 1em 1em 2em`,
'border-radius': `6px`,
color: `rgba(0,0,0,0.6)`,
background: `linear-gradient(to right, #f7f7f7, #ffffff)`,
margin: `2em 8px`,
'box-shadow': `0 4px 6px rgba(0,0,0,0.05)`,
transition: `all 0.3s ease`,
'&:hover': {
transform: `translateY(-3px)`,
'box-shadow': `0 6px 8px rgba(0,0,0,0.1)`,
},
},

blockquote_p: {
Expand All @@ -74,66 +102,80 @@ export default {
'font-size': `1em`,
display: `block`,
},

code_pre: {
'font-size': `14px`,
'overflow-x': `auto`,
'border-radius': `8px`,
padding: `1em`,
'line-height': `1.5`,
margin: `10px 8px`,
background: `#f4f4f4`,
'box-shadow': `inset 0 0 10px rgba(0,0,0,0.05)`,
transition: `all 0.3s ease`,
'&:hover': {
'box-shadow': `inset 0 0 15px rgba(0,0,0,0.1)`,
},
},

code: {
margin: 0,
'white-space': `nowrap`,
'font-family': `Menlo, Operator Mono, Consolas, Monaco, monospace`,
'white-space': `pre-wrap`,
'font-family': `'Fira Code', Menlo, Operator Mono, Consolas, Monaco, monospace`,
},

image: {
'border-radius': `4px`,
'border-radius': `8px`,
display: `block`,
margin: `0.1em auto 0.5em`,
width: `100% !important`,
'box-shadow': `0 4px 8px rgba(0,0,0,0.1)`,
transition: `all 0.3s ease`,
'&:hover': {
transform: `scale(1.02)`,
'box-shadow': `0 6px 12px rgba(0,0,0,0.15)`,
},
},

ol: {
'margin-left': `0`,
'padding-left': `1em`,
'padding-left': `1.5em`,
color: baseColor,
},

ul: {
'margin-left': `0`,
'padding-left': `1em`,
'list-style': `circle`,
'padding-left': `1.5em`,
'list-style': `none`,
color: baseColor,
},

footnotes: {
margin: `0.5em 8px`,
'font-size': `80%`,
color: baseColor,
'ul li::before': {
content: `"•"`,
color: `rgba(0, 152, 116, 0.9)`,
'font-weight': `bold`,
display: `inline-block`,
width: `1em`,
'margin-left': `-1em`,
},

figure: {
margin: `1.5em 8px`,
color: baseColor,
},
hr: {
'border-style': `solid`,
'border-width': `1px 0 0`,
'border-color': `rgba(0,0,0,0.1)`,
'-webkit-transform-origin': `0 0`,
'-webkit-transform': `scale(1, 0.5)`,
'transform-origin': `0 0`,
transform: `scale(1, 0.5)`,
border: `none`,
height: `1px`,
background: `linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0))`,
margin: `2em 0`,
},
},
inline: {
listitem: {
'text-indent': `-1em`,
display: `block`,
margin: `0.2em 8px`,
margin: `0.5em 8px`,
color: baseColor,
transition: `all 0.3s ease`,
'&:hover': {
transform: `translateX(5px)`,
},
},

codespan: {
Expand All @@ -142,52 +184,66 @@ export default {
background: `rgba(27,31,35,.05)`,
padding: `3px 5px`,
'border-radius': `4px`,
// 'word-break': `break-all`,
transition: `all 0.3s ease`,
'&:hover': {
background: `rgba(27,31,35,.1)`,
},
},

link: {
color: `#576b95`,
transition: `all 0.3s ease`,
'&:hover': {
color: `#1a3f6f`,
'text-decoration': `underline`,
},
},

wx_link: {
color: `#576b95`,
'text-decoration': `none`,
},

// 字体加粗样式
strong: {
color: `rgba(15, 76, 129, 0.9)`,
'font-weight': `bold`,
transition: `all 0.3s ease`,
'&:hover': {
color: `rgba(15, 76, 129, 1)`,
'text-shadow': `1px 1px 2px rgba(15, 76, 129, 0.2)`,
},
},

table: {
'border-collapse': `collapse`,
'border-collapse': `separate`,
'border-spacing': `0`,
'text-align': `center`,
margin: `1em 8px`,
color: baseColor,
'box-shadow': `0 4px 6px rgba(0,0,0,0.1)`,
'border-radius': `8px`,
overflow: `hidden`,
},

thead: {
background: `rgba(0, 0, 0, 0.05)`,
background: `linear-gradient(45deg, rgba(0, 152, 116, 0.9), rgba(0, 192, 146, 0.9))`,
color: `#fff`,
'font-weight': `bold`,
color: baseColor,
},

td: {
border: `1px solid #dfdfdf`,
padding: `0.25em 0.5em`,
padding: `0.5em 1em`,
color: baseColor,
transition: `all 0.3s ease`,
},

footnote: {
'font-size': `12px`,
color: baseColor,
'tr:hover td': {
background: `rgba(0, 152, 116, 0.05)`,
},

figcaption: {
'text-align': `center`,
color: `#888`,
'font-size': `0.8em`,
footnote: {
'font-size': `12px`,
color: `rgba(0,0,0,0.5)`,
transition: `all 0.3s ease`,
'&:hover': {
color: `rgba(0,0,0,0.7)`,
},
},
},
}
3 changes: 3 additions & 0 deletions src/assets/scripts/util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ const createCustomTheme = (theme, color) => {
customTheme.block.h1[`border-bottom`] = `2px solid ${color}`
customTheme.block.h2[`background`] = color
customTheme.block.h3[`border-left`] = `3px solid ${color}`
customTheme.block.h3[`border-bottom`] = `1px dashed ${color}`
customTheme.block.h4[`color`] = color
customTheme.block.blockquote[`border-left`] = `4px solid ${color}`

customTheme.inline.strong[`color`] = color
return customTheme
}
Expand Down

0 comments on commit e68c2f7

Please sign in to comment.