2016-10-02 01:22:30 +08:00
|
|
|
@import "../minireset.sass"
|
|
|
|
|
|
|
|
|
|
$grey: hsl(0, 0%, 40%)
|
|
|
|
|
$grey-dark: hsl(0, 0%, 20%)
|
|
|
|
|
$grey-darker: hsl(0, 0%, 10%)
|
|
|
|
|
|
|
|
|
|
$blue: hsl(207, 98%, 52%)
|
|
|
|
|
$green: hsl(147, 98%, 42%)
|
|
|
|
|
$red: hsl(357, 98%, 62%)
|
|
|
|
|
|
|
|
|
|
$primary: #fc0c18
|
|
|
|
|
|
|
|
|
|
$background: #eee
|
|
|
|
|
$border: #ddd
|
|
|
|
|
|
2017-04-14 21:07:19 +08:00
|
|
|
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
|
|
|
|
|
$family-monospace: monospace !default
|
2016-10-02 01:22:30 +08:00
|
|
|
|
|
|
|
|
html
|
|
|
|
|
-moz-osx-font-smoothing: grayscale
|
|
|
|
|
-webkit-font-smoothing: antialiased
|
|
|
|
|
background: #fff
|
|
|
|
|
color: $grey
|
|
|
|
|
font-family: $family-sans-serif
|
|
|
|
|
font-size: 18px
|
|
|
|
|
min-width: 300px
|
|
|
|
|
overflow-x: hidden
|
|
|
|
|
text-rendering: optimizeLegibility
|
|
|
|
|
|
|
|
|
|
body
|
|
|
|
|
font-size: 1rem
|
2017-04-14 21:07:19 +08:00
|
|
|
font-weight: 400
|
2016-10-02 01:22:30 +08:00
|
|
|
line-height: 1.4
|
|
|
|
|
padding-bottom: calc((6.2rem * 3) - 2px)
|
|
|
|
|
|
2020-09-07 04:16:17 +08:00
|
|
|
.header, .snippets, .nav, .main
|
2016-10-02 01:22:30 +08:00
|
|
|
margin-left: auto
|
|
|
|
|
margin-right: auto
|
2020-09-07 04:16:17 +08:00
|
|
|
max-width: 29rem
|
|
|
|
|
|
|
|
|
|
.snippets
|
|
|
|
|
max-width: 58rem
|
|
|
|
|
|
|
|
|
|
.snippet
|
|
|
|
|
position: relative
|
|
|
|
|
button
|
|
|
|
|
cursor: pointer
|
|
|
|
|
position: absolute
|
|
|
|
|
right: 0.5em
|
|
|
|
|
top: 0.5em
|
2016-10-02 01:22:30 +08:00
|
|
|
|
|
|
|
|
a
|
|
|
|
|
color: $primary
|
|
|
|
|
text-decoration: none
|
|
|
|
|
|
|
|
|
|
strong
|
|
|
|
|
color: $grey-dark
|
2017-04-14 21:07:19 +08:00
|
|
|
font-weight: 700
|
2016-10-02 01:22:30 +08:00
|
|
|
|
|
|
|
|
.content
|
|
|
|
|
background: white
|
|
|
|
|
padding: 3rem 1rem
|
|
|
|
|
position: relative
|
|
|
|
|
z-index: 1
|
|
|
|
|
|
|
|
|
|
.header
|
|
|
|
|
text-align: center
|
|
|
|
|
figure
|
|
|
|
|
display: block
|
|
|
|
|
height: 160px
|
|
|
|
|
margin: 0 auto 1rem
|
|
|
|
|
width: 160px
|
|
|
|
|
img
|
|
|
|
|
display: block
|
|
|
|
|
height: 160px
|
|
|
|
|
width: 160px
|
|
|
|
|
h1
|
|
|
|
|
color: $grey-dark
|
|
|
|
|
font-size: 1.5rem
|
2017-04-14 21:07:19 +08:00
|
|
|
font-weight: 700
|
2016-10-02 01:22:30 +08:00
|
|
|
margin: 0
|
|
|
|
|
p
|
|
|
|
|
margin: 0
|
|
|
|
|
|
|
|
|
|
.ghbtns
|
|
|
|
|
height: 30px
|
|
|
|
|
margin-bottom: 3rem
|
|
|
|
|
margin-top: 1rem
|
2019-01-19 22:42:31 +08:00
|
|
|
overflow: hidden
|
2016-10-02 01:22:30 +08:00
|
|
|
text-align: center
|
|
|
|
|
iframe
|
|
|
|
|
display: inline-block
|
|
|
|
|
vertical-align: top
|
|
|
|
|
|
|
|
|
|
.nav
|
|
|
|
|
margin-bottom: 3rem
|
2020-09-07 04:16:17 +08:00
|
|
|
margin-top: 1rem
|
2016-10-02 01:22:30 +08:00
|
|
|
text-align: center
|
|
|
|
|
|
|
|
|
|
.button, .or
|
|
|
|
|
-webkit-touch-callout: none
|
|
|
|
|
-webkit-user-select: none
|
|
|
|
|
-moz-user-select: none
|
|
|
|
|
-ms-user-select: none
|
|
|
|
|
user-select: none
|
|
|
|
|
|
2020-09-07 04:16:17 +08:00
|
|
|
.html, .css, .button, .npm
|
|
|
|
|
border-radius: 3px
|
|
|
|
|
line-height: 1.2
|
|
|
|
|
padding: 1.5rem
|
|
|
|
|
transition: background 86ms ease-out
|
|
|
|
|
|
|
|
|
|
.html, .css
|
|
|
|
|
background-color: $grey-dark
|
|
|
|
|
font-family: $family-monospace
|
|
|
|
|
font-size: 0.8rem
|
|
|
|
|
text-align: left
|
|
|
|
|
|
2016-10-02 01:22:30 +08:00
|
|
|
.button, .npm
|
|
|
|
|
align-items: center
|
|
|
|
|
display: flex
|
|
|
|
|
flex-direction: column
|
|
|
|
|
justify-content: center
|
|
|
|
|
text-align: center
|
|
|
|
|
|
|
|
|
|
.button
|
|
|
|
|
background: $primary
|
|
|
|
|
color: #fff
|
|
|
|
|
cursor: pointer
|
|
|
|
|
font-size: 0.9rem
|
|
|
|
|
text-decoration: none
|
|
|
|
|
strong
|
|
|
|
|
color: #fff
|
|
|
|
|
font-size: 1.1em
|
|
|
|
|
span
|
|
|
|
|
display: block
|
|
|
|
|
small
|
|
|
|
|
display: block
|
|
|
|
|
opacity: 0.7
|
|
|
|
|
em
|
|
|
|
|
color: rgba(white, 0.5)
|
|
|
|
|
display: block
|
|
|
|
|
font-size: 0.8em
|
|
|
|
|
font-style: normal
|
|
|
|
|
margin-top: 0.5em
|
|
|
|
|
&:hover
|
2020-09-07 04:16:17 +08:00
|
|
|
background: darken($primary, 20%)
|
2016-10-02 01:22:30 +08:00
|
|
|
|
|
|
|
|
.or
|
|
|
|
|
margin: 1rem
|
2020-09-07 04:16:17 +08:00
|
|
|
text-align: center
|
2016-10-02 01:22:30 +08:00
|
|
|
|
|
|
|
|
.npm
|
|
|
|
|
background: $background
|
2017-04-14 21:07:19 +08:00
|
|
|
color: $grey-dark
|
2016-10-02 01:22:30 +08:00
|
|
|
font-family: $family-monospace
|
|
|
|
|
font-size: 0.8rem
|
|
|
|
|
|
|
|
|
|
.main
|
|
|
|
|
p
|
|
|
|
|
margin-bottom: 1em
|
|
|
|
|
a:hover
|
|
|
|
|
text-decoration: underline
|
|
|
|
|
ul
|
|
|
|
|
list-style: disc outside
|
|
|
|
|
li
|
|
|
|
|
+ li
|
|
|
|
|
margin-top: 1em
|
|
|
|
|
strong
|
|
|
|
|
display: block
|
|
|
|
|
font-size: 1.1em
|
|
|
|
|
em
|
|
|
|
|
color: $red
|
|
|
|
|
font-style: normal
|
|
|
|
|
&.preserves
|
|
|
|
|
color: $green
|
|
|
|
|
&.sets
|
|
|
|
|
color: $blue
|
|
|
|
|
|
|
|
|
|
.footer
|
|
|
|
|
background: $grey-darker
|
|
|
|
|
bottom: 0
|
|
|
|
|
box-shadow: inset 0 2rem 3rem black
|
|
|
|
|
color: hsl(0, 0%, 70%)
|
|
|
|
|
left: 0
|
|
|
|
|
padding-top: 2rem
|
|
|
|
|
position: fixed
|
|
|
|
|
right: 0
|
|
|
|
|
a
|
|
|
|
|
color: hsl(0, 0%, 30%)
|
|
|
|
|
display: block
|
|
|
|
|
line-height: 1
|
|
|
|
|
padding: 2rem
|
|
|
|
|
transition: background 29ms ease-out
|
|
|
|
|
span
|
|
|
|
|
display: block
|
|
|
|
|
font-size: 0.8rem
|
|
|
|
|
margin-bottom: 0.4rem
|
|
|
|
|
strong
|
|
|
|
|
color: hsl(0, 0%, 50%)
|
|
|
|
|
display: block
|
|
|
|
|
font-weight: normal
|
|
|
|
|
transition: background 29ms ease-out
|
|
|
|
|
&:hover
|
|
|
|
|
background: $red
|
|
|
|
|
color: rgba(black, 0.3)
|
|
|
|
|
strong
|
|
|
|
|
color: rgba(black, 0.5)
|
|
|
|
|
&:nth-child(2):hover
|
|
|
|
|
background: $blue
|
|
|
|
|
&:nth-child(3):hover
|
|
|
|
|
background: $green
|
|
|
|
|
|
|
|
|
|
.fork-me
|
|
|
|
|
display: block
|
|
|
|
|
height: 140px
|
|
|
|
|
position: fixed
|
|
|
|
|
right: 0
|
|
|
|
|
top: 0
|
|
|
|
|
width: 140px
|
|
|
|
|
img
|
|
|
|
|
display: block
|
|
|
|
|
height: 140px
|
|
|
|
|
width: 140px
|
|
|
|
|
|
|
|
|
|
@media (max-width: 699px)
|
|
|
|
|
.main
|
|
|
|
|
padding: 0 1rem 0 2rem
|
|
|
|
|
.fork-me
|
|
|
|
|
position: absolute
|
|
|
|
|
|
|
|
|
|
@media (min-width: 700px)
|
|
|
|
|
body
|
|
|
|
|
padding-bottom: calc(6.2rem - 2px)
|
|
|
|
|
.content
|
|
|
|
|
padding: 5rem
|
|
|
|
|
.footer
|
|
|
|
|
display: flex
|
|
|
|
|
a
|
|
|
|
|
flex-grow: 1
|
2018-04-09 00:22:23 +08:00
|
|
|
|
|
|
|
|
.native-js
|
|
|
|
|
border-radius: 3px
|
|
|
|
|
display: none
|
|
|
|
|
font-size: 1rem
|
|
|
|
|
opacity: 0
|
|
|
|
|
margin-bottom: 3rem
|
|
|
|
|
margin-left: auto
|
|
|
|
|
margin-right: auto
|
|
|
|
|
max-width: 50rem
|
|
|
|
|
visibility: hidden
|
|
|
|
|
|
|
|
|
|
.native-show
|
|
|
|
|
display: block
|
|
|
|
|
opacity: 1
|
|
|
|
|
visibility: visible
|
|
|
|
|
|
|
|
|
|
.native-flex
|
|
|
|
|
align-items: center
|
|
|
|
|
display: flex
|
|
|
|
|
justify-content: center
|
|
|
|
|
padding: 2em
|
|
|
|
|
text-decoration: none
|
|
|
|
|
|
|
|
|
|
.native-img
|
|
|
|
|
border-radius: 3px
|
|
|
|
|
flex-grow: 0
|
|
|
|
|
flex-shrink: 0
|
|
|
|
|
height: 50px
|
|
|
|
|
width: 125px
|
|
|
|
|
|
|
|
|
|
.native-details
|
|
|
|
|
flex-grow: 1
|
|
|
|
|
flex-shrink: 1
|
|
|
|
|
|
|
|
|
|
.native-main
|
|
|
|
|
align-items: center
|
|
|
|
|
flex-grow: 0
|
|
|
|
|
flex-shrink: 1
|
|
|
|
|
max-width: 640px
|
|
|
|
|
|
|
|
|
|
.native-company
|
|
|
|
|
display: block
|
|
|
|
|
font-size: 0.625em
|
|
|
|
|
letter-spacing: 2px
|
|
|
|
|
margin-bottom: 4px
|
|
|
|
|
text-transform: uppercase
|
|
|
|
|
|
|
|
|
|
.native-desc
|
|
|
|
|
display: block
|
|
|
|
|
|
|
|
|
|
.native-cta
|
|
|
|
|
border: none
|
|
|
|
|
border-radius: 3px
|
|
|
|
|
box-shadow: 0 6px 13px 0 hsla(0, 0%, 0%, .15)
|
|
|
|
|
display: inline-block
|
|
|
|
|
flex-grow: 0
|
|
|
|
|
flex-shrink: 0
|
|
|
|
|
font-size: 0.75em
|
|
|
|
|
font-weight: 400
|
|
|
|
|
padding: 0.75em 1em
|
|
|
|
|
text-transform: uppercase
|
|
|
|
|
transform: translateY(-1px)
|
|
|
|
|
transition: transform .3s ease-in-out
|
|
|
|
|
vertical-align: top
|
|
|
|
|
white-space: nowrap
|
|
|
|
|
&:hover
|
|
|
|
|
box-shadow: none
|
|
|
|
|
transform: translateY(1px)
|
|
|
|
|
|
|
|
|
|
$native-bp: 600px
|
|
|
|
|
|
|
|
|
|
=from($device)
|
|
|
|
|
@media screen and (min-width: $device)
|
|
|
|
|
@content
|
|
|
|
|
|
|
|
|
|
=until($device)
|
|
|
|
|
@media screen and (max-width: $device - 1px)
|
|
|
|
|
@content
|
|
|
|
|
|
|
|
|
|
+until($native-bp)
|
|
|
|
|
.native-flex
|
|
|
|
|
display: block
|
|
|
|
|
text-align: center
|
|
|
|
|
.native-main
|
|
|
|
|
margin-bottom: 2em
|
|
|
|
|
.native-details
|
|
|
|
|
margin: 1em
|
|
|
|
|
|
|
|
|
|
+from($native-bp)
|
|
|
|
|
.native-flex
|
|
|
|
|
display: flex
|
|
|
|
|
text-align: left
|
|
|
|
|
.native-main
|
|
|
|
|
display: flex
|
|
|
|
|
margin-right: 2em
|
|
|
|
|
.native-details
|
|
|
|
|
margin-left: 2em
|
|
|
|
|
|
|
|
|
|
+from($native-bp * 2)
|
|
|
|
|
.native-js
|
|
|
|
|
font-size: 1.25rem
|
2020-09-07 04:16:17 +08:00
|
|
|
|
|
|
|
|
// Background
|
|
|
|
|
$dt-gray-dark: #282a36
|
|
|
|
|
// Current Line & Selection
|
|
|
|
|
$dt-gray: #44475a
|
|
|
|
|
// Foreground
|
|
|
|
|
$dt-gray-light: #f8f8f2
|
|
|
|
|
// Comment
|
|
|
|
|
$dt-blue: #6272a4
|
|
|
|
|
|
|
|
|
|
$dt-cyan: #8be9fd
|
|
|
|
|
$dt-green: #50fa7b
|
|
|
|
|
$dt-orange: #ffb86c
|
|
|
|
|
$dt-pink: #ff79c6
|
|
|
|
|
$dt-purple: #bd93f9
|
|
|
|
|
$dt-red: #ff5555
|
|
|
|
|
$dt-yellow: #f1fa8c
|
|
|
|
|
|
|
|
|
|
.hljs
|
|
|
|
|
background-color: $dt-gray-dark
|
|
|
|
|
color: $dt-gray-light
|
|
|
|
|
white-space: pre-wrap
|
|
|
|
|
word-break: break-word
|
|
|
|
|
|
|
|
|
|
.hljs-comment
|
|
|
|
|
color: $dt-blue
|
|
|
|
|
|
|
|
|
|
.hljs-tag
|
|
|
|
|
color: $dt-cyan
|
|
|
|
|
|
|
|
|
|
.hljs-name
|
|
|
|
|
color: $dt-orange
|
|
|
|
|
|
|
|
|
|
.hljs-attr
|
|
|
|
|
color: $dt-purple
|
|
|
|
|
|
|
|
|
|
.hljs-string
|
|
|
|
|
color: $dt-red
|
|
|
|
|
|
|
|
|
|
.hljs-keyword
|
|
|
|
|
color: $dt-cyan
|
|
|
|
|
|
|
|
|
|
@media (prefers-color-scheme: dark)
|
|
|
|
|
html, .content
|
|
|
|
|
background-color: $grey-darker
|
|
|
|
|
color: #888
|
|
|
|
|
.header h1, strong
|
|
|
|
|
color: #fff
|
|
|
|
|
.npm
|
|
|
|
|
background: $grey-dark
|
|
|
|
|
color: #888
|
|
|
|
|
.footer
|
|
|
|
|
background: darken($grey-darker, 5%)
|
