mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-19 06:20:38 -07:00
docs: polish theme, playground, and reference pages
Improve readability of the docs site with updated light/dark tokens, shared code-block styling, and playground editors that follow system color scheme. Skip CookieHub on localhost, serve the browser bundle from theme source, and use backtick titles on filter/tag reference pages for consistent navigation. Co-authored-by: Cursor <[email protected]>
This commit is contained in:
Yang Jun
@@ -63,6 +63,7 @@ a
|
||||
#content-wrap
|
||||
background: var(--color-content-bg)
|
||||
overflow: hidden
|
||||
box-shadow: var(--panel-shadow)
|
||||
|
||||
.video-container
|
||||
text-align: center
|
||||
|
||||
+1
-1
@@ -58,7 +58,7 @@ logo-size = 36px
|
||||
text-decoration: none
|
||||
line-height: logo-size
|
||||
white-space: nowrap
|
||||
opacity: 0.7
|
||||
opacity: 0.85
|
||||
transition: opacity 0.2s, color 0.2s
|
||||
display: inline-block
|
||||
padding: 0 12px
|
||||
|
||||
+17
-16
@@ -1,19 +1,6 @@
|
||||
// https://github.com/chriskempson/tomorrow-theme
|
||||
// Tomorrow Night Eighties
|
||||
:root {
|
||||
--highlight-background: #2d2d2d
|
||||
--highlight-current-line: #393939
|
||||
--highlight-selection: #515151
|
||||
--highlight-foreground: #cccccc
|
||||
--highlight-comment: #999999
|
||||
--highlight-red: #f2777a
|
||||
--highlight-orange: #f99157
|
||||
--highlight-yellow: #ffcc66
|
||||
--highlight-green: #99cc99
|
||||
--highlight-aqua: #66cccc
|
||||
--highlight-blue: #6699cc
|
||||
--highlight-purple: #cc99cc
|
||||
}
|
||||
// Light: GitHub-style; dark: Tomorrow Night Eighties (tuned for navy palette)
|
||||
// Palette tokens live in _variables.styl
|
||||
|
||||
pre, code
|
||||
font-family: font-mono
|
||||
@@ -23,10 +10,12 @@ pre, code
|
||||
|
||||
code
|
||||
padding: 0 5px
|
||||
border-radius: 4px
|
||||
|
||||
pre
|
||||
padding: 10px 15px
|
||||
line-height: 22px
|
||||
code-block-chrome()
|
||||
code
|
||||
border: none
|
||||
display: block
|
||||
@@ -38,6 +27,7 @@ pre
|
||||
background: var(--highlight-background)
|
||||
overflow: auto
|
||||
margin: 0
|
||||
code-block-chrome()
|
||||
table
|
||||
margin: 0 !important
|
||||
border: 0
|
||||
@@ -56,6 +46,9 @@ pre
|
||||
padding: 0
|
||||
background: none
|
||||
white-space: pre
|
||||
border: none
|
||||
box-shadow: none
|
||||
border-radius: 0
|
||||
.line
|
||||
height: 22px
|
||||
|
||||
@@ -107,4 +100,12 @@ pre
|
||||
color: var(--highlight-blue)
|
||||
.keyword
|
||||
.javascript .function
|
||||
color: var(--highlight-purple)
|
||||
color: var(--highlight-purple)
|
||||
// Prism bash uses "builtin" / "class-name", not pygments-style "built_in"
|
||||
.language-bash, .language-shell
|
||||
.builtin
|
||||
.class-name
|
||||
.function
|
||||
color: var(--highlight-orange)
|
||||
.operator
|
||||
color: var(--highlight-purple)
|
||||
|
||||
+31
-16
@@ -1,6 +1,6 @@
|
||||
note-tip = #0fff00
|
||||
note-info = hsl(200, 100%, 50%)
|
||||
note-warn = hsl(0, 100%, 50%)
|
||||
note-tip = #3fb950
|
||||
note-info = #58a6ff
|
||||
note-warn = #f85149
|
||||
|
||||
#content
|
||||
position: relative
|
||||
@@ -26,7 +26,7 @@ note-warn = hsl(0, 100%, 50%)
|
||||
#article-toc
|
||||
display: none
|
||||
width: sidebar-width
|
||||
opacity: 0.8
|
||||
opacity: 0.9
|
||||
@media mq-normal
|
||||
display: block
|
||||
|
||||
@@ -86,7 +86,7 @@ note-warn = hsl(0, 100%, 50%)
|
||||
.article-edit-link
|
||||
float: right
|
||||
text-decoration: none;
|
||||
color: #bbb
|
||||
color: var(--color-gray)
|
||||
font-size: 24px
|
||||
line-height: 36px
|
||||
transition: 0.2s
|
||||
@@ -111,21 +111,31 @@ note-warn = hsl(0, 100%, 50%)
|
||||
color: var(--color-default)
|
||||
@media print
|
||||
font-size: 12pt
|
||||
p, ol, ul, dl, table, blockquote, iframe, .highlight
|
||||
p, ol, ul, dl, table, blockquote, iframe, pre, .highlight
|
||||
margin: 1em 0
|
||||
pre + pre,
|
||||
.highlight + .highlight,
|
||||
pre + .highlight,
|
||||
.highlight + pre
|
||||
margin-top: 1em
|
||||
h1
|
||||
font-size: 2em
|
||||
h2
|
||||
font-size: 1.5em
|
||||
border-bottom: 1px solid var(--color-border)
|
||||
border-bottom: 1px solid var(--heading-border)
|
||||
padding-bottom: 10px
|
||||
margin-bottom: 15px
|
||||
margin-bottom: 0.75em
|
||||
h3
|
||||
font-size: 1.3em
|
||||
h1, h2, h3, h4, h5, h6
|
||||
line-height: 1em
|
||||
font-weight: bold
|
||||
margin: 1em 0
|
||||
margin-top: 1.75em
|
||||
margin-bottom: 0.625em
|
||||
blockquote + h1, blockquote + h2, blockquote + h3, blockquote + h4,
|
||||
.highlight + h1, .highlight + h2, .highlight + h3, .highlight + h4,
|
||||
pre + h1, pre + h2, pre + h3, pre + h4
|
||||
margin-top: 2.25em
|
||||
hr
|
||||
border-bottom: none;
|
||||
border-top: 1px dashed var(--color-border);
|
||||
@@ -138,6 +148,9 @@ note-warn = hsl(0, 100%, 50%)
|
||||
padding-left: 3px;
|
||||
vertical-align: super;
|
||||
zoom: .7
|
||||
:not(pre) > code
|
||||
background: var(--inline-code-bg)
|
||||
color: var(--inline-code-color)
|
||||
strong
|
||||
font-weight: bold
|
||||
em
|
||||
@@ -156,7 +169,7 @@ note-warn = hsl(0, 100%, 50%)
|
||||
li
|
||||
p
|
||||
margin: 0
|
||||
table, blockquote, iframe, .highlight
|
||||
table, blockquote, iframe, pre, .highlight
|
||||
margin: 1em 0
|
||||
img, video
|
||||
max-width: 100%
|
||||
@@ -165,8 +178,11 @@ note-warn = hsl(0, 100%, 50%)
|
||||
blockquote
|
||||
padding: 0 20px
|
||||
position: relative
|
||||
background: var(--blockquote-bg)
|
||||
border: 1px solid var(--color-border)
|
||||
border-left: 5px solid #ddd
|
||||
border-left: 4px solid #ddd
|
||||
border-radius: 6px
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06)
|
||||
footer
|
||||
margin: 1em 0
|
||||
font-style: italic
|
||||
@@ -176,15 +192,16 @@ note-warn = hsl(0, 100%, 50%)
|
||||
padding: 0 0.3em
|
||||
a
|
||||
color: color-grey
|
||||
@media (prefers-color-scheme: dark)
|
||||
border-color: var(--color-gray)
|
||||
.note
|
||||
&.tip
|
||||
border-left-color: note-tip
|
||||
background: var(--note-tip-bg)
|
||||
&.info
|
||||
border-left-color: note-info
|
||||
background: var(--note-info-bg)
|
||||
&.warn
|
||||
border-left-color: note-warn
|
||||
background: var(--note-warn-bg)
|
||||
.since
|
||||
margin-top: 0;
|
||||
font-style: italic;
|
||||
@@ -206,9 +223,7 @@ note-warn = hsl(0, 100%, 50%)
|
||||
padding: 5px 15px
|
||||
tr
|
||||
&:nth-child(2n)
|
||||
background: #eee
|
||||
@media (prefers-color-scheme: dark)
|
||||
background: var(--color-gray)
|
||||
background: var(--table-stripe-bg)
|
||||
|
||||
.article-footer
|
||||
margin: 60px 0 0
|
||||
|
||||
+72
-13
@@ -1,48 +1,107 @@
|
||||
#playground
|
||||
background: var(--color-content-bg)
|
||||
overflow: hidden
|
||||
box-shadow: var(--panel-shadow)
|
||||
|
||||
.wrapper
|
||||
margin-bottom: 40px
|
||||
|
||||
h1
|
||||
font-size: 36px
|
||||
font-weight: 300
|
||||
margin: 40px 0 24px
|
||||
margin-top: 40px
|
||||
margin-bottom: 24px
|
||||
color: var(--color-default)
|
||||
|
||||
h2
|
||||
font-size: 0.8125rem
|
||||
font-weight: 600
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.04em
|
||||
color: var(--color-gray)
|
||||
margin: 0
|
||||
|
||||
#editors
|
||||
display: grid
|
||||
overflow: hidden
|
||||
margin-bottom: 16px
|
||||
margin-bottom: 0
|
||||
height: 75vh
|
||||
grid-template-columns: auto auto
|
||||
grid-template-rows: 60% 40%
|
||||
min-height: 480px
|
||||
grid-template-columns: 1fr 1fr
|
||||
grid-template-rows: 3fr 2fr
|
||||
grid-gap: 16px
|
||||
align-items: stretch
|
||||
@media mq-mobile
|
||||
height: auto
|
||||
min-height: 0
|
||||
grid-template-columns: 1fr
|
||||
grid-template-rows: auto
|
||||
grid-gap: 20px
|
||||
|
||||
.area-tpl
|
||||
grid-row: 1
|
||||
grid-column: 1
|
||||
min-height: 0
|
||||
.area-data
|
||||
grid-row: 2
|
||||
grid-column: 1
|
||||
min-height: 0
|
||||
.area-output
|
||||
grid-column: 2
|
||||
grid-row: 1 / -1
|
||||
min-height: 0
|
||||
@media mq-mobile
|
||||
grid-row: auto
|
||||
grid-column: 1
|
||||
|
||||
.editor-wrapper
|
||||
display: flex
|
||||
gap: 8px
|
||||
flex-direction: column
|
||||
min-height: 0
|
||||
overflow: hidden
|
||||
.editor
|
||||
flex-grow: 1
|
||||
flex: 1 1 auto
|
||||
min-height: 0
|
||||
position: relative
|
||||
code-block-chrome()
|
||||
overflow: hidden
|
||||
@media mq-mobile
|
||||
min-height: 240px
|
||||
.ace_editor
|
||||
font-family: font-mono
|
||||
font-size: 14px
|
||||
line-height: 1.5
|
||||
border-radius: 6px
|
||||
.ace_scrollbar
|
||||
z-index: 2
|
||||
|
||||
.version
|
||||
font-size: 0.8125rem
|
||||
line-height: 1.5
|
||||
font-family: font-mono
|
||||
color: var(--color-gray)
|
||||
margin-top: 20px
|
||||
margin-bottom: 32px
|
||||
a
|
||||
color: inherit
|
||||
text-decoration: none
|
||||
&:hover
|
||||
color: var(--color-link)
|
||||
text-decoration: underline
|
||||
|
||||
.hide
|
||||
display: none
|
||||
|
||||
.loader
|
||||
width: 75px
|
||||
height: 75px
|
||||
width: 48px
|
||||
height: 48px
|
||||
margin: 150px auto 200px
|
||||
border-top: 5px solid #292929
|
||||
border-right: 5px solid #efefef
|
||||
border-bottom: 5px solid #efefef
|
||||
border-left: 5px solid #efefef
|
||||
border-radius: 100px
|
||||
animation: spin 1s infinite linear
|
||||
border: 3px solid var(--color-border)
|
||||
border-top-color: var(--color-link)
|
||||
border-radius: 50%
|
||||
animation: spin 0.8s infinite linear
|
||||
|
||||
@keyframes spin
|
||||
100%
|
||||
transform: rotate(360deg)
|
||||
|
||||
+1
-1
@@ -1,7 +1,6 @@
|
||||
#sidebar
|
||||
width: sidebar-width
|
||||
padding-bottom: 40px
|
||||
opacity: 0.8
|
||||
display: none
|
||||
@media mq-normal
|
||||
display: block
|
||||
@@ -26,6 +25,7 @@
|
||||
line-height: 1
|
||||
position: relative
|
||||
width: 100%
|
||||
transition: color 0.15s
|
||||
&.current
|
||||
color: var(--color-link)
|
||||
&:hover
|
||||
|
||||
+72
-20
@@ -4,38 +4,84 @@ vendor-prefixes = webkit moz ms official
|
||||
|
||||
// Colors
|
||||
:root {
|
||||
--color-default: #444
|
||||
--color-default-invert: #d1d2d4
|
||||
--color-gray: #999
|
||||
--color-border: #e3e3e3
|
||||
--color-navy: hsl(210, 25%, 12%)
|
||||
--color-default: #374151
|
||||
--color-default-invert: #e8eaed
|
||||
--color-gray: #6b7280
|
||||
--color-border: #e5e7eb
|
||||
--color-navy: hsl(218, 32%, 11%)
|
||||
--color-content-bg: #fff
|
||||
--color-navy-lighter: lighten(hsl(210, 25%, 12%), 10%)
|
||||
--color-link: #0e83cd
|
||||
--color-link-hover: lighten(#0e83cd, 10%)
|
||||
--color-navy-lighter: hsl(218, 28%, 16%)
|
||||
--color-link: #2563eb
|
||||
--color-link-hover: #1d4ed8
|
||||
--panel-shadow: 0 0 48px rgba(0, 0, 0, 0.18)
|
||||
--heading-border: var(--color-border)
|
||||
--code-border: #d0d7de
|
||||
--code-shadow: 0 1px 2px rgba(0, 0, 0, 0.04)
|
||||
--inline-code-bg: rgba(175, 184, 193, 0.2)
|
||||
--inline-code-color: var(--color-default)
|
||||
--blockquote-bg: transparent
|
||||
--note-tip-bg: rgba(63, 185, 80, 0.05)
|
||||
--note-info-bg: rgba(88, 166, 255, 0.05)
|
||||
--note-warn-bg: rgba(248, 81, 73, 0.05)
|
||||
--table-stripe-bg: #f3f4f6
|
||||
--highlight-background: #f6f8fa
|
||||
--highlight-current-line: #f0f3f6
|
||||
--highlight-selection: #b6d4fe
|
||||
--highlight-foreground: #24292f
|
||||
--highlight-comment: #6e7781
|
||||
--highlight-red: #cf222e
|
||||
--highlight-orange: #953800
|
||||
--highlight-yellow: #7d4e00
|
||||
--highlight-green: #116329
|
||||
--highlight-aqua: #0550ae
|
||||
--highlight-blue: #0550ae
|
||||
--highlight-purple: #8250df
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-default: #d1d2d4
|
||||
--color-default-invert: #444
|
||||
--color-gray: invert(#999)
|
||||
--color-border: #6a6a6a
|
||||
--color-default: #e6edf3
|
||||
--color-default-invert: #374151
|
||||
--color-gray: #9aa4b2
|
||||
--color-border: #3d444d
|
||||
--color-background: #fff
|
||||
--color-navy: hsl(210, 25%, 12%)
|
||||
--color-navy-lighter: lighten(hsl(210, 25%, 12%), 7%)
|
||||
--color-content-bg: #1c1c1c
|
||||
--color-link: #0e83cd
|
||||
--color-link-hover: lighten(#0e83cd, 10%)
|
||||
--color-navy: hsl(218, 32%, 9%)
|
||||
--color-navy-lighter: hsl(218, 28%, 15%)
|
||||
--color-content-bg: hsl(218, 28%, 13%)
|
||||
--color-link: #58a6ff
|
||||
--color-link-hover: #79b8ff
|
||||
--panel-shadow: 0 0 64px rgba(0, 0, 0, 0.35)
|
||||
--heading-border: rgba(255, 255, 255, 0.08)
|
||||
--code-border: rgba(255, 255, 255, 0.06)
|
||||
--code-shadow: 0 1px 3px rgba(0, 0, 0, 0.12)
|
||||
--inline-code-bg: var(--highlight-background)
|
||||
--inline-code-color: var(--highlight-foreground)
|
||||
--blockquote-bg: rgba(255, 255, 255, 0.03)
|
||||
--note-tip-bg: rgba(63, 185, 80, 0.07)
|
||||
--note-info-bg: rgba(88, 166, 255, 0.07)
|
||||
--note-warn-bg: rgba(248, 81, 73, 0.07)
|
||||
--table-stripe-bg: rgba(255, 255, 255, 0.04)
|
||||
--highlight-background: hsl(218, 24%, 15%)
|
||||
--highlight-current-line: hsl(218, 18%, 18%)
|
||||
--highlight-selection: hsl(218, 15%, 24%)
|
||||
--highlight-foreground: #e6edf3
|
||||
--highlight-comment: #8b949e
|
||||
--highlight-red: #ff7b72
|
||||
--highlight-orange: #ffa657
|
||||
--highlight-yellow: #e3b341
|
||||
--highlight-green: #7ee787
|
||||
--highlight-aqua: #79c0ff
|
||||
--highlight-blue: #79c0ff
|
||||
--highlight-purple: #d2a8ff
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif
|
||||
font-sans = -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
|
||||
font-serif = Garamond, Georgia, "Times New Roman", serif
|
||||
font-mono = "Source Code Pro", Monaco, Menlo, Consolas, monospace
|
||||
font-mono = "Source Code Pro", ui-monospace, Monaco, Menlo, Consolas, monospace
|
||||
font-size = 16px
|
||||
line-height = 1.8em
|
||||
line-height = 1.75
|
||||
|
||||
// Layout
|
||||
max-width = 1800px
|
||||
@@ -48,3 +94,9 @@ mq-mobile = "screen and (max-width: 768px)"
|
||||
mq-normal = "screen and (min-width: 769px)"
|
||||
mq-small = "screen and (min-width: 992px)"
|
||||
mq-tablet = "screen and (min-width: 480px)"
|
||||
|
||||
// Shared code-block chrome (pre, .highlight, playground editors)
|
||||
code-block-chrome()
|
||||
border-radius: 6px
|
||||
border: 1px solid var(--code-border)
|
||||
box-shadow: var(--code-shadow)
|
||||
|
||||
Reference in New Issue
Block a user