Labyricorn/liquidjs
1
0
Fork 0
mirror of https://github.com/harttle/liquidjs.git synced 2026-09-29 15:15:23 -07:00
Code Issues Packages Projects Releases Wiki Activity

docs: support dark mode

Browse Source
This commit is contained in:
Harttle
2022-01-22 21:51:49 +08:00
committed by Harttle
parent ca82416dea
commit cc6b66216d
12 changed files with 172 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/source/sw.js
+9 -1
View File
@@ -9,6 +9,7 @@ const urlsToCache = [
'/fonts/icomoon.ttf?e8nnma' '/fonts/icomoon.ttf?e8nnma'
] ]
const blackList = [ const blackList = [
/chrome-extension:/,
/google-analytics.com.*collect/ /google-analytics.com.*collect/
] ]
@@ -29,7 +30,14 @@ self.addEventListener('fetch', event => {
if ( if (
event.request.method !== 'GET' || blackList.some(regex => regex.exec(event.request.url)) event.request.method !== 'GET' || blackList.some(regex => regex.exec(event.request.url))
) return network(event.request) ) return network(event.request)
event.respondWith(networkAndSave(event.request).catch(() => cache(event.request))) if (event.request.url.match(/\.githubusercontent\.com/)) {
// cache first
const pn = networkAndSave(event.request)
event.respondWith(cache(event.request).then(res => res || pn).catch(() => pn))
} else {
// network first
event.respondWith(networkAndSave(event.request).catch(() => cache(event.request)))
}
}) })
function cache (req) { function cache (req) {
docs/themes/navy/layout/index.swig
Vendored
+1 -7
View File
@@ -25,13 +25,7 @@
<div class="wrapper"> <div class="wrapper">
<div class="inner"> <div class="inner">
{{ page.content }} {{ page.content }}
<ul id="intro-cmd-wrap"> <div id="intro-cmd-wrap" class="highlight typescript"><pre><span class="line"><span class="keyword">import</span> { Liquid } <span class="keyword">from</span> <span class="string">'liquidjs'</span></span><br><span class="line"><span class="keyword">const</span> engine = <span class="keyword">new</span> Liquid()</span><br><span class="line"><span class="keyword">const</span> tpl = engine.parse(<span class="string">'Welcome to {{v}}!'</span>)</span><br><span class="line">engine.render(tpl, {<span class="attr">v</span>: <span class="string">"Liquid"</span>}).then(<span class="built_in">console</span>.log)</span><br><span class="line"><span class="comment">// Outputs "Welcome to Liquid!"</span></span><br></pre></div>
<li class="intro-code-item"><span class="hl">import</span> { Liquid } <span class="hl">from</span> 'liquidjs'</li>
<li class="intro-code-item"><span class="hl">const</span> engine = <span class="hl">new</span> Liquid()</li>
<li class="intro-code-item"><span class="hl">const</span> tpl = engine.parse(<span class="hl-str">'Welcome to &#x7b;&#x7b;v}}!'</span>)</li>
<li class="intro-code-item">engine.render(tpl, {v: "Liquid"}).then(console.log)</li>
<li class="intro-code-item"><span class="hl-comment">// Outputs "Welcome to Liquid!"</span></li>
</ul>
<div id="intro-get-started-wrap"> <div id="intro-get-started-wrap">
<a href="tutorials/setup.html" id="intro-get-started-link">{{ __('index.get_started') }}</a> <a href="tutorials/setup.html" id="intro-get-started-link">{{ __('index.get_started') }}</a>
</div> </div>
docs/themes/navy/source/css/_partial/base.styl
Vendored
+17 -6
View File
@@ -21,15 +21,28 @@ input, button, select
border: 0 border: 0
body body
background: color-navy background: var(--color-navy)
font-size: font-size font-size: font-size
font-family: font-sans font-family: font-sans
color: color-default color: var(--color-default)
text-rendering: optimizeLegibility text-rendering: optimizeLegibility
-webkit-font-smoothing: antialiased -webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale -moz-osx-font-smoothing: grayscale
overflow-x: hidden overflow-x: hidden
a
color: var(--color-link)
text-decoration: none
&:hover
color: var(--color-link-hover)
text-decoration: underline
@media print
color: var(--color-default)
text-decoration: underline
&:after
content: " (" attr(href) ")"
font-size: 80%
@media screen and (max-device-width: 480px) @media screen and (max-device-width: 480px)
body body
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
@@ -44,10 +57,8 @@ body
padding: 0 gutter-width padding: 0 gutter-width
#content-wrap #content-wrap
background: #fff background: var(--color-content-bg)
border-top: 1px solid darken(color-navy, 5%) overflow: hidden
border-bottom: 1px solid darken(color-navy, 5%)
margin: -1px 0
.video-container .video-container
text-align: center text-align: center
docs/themes/navy/source/css/_partial/footer.styl
Vendored
+1 -1
View File
@@ -3,7 +3,7 @@
padding: 24px 0 padding: 24px 0
color: rgba(255, 255, 255, 0.6) color: rgba(255, 255, 255, 0.6)
position: relative position: relative
background: color-navy background: var(--color-navy)
text-align: center text-align: center
@media mq-normal @media mq-normal
padding: 40px 0 padding: 40px 0
docs/themes/navy/source/css/_partial/header.styl
Vendored
+4 -3
View File
@@ -36,7 +36,7 @@ logo-size = 36px
#search-input-wrap #search-input-wrap
display: none display: none
padding-left: 6px padding-left: 6px
border-bottom: 1px solid color-gray border-bottom: 1px solid var(--color-gray)
&.on &.on
display: inline-block display: inline-block
> i, > span, #search-input > i, > span, #search-input
@@ -59,7 +59,7 @@ logo-size = 36px
text-decoration: none text-decoration: none
line-height: logo-size line-height: logo-size
opacity: 0.7 opacity: 0.7
transition: 0.2s transition: opacity 0.2s, color 0.2s
display: inline-block display: inline-block
padding: 0 15px padding: 0 15px
i i
@@ -68,7 +68,8 @@ logo-size = 36px
opacity: 1 opacity: 1
&:hover &:hover
opacity: 1 opacity: 1
color: color-link-hover color: var(--color-link-hover)
text-decoration: none
#lang-select-wrap #lang-select-wrap
#github-link-wrap #github-link-wrap
docs/themes/navy/source/css/_partial/highlight.styl
Vendored
+45 -26
View File
@@ -1,21 +1,40 @@
// https://github.com/chriskempson/tomorrow-theme // https://github.com/chriskempson/tomorrow-theme
highlight-background = #fff :root {
highlight-current-line = #efefef --highlight-background: #eee
highlight-selection = #d6d6d6 --highlight-current-line: #efefef
highlight-foreground = #4d4d4c --highlight-selection: #d6d6d6
highlight-comment = #8e908c --highlight-foreground: #4d4d4c
highlight-red = #c82829 --highlight-comment: #8e908c
highlight-orange = #f5871f --highlight-red: #c82829
highlight-yellow = #eab700 --highlight-orange: #f5871f
highlight-green = #718c00 --highlight-yellow: #eab700
highlight-aqua = #3e999f --highlight-green: #718c00
highlight-blue = #4271ae --highlight-aqua: #3e999f
highlight-purple = #8959a8 --highlight-blue: #4271ae
--highlight-purple: #8959a8
}
@media (prefers-color-scheme: dark) {
:root {
--highlight-background: #000000
--highlight-current-line: #2a2a2a
--highlight-selection: #424242
--highlight-foreground: #eaeaea
--highlight-comment: #969896
--highlight-red: #d54e53
--highlight-orange: #e78c45
--highlight-yellow: #e7c547
--highlight-green: #b9ca4a
--highlight-aqua: #70c0b1
--highlight-blue: #7aa6da
--highlight-purple: #c397d8
}
}
pre, code pre, code
font-family: font-mono font-family: font-mono
color: highlight-foreground color: var(--highlight-foreground)
background: #eee background: var(--color-content-bg-hl)
code code
padding: 0 5px padding: 0 5px
@@ -29,9 +48,9 @@ pre
padding: 0 padding: 0
.highlight .highlight
background: #eee
padding: 10px 15px padding: 10px 15px
color: highlight-foreground color: var(--highlight-foreground)
background: var(--highlight-background)
overflow: auto overflow: auto
margin: 0 margin: 0
table table
@@ -42,12 +61,12 @@ pre
figcaption figcaption
clearfix() clearfix()
margin: -5px 0 5px margin: -5px 0 5px
color: color-gray color: var(--color-gray)
a a
float: right float: right
pre pre
margin: 0
padding: 0 padding: 0
border: none
background: none background: none
.line .line
height: 22px height: 22px
@@ -55,7 +74,7 @@ pre
pre pre
.comment .comment
.title .title
color: highlight-comment color: var(--highlight-comment)
.variable .variable
.attribute .attribute
.tag .tag
@@ -68,27 +87,27 @@ pre
.css .id .css .id
.css .class .css .class
.css .pseudo .css .pseudo
color: highlight-red color: var(--highlight-red)
.number .number
.preprocessor .preprocessor
.built_in .built_in
.literal .literal
.params .params
.constant .constant
color: highlight-orange color: var(--highlight-orange)
.class .class
.ruby .class .title .ruby .class .title
.css .rules .attribute .css .rules .attribute
color: highlight-green color: var(--highlight-green)
.string .string
.value .value
.inheritance .inheritance
.header .header
.ruby .symbol .ruby .symbol
.xml .cdata .xml .cdata
color: highlight-green color: var(--highlight-green)
.css .hexcolor .css .hexcolor
color: highlight-aqua color: var(--highlight-aqua)
.function .function
.python .decorator .python .decorator
.python .title .python .title
@@ -97,7 +116,7 @@ pre
.perl .sub .perl .sub
.javascript .title .javascript .title
.coffeescript .title .coffeescript .title
color: highlight-blue color: var(--highlight-blue)
.keyword .keyword
.javascript .function .javascript .function
color: highlight-purple color: var(--highlight-purple)
docs/themes/navy/source/css/_partial/index.styl
Vendored
+35 -35
View File
@@ -30,7 +30,7 @@
font-size: 18px font-size: 18px
#banner-start-command #banner-start-command
background: lighten(color-navy, 10%) background: var(--color-navy-lighter)
padding: 0 15px padding: 0 15px
color: #fff color: #fff
display: inline-block display: inline-block
@@ -41,20 +41,20 @@
#banner-start-link #banner-start-link
color: #fff color: #fff
background: color-link background: var(--color-link)
display: inline-block display: inline-block
padding: 0 15px padding: 0 15px
text-decoration: none text-decoration: none
transition: 0.2s transition: background 0.2s
&:hover &:hover
background: color-link-hover background: var(--color-link-hover)
#banner-share #banner-share
display: block display: block
padding-bottom: 60px padding-bottom: 60px
#intro-news-list #intro-news-list
background-color: darken(color-navy, 10%) background-color: var(--color-news-bg)
margin: -1px 0 margin: -1px 0
#intro-news-flex #intro-news-flex
@@ -67,7 +67,7 @@
padding: 24px 30px padding: 24px 30px
text-decoration: none text-decoration: none
&:hover &:hover
background-color: color-link-hover background-color: var(--color-link-hover)
@media mq-normal @media mq-normal
flex: 0 0 50% flex: 0 0 50%
padding: 36px 30px padding: 36px 30px
@@ -108,7 +108,7 @@
padding-left: 70px padding-left: 70px
.intro-feature-icon .intro-feature-icon
color: color-link color: var(--color-link)
font-size: 36px font-size: 36px
margin-bottom: 6px; margin-bottom: 6px;
text-align: center text-align: center
@@ -121,7 +121,7 @@
width: @font-size width: @font-size
.intro-feature-title .intro-feature-title
color: color-link color: var(--color-link)
font-size: 24px font-size: 24px
.intro-feature-desc .intro-feature-desc
@@ -136,29 +136,21 @@
color: black color: black
&:hover &:hover
text-decoration: underline text-decoration: underline
@media (prefers-color-scheme: dark)
color: white
&:visited, &:hover
color: white
#intro-cmd-wrap #intro-cmd-wrap
max-width: 700px max-width: 700px
background: #eee padding: 15px 30px
padding: 15px 0 font-size: 16px
pre
line-height: 32px
overflow: auto overflow: auto
margin: 50px auto 0; margin: 50px auto 0;
@media mq-normal @media mq-normal
margin: 70px auto 0; margin: 70px auto 0;
li
font-size: 16px
font-family: font-mono
line-height: 2
padding: 0 30px
.intro-code-item
white-space: pre
.hl
color: color-link
.hl-str
color: #9e0001ad
.hl-comment
color: #056d05b5
#intro-get-started-wrap #intro-get-started-wrap
text-align: center text-align: center
@@ -170,17 +162,17 @@
font-size: 18px font-size: 18px
display: inline-block display: inline-block
text-decoration: none text-decoration: none
border: 3px solid lighten(color-link, 20%) border: 3px solid var(--color-link-hover)
padding: 12px 24px padding: 12px 24px
position: relative position: relative
transition: 0.2s transition: background 0.2s, color 0.2s
color: color-link color: var(--color-link)
&:hover &:hover
background: lighten(color-link, 20%) background: var(--color-link-hover)
color: #fff color: #fff
#sponsors-wrap, #contributors-wrap #sponsors-wrap, #contributors-wrap
background: lighten(color-navy, 10%) background: var(--color-navy-lighter)
border-top: 1px solid #161d24 border-top: 1px solid #161d24
border-bottom: 1px solid #161d24 border-bottom: 1px solid #161d24
margin: -1px 0 margin: -1px 0
@@ -210,29 +202,37 @@
display: inline-block display: inline-block
height: 72px height: 72px
width: 72px width: 72px
background: color-gray background: var(--color-gray)
border-radius: 50% border-radius: 50%
margin-bottom: 10px margin-bottom: 10px
.description a .description a
color: #fff color: #fff
&:hover &:hover
background: #fff background: #fff
color: lighten(color-navy, 10%) color: var(--color-navy-lighter)
#sponsors-wrap #sponsors-wrap
background: #fff background: var(--color-content-bg)
border: none border: none
text-align: right text-align: right
overflow: hidden; overflow: hidden;
.inner .inner
h3 h3
color: color-default color: var(--color-default)
p p
color: color-gray color: var(--color-gray)
.open-collective .open-collective
margin: 0 auto margin: 0 auto
.description a .description a
color: #333 color: #333
&:hover &:hover
background: color-navy background: var(--color-navy)
color: #fff color: #fff
@media (prefers-color-scheme: dark)
p
color: var(--color-default)
.description a
color: #fff
&:hover
background: #fff
color: var(--color-navy-lighter)
docs/themes/navy/source/css/_partial/mobile_nav.styl
Vendored
+4 -4
View File
@@ -15,13 +15,13 @@ lang-select-height = 40px
width: mobile-nav-width width: mobile-nav-width
left: @width * -1 left: @width * -1
height: 100% height: 100%
background: color-navy background: var(--color-navy)
transition: transition-duration transition: transition-duration
.mobile-nav-on & .mobile-nav-on &
transform: translateX(100%) transform: translateX(100%)
.mobile-sidebar-list .mobile-sidebar-list
background: lighten(color-navy, 10%) background: var(--color-navy-lighter)
#mobile-nav-inner #mobile-nav-inner
overflow-y: auto overflow-y: auto
@@ -85,7 +85,7 @@ lang-select-height = 40px
text-overflow: ellipsis text-overflow: ellipsis
.mobile-nav-title .mobile-nav-title
color: color-link color: var(--color-link)
font-weight: bold font-weight: bold
padding: 10px 15px padding: 10px 15px
line-height: 1 line-height: 1
@@ -101,7 +101,7 @@ lang-select-height = 40px
bottom: 0 bottom: 0
left: 0 left: 0
width: 100% width: 100%
background: color-navy background: var(--color-navy)
border-top: 1px solid #444 border-top: 1px solid #444
#mobile-lang-select-label #mobile-lang-select-label
docs/themes/navy/source/css/_partial/page.styl
Vendored
+20 -27
View File
@@ -53,10 +53,10 @@ note-warn = hsl(0, 100%, 50%)
margin-top: 13px margin-top: 13px
font-size: 0.9em font-size: 0.9em
text-decoration: none text-decoration: none
color: color-default color: var(--color-default)
display: block display: block
&:hover &:hover
color: color-link-hover color: var(--color-link-hover)
.article-header .article-header
padding-bottom: 20px padding-bottom: 20px
@@ -67,20 +67,20 @@ note-warn = hsl(0, 100%, 50%)
font-size: 36px font-size: 36px
font-weight: 300 font-weight: 300
text-decoration: none text-decoration: none
color: color-default color: var(--color-default)
transition: 0.2s transition: 0.2s
a&:hover a&:hover
color: color-link-hover color: var(--color-link-hover)
.post & .post &
float: none float: none
.article-date .article-date
color: color-gray color: var(--color-gray)
text-decoration: none text-decoration: none
display: inline-block display: inline-block
margin-top: 1em margin-top: 1em
&:hover &:hover
color: color-link-hover color: var(--color-link-hover)
.article-edit-link .article-edit-link
float: right float: right
@@ -91,7 +91,7 @@ note-warn = hsl(0, 100%, 50%)
transition: 0.2s transition: 0.2s
display: none display: none
&:hover &:hover
color: color-link-hover color: var(--color-link-hover)
@media mq-normal @media mq-normal
display: block display: block
@@ -107,7 +107,7 @@ note-warn = hsl(0, 100%, 50%)
.article-content .article-content
line-height: line-height line-height: line-height
color: color-default color: var(--color-default)
@media print @media print
font-size: 12pt font-size: 12pt
p, ol, ul, dl, table, blockquote, iframe, .highlight p, ol, ul, dl, table, blockquote, iframe, .highlight
@@ -116,7 +116,7 @@ note-warn = hsl(0, 100%, 50%)
font-size: 2em font-size: 2em
h2 h2
font-size: 1.5em font-size: 1.5em
border-bottom: 1px solid color-border border-bottom: 1px solid var(--color-border)
padding-bottom: 10px padding-bottom: 10px
margin-bottom: 15px margin-bottom: 15px
h3 h3
@@ -127,19 +127,8 @@ note-warn = hsl(0, 100%, 50%)
margin: 1em 0 margin: 1em 0
hr hr
border-bottom: none; border-bottom: none;
border-top: 1px dashed color-border; border-top: 1px dashed var(--color-border);
a a
color: color-link
text-decoration: none
&:hover
color: color-link-hover
text-decoration: underline
@media print
color: color-default
text-decoration: underline
&:after
content: " (" attr(href) ")"
font-size: 80%
&[target="_blank"] &[target="_blank"]
position: relative position: relative
&::after &::after
@@ -175,7 +164,7 @@ note-warn = hsl(0, 100%, 50%)
blockquote blockquote
padding: 0 20px padding: 0 20px
position: relative position: relative
border: 1px solid color-border border: 1px solid var(--color-border)
border-left: 5px solid #ddd border-left: 5px solid #ddd
footer footer
margin: 1em 0 margin: 1em 0
@@ -186,6 +175,8 @@ note-warn = hsl(0, 100%, 50%)
padding: 0 0.3em padding: 0 0.3em
a a
color: color-grey color: color-grey
@media (prefers-color-scheme: dark)
border-color: var(--color-gray)
.note .note
&.tip &.tip
border-left-color: note-tip border-left-color: note-tip
@@ -207,7 +198,7 @@ note-warn = hsl(0, 100%, 50%)
margin-top: 0 margin-top: 0
table table
max-width: 100% max-width: 100%
border: 1px solid color-border border: 1px solid var(--color-border)
th th
font-weight: bold font-weight: bold
th, td th, td
@@ -215,12 +206,14 @@ note-warn = hsl(0, 100%, 50%)
tr tr
&:nth-child(2n) &:nth-child(2n)
background: #eee background: #eee
@media (prefers-color-scheme: dark)
background: var(--color-gray)
.article-footer .article-footer
margin: 60px 0 0 margin: 60px 0 0
border-top: 1px solid color-border border-top: 1px solid var(--color-border)
text-align: center text-align: center
color: color-gray color: var(--color-gray)
line-height: 1em line-height: 1em
padding-top: 1em padding-top: 1em
position: relative position: relative
@@ -228,13 +221,13 @@ note-warn = hsl(0, 100%, 50%)
display: none display: none
$article-footer-link $article-footer-link
color: color-link color: var(--color-link)
text-decoration: none text-decoration: none
font-weight: bold font-weight: bold
text-transform: uppercase text-transform: uppercase
position: absolute position: absolute
&:hover &:hover
color: color-link-hover color: var(--color-link-hover)
@media print @media print
display: none display: none
span span
docs/themes/navy/source/css/_partial/playground.styl
Vendored
+1 -1
View File
@@ -1,5 +1,5 @@
#playground #playground
background: white background: var(--color-content-bg)
overflow: hidden overflow: hidden
.wrapper .wrapper
margin-bottom: 40px margin-bottom: 40px
docs/themes/navy/source/css/_partial/sidebar.styl
Vendored
+5 -5
View File
@@ -11,22 +11,22 @@
margin-top: 40px margin-top: 40px
padding: 10px 0 padding: 10px 0
font-weight: bold font-weight: bold
color: color-link color: var(--color-link)
display: inline-block display: inline-block
border-top: 1px solid color-border border-top: 1px solid var(--color-border)
line-height: 1 line-height: 1
.sidebar-title:first-child .sidebar-title:first-child
margin-top: 0 margin-top: 0
.sidebar-link .sidebar-link
display: block display: block
color: color-default color: var(--color-default)
text-decoration: none text-decoration: none
padding: 7px 0 padding: 7px 0
line-height: 1 line-height: 1
position: relative position: relative
width: 100% width: 100%
&.current &.current
color: color-link color: var(--color-link)
&:hover &:hover
color: color-link-hover color: var(--color-link-hover)
docs/themes/navy/source/css/_variables.styl
Vendored
+30 -6
View File
@@ -3,12 +3,36 @@ support-for-ie = false
vendor-prefixes = webkit moz ms official vendor-prefixes = webkit moz ms official
// Colors // Colors
color-default = #444 :root {
color-gray = #999 --color-default: #444
color-border = #e3e3e3 --color-default-invert: #d1d2d4
color-navy = hsl(210, 25%, 12%) --color-gray: #999
color-link = #0e83cd --color-border: #e3e3e3
color-link-hover = lighten(color-link, 10%) --color-navy: hsl(210, 25%, 12%)
--color-content-bg: #fff
--color-content-bg-hl: #eee
--color-news-bg: darken(hsl(210, 25%, 12%), 5%)
--color-navy-lighter: lighten(hsl(210, 25%, 12%), 10%)
--color-link: #0e83cd
--color-link-hover: lighten(#0e83cd, 10%)
}
@media (prefers-color-scheme: dark) {
:root {
--color-default: #d1d2d4
--color-default-invert: #444
--color-gray: invert(#999)
--color-border: invert(#e3e3e3)
--color-backgrond: #fff
--color-navy: hsl(210, 25%, 12%)
--color-news-bg: darken(hsl(210, 25%, 12%), 5%)
--color-content-bg-hl: #000
--color-navy-lighter: lighten(hsl(210, 25%, 12%), 10%)
--color-content-bg: #1c1c1c
--color-link: #0e83cd
--color-link-hover: lighten(#0e83cd, 10%)
}
}
// Typography // Typography
font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif