mirror of
https://github.com/harttle/liquidjs.git
synced 2026-09-19 06:20:38 -07:00
docs: website for LiquidJS
This commit is contained in:
harttle
+53
@@ -0,0 +1,53 @@
|
||||
global-reset()
|
||||
|
||||
html
|
||||
box-sizing: border-box
|
||||
|
||||
*, *:before, *:after
|
||||
box-sizing: inherit
|
||||
|
||||
button
|
||||
input[type="reset"]
|
||||
input[type="button"]
|
||||
input[type="submit"]
|
||||
&::-moz-focus-inner
|
||||
padding: 0
|
||||
margin: 0
|
||||
border: 0
|
||||
|
||||
input, button, select
|
||||
margin: 0
|
||||
padding: 0
|
||||
border: 0
|
||||
|
||||
body
|
||||
background: color-navy
|
||||
font-size: font-size
|
||||
font-family: font-sans
|
||||
color: color-default
|
||||
text-rendering: optimizeLegibility
|
||||
-webkit-font-smoothing: antialiased
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
overflow-x: hidden
|
||||
|
||||
@media screen and (max-device-width: 480px)
|
||||
body
|
||||
-webkit-text-size-adjust: none;
|
||||
|
||||
.wrapper
|
||||
@media screen
|
||||
max-width: max-width
|
||||
margin: 0 auto
|
||||
|
||||
.inner
|
||||
@media screen
|
||||
padding: 0 gutter-width
|
||||
|
||||
#content-wrap
|
||||
background: #fff
|
||||
border-top: 1px solid darken(color-navy, 5%)
|
||||
border-bottom: 1px solid darken(color-navy, 5%)
|
||||
margin: -1px 0
|
||||
|
||||
.video-container
|
||||
text-align: center
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,55 @@
|
||||
#footer
|
||||
clearfix()
|
||||
padding: 24px 0
|
||||
color: rgba(255, 255, 255, 0.6)
|
||||
position: relative
|
||||
background: color-navy
|
||||
text-align: center
|
||||
@media mq-normal
|
||||
padding: 40px 0
|
||||
text-align: left
|
||||
@media print
|
||||
display: none
|
||||
a
|
||||
color: inherit
|
||||
text-decoration: none
|
||||
transition: 0.2s
|
||||
&:hover
|
||||
color: #fff
|
||||
.icon-twitter:hover
|
||||
color: #1da1f2
|
||||
.icon-patreon:hover
|
||||
color: #f96854
|
||||
.icon-opencollective:hover
|
||||
color: #3384ff
|
||||
|
||||
#footer-copyright
|
||||
line-height: 1.4
|
||||
@media mq-normal
|
||||
float: left
|
||||
a
|
||||
font-weight: bold
|
||||
|
||||
#footer-links
|
||||
margin-top: 1em
|
||||
@media mq-normal
|
||||
float: right
|
||||
margin-top: 0
|
||||
|
||||
.footer-link
|
||||
font-size: 20px
|
||||
margin-left: 10px
|
||||
&:first-child
|
||||
margin-left: 0
|
||||
@media mq-normal
|
||||
font-size: 30px
|
||||
|
||||
.icon-oc
|
||||
height: 36px
|
||||
width: 30px
|
||||
display: inline-block
|
||||
background-size: contain
|
||||
background-repeat: no-repeat
|
||||
vertical-align: text-bottom
|
||||
fill: #a2a5a8
|
||||
transition: 0.2s
|
||||
@@ -0,0 +1,88 @@
|
||||
header-padding-normal = 10px
|
||||
header-padding-max = 30px
|
||||
logo-size = 36px
|
||||
|
||||
#header
|
||||
position: relative
|
||||
padding: header-padding-normal 0
|
||||
@media print
|
||||
display: none
|
||||
|
||||
#header-inner
|
||||
display: flex
|
||||
flex-flow: row nowrap
|
||||
align-items: center
|
||||
@media mq-mobile
|
||||
justify-content: center
|
||||
|
||||
#logo-wrap
|
||||
flex: 0 logo-size
|
||||
|
||||
#logo
|
||||
hide-text()
|
||||
background: url("../icon/logo.png")
|
||||
width: logo-size
|
||||
height: logo-size
|
||||
background-size: @width @height
|
||||
display: block
|
||||
|
||||
#main-nav
|
||||
display: none
|
||||
flex: 1 auto
|
||||
padding-left: 20px
|
||||
@media mq-normal
|
||||
display: block
|
||||
|
||||
#search-input-wrap
|
||||
display: none
|
||||
padding-left: 6px
|
||||
border-bottom: 1px solid color-gray
|
||||
&.on
|
||||
display: inline-block
|
||||
> i, > span, #search-input
|
||||
vertical-align: middle;
|
||||
color: #fff
|
||||
line-height: 36px;
|
||||
|
||||
#search-input-icon
|
||||
padding-right: 0.5em
|
||||
opacity: 0.7
|
||||
|
||||
#search-input
|
||||
background: none
|
||||
font-size: inherit
|
||||
outline: none
|
||||
-webkit-appearance: none
|
||||
|
||||
.main-nav-link
|
||||
color: #fff
|
||||
text-decoration: none
|
||||
line-height: logo-size
|
||||
opacity: 0.7
|
||||
transition: 0.2s
|
||||
display: inline-block
|
||||
padding: 0 15px
|
||||
i
|
||||
padding-right: 8px
|
||||
&.active
|
||||
opacity: 1
|
||||
&:hover
|
||||
opacity: 1
|
||||
color: color-link-hover
|
||||
|
||||
#lang-select-wrap
|
||||
#github-link-wrap
|
||||
display: none
|
||||
position: relative
|
||||
@media mq-normal
|
||||
display: block
|
||||
|
||||
#lang-select
|
||||
opacity: 0
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
-webkit-appearance: menulist-button
|
||||
font-size: inherit
|
||||
+103
@@ -0,0 +1,103 @@
|
||||
// https://github.com/chriskempson/tomorrow-theme
|
||||
highlight-background = #fff
|
||||
highlight-current-line = #efefef
|
||||
highlight-selection = #d6d6d6
|
||||
highlight-foreground = #4d4d4c
|
||||
highlight-comment = #8e908c
|
||||
highlight-red = #c82829
|
||||
highlight-orange = #f5871f
|
||||
highlight-yellow = #eab700
|
||||
highlight-green = #718c00
|
||||
highlight-aqua = #3e999f
|
||||
highlight-blue = #4271ae
|
||||
highlight-purple = #8959a8
|
||||
|
||||
pre, code
|
||||
font-family: font-mono
|
||||
color: highlight-foreground
|
||||
background: #eee
|
||||
|
||||
code
|
||||
padding: 0 5px
|
||||
|
||||
pre
|
||||
padding: 10px 15px
|
||||
line-height: 22px
|
||||
code
|
||||
border: none
|
||||
display: block
|
||||
padding: 0
|
||||
|
||||
.highlight
|
||||
background: #eee
|
||||
padding: 10px 15px
|
||||
color: highlight-foreground
|
||||
overflow: auto
|
||||
margin: 0
|
||||
table
|
||||
margin: 0 !important
|
||||
border: 0
|
||||
th, td
|
||||
padding: 0
|
||||
figcaption
|
||||
clearfix()
|
||||
margin: -5px 0 5px
|
||||
color: color-gray
|
||||
a
|
||||
float: right
|
||||
pre
|
||||
padding: 0
|
||||
border: none
|
||||
background: none
|
||||
.line
|
||||
height: 22px
|
||||
|
||||
pre
|
||||
.comment
|
||||
.title
|
||||
color: highlight-comment
|
||||
.variable
|
||||
.attribute
|
||||
.tag
|
||||
.regexp
|
||||
.ruby .constant
|
||||
.xml .tag .title
|
||||
.xml .pi
|
||||
.xml .doctype
|
||||
.html .doctype
|
||||
.css .id
|
||||
.css .class
|
||||
.css .pseudo
|
||||
color: highlight-red
|
||||
.number
|
||||
.preprocessor
|
||||
.built_in
|
||||
.literal
|
||||
.params
|
||||
.constant
|
||||
color: highlight-orange
|
||||
.class
|
||||
.ruby .class .title
|
||||
.css .rules .attribute
|
||||
color: highlight-green
|
||||
.string
|
||||
.value
|
||||
.inheritance
|
||||
.header
|
||||
.ruby .symbol
|
||||
.xml .cdata
|
||||
color: highlight-green
|
||||
.css .hexcolor
|
||||
color: highlight-aqua
|
||||
.function
|
||||
.python .decorator
|
||||
.python .title
|
||||
.ruby .function .title
|
||||
.ruby .title .keyword
|
||||
.perl .sub
|
||||
.javascript .title
|
||||
.coffeescript .title
|
||||
color: highlight-blue
|
||||
.keyword
|
||||
.javascript .function
|
||||
color: highlight-purple
|
||||
@@ -0,0 +1,72 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('../fonts/icomoon.eot?e8nnma');
|
||||
src: url('../fonts/icomoon.eot?e8nnma#iefix') format('embedded-opentype'),
|
||||
url('../fonts/icomoon.ttf?e8nnma') format('truetype'),
|
||||
url('../fonts/icomoon.woff?e8nnma') format('woff'),
|
||||
url('../fonts/icomoon.svg?e8nnma#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
i {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-shopify:before {
|
||||
content: "\e905";
|
||||
}
|
||||
.icon-network:before {
|
||||
content: "\e902";
|
||||
}
|
||||
.icon-javascript:before {
|
||||
content: "\e901";
|
||||
}
|
||||
.icon-opencollective:before {
|
||||
content: "\e903";
|
||||
}
|
||||
.icon-patreon:before {
|
||||
content: "\e904";
|
||||
}
|
||||
.icon-search:before {
|
||||
content: "\f002";
|
||||
}
|
||||
.icon-cog:before {
|
||||
content: "\f013";
|
||||
}
|
||||
.icon-gear:before {
|
||||
content: "\f013";
|
||||
}
|
||||
.icon-pencil:before {
|
||||
content: "\f040";
|
||||
}
|
||||
.icon-chevron-left:before {
|
||||
content: "\f053";
|
||||
}
|
||||
.icon-chevron-right:before {
|
||||
content: "\f054";
|
||||
}
|
||||
.icon-arrow-right:before {
|
||||
content: "\f061";
|
||||
}
|
||||
.icon-twitter:before {
|
||||
content: "\f099";
|
||||
}
|
||||
.icon-github:before {
|
||||
content: "\f09b";
|
||||
}
|
||||
.icon-shield:before {
|
||||
content: "\f132";
|
||||
}
|
||||
+240
@@ -0,0 +1,240 @@
|
||||
#banner
|
||||
color: rgba(255, 255, 255, 0.8)
|
||||
text-align: center
|
||||
|
||||
#banner-title,
|
||||
.theme-intro-title
|
||||
line-height: 1.15
|
||||
font-weight: 300
|
||||
font-size: 40px
|
||||
@media mq-normal
|
||||
font-size: 50px
|
||||
|
||||
#banner-title
|
||||
padding-top: 20px
|
||||
@media mq-normal
|
||||
padding-top: 100px
|
||||
|
||||
.theme-intro-title
|
||||
margin-bottom: 24px
|
||||
padding-top: 24px
|
||||
@media mq-normal
|
||||
padding-top: 0
|
||||
|
||||
#banner-start
|
||||
text-align: center
|
||||
padding: 40px 0
|
||||
line-height: 47px;
|
||||
@media mq-normal
|
||||
padding: 60px 0
|
||||
font-size: 18px
|
||||
|
||||
#banner-start-command
|
||||
background: lighten(color-navy, 10%)
|
||||
padding: 0 15px
|
||||
color: #fff
|
||||
display: inline-block
|
||||
&:before
|
||||
content: "$"
|
||||
opacity: 0.5
|
||||
padding-right: 10px
|
||||
|
||||
#banner-start-link
|
||||
color: #fff
|
||||
background: color-link
|
||||
display: inline-block
|
||||
padding: 0 15px
|
||||
text-decoration: none
|
||||
transition: 0.2s
|
||||
&:hover
|
||||
background: color-link-hover
|
||||
|
||||
#banner-share
|
||||
display: none
|
||||
padding-bottom: 60px
|
||||
@media mq-normal
|
||||
display: block
|
||||
|
||||
#intro-news-list
|
||||
background-color: darken(color-navy, 10%)
|
||||
margin: -1px 0
|
||||
|
||||
#intro-news-flex
|
||||
display: flex
|
||||
flex-flow: column
|
||||
@media mq-normal
|
||||
flex-flow: row wrap
|
||||
|
||||
.intro-news-wrap
|
||||
padding: 24px 30px
|
||||
text-decoration: none
|
||||
&:hover
|
||||
background-color: color-link-hover
|
||||
@media mq-normal
|
||||
flex: 0 0 50%
|
||||
padding: 36px 30px
|
||||
@media screen and (min-width: 960px)
|
||||
flex: 0 0 25%
|
||||
|
||||
.intro-news-time
|
||||
font-size: 14px
|
||||
color: rgba(255,255,255,.6)
|
||||
|
||||
.intro-news-wrap:hover .intro-news-time
|
||||
color: rgba(255,255,255,.8)
|
||||
|
||||
.intro-news-title
|
||||
padding-top: 4px
|
||||
font-size: 15px
|
||||
line-height: 1.2;
|
||||
color: #fff
|
||||
|
||||
#intro-feature-list
|
||||
display: flex
|
||||
flex-flow: column
|
||||
margin: 30px 0
|
||||
@media mq-normal
|
||||
flex-flow: row wrap
|
||||
|
||||
.intro-feature-wrap
|
||||
margin-top: 20px
|
||||
@media mq-normal
|
||||
flex: 0 0 50%
|
||||
margin-top: 50px
|
||||
|
||||
.intro-feature
|
||||
position: relative
|
||||
text-align: center
|
||||
@media mq-normal
|
||||
text-align: left
|
||||
padding-left: 70px
|
||||
|
||||
.intro-feature-icon
|
||||
color: color-link
|
||||
font-size: 36px
|
||||
margin-bottom: 6px;
|
||||
text-align: center
|
||||
@media mq-normal
|
||||
margin-bottom: 26px
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 20px
|
||||
font-size: 24px
|
||||
width: @font-size
|
||||
|
||||
.intro-feature-title
|
||||
color: color-link
|
||||
font-size: 24px
|
||||
|
||||
.intro-feature-desc
|
||||
margin-top: 1em
|
||||
@media mq-normal
|
||||
margin-top: line-height
|
||||
line-height: line-height
|
||||
a
|
||||
text-decoration: none
|
||||
color: black
|
||||
&:visited, &:hover
|
||||
color: black
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
#intro-cmd-wrap
|
||||
max-width: 700px
|
||||
background: #eee
|
||||
padding: 15px 0
|
||||
overflow: auto
|
||||
margin: 50px auto 0;
|
||||
@media mq-normal
|
||||
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
|
||||
text-align: center
|
||||
margin: 20px 0 50px
|
||||
@media mq-normal
|
||||
margin: 30px 0 70px
|
||||
|
||||
#intro-get-started-link
|
||||
font-size: 18px
|
||||
display: inline-block
|
||||
text-decoration: none
|
||||
border: 3px solid lighten(color-link, 20%)
|
||||
padding: 12px 24px
|
||||
position: relative
|
||||
transition: 0.2s
|
||||
color: color-link
|
||||
&:hover
|
||||
background: @border-color
|
||||
color: #fff
|
||||
|
||||
#sponsors-wrap, #contributors-wrap
|
||||
background: lighten(color-navy, 10%)
|
||||
border-top: 1px solid #161d24
|
||||
border-bottom: 1px solid #161d24
|
||||
margin: -1px 0
|
||||
.inner
|
||||
margin: 48px 16px
|
||||
@media mq-tablet
|
||||
margin: 64px 32px
|
||||
h3
|
||||
color: #fff
|
||||
font-size: 32px
|
||||
p
|
||||
color: #ccc
|
||||
margin: 36px 0 24px
|
||||
font-size: 20px
|
||||
line-height: 1.5
|
||||
.description a
|
||||
text-decoration: none
|
||||
|
||||
#contributors-wrap
|
||||
.all-contributors
|
||||
tr
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
td
|
||||
margin: 10px 2px 0
|
||||
a img
|
||||
display: inline-block
|
||||
height: 72px
|
||||
width: 72px
|
||||
background: color-gray
|
||||
border-radius: 50%
|
||||
margin-bottom: 10px
|
||||
.description a
|
||||
color: #fff
|
||||
&:hover
|
||||
background: #fff
|
||||
color: lighten(color-navy, 10%)
|
||||
|
||||
#sponsors-wrap
|
||||
background: #fff
|
||||
border: none
|
||||
text-align: right
|
||||
overflow: hidden;
|
||||
.inner
|
||||
h3
|
||||
color: color-default
|
||||
p
|
||||
color: color-gray
|
||||
.open-collective
|
||||
margin: 0 auto
|
||||
.description a
|
||||
color: #333
|
||||
&:hover
|
||||
background: color-navy
|
||||
color: #fff
|
||||
@@ -0,0 +1,145 @@
|
||||
toggle-width = 25px
|
||||
toggle-height = toggle-width * 0.8
|
||||
toggle-line = 2px
|
||||
transition-duration = 0.4s
|
||||
lang-select-height = 40px
|
||||
|
||||
.mobile-nav-on
|
||||
overflow: hidden
|
||||
height: 100%
|
||||
max-height: 100%
|
||||
|
||||
#mobile-nav
|
||||
position: fixed
|
||||
top: 0
|
||||
width: mobile-nav-width
|
||||
left: @width * -1
|
||||
height: 100%
|
||||
background: color-navy
|
||||
transition: transition-duration
|
||||
.mobile-nav-on &
|
||||
transform: translateX(100%)
|
||||
|
||||
.mobile-sidebar-list
|
||||
background: lighten(color-navy, 10%)
|
||||
|
||||
#mobile-nav-inner
|
||||
overflow-y: auto
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: lang-select-height
|
||||
left: 0
|
||||
right: 0
|
||||
-webkit-overflow-scrolling: touch
|
||||
> *:first-child
|
||||
padding-top: 10px
|
||||
> *:last-child
|
||||
padding-bottom: 10px
|
||||
|
||||
#mobile-nav-toggle
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: gutter-width
|
||||
width: toggle-width
|
||||
height: toggle-height
|
||||
margin: auto
|
||||
opacity: 0.5
|
||||
cursor: pointer
|
||||
transition: 0.2s
|
||||
&:active, .mobile-nav-on &
|
||||
opacity: 1
|
||||
@media mq-normal
|
||||
display: none
|
||||
|
||||
.mobile-nav-toggle-bar
|
||||
background: #fff
|
||||
position: absolute
|
||||
left: 0
|
||||
width: 100%
|
||||
height: toggle-line
|
||||
transition: transition-duration
|
||||
transform-origin: 0
|
||||
border-radius: toggle-line
|
||||
&:first-child
|
||||
top: 0
|
||||
.mobile-nav-on &
|
||||
transform: rotate(45deg)
|
||||
&:nth-child(2)
|
||||
top: (toggle-height - toggle-line) * 0.5
|
||||
.mobile-nav-on &
|
||||
opacity: 0
|
||||
&:last-child
|
||||
top: toggle-height - toggle-line
|
||||
.mobile-nav-on &
|
||||
transform: rotate(-45deg)
|
||||
|
||||
.mobile-nav-link
|
||||
color: #fff
|
||||
text-decoration: none
|
||||
display: block
|
||||
padding: 10px 15px
|
||||
line-height: 1
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
|
||||
.mobile-nav-title
|
||||
color: color-link
|
||||
font-weight: bold
|
||||
padding: 10px 15px
|
||||
line-height: 1
|
||||
display: block
|
||||
border-top: 1px solid #444
|
||||
margin-top: 10px
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
|
||||
#mobile-lang-select-wrap
|
||||
position: absolute
|
||||
bottom: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
background: color-navy
|
||||
border-top: 1px solid #444
|
||||
|
||||
#mobile-lang-select-label
|
||||
line-height: lang-select-height
|
||||
color: #fff
|
||||
padding: 10px 15px
|
||||
i
|
||||
opacity: 0.7
|
||||
span
|
||||
padding-left: 8px
|
||||
|
||||
#mobile-lang-select
|
||||
-webkit-appearance: menulist-button
|
||||
opacity: 0
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
#container
|
||||
transition: transition-duration
|
||||
height: 100%
|
||||
-webkit-overflow-scrolling: touch
|
||||
.mobile-nav-on &
|
||||
transform: translateX(mobile-nav-width)
|
||||
overflow: hidden
|
||||
|
||||
#mobile-nav-dimmer
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 100%
|
||||
height: 100%
|
||||
background: #000
|
||||
opacity: 0
|
||||
transition: opacity transition-duration, transform 0s transition-duration
|
||||
.mobile-nav-on &
|
||||
width: 100%
|
||||
opacity: 0.7
|
||||
transform: translateX(-100%)
|
||||
transition: opacity transition-duration
|
||||
+233
@@ -0,0 +1,233 @@
|
||||
note-tip = hsl(40, 100%, 50%)
|
||||
note-info = hsl(200, 100%, 50%)
|
||||
note-warn = hsl(0, 100%, 50%)
|
||||
|
||||
#content
|
||||
position: relative
|
||||
|
||||
#content-inner
|
||||
display: flex
|
||||
|
||||
#sidebar
|
||||
flex: 0 0 sidebar-width
|
||||
.article-container
|
||||
flex: 1 100%
|
||||
|
||||
.article-inner
|
||||
display: flex
|
||||
.article
|
||||
width: 0
|
||||
flex: 1 1 100%
|
||||
padding: 40px 0
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@media print
|
||||
padding: 0
|
||||
#article-toc
|
||||
display: none
|
||||
width: sidebar-width
|
||||
opacity: 0.8
|
||||
@media mq-normal
|
||||
display: block
|
||||
|
||||
#article-toc-inner
|
||||
@extend .inner
|
||||
width: sidebar-width
|
||||
position: sticky
|
||||
top: 0
|
||||
margin: 40px auto
|
||||
.sidebar-title
|
||||
border-top: none
|
||||
|
||||
.toc-link
|
||||
@extend .sidebar-link
|
||||
|
||||
.toc-child
|
||||
padding-left: 1em
|
||||
font-size: 0.9em
|
||||
|
||||
#article-toc-inner-list
|
||||
overflow-y: auto
|
||||
|
||||
#article-toc-top
|
||||
margin-top: 10px
|
||||
font-size: 0.9em
|
||||
text-decoration: none
|
||||
color: color-default
|
||||
display: block
|
||||
&:hover
|
||||
color: color-link-hover
|
||||
|
||||
.article-header
|
||||
padding-bottom: 20px
|
||||
overflow: hidden;
|
||||
|
||||
.article-title
|
||||
float: left
|
||||
font-size: 36px
|
||||
font-weight: 300
|
||||
text-decoration: none
|
||||
color: color-default
|
||||
transition: 0.2s
|
||||
a&:hover
|
||||
color: color-link-hover
|
||||
.post &
|
||||
float: none
|
||||
|
||||
.article-date
|
||||
color: color-gray
|
||||
text-decoration: none
|
||||
display: inline-block
|
||||
margin-top: 1em
|
||||
&:hover
|
||||
color: color-link-hover
|
||||
|
||||
.article-edit-link
|
||||
float: right
|
||||
text-decoration: none;
|
||||
color: #bbb
|
||||
font-size: 24px
|
||||
line-height: 36px
|
||||
transition: 0.2s
|
||||
display: none
|
||||
&:hover
|
||||
color: color-link-hover
|
||||
@media mq-normal
|
||||
display: block
|
||||
|
||||
.article-anchor
|
||||
margin-left: 10px
|
||||
display: none
|
||||
&:before
|
||||
content: "#"
|
||||
@media print
|
||||
display: none !important
|
||||
.article-heading:hover &
|
||||
display: inline-block
|
||||
|
||||
.article-content
|
||||
line-height: line-height
|
||||
color: color-default
|
||||
@media print
|
||||
font-size: 12pt
|
||||
p, ol, ul, dl, table, blockquote, iframe, .highlight
|
||||
margin: 1em 0
|
||||
h1
|
||||
font-size: 2em
|
||||
h2
|
||||
font-size: 1.5em
|
||||
h3
|
||||
font-size: 1.3em
|
||||
h1, h2, h3, h4, h5, h6
|
||||
line-height: 1em
|
||||
font-weight: bold
|
||||
margin: 1em 0
|
||||
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%
|
||||
strong
|
||||
font-weight: bold
|
||||
em
|
||||
font-style: italic
|
||||
ul, ol, dl
|
||||
margin-left: 20px
|
||||
ul, ol, dl
|
||||
margin-top: 0
|
||||
margin-bottom: 0
|
||||
ul
|
||||
list-style: disc
|
||||
ol
|
||||
list-style: decimal
|
||||
dl
|
||||
list-style: square
|
||||
li
|
||||
p
|
||||
margin: 0
|
||||
table, blockquote, iframe, .highlight
|
||||
margin: 1em 0
|
||||
img, video
|
||||
max-width: 100%
|
||||
img[src*="@2x"]
|
||||
zoom: 50%
|
||||
blockquote
|
||||
padding: 0 20px
|
||||
position: relative
|
||||
border: 1px solid color-border
|
||||
border-left: 5px solid #ddd
|
||||
footer
|
||||
margin: 1em 0
|
||||
font-style: italic
|
||||
cite
|
||||
&:before
|
||||
content: "—"
|
||||
padding: 0 0.3em
|
||||
a
|
||||
color: color-grey
|
||||
.note
|
||||
&.tip
|
||||
border-left-color: note-tip
|
||||
&.info
|
||||
border-left-color: note-info
|
||||
&.warn
|
||||
border-left-color: note-warn
|
||||
.note-title
|
||||
margin: 1em 0
|
||||
display: block
|
||||
font-size: 1.3em
|
||||
font-weight: bold
|
||||
table
|
||||
max-width: 100%
|
||||
border: 1px solid color-border
|
||||
th
|
||||
font-weight: bold
|
||||
th, td
|
||||
padding: 5px 15px
|
||||
tr
|
||||
&:nth-child(2n)
|
||||
background: #eee
|
||||
|
||||
.article-footer
|
||||
margin: 30px 0 0
|
||||
border-top: 1px solid color-border
|
||||
text-align: center
|
||||
color: color-gray
|
||||
line-height: 1em
|
||||
padding-top: 1em
|
||||
position: relative
|
||||
@media print
|
||||
display: none
|
||||
|
||||
$article-footer-link
|
||||
color: color-link
|
||||
text-decoration: none
|
||||
font-weight: bold
|
||||
text-transform: uppercase
|
||||
position: absolute
|
||||
&:hover
|
||||
color: color-link-hover
|
||||
@media print
|
||||
display: none
|
||||
span
|
||||
padding: 0 6px
|
||||
span, i
|
||||
vertical-align: middle
|
||||
|
||||
.article-footer-prev
|
||||
@extend $article-footer-link
|
||||
left: 0
|
||||
|
||||
.article-footer-next
|
||||
@extend $article-footer-link
|
||||
right: 0
|
||||
|
||||
.article-footer-updated
|
||||
font-size: 0.9em
|
||||
@@ -0,0 +1,28 @@
|
||||
#playground
|
||||
background: white
|
||||
overflow: hidden
|
||||
h1
|
||||
font-size: 36px
|
||||
font-weight: 300
|
||||
margin: 40px 0 24px
|
||||
|
||||
.row
|
||||
display: flex
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between
|
||||
margin-bottom: 30px
|
||||
> div
|
||||
flex: 0 0 100%
|
||||
height: 400px
|
||||
margin-bottom: 30px
|
||||
|
||||
@media mq-normal
|
||||
.row
|
||||
flex-wrap: nowrap;
|
||||
> div
|
||||
flex: 0 1 49%
|
||||
|
||||
#editorEl, #previewEl
|
||||
font-size: 1em
|
||||
.ace_scroller, .ace_gutter
|
||||
padding: 15px 0px;
|
||||
@@ -0,0 +1,32 @@
|
||||
#sidebar
|
||||
width: sidebar-width
|
||||
padding-bottom: 40px
|
||||
opacity: 0.8
|
||||
display: none
|
||||
@media mq-normal
|
||||
display: block
|
||||
padding-top: 40px
|
||||
|
||||
.sidebar-title
|
||||
margin-top: 40px
|
||||
padding: 10px 0
|
||||
font-weight: bold
|
||||
color: color-link
|
||||
display: inline-block
|
||||
border-top: 1px solid color-border
|
||||
line-height: 1
|
||||
.sidebar-title:first-child
|
||||
margin-top: 0
|
||||
|
||||
.sidebar-link
|
||||
display: block
|
||||
color: color-default
|
||||
text-decoration: none
|
||||
padding: 7px 0
|
||||
line-height: 1
|
||||
position: relative
|
||||
width: 100%
|
||||
&.current
|
||||
color: color-link
|
||||
&:hover
|
||||
color: color-link-hover
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
// Config
|
||||
support-for-ie = false
|
||||
vendor-prefixes = webkit moz ms official
|
||||
|
||||
// Colors
|
||||
color-default = #444
|
||||
color-gray = #999
|
||||
color-border = #e3e3e3
|
||||
color-navy = hsl(210, 25%, 12%)
|
||||
color-link = #0e83cd
|
||||
color-link-hover = lighten(color-link, 10%)
|
||||
|
||||
// Typography
|
||||
font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif
|
||||
font-serif = Garamond, Georgia, "Times New Roman", serif
|
||||
font-mono = "Source Code Pro", Monaco, Menlo, Consolas, monospace
|
||||
font-size = 15px
|
||||
line-height = 1.6em
|
||||
|
||||
// Layout
|
||||
max-width = 1200px
|
||||
gutter-width = 20px
|
||||
sidebar-width = 220px
|
||||
mobile-nav-width = 260px
|
||||
|
||||
// Media queries
|
||||
mq-mobile = "screen and (max-width: 768px)"
|
||||
mq-normal = "screen and (min-width: 769px)"
|
||||
mq-tablet = "screen and (min-width: 480px)"
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@import "nib"
|
||||
@import "_variables"
|
||||
|
||||
@import "_partial/base"
|
||||
@import "_partial/header"
|
||||
@import "_partial/index"
|
||||
@import "_partial/playground"
|
||||
@import "_partial/sidebar"
|
||||
@import "_partial/page"
|
||||
@import "_partial/mobile_nav"
|
||||
@import "_partial/footer"
|
||||
@import "_partial/highlight"
|
||||
@import "_partial/icomoon.css"
|
||||
@import "_partial/docsearch.min.css"
|
||||
Reference in New Issue
Block a user