refactor: build config (#408)
* refactor: build config * chore: fix conflict * fix: 404 page path
This commit is contained in:
cinwell.li
GitHub
parent
9b3b4454de
commit
8352a1e489
64 changed files with 4246 additions and 5512 deletions
|
|
@ -1,112 +0,0 @@
|
|||
section.cover {
|
||||
align-items: center;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: 100vh;
|
||||
display: none;
|
||||
|
||||
&.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.has-mask .mask {
|
||||
background-color: $color-bg;
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
size: 100%;
|
||||
}
|
||||
|
||||
.cover-main {
|
||||
flex: 1;
|
||||
margin: -20px 16px 0;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5rem;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: inherit;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 300;
|
||||
margin: 0.625rem 0 2.5rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
small {
|
||||
bottom: -0.4375rem;
|
||||
font-size: 1rem;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
line-height: 1.8;
|
||||
list-style-type: none;
|
||||
margin: 1em auto;
|
||||
max-width: 500px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cover-main > p:last-child a {
|
||||
border-color: var(--theme-color, $color-primary);
|
||||
border-radius: 2rem;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
box-sizing: border-box;
|
||||
color: var(--theme-color, $color-primary);
|
||||
display: inline-block;
|
||||
font-size: 1.05rem;
|
||||
letter-spacing: 0.1rem;
|
||||
margin: 0.5rem 1rem;
|
||||
padding: 0.75em 2rem;
|
||||
text-decoration: none;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&:last-child {
|
||||
background-color: var(--theme-color, $color-primary);
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote > p > a {
|
||||
border-bottom: 2px solid var(--theme-color, $color-primary);
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-color, $color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
95
src/themes/basic/_coverpage.styl
Normal file
95
src/themes/basic/_coverpage.styl
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
section.cover
|
||||
align-items center
|
||||
background-position center center
|
||||
background-repeat no-repeat
|
||||
background-size cover
|
||||
height 100vh
|
||||
display none
|
||||
|
||||
&.show
|
||||
display flex
|
||||
|
||||
&.has-mask .mask
|
||||
background-color $color-bg
|
||||
opacity 0.8
|
||||
position absolute
|
||||
top 0
|
||||
height 100%
|
||||
width 100%
|
||||
|
||||
.cover-main
|
||||
flex 1
|
||||
margin -20px 16px 0
|
||||
text-align center
|
||||
z-index 1
|
||||
|
||||
a
|
||||
color inherit
|
||||
text-decoration none
|
||||
|
||||
&:hover
|
||||
text-decoration none
|
||||
|
||||
p
|
||||
line-height 1.5rem
|
||||
margin 1em 0
|
||||
|
||||
h1
|
||||
color inherit
|
||||
font-size 2.5rem
|
||||
font-weight 300
|
||||
margin 0.625rem 0 2.5rem
|
||||
position relative
|
||||
text-align center
|
||||
|
||||
a
|
||||
display block
|
||||
|
||||
small
|
||||
bottom -0.4375rem
|
||||
font-size 1rem
|
||||
position absolute
|
||||
|
||||
blockquote
|
||||
font-size 1.5rem
|
||||
text-align center
|
||||
|
||||
ul
|
||||
line-height 1.8
|
||||
list-style-type none
|
||||
margin 1em auto
|
||||
max-width 500px
|
||||
padding 0
|
||||
|
||||
.cover-main > p:last-child a
|
||||
border-color var(--theme-color, $color-primary)
|
||||
border-radius 2rem
|
||||
border-style solid
|
||||
border-width 1px
|
||||
box-sizing border-box
|
||||
color var(--theme-color, $color-primary)
|
||||
display inline-block
|
||||
font-size 1.05rem
|
||||
letter-spacing 0.1rem
|
||||
margin 0.5rem 1rem
|
||||
padding 0.75em 2rem
|
||||
text-decoration none
|
||||
transition all 0.15s ease
|
||||
|
||||
&:last-child
|
||||
background-color var(--theme-color, $color-primary)
|
||||
color #fff
|
||||
|
||||
&:hover
|
||||
color inherit
|
||||
opacity 0.8
|
||||
|
||||
&:hover
|
||||
color inherit
|
||||
|
||||
blockquote > p > a
|
||||
border-bottom 2px solid var(--theme-color, $color-primary)
|
||||
transition color 0.3s
|
||||
|
||||
&:hover
|
||||
color var(--theme-color, $color-primary)
|
||||
|
|
@ -1,571 +0,0 @@
|
|||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-text-size-adjust: none;
|
||||
-webkit-touch-callout: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body:not(.ready) {
|
||||
overflow: hidden;
|
||||
|
||||
[data-cloak],
|
||||
.app-nav,
|
||||
> nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
div#app {
|
||||
font-size: 30px;
|
||||
font-weight: lighter;
|
||||
margin: 40vh auto;
|
||||
text-align: center;
|
||||
|
||||
&:empty::before {
|
||||
content: 'Loading...';
|
||||
}
|
||||
}
|
||||
|
||||
.emoji {
|
||||
height: 1.2rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.progress {
|
||||
background-color: var(--theme-color, $color-primary);
|
||||
height: 2px;
|
||||
left: 0px;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
transition: width 0.2s, opacity 0.4s;
|
||||
width: 0%;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
.search a:hover {
|
||||
color: var(--theme-color, $color-primary);
|
||||
}
|
||||
|
||||
.search .search-keyword {
|
||||
color: var(--theme-color, $color-primary);
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: $color-text;
|
||||
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
kbd {
|
||||
border: solid 1px #ccc;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
font-size: 12px !important;
|
||||
line-height: 12px;
|
||||
margin-bottom: 3px;
|
||||
padding: 3px 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.task-list-item {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li input[type='checkbox'] {
|
||||
margin: 0 0.2em 0.25em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* navbar */
|
||||
.app-nav {
|
||||
margin: 25px 60px 0 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
z-index: 10;
|
||||
|
||||
&.no-badge {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> a {
|
||||
margin: 0 1rem;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-color, $color-primary);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid var(--theme-color, $color-primary);
|
||||
color: var(--theme-color, $color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* navbar dropdown */
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 1rem;
|
||||
padding: 5px 0;
|
||||
position: relative;
|
||||
|
||||
ul {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-color: #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
max-height: calc(100vh - 61px);
|
||||
overflow-y: auto;
|
||||
padding: 10px 0;
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
text-align: left;
|
||||
top: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 1rem;
|
||||
margin: 0;
|
||||
margin: 8px 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&.active {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* github corner */
|
||||
.github-corner {
|
||||
border-bottom: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
text-decoration: none;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
|
||||
&:hover .octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out;
|
||||
}
|
||||
|
||||
svg {
|
||||
color: $color-bg;
|
||||
fill: var(--theme-color, $color-primary);
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
/* main */
|
||||
main {
|
||||
display: block;
|
||||
position: relative;
|
||||
size: 100vw 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
main.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.anchor {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
|
||||
span {
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* sidebar */
|
||||
.sidebar {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.07);
|
||||
overflow-y: auto;
|
||||
padding: 40px 0 0;
|
||||
position: absolute 0 * 0 0;
|
||||
transition: transform 250ms ease-out;
|
||||
width: $sidebar-width;
|
||||
z-index: 20;
|
||||
|
||||
> h1 {
|
||||
margin: 0 auto 1rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app-nav {
|
||||
display: block;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
line-height: 2em;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
li.collapse {
|
||||
.app-sub-sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li > p {
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul li a {
|
||||
border-bottom: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul li ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb {
|
||||
background: rgba(136, 136, 136, 0.4);
|
||||
}
|
||||
|
||||
&:hover::-webkit-scrollbar-track {
|
||||
background: rgba(136, 136, 136, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
/* sidebar toggle */
|
||||
.sidebar-toggle {
|
||||
background-color: transparent;
|
||||
background-color: rgba($color-bg, 0.8);
|
||||
border: 0;
|
||||
outline: none;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
position: absolute * * 0 0;
|
||||
text-align: center;
|
||||
transition: opacity 0.3s;
|
||||
width: 30px;
|
||||
width: calc($sidebar-width - 16px);
|
||||
z-index: 30;
|
||||
|
||||
.sidebar-toggle-button:hover {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
span {
|
||||
background-color: var(--theme-color, $color-primary);
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
size: 16px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
body.sticky {
|
||||
.sidebar,
|
||||
.sidebar-toggle {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
/* main content */
|
||||
.content {
|
||||
padding-top: 60px;
|
||||
position: absolute 0 0 0 $sidebar-width;
|
||||
transition: left 250ms ease;
|
||||
}
|
||||
|
||||
/* markdown content found on pages */
|
||||
.markdown-section {
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
padding: 30px 15px 40px 15px;
|
||||
position: relative;
|
||||
|
||||
> * {
|
||||
box-sizing: border-box;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-section hr {
|
||||
border: none;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
.markdown-section iframe {
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.markdown-section table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.markdown-section th {
|
||||
border: 1px solid #ddd;
|
||||
font-weight: bold;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
.markdown-section td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
.markdown-section tr {
|
||||
border-top: 1px solid #ccc;
|
||||
&:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-section p.tip {
|
||||
background-color: #f8f8f8;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-left: 4px solid #f66;
|
||||
border-top-right-radius: 2px;
|
||||
margin: 2em 0;
|
||||
padding: 12px 24px 12px 30px;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
background-color: #f66;
|
||||
border-radius: 100%;
|
||||
color: $color-bg;
|
||||
content: '!';
|
||||
font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
left: -12px;
|
||||
line-height: 20px;
|
||||
position: absolute;
|
||||
size: 20px;
|
||||
text-align: center;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
em {
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-section p.warn {
|
||||
background: rgba($color-primary, 0.1);
|
||||
border-radius: 2px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
body.close {
|
||||
.sidebar {
|
||||
transform: translateX(-$sidebar-width);
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.github-corner,
|
||||
.sidebar-toggle,
|
||||
.sidebar,
|
||||
.app-nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.github-corner,
|
||||
.sidebar-toggle,
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.app-nav {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.app-nav li ul {
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
main {
|
||||
height: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
left: -$sidebar-width;
|
||||
transition: transform 250ms ease-out;
|
||||
}
|
||||
|
||||
.content {
|
||||
left: 0;
|
||||
max-width: 100vw;
|
||||
position: static;
|
||||
padding-top: 20px;
|
||||
transition: transform 250ms ease;
|
||||
}
|
||||
|
||||
.app-nav,
|
||||
.github-corner {
|
||||
transition: transform 250ms ease-out;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
background-color: transparent;
|
||||
width: auto;
|
||||
padding: 30px 30px 10px 10px;
|
||||
}
|
||||
|
||||
body.close {
|
||||
.sidebar {
|
||||
transform: translateX($sidebar-width);
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
background-color: rgba($color-bg, 0.8);
|
||||
transition: 1s background-color;
|
||||
width: calc($sidebar-width - 16px);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.content {
|
||||
transform: translateX($sidebar-width);
|
||||
}
|
||||
|
||||
.app-nav,
|
||||
.github-corner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.github-corner {
|
||||
&:hover .octo-arm {
|
||||
animation: none;
|
||||
}
|
||||
.octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes octocat-wave {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
20%,
|
||||
60% {
|
||||
transform: rotate(-25deg);
|
||||
}
|
||||
40%,
|
||||
80% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
}
|
||||
467
src/themes/basic/_layout.styl
Normal file
467
src/themes/basic/_layout.styl
Normal file
|
|
@ -0,0 +1,467 @@
|
|||
*
|
||||
-webkit-font-smoothing antialiased
|
||||
-webkit-overflow-scrolling touch
|
||||
-webkit-tap-highlight-color rgba(0, 0, 0, 0)
|
||||
-webkit-text-size-adjust none
|
||||
-webkit-touch-callout none
|
||||
box-sizing border-box
|
||||
|
||||
body:not(.ready)
|
||||
overflow hidden
|
||||
|
||||
[data-cloak], .app-nav, > nav
|
||||
display none
|
||||
|
||||
div#app
|
||||
font-size 30px
|
||||
font-weight lighter
|
||||
margin 40vh auto
|
||||
text-align center
|
||||
|
||||
&:empty::before
|
||||
content 'Loading...'
|
||||
|
||||
.emoji
|
||||
height 1.2rem
|
||||
vertical-align middle
|
||||
|
||||
.progress
|
||||
background-color var(--theme-color, $color-primary)
|
||||
height 2px
|
||||
left 0px
|
||||
position fixed
|
||||
right 0px
|
||||
top 0px
|
||||
transition width 0.2s, opacity 0.4s
|
||||
width 0%
|
||||
z-index 999999
|
||||
|
||||
.search a:hover
|
||||
color var(--theme-color, $color-primary)
|
||||
|
||||
.search .search-keyword
|
||||
color var(--theme-color, $color-primary)
|
||||
font-style normal
|
||||
font-weight bold
|
||||
|
||||
html, body
|
||||
height 100%
|
||||
|
||||
body
|
||||
-moz-osx-font-smoothing grayscale
|
||||
-webkit-font-smoothing antialiased
|
||||
color $color-text
|
||||
font-family 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
|
||||
font-size 15px
|
||||
letter-spacing 0
|
||||
margin 0
|
||||
overflow-x hidden
|
||||
|
||||
img
|
||||
max-width 100%
|
||||
|
||||
a[disabled]
|
||||
cursor not-allowed
|
||||
opacity 0.6
|
||||
|
||||
kbd
|
||||
border solid 1px #ccc
|
||||
border-radius 3px
|
||||
display inline-block
|
||||
font-size 12px !important
|
||||
line-height 12px
|
||||
margin-bottom 3px
|
||||
padding 3px 5px
|
||||
vertical-align middle
|
||||
|
||||
.task-list-item
|
||||
list-style-type none
|
||||
|
||||
li input[type='checkbox']
|
||||
margin 0 0.2em 0.25em -1.6em
|
||||
vertical-align middle
|
||||
|
||||
/* navbar */
|
||||
.app-nav
|
||||
margin 25px 60px 0 0
|
||||
position absolute
|
||||
right 0
|
||||
text-align right
|
||||
z-index 10
|
||||
|
||||
&.no-badge
|
||||
margin-right 25px
|
||||
|
||||
p
|
||||
margin 0
|
||||
|
||||
> a
|
||||
margin 0 1rem
|
||||
padding 5px 0
|
||||
|
||||
ul, li
|
||||
display inline-block
|
||||
list-style none
|
||||
margin 0
|
||||
|
||||
a
|
||||
color inherit
|
||||
font-size 16px
|
||||
text-decoration none
|
||||
transition color 0.3s
|
||||
|
||||
&:hover
|
||||
color var(--theme-color, $color-primary)
|
||||
|
||||
&.active
|
||||
border-bottom 2px solid var(--theme-color, $color-primary)
|
||||
color var(--theme-color, $color-primary)
|
||||
|
||||
/* navbar dropdown */
|
||||
li
|
||||
display inline-block
|
||||
margin 0 1rem
|
||||
padding 5px 0
|
||||
position relative
|
||||
|
||||
ul
|
||||
background-color #fff
|
||||
border 1px solid #ddd
|
||||
border-bottom-color #ccc
|
||||
border-radius 4px
|
||||
box-sizing border-box
|
||||
display none
|
||||
max-height calc(100vh - 61px)
|
||||
overflow-y auto
|
||||
padding 10px 0
|
||||
position absolute
|
||||
right -15px
|
||||
text-align left
|
||||
top 100%
|
||||
white-space nowrap
|
||||
|
||||
li
|
||||
display block
|
||||
font-size 14px
|
||||
line-height 1rem
|
||||
margin 0
|
||||
margin 8px 14px
|
||||
white-space nowrap
|
||||
|
||||
a
|
||||
display block
|
||||
font-size inherit
|
||||
margin 0
|
||||
padding 0
|
||||
|
||||
&.active
|
||||
border-bottom 0
|
||||
|
||||
&:hover ul
|
||||
display block
|
||||
|
||||
/* github corner */
|
||||
.github-corner
|
||||
border-bottom 0
|
||||
position fixed
|
||||
right 0
|
||||
text-decoration none
|
||||
top 0
|
||||
z-index 1
|
||||
|
||||
&:hover .octo-arm
|
||||
animation octocat-wave 560ms ease-in-out
|
||||
|
||||
svg
|
||||
color $color-bg
|
||||
fill var(--theme-color, $color-primary)
|
||||
height 80px
|
||||
width 80px
|
||||
|
||||
/* main */
|
||||
main
|
||||
display block
|
||||
position relative
|
||||
width 100vw
|
||||
height 100%
|
||||
z-index 0
|
||||
|
||||
main.hidden
|
||||
display none
|
||||
|
||||
.anchor
|
||||
display inline-block
|
||||
text-decoration none
|
||||
transition all 0.3s
|
||||
|
||||
span
|
||||
color $color-text
|
||||
|
||||
&:hover
|
||||
text-decoration underline
|
||||
|
||||
/* sidebar */
|
||||
.sidebar
|
||||
border-right 1px solid rgba(0, 0, 0, 0.07)
|
||||
overflow-y auto
|
||||
padding 40px 0 0
|
||||
position absolute
|
||||
top 0
|
||||
bottom 0
|
||||
left 0
|
||||
transition transform 250ms ease-out
|
||||
width $sidebar-width
|
||||
z-index 20
|
||||
|
||||
> h1
|
||||
margin 0 auto 1rem
|
||||
font-size 1.5rem
|
||||
font-weight 300
|
||||
text-align center
|
||||
|
||||
a
|
||||
color inherit
|
||||
text-decoration none
|
||||
|
||||
.app-nav
|
||||
display block
|
||||
position static
|
||||
|
||||
.sidebar-nav
|
||||
line-height 2em
|
||||
padding-bottom 40px
|
||||
|
||||
li.collapse
|
||||
.app-sub-sidebar
|
||||
display none
|
||||
|
||||
ul
|
||||
margin 0
|
||||
padding 0
|
||||
|
||||
li > p
|
||||
font-weight 700
|
||||
margin 0
|
||||
|
||||
ul, ul li
|
||||
list-style none
|
||||
|
||||
ul li a
|
||||
border-bottom none
|
||||
display block
|
||||
|
||||
ul li ul
|
||||
padding-left 20px
|
||||
|
||||
&::-webkit-scrollbar
|
||||
width 4px
|
||||
|
||||
&::-webkit-scrollbar-thumb
|
||||
background transparent
|
||||
border-radius 4px
|
||||
|
||||
&:hover::-webkit-scrollbar-thumb
|
||||
background rgba(136, 136, 136, 0.4)
|
||||
|
||||
&:hover::-webkit-scrollbar-track
|
||||
background rgba(136, 136, 136, 0.1)
|
||||
|
||||
/* sidebar toggle */
|
||||
.sidebar-toggle
|
||||
background-color transparent
|
||||
background-color rgba($color-bg, 0.8)
|
||||
border 0
|
||||
outline none
|
||||
padding 10px
|
||||
position absolute
|
||||
bottom 0
|
||||
left 0
|
||||
text-align center
|
||||
transition opacity 0.3s
|
||||
width $sidebar-width - 16px
|
||||
z-index 30
|
||||
|
||||
.sidebar-toggle-button:hover
|
||||
opacity 0.4
|
||||
|
||||
span
|
||||
background-color var(--theme-color, $color-primary)
|
||||
display block
|
||||
margin-bottom 4px
|
||||
width 16px
|
||||
height 2px
|
||||
|
||||
body.sticky
|
||||
.sidebar, .sidebar-toggle
|
||||
position fixed
|
||||
|
||||
/* main content */
|
||||
.content
|
||||
padding-top 60px
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
bottom 0
|
||||
left $sidebar-width
|
||||
transition left 250ms ease
|
||||
|
||||
/* markdown content found on pages */
|
||||
.markdown-section
|
||||
margin 0 auto
|
||||
max-width 800px
|
||||
padding 30px 15px 40px 15px
|
||||
position relative
|
||||
|
||||
> *
|
||||
box-sizing border-box
|
||||
font-size inherit
|
||||
|
||||
> :first-child
|
||||
margin-top 0 !important
|
||||
|
||||
.markdown-section hr
|
||||
border none
|
||||
border-bottom 1px solid #eee
|
||||
margin 2em 0
|
||||
|
||||
.markdown-section iframe
|
||||
border 1px solid #eee
|
||||
|
||||
.markdown-section table
|
||||
border-collapse collapse
|
||||
border-spacing 0
|
||||
display block
|
||||
margin-bottom 1rem
|
||||
overflow auto
|
||||
width 100%
|
||||
|
||||
.markdown-section th
|
||||
border 1px solid #ddd
|
||||
font-weight bold
|
||||
padding 6px 13px
|
||||
|
||||
.markdown-section td
|
||||
border 1px solid #ddd
|
||||
padding 6px 13px
|
||||
|
||||
.markdown-section tr
|
||||
border-top 1px solid #ccc
|
||||
|
||||
&:nth-child(2n)
|
||||
background-color #f8f8f8
|
||||
|
||||
.markdown-section p.tip
|
||||
background-color #f8f8f8
|
||||
border-bottom-right-radius 2px
|
||||
border-left 4px solid #f66
|
||||
border-top-right-radius 2px
|
||||
margin 2em 0
|
||||
padding 12px 24px 12px 30px
|
||||
position relative
|
||||
|
||||
&:before
|
||||
background-color #f66
|
||||
border-radius 100%
|
||||
color $color-bg
|
||||
content '!'
|
||||
font-family 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
|
||||
font-size 14px
|
||||
font-weight bold
|
||||
left -12px
|
||||
line-height 20px
|
||||
position absolute
|
||||
height 20px
|
||||
width 20px
|
||||
text-align center
|
||||
top 14px
|
||||
|
||||
code
|
||||
background-color #efefef
|
||||
|
||||
em
|
||||
color $color-text
|
||||
|
||||
.markdown-section p.warn
|
||||
background rgba($color-primary, 0.1)
|
||||
border-radius 2px
|
||||
padding 1rem
|
||||
|
||||
body.close
|
||||
.sidebar
|
||||
transform translateX(-$sidebar-width)
|
||||
|
||||
.sidebar-toggle
|
||||
width auto
|
||||
|
||||
.content
|
||||
left 0
|
||||
|
||||
@media print
|
||||
.github-corner, .sidebar-toggle, .sidebar, .app-nav
|
||||
display none
|
||||
|
||||
@media screen and (max-width: 768px)
|
||||
.github-corner, .sidebar-toggle, .sidebar
|
||||
position fixed
|
||||
|
||||
.app-nav
|
||||
margin-top 16px
|
||||
|
||||
.app-nav li ul
|
||||
top 30px
|
||||
|
||||
main
|
||||
height auto
|
||||
overflow-x hidden
|
||||
|
||||
.sidebar
|
||||
left -$sidebar-width
|
||||
transition transform 250ms ease-out
|
||||
|
||||
.content
|
||||
left 0
|
||||
max-width 100vw
|
||||
position static
|
||||
padding-top 20px
|
||||
transition transform 250ms ease
|
||||
|
||||
.app-nav, .github-corner
|
||||
transition transform 250ms ease-out
|
||||
|
||||
.sidebar-toggle
|
||||
background-color transparent
|
||||
width auto
|
||||
padding 30px 30px 10px 10px
|
||||
|
||||
body.close
|
||||
.sidebar
|
||||
transform translateX($sidebar-width)
|
||||
|
||||
.sidebar-toggle
|
||||
background-color rgba($color-bg, 0.8)
|
||||
transition 1s background-color
|
||||
width $sidebar-width - 16px
|
||||
padding 10px
|
||||
|
||||
.content
|
||||
transform translateX($sidebar-width)
|
||||
|
||||
.app-nav, .github-corner
|
||||
display none
|
||||
|
||||
.github-corner
|
||||
&:hover .octo-arm
|
||||
animation none
|
||||
|
||||
.octo-arm
|
||||
animation octocat-wave 560ms ease-in-out
|
||||
|
||||
@keyframes octocat-wave
|
||||
0%, 100%
|
||||
transform rotate(0)
|
||||
|
||||
20%, 60%
|
||||
transform rotate(-25deg)
|
||||
|
||||
40%, 80%
|
||||
transform rotate(10deg)
|
||||
|
|
@ -1,241 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Inconsolata-Bold');
|
||||
|
||||
$color-primary: #0074d9;
|
||||
$color-bg: #fff;
|
||||
$color-text: #34495e;
|
||||
$sidebar-width: 16rem;
|
||||
|
||||
@import 'basic/layout';
|
||||
@import 'basic/coverpage';
|
||||
|
||||
/* sidebar */
|
||||
.sidebar {
|
||||
color: #364149;
|
||||
background-color: $color-bg;
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0.2em 0 0.2em 1rem;
|
||||
}
|
||||
|
||||
ul li ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li.active {
|
||||
a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-section h1,
|
||||
.markdown-section h2,
|
||||
.markdown-section h3,
|
||||
.markdown-section h4,
|
||||
.markdown-section strong {
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.markdown-section a {
|
||||
color: var(--theme-color, $color-primary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.markdown-section p,
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
line-height: 1.6rem;
|
||||
margin: 0 0 1em 0;
|
||||
word-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
.markdown-section h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.markdown-section h2 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 400;
|
||||
margin: 0 0 1rem 0;
|
||||
padding: 1rem 0 0 0;
|
||||
}
|
||||
|
||||
.markdown-section h3 {
|
||||
font-size: 1.5rem;
|
||||
margin: 52px 0 1.2rem;
|
||||
}
|
||||
|
||||
.markdown-section h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.markdown-section h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.markdown-section h6 {
|
||||
color: #777;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.markdown-section figure,
|
||||
.markdown-section p,
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
margin: 1.2em 0;
|
||||
}
|
||||
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.markdown-section li {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown-section blockquote {
|
||||
border-left: 4px solid var(--theme-color, $color-primary);
|
||||
color: #858585;
|
||||
margin: 2em 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.markdown-section blockquote p {
|
||||
font-weight: 600;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.markdown-section iframe {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown-section em {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.markdown-section code {
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 3px;
|
||||
font-family: Inconsolata;
|
||||
padding: 0.2em 0.4rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.markdown-section pre {
|
||||
background-color: #f9f9f9;
|
||||
border-left: 2px solid #eee;
|
||||
font-family: Inconsolata;
|
||||
font-size: 16px;
|
||||
margin: 0 0 1em 0;
|
||||
padding: 8px;
|
||||
padding: 0 10px 12px 0;
|
||||
overflow: auto;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
/* code highlight */
|
||||
.token.cdata,
|
||||
.token.comment,
|
||||
.token.doctype,
|
||||
.token.prolog {
|
||||
color: #93a1a1; /* base1 */
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #586e75; /* base01 */
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #268bd2; /* blue */
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.url,
|
||||
.token.inserted {
|
||||
color: #2aa198; /* cyan */
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
color: #657b83; /* base00 */
|
||||
background: #eee8d5; /* base2 */
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #a11; /* green */
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #b58900; /* yellow */
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #cb4b16; /* orange */
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.markdown-section pre > code {
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
font-family: Inconsolata;
|
||||
line-height: 1.1rem;
|
||||
max-width: inherit;
|
||||
overflow: inherit;
|
||||
padding: 20px 0.8em 20px;
|
||||
position: relative;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
.markdown-section code::after,
|
||||
.markdown-section code::before {
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
code .token {
|
||||
-webkit-font-smoothing: initial;
|
||||
-moz-osx-font-smoothing: initial;
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
172
src/themes/buble.styl
Normal file
172
src/themes/buble.styl
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Inconsolata-Bold')
|
||||
|
||||
$color-primary = #0074d9
|
||||
$color-bg = #fff
|
||||
$color-text = #34495e
|
||||
$sidebar-width = 16rem
|
||||
|
||||
@import 'basic/_layout'
|
||||
@import 'basic/_coverpage'
|
||||
|
||||
/* sidebar */
|
||||
.sidebar
|
||||
color #364149
|
||||
background-color $color-bg
|
||||
|
||||
a
|
||||
color #666
|
||||
text-decoration none
|
||||
|
||||
li
|
||||
list-style none
|
||||
margin 0
|
||||
padding 0.2em 0 0.2em 1rem
|
||||
|
||||
ul li ul
|
||||
padding 0
|
||||
|
||||
li.active
|
||||
a
|
||||
color #333
|
||||
|
||||
background-color #eee
|
||||
|
||||
.markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong
|
||||
color #333
|
||||
font-weight 400
|
||||
|
||||
.markdown-section a
|
||||
color var(--theme-color, $color-primary)
|
||||
font-weight 400
|
||||
|
||||
.markdown-section p, .markdown-section ul, .markdown-section ol
|
||||
line-height 1.6rem
|
||||
margin 0 0 1em 0
|
||||
word-spacing 0.05rem
|
||||
|
||||
.markdown-section h1
|
||||
font-size 2rem
|
||||
font-weight 500
|
||||
margin 0 0 1rem
|
||||
|
||||
.markdown-section h2
|
||||
font-size 1.8rem
|
||||
font-weight 400
|
||||
margin 0 0 1rem 0
|
||||
padding 1rem 0 0 0
|
||||
|
||||
.markdown-section h3
|
||||
font-size 1.5rem
|
||||
margin 52px 0 1.2rem
|
||||
|
||||
.markdown-section h4
|
||||
font-size 1.25rem
|
||||
|
||||
.markdown-section h5
|
||||
font-size 1rem
|
||||
|
||||
.markdown-section h6
|
||||
color #777
|
||||
font-size 1rem
|
||||
|
||||
.markdown-section figure, .markdown-section p, .markdown-section ul, .markdown-section ol
|
||||
margin 1.2em 0
|
||||
|
||||
.markdown-section ul, .markdown-section ol
|
||||
padding-left 1.5rem
|
||||
|
||||
.markdown-section li
|
||||
line-height 1.5
|
||||
margin 0
|
||||
|
||||
.markdown-section blockquote
|
||||
border-left 4px solid var(--theme-color, $color-primary)
|
||||
color #858585
|
||||
margin 2em 0
|
||||
padding-left 20px
|
||||
|
||||
.markdown-section blockquote p
|
||||
font-weight 600
|
||||
margin-left 0
|
||||
|
||||
.markdown-section iframe
|
||||
margin 1em 0
|
||||
|
||||
.markdown-section em
|
||||
color #7f8c8d
|
||||
|
||||
.markdown-section code
|
||||
background-color #f9f9f9
|
||||
border-radius 3px
|
||||
font-family Inconsolata
|
||||
padding 0.2em 0.4rem
|
||||
white-space nowrap
|
||||
|
||||
.markdown-section pre
|
||||
background-color #f9f9f9
|
||||
border-left 2px solid #eee
|
||||
font-family Inconsolata
|
||||
font-size 16px
|
||||
margin 0 0 1em 0
|
||||
padding 8px
|
||||
padding 0 10px 12px 0
|
||||
overflow auto
|
||||
word-wrap normal
|
||||
|
||||
/* code highlight */
|
||||
.token.cdata, .token.comment, .token.doctype, .token.prolog
|
||||
color #93a1a1 /* base1 */
|
||||
|
||||
.token.punctuation
|
||||
color #586e75 /* base01 */
|
||||
|
||||
.namespace
|
||||
opacity 0.7
|
||||
|
||||
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted
|
||||
color #268bd2 /* blue */
|
||||
|
||||
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.url, .token.inserted
|
||||
color #2aa198 /* cyan */
|
||||
|
||||
.token.entity
|
||||
color #657b83 /* base00 */
|
||||
background #eee8d5 /* base2 */
|
||||
|
||||
.token.atrule, .token.attr-value, .token.keyword
|
||||
color #a11 /* green */
|
||||
|
||||
.token.function
|
||||
color #b58900 /* yellow */
|
||||
|
||||
.token.regex, .token.important, .token.variable
|
||||
color #cb4b16 /* orange */
|
||||
|
||||
.token.important, .token.bold
|
||||
font-weight bold
|
||||
|
||||
.token.italic
|
||||
font-style italic
|
||||
|
||||
.token.entity
|
||||
cursor help
|
||||
|
||||
.markdown-section pre > code
|
||||
background-color #f8f8f8
|
||||
border-radius 2px
|
||||
display block
|
||||
font-family Inconsolata
|
||||
line-height 1.1rem
|
||||
max-width inherit
|
||||
overflow inherit
|
||||
padding 20px 0.8em 20px
|
||||
position relative
|
||||
white-space inherit
|
||||
|
||||
.markdown-section code::after, .markdown-section code::before
|
||||
letter-spacing 0.05rem
|
||||
|
||||
code .token
|
||||
-webkit-font-smoothing initial
|
||||
-moz-osx-font-smoothing initial
|
||||
min-height 1.5rem
|
||||
|
|
@ -1,300 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
|
||||
|
||||
$color-primary: #ea6f5a;
|
||||
$color-bg: #3f3f3f;
|
||||
$color-text: #c8c8c8;
|
||||
$sidebar-width: 300px;
|
||||
|
||||
@import 'basic/layout';
|
||||
@import 'basic/coverpage';
|
||||
|
||||
body {
|
||||
background-color: $color-bg;
|
||||
}
|
||||
|
||||
/* sidebar */
|
||||
.sidebar {
|
||||
background-color: $color-bg;
|
||||
color: #c8c8c8;
|
||||
|
||||
li {
|
||||
margin: 6px 15px;
|
||||
}
|
||||
|
||||
ul li a {
|
||||
color: #c8c8c8;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
ul li ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li.active > a {
|
||||
color: var(--theme-color, $color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
/* markdown content found on pages */
|
||||
.markdown-section h1,
|
||||
.markdown-section h2,
|
||||
.markdown-section h3,
|
||||
.markdown-section h4,
|
||||
.markdown-section strong {
|
||||
color: #657b83;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown-section a {
|
||||
color: var(--theme-color, $color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown-section h1 {
|
||||
font-size: 2rem;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.markdown-section h2 {
|
||||
font-size: 1.75rem;
|
||||
margin: 45px 0 0.8rem;
|
||||
}
|
||||
|
||||
.markdown-section h3 {
|
||||
font-size: 1.5rem;
|
||||
margin: 40px 0 0.6rem;
|
||||
}
|
||||
|
||||
.markdown-section h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.markdown-section h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.markdown-section h6 {
|
||||
color: #777;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.markdown-section figure,
|
||||
.markdown-section p,
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
margin: 1.2em 0;
|
||||
}
|
||||
|
||||
.markdown-section p,
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
line-height: 1.6rem;
|
||||
word-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.markdown-section blockquote {
|
||||
border-left: 4px solid var(--theme-color, $color-primary);
|
||||
color: #858585;
|
||||
margin: 2em 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.markdown-section blockquote p {
|
||||
font-weight: 600;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.markdown-section iframe {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown-section em {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.markdown-section code {
|
||||
background-color: #282828;
|
||||
border-radius: 2px;
|
||||
color: #657b83;
|
||||
font-family: 'Roboto Mono', Monaco, courier, monospace;
|
||||
font-size: 0.8rem;
|
||||
margin: 0 2px;
|
||||
padding: 3px 5px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.markdown-section pre {
|
||||
-moz-osx-font-smoothing: initial;
|
||||
-webkit-font-smoothing: initial;
|
||||
background-color: #282828;
|
||||
font-family: 'Roboto Mono', Monaco, courier, monospace;
|
||||
line-height: 1.5rem;
|
||||
margin: 1.2em 0;
|
||||
overflow: auto;
|
||||
padding: 0 1.4rem;
|
||||
position: relative;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
/* code highlight */
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #8e908c;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #c76b29;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #525252;
|
||||
}
|
||||
|
||||
.token.property {
|
||||
color: #c08b30;
|
||||
}
|
||||
|
||||
.token.tag {
|
||||
color: #2973b7;
|
||||
}
|
||||
|
||||
.token.string {
|
||||
color: var(--theme-color, $color-primary);
|
||||
}
|
||||
|
||||
.token.selector {
|
||||
color: #6679cc;
|
||||
}
|
||||
|
||||
.token.attr-name {
|
||||
color: #2973b7;
|
||||
}
|
||||
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #22a2c9;
|
||||
}
|
||||
|
||||
.token.attr-value,
|
||||
.token.control,
|
||||
.token.directive,
|
||||
.token.unit {
|
||||
color: var(--theme-color, $color-primary);
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #e96900;
|
||||
}
|
||||
|
||||
.token.statement,
|
||||
.token.regex,
|
||||
.token.atrule {
|
||||
color: #22a2c9;
|
||||
}
|
||||
|
||||
.token.placeholder,
|
||||
.token.variable {
|
||||
color: #3d8fd1;
|
||||
}
|
||||
|
||||
.token.deleted {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
border-bottom: 1px dotted #202746;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.important {
|
||||
color: #c94922;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.markdown-section pre > code {
|
||||
-moz-osx-font-smoothing: initial;
|
||||
-webkit-font-smoothing: initial;
|
||||
background-color: #282828;
|
||||
border-radius: 2px;
|
||||
color: #657b83;
|
||||
display: block;
|
||||
font-family: 'Roboto Mono', Monaco, courier, monospace;
|
||||
font-size: 0.8rem;
|
||||
line-height: inherit;
|
||||
margin: 0 2px;
|
||||
max-width: inherit;
|
||||
overflow: inherit;
|
||||
padding: 2.2em 5px;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
.markdown-section code::after,
|
||||
.markdown-section code::before {
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
code .token {
|
||||
-moz-osx-font-smoothing: initial;
|
||||
-webkit-font-smoothing: initial;
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
|
||||
pre::after {
|
||||
color: #ccc;
|
||||
content: attr(data-lang);
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
height: 15px;
|
||||
line-height: 15px;
|
||||
padding: 5px 10px 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.markdown-section p.tip {
|
||||
background-color: #282828;
|
||||
color: #657b83;
|
||||
}
|
||||
|
||||
input[type='search'] {
|
||||
background: #4f4f4f;
|
||||
border-color: #4f4f4f;
|
||||
color: #c8c8c8;
|
||||
}
|
||||
225
src/themes/dark.styl
Normal file
225
src/themes/dark.styl
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600')
|
||||
|
||||
$color-primary = #ea6f5a
|
||||
$color-bg = #3f3f3f
|
||||
$color-text = #c8c8c8
|
||||
$sidebar-width = 300px
|
||||
|
||||
@import 'basic/_layout'
|
||||
@import 'basic/_coverpage'
|
||||
|
||||
body
|
||||
background-color $color-bg
|
||||
|
||||
/* sidebar */
|
||||
.sidebar
|
||||
background-color $color-bg
|
||||
color #c8c8c8
|
||||
|
||||
li
|
||||
margin 6px 15px
|
||||
|
||||
ul li a
|
||||
color #c8c8c8
|
||||
font-size 14px
|
||||
overflow hidden
|
||||
text-decoration none
|
||||
text-overflow ellipsis
|
||||
white-space nowrap
|
||||
|
||||
&:hover
|
||||
text-decoration underline
|
||||
|
||||
ul li ul
|
||||
padding 0
|
||||
|
||||
ul li.active > a
|
||||
color var(--theme-color, $color-primary)
|
||||
font-weight 600
|
||||
|
||||
/* markdown content found on pages */
|
||||
.markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong
|
||||
color #657b83
|
||||
font-weight 600
|
||||
|
||||
.markdown-section a
|
||||
color var(--theme-color, $color-primary)
|
||||
font-weight 600
|
||||
|
||||
.markdown-section h1
|
||||
font-size 2rem
|
||||
margin 0 0 1rem
|
||||
|
||||
.markdown-section h2
|
||||
font-size 1.75rem
|
||||
margin 45px 0 0.8rem
|
||||
|
||||
.markdown-section h3
|
||||
font-size 1.5rem
|
||||
margin 40px 0 0.6rem
|
||||
|
||||
.markdown-section h4
|
||||
font-size 1.25rem
|
||||
|
||||
.markdown-section h5
|
||||
font-size 1rem
|
||||
|
||||
.markdown-section h6
|
||||
color #777
|
||||
font-size 1rem
|
||||
|
||||
.markdown-section figure, .markdown-section p, .markdown-section ul, .markdown-section ol
|
||||
margin 1.2em 0
|
||||
|
||||
.markdown-section p, .markdown-section ul, .markdown-section ol
|
||||
line-height 1.6rem
|
||||
word-spacing 0.05rem
|
||||
|
||||
.markdown-section ul, .markdown-section ol
|
||||
padding-left 1.5rem
|
||||
|
||||
.markdown-section blockquote
|
||||
border-left 4px solid var(--theme-color, $color-primary)
|
||||
color #858585
|
||||
margin 2em 0
|
||||
padding-left 20px
|
||||
|
||||
.markdown-section blockquote p
|
||||
font-weight 600
|
||||
margin-left 0
|
||||
|
||||
.markdown-section iframe
|
||||
margin 1em 0
|
||||
|
||||
.markdown-section em
|
||||
color #7f8c8d
|
||||
|
||||
.markdown-section code
|
||||
background-color #282828
|
||||
border-radius 2px
|
||||
color #657b83
|
||||
font-family 'Roboto Mono', Monaco, courier, monospace
|
||||
font-size 0.8rem
|
||||
margin 0 2px
|
||||
padding 3px 5px
|
||||
white-space pre-wrap
|
||||
|
||||
.markdown-section pre
|
||||
-moz-osx-font-smoothing initial
|
||||
-webkit-font-smoothing initial
|
||||
background-color #282828
|
||||
font-family 'Roboto Mono', Monaco, courier, monospace
|
||||
line-height 1.5rem
|
||||
margin 1.2em 0
|
||||
overflow auto
|
||||
padding 0 1.4rem
|
||||
position relative
|
||||
word-wrap normal
|
||||
|
||||
/* code highlight */
|
||||
.token.comment, .token.prolog, .token.doctype, .token.cdata
|
||||
color #8e908c
|
||||
|
||||
.token.namespace
|
||||
opacity 0.7
|
||||
|
||||
.token.boolean, .token.number
|
||||
color #c76b29
|
||||
|
||||
.token.punctuation
|
||||
color #525252
|
||||
|
||||
.token.property
|
||||
color #c08b30
|
||||
|
||||
.token.tag
|
||||
color #2973b7
|
||||
|
||||
.token.string
|
||||
color var(--theme-color, $color-primary)
|
||||
|
||||
.token.selector
|
||||
color #6679cc
|
||||
|
||||
.token.attr-name
|
||||
color #2973b7
|
||||
|
||||
.token.entity, .token.url, .language-css .token.string, .style .token.string
|
||||
color #22a2c9
|
||||
|
||||
.token.attr-value, .token.control, .token.directive, .token.unit
|
||||
color var(--theme-color, $color-primary)
|
||||
|
||||
.token.keyword
|
||||
color #e96900
|
||||
|
||||
.token.statement, .token.regex, .token.atrule
|
||||
color #22a2c9
|
||||
|
||||
.token.placeholder, .token.variable
|
||||
color #3d8fd1
|
||||
|
||||
.token.deleted
|
||||
text-decoration line-through
|
||||
|
||||
.token.inserted
|
||||
border-bottom 1px dotted #202746
|
||||
text-decoration none
|
||||
|
||||
.token.italic
|
||||
font-style italic
|
||||
|
||||
.token.important, .token.bold
|
||||
font-weight bold
|
||||
|
||||
.token.important
|
||||
color #c94922
|
||||
|
||||
.token.entity
|
||||
cursor help
|
||||
|
||||
.markdown-section pre > code
|
||||
-moz-osx-font-smoothing initial
|
||||
-webkit-font-smoothing initial
|
||||
background-color #282828
|
||||
border-radius 2px
|
||||
color #657b83
|
||||
display block
|
||||
font-family 'Roboto Mono', Monaco, courier, monospace
|
||||
font-size 0.8rem
|
||||
line-height inherit
|
||||
margin 0 2px
|
||||
max-width inherit
|
||||
overflow inherit
|
||||
padding 2.2em 5px
|
||||
white-space inherit
|
||||
|
||||
.markdown-section code::after, .markdown-section code::before
|
||||
letter-spacing 0.05rem
|
||||
|
||||
code .token
|
||||
-moz-osx-font-smoothing initial
|
||||
-webkit-font-smoothing initial
|
||||
min-height 1.5rem
|
||||
|
||||
pre::after
|
||||
color #ccc
|
||||
content attr(data-lang)
|
||||
font-size 0.6rem
|
||||
font-weight 600
|
||||
height 15px
|
||||
line-height 15px
|
||||
padding 5px 10px 0
|
||||
position absolute
|
||||
right 0
|
||||
text-align right
|
||||
top 0
|
||||
|
||||
.markdown-section p.tip
|
||||
background-color #282828
|
||||
color #657b83
|
||||
|
||||
input[type='search']
|
||||
background #4f4f4f
|
||||
border-color #4f4f4f
|
||||
color #c8c8c8
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
$color-primary: #000;
|
||||
$color-bg: #fff;
|
||||
$color-text: #000;
|
||||
$sidebar-width: 300px;
|
||||
@import 'basic/layout';
|
||||
@import 'basic/coverpage';
|
||||
7
src/themes/pure.styl
Normal file
7
src/themes/pure.styl
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
$color-primary = #000
|
||||
$color-bg = #fff
|
||||
$color-text = #000
|
||||
$sidebar-width = 300px
|
||||
|
||||
@import 'basic/_layout'
|
||||
@import 'basic/_coverpage'
|
||||
|
|
@ -1,299 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600');
|
||||
|
||||
$color-primary: #42b983;
|
||||
$color-bg: #fff;
|
||||
$color-text: #34495e;
|
||||
$sidebar-width: 300px;
|
||||
|
||||
@import 'basic/layout';
|
||||
@import 'basic/coverpage';
|
||||
|
||||
body {
|
||||
background-color: $color-bg;
|
||||
}
|
||||
|
||||
/* sidebar */
|
||||
.sidebar {
|
||||
background-color: $color-bg;
|
||||
color: #364149;
|
||||
|
||||
li {
|
||||
margin: 6px 0 6px 15px;
|
||||
}
|
||||
|
||||
ul li a {
|
||||
color: #505d6b;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
ul li ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li.active > a {
|
||||
border-right: 2px solid;
|
||||
color: var(--theme-color, $color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.app-sub-sidebar {
|
||||
li {
|
||||
&::before {
|
||||
content: '-';
|
||||
padding-right: 4px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* markdown content found on pages */
|
||||
.markdown-section h1,
|
||||
.markdown-section h2,
|
||||
.markdown-section h3,
|
||||
.markdown-section h4,
|
||||
.markdown-section strong {
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown-section a {
|
||||
color: var(--theme-color, $color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown-section h1 {
|
||||
font-size: 2rem;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.markdown-section h2 {
|
||||
font-size: 1.75rem;
|
||||
margin: 45px 0 0.8rem;
|
||||
}
|
||||
|
||||
.markdown-section h3 {
|
||||
font-size: 1.5rem;
|
||||
margin: 40px 0 0.6rem;
|
||||
}
|
||||
|
||||
.markdown-section h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.markdown-section h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.markdown-section h6 {
|
||||
color: #777;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.markdown-section figure,
|
||||
.markdown-section p {
|
||||
margin: 1.2em 0;
|
||||
}
|
||||
|
||||
.markdown-section p,
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
line-height: 1.6rem;
|
||||
word-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
.markdown-section ul,
|
||||
.markdown-section ol {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.markdown-section blockquote {
|
||||
border-left: 4px solid var(--theme-color, $color-primary);
|
||||
color: #858585;
|
||||
margin: 2em 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.markdown-section blockquote p {
|
||||
font-weight: 600;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.markdown-section iframe {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown-section em {
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
.markdown-section code {
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 2px;
|
||||
color: #e96900;
|
||||
font-family: 'Roboto Mono', Monaco, courier, monospace;
|
||||
font-size: 0.8rem;
|
||||
margin: 0 2px;
|
||||
padding: 3px 5px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.markdown-section pre {
|
||||
-moz-osx-font-smoothing: initial;
|
||||
-webkit-font-smoothing: initial;
|
||||
background-color: #f8f8f8;
|
||||
font-family: 'Roboto Mono', Monaco, courier, monospace;
|
||||
line-height: 1.5rem;
|
||||
margin: 1.2em 0;
|
||||
overflow: auto;
|
||||
padding: 0 1.4rem;
|
||||
position: relative;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
/* code highlight */
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #8e908c;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #c76b29;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #525252;
|
||||
}
|
||||
|
||||
.token.property {
|
||||
color: #c08b30;
|
||||
}
|
||||
|
||||
.token.tag {
|
||||
color: #2973b7;
|
||||
}
|
||||
|
||||
.token.string {
|
||||
color: var(--theme-color, $color-primary);
|
||||
}
|
||||
|
||||
.token.selector {
|
||||
color: #6679cc;
|
||||
}
|
||||
|
||||
.token.attr-name {
|
||||
color: #2973b7;
|
||||
}
|
||||
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #22a2c9;
|
||||
}
|
||||
|
||||
.token.attr-value,
|
||||
.token.control,
|
||||
.token.directive,
|
||||
.token.unit {
|
||||
color: var(--theme-color, $color-primary);
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #e96900;
|
||||
}
|
||||
|
||||
.token.statement,
|
||||
.token.regex,
|
||||
.token.atrule {
|
||||
color: #22a2c9;
|
||||
}
|
||||
|
||||
.token.placeholder,
|
||||
.token.variable {
|
||||
color: #3d8fd1;
|
||||
}
|
||||
|
||||
.token.deleted {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
border-bottom: 1px dotted #202746;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.important {
|
||||
color: #c94922;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.markdown-section pre > code {
|
||||
-moz-osx-font-smoothing: initial;
|
||||
-webkit-font-smoothing: initial;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 2px;
|
||||
color: #525252;
|
||||
display: block;
|
||||
font-family: 'Roboto Mono', Monaco, courier, monospace;
|
||||
font-size: 0.8rem;
|
||||
line-height: inherit;
|
||||
margin: 0 2px;
|
||||
max-width: inherit;
|
||||
overflow: inherit;
|
||||
padding: 2.2em 5px;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
.markdown-section code::after,
|
||||
.markdown-section code::before {
|
||||
letter-spacing: 0.05rem;
|
||||
}
|
||||
|
||||
code .token {
|
||||
-moz-osx-font-smoothing: initial;
|
||||
-webkit-font-smoothing: initial;
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
|
||||
pre::after {
|
||||
color: #ccc;
|
||||
content: attr(data-lang);
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
height: 15px;
|
||||
line-height: 15px;
|
||||
padding: 5px 10px 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
top: 0;
|
||||
}
|
||||
225
src/themes/vue.styl
Normal file
225
src/themes/vue.styl
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600')
|
||||
|
||||
$color-primary = #42b983
|
||||
$color-bg = #fff
|
||||
$color-text = #34495e
|
||||
$sidebar-width = 300px
|
||||
|
||||
@import 'basic/_layout'
|
||||
@import 'basic/_coverpage'
|
||||
|
||||
body
|
||||
background-color $color-bg
|
||||
|
||||
/* sidebar */
|
||||
.sidebar
|
||||
background-color $color-bg
|
||||
color #364149
|
||||
|
||||
li
|
||||
margin 6px 0 6px 15px
|
||||
|
||||
ul li a
|
||||
color #505d6b
|
||||
font-size 14px
|
||||
font-weight normal
|
||||
overflow hidden
|
||||
text-decoration none
|
||||
text-overflow ellipsis
|
||||
white-space nowrap
|
||||
|
||||
&:hover
|
||||
text-decoration underline
|
||||
|
||||
ul li ul
|
||||
padding 0
|
||||
|
||||
ul li.active > a
|
||||
border-right 2px solid
|
||||
color var(--theme-color, $color-primary)
|
||||
font-weight 600
|
||||
|
||||
.app-sub-sidebar
|
||||
li
|
||||
&::before
|
||||
content '-'
|
||||
padding-right 4px
|
||||
float left
|
||||
|
||||
/* markdown content found on pages */
|
||||
.markdown-section h1, .markdown-section h2, .markdown-section h3, .markdown-section h4, .markdown-section strong
|
||||
color #2c3e50
|
||||
font-weight 600
|
||||
|
||||
.markdown-section a
|
||||
color var(--theme-color, $color-primary)
|
||||
font-weight 600
|
||||
|
||||
.markdown-section h1
|
||||
font-size 2rem
|
||||
margin 0 0 1rem
|
||||
|
||||
.markdown-section h2
|
||||
font-size 1.75rem
|
||||
margin 45px 0 0.8rem
|
||||
|
||||
.markdown-section h3
|
||||
font-size 1.5rem
|
||||
margin 40px 0 0.6rem
|
||||
|
||||
.markdown-section h4
|
||||
font-size 1.25rem
|
||||
|
||||
.markdown-section h5
|
||||
font-size 1rem
|
||||
|
||||
.markdown-section h6
|
||||
color #777
|
||||
font-size 1rem
|
||||
|
||||
.markdown-section figure, .markdown-section p
|
||||
margin 1.2em 0
|
||||
|
||||
.markdown-section p, .markdown-section ul, .markdown-section ol
|
||||
line-height 1.6rem
|
||||
word-spacing 0.05rem
|
||||
|
||||
.markdown-section ul, .markdown-section ol
|
||||
padding-left 1.5rem
|
||||
|
||||
.markdown-section blockquote
|
||||
border-left 4px solid var(--theme-color, $color-primary)
|
||||
color #858585
|
||||
margin 2em 0
|
||||
padding-left 20px
|
||||
|
||||
.markdown-section blockquote p
|
||||
font-weight 600
|
||||
margin-left 0
|
||||
|
||||
.markdown-section iframe
|
||||
margin 1em 0
|
||||
|
||||
.markdown-section em
|
||||
color #7f8c8d
|
||||
|
||||
.markdown-section code
|
||||
background-color #f8f8f8
|
||||
border-radius 2px
|
||||
color #e96900
|
||||
font-family 'Roboto Mono', Monaco, courier, monospace
|
||||
font-size 0.8rem
|
||||
margin 0 2px
|
||||
padding 3px 5px
|
||||
white-space pre-wrap
|
||||
|
||||
.markdown-section pre
|
||||
-moz-osx-font-smoothing initial
|
||||
-webkit-font-smoothing initial
|
||||
background-color #f8f8f8
|
||||
font-family 'Roboto Mono', Monaco, courier, monospace
|
||||
line-height 1.5rem
|
||||
margin 1.2em 0
|
||||
overflow auto
|
||||
padding 0 1.4rem
|
||||
position relative
|
||||
word-wrap normal
|
||||
|
||||
/* code highlight */
|
||||
.token.comment, .token.prolog, .token.doctype, .token.cdata
|
||||
color #8e908c
|
||||
|
||||
.token.namespace
|
||||
opacity 0.7
|
||||
|
||||
.token.boolean, .token.number
|
||||
color #c76b29
|
||||
|
||||
.token.punctuation
|
||||
color #525252
|
||||
|
||||
.token.property
|
||||
color #c08b30
|
||||
|
||||
.token.tag
|
||||
color #2973b7
|
||||
|
||||
.token.string
|
||||
color var(--theme-color, $color-primary)
|
||||
|
||||
.token.selector
|
||||
color #6679cc
|
||||
|
||||
.token.attr-name
|
||||
color #2973b7
|
||||
|
||||
.token.entity, .token.url, .language-css .token.string, .style .token.string
|
||||
color #22a2c9
|
||||
|
||||
.token.attr-value, .token.control, .token.directive, .token.unit
|
||||
color var(--theme-color, $color-primary)
|
||||
|
||||
.token.keyword
|
||||
color #e96900
|
||||
|
||||
.token.statement, .token.regex, .token.atrule
|
||||
color #22a2c9
|
||||
|
||||
.token.placeholder, .token.variable
|
||||
color #3d8fd1
|
||||
|
||||
.token.deleted
|
||||
text-decoration line-through
|
||||
|
||||
.token.inserted
|
||||
border-bottom 1px dotted #202746
|
||||
text-decoration none
|
||||
|
||||
.token.italic
|
||||
font-style italic
|
||||
|
||||
.token.important, .token.bold
|
||||
font-weight bold
|
||||
|
||||
.token.important
|
||||
color #c94922
|
||||
|
||||
.token.entity
|
||||
cursor help
|
||||
|
||||
.markdown-section pre > code
|
||||
-moz-osx-font-smoothing initial
|
||||
-webkit-font-smoothing initial
|
||||
background-color #f8f8f8
|
||||
border-radius 2px
|
||||
color #525252
|
||||
display block
|
||||
font-family 'Roboto Mono', Monaco, courier, monospace
|
||||
font-size 0.8rem
|
||||
line-height inherit
|
||||
margin 0 2px
|
||||
max-width inherit
|
||||
overflow inherit
|
||||
padding 2.2em 5px
|
||||
white-space inherit
|
||||
|
||||
.markdown-section code::after, .markdown-section code::before
|
||||
letter-spacing 0.05rem
|
||||
|
||||
code .token
|
||||
-moz-osx-font-smoothing initial
|
||||
-webkit-font-smoothing initial
|
||||
min-height 1.5rem
|
||||
|
||||
pre::after
|
||||
color #ccc
|
||||
content attr(data-lang)
|
||||
font-size 0.6rem
|
||||
font-weight 600
|
||||
height 15px
|
||||
line-height 15px
|
||||
padding 5px 10px 0
|
||||
position absolute
|
||||
right 0
|
||||
text-align right
|
||||
top 0
|
||||
Loading…
Add table
Add a link
Reference in a new issue