diff options
author | olOwOlo <26087907+olOwOlo@users.noreply.github.com> | 2018-11-05 15:48:44 +0800 |
---|---|---|
committer | olOwOlo <26087907+olOwOlo@users.noreply.github.com> | 2018-11-05 15:48:44 +0800 |
commit | 2517f748de42cb4babcc966a98cda7d6c36377ef (patch) | |
tree | 911ca24493c03495be9545b74594a108aeaa3b6e /src/css | |
parent | b55831b3035a83543f421964212992f033a05e3c (diff) |
feat(*): init admonition & refactor iconfont
Diffstat (limited to 'src/css')
-rw-r--r-- | src/css/_iconfont.scss | 114 | ||||
-rw-r--r-- | src/css/_partial/_post/_admonition.scss | 212 | ||||
-rw-r--r-- | src/css/_partial/_post/_content.scss | 16 | ||||
-rw-r--r-- | src/css/_variables.scss | 1 |
4 files changed, 325 insertions, 18 deletions
diff --git a/src/css/_iconfont.scss b/src/css/_iconfont.scss index 03efae6..786be46 100644 --- a/src/css/_iconfont.scss +++ b/src/css/_iconfont.scss @@ -3,59 +3,80 @@ // ============================== @font-face { - font-family: 'iconfont'; /* project id 96542 */ + font-family: 'iconfont'; src: url('../fonts/iconfont/iconfont.eot'); src: url('../fonts/iconfont/iconfont.eot#iefix') format('embedded-opentype'), // not '?#iefix', because webpack will add '?hash=[hash]' url('../fonts/iconfont/iconfont.woff') format('woff'), url('../fonts/iconfont/iconfont.ttf') format('truetype'), url('../fonts/iconfont/iconfont.svg#iconfont') format('svg'); - - // Uncomment these code and comment upper code if you want to use alicdn - // src: url('//at.alicdn.com/t/font_96542_ixz9jngnf1sb57b9.eot'); - // src: url('//at.alicdn.com/t/font_96542_ixz9jngnf1sb57b9.eot?#iefix') format('embedded-opentype'), - // url('//at.alicdn.com/t/font_96542_ixz9jngnf1sb57b9.woff') format('woff'), - // url('//at.alicdn.com/t/font_96542_ixz9jngnf1sb57b9.ttf') format('truetype'), - // url('//at.alicdn.com/t/font_96542_ixz9jngnf1sb57b9.svg#iconfont') format('svg'); } -.iconfont { +%base-iconfont { font-family: "iconfont" !important; + speak: none; font-style: normal; - -webkit-font-smoothing: antialiased; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-text-stroke-width: 0.2px; - -moz-osx-font-smoothing: grayscale; cursor: pointer; + + /* Enable Ligatures ================ */ + letter-spacing: 0; + font-feature-settings: "liga"; + font-variant-ligatures: discretionary-ligatures; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.iconfont { + @extend %base-iconfont; } +/* Social Icon */ +.icon-bilibili:before { + content: "\e900"; + font-size: .9em; + position: relative; + top: -4px; +} .icon-instagram:before { font-size: .95em; content: "\e611"; position: relative; - top: -1px; + top: 1px; } .icon-douban:before { content: "\e610"; + position: relative; + top: 2px; } .icon-tumblr:before { content: "\e69f"; font-size: .85em; position: relative; - top: -4px; + top: -2px; } .icon-linkedin:before { content: "\e60d"; position: relative; - top: -4px; + top: -2px; } .icon-twitter:before { content: "\e600"; } .icon-weibo:before { content: "\e602"; + position: relative; + top: 2px; } .icon-stack-overflow:before { - content: "\e603"; + content: "\e902"; font-size: .85em; position: relative; top: -4px; @@ -71,25 +92,33 @@ position: relative; top: -2px; } +.icon-gitlab:before { + content: "\e901"; + font-size: .9em; + position: relative; + top: -4px; +} .icon-github:before { content: "\e606"; position: relative; - top: -3px; + top: -1px; } .icon-rss:before { content: "\e604"; } .icon-google:before { content: "\e609"; + position: relative; + top: 2px; } .icon-zhihu:before { content: "\e607"; font-size: .9em; - position: relative; - top: -2px; } .icon-pocket:before { content: "\e856"; + position: relative; + top: 2px; } /* Generic Icon */ @@ -108,3 +137,52 @@ .icon-close:before { content: "\e60f"; } + +/* Admonition Icon */ +/* +.icon-chevron-down:before { + content: "\e908"; +} +.icon-format-quote:before { + content: "\e904"; +} +.icon-pencil:before { + content: "\e903"; +} +.icon-list-numbered:before { + content: "\e9b9"; +} +.icon-list:before { + content: "\e9bb"; +} +.icon-warning:before { + content: "\ea07"; +} +.icon-question:before { + content: "\ea09"; +} +.icon-info:before { + content: "\ea0c"; +} +.icon-cross:before { + content: "\ea0f"; +} +.icon-checkmark:before { + content: "\ea10"; +} +.icon-fire:before { + content: "\e905"; +} +.icon-danger:before { + content: "\e905"; +} +.icon-flame:before { + content: "\e905"; +} +.icon-hot:before { + content: "\e905"; +} +.icon-bulb:before { + content: "\e906"; +} +*/ diff --git a/src/css/_partial/_post/_admonition.scss b/src/css/_partial/_post/_admonition.scss new file mode 100644 index 0000000..99fdc5e --- /dev/null +++ b/src/css/_partial/_post/_admonition.scss @@ -0,0 +1,212 @@ +@import "../../iconfont"; + +.admonition { + box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), + 0 1px 5px 0 rgba(0,0,0,.12), + 0 3px 1px -2px rgba(0,0,0,.2); + position: relative; + margin: .9765em 0; + padding: 0 .75rem; + border-left: .25rem solid #448aff; + border-radius: .125rem; + overflow: auto; + + .admonition-title { + margin: 0 -0.75rem; + padding: .5rem .75rem .5rem 2.5rem; + border-bottom: .1rem solid rgba(68,138,255,.1); + background-color: rgba(68,138,255,.1); + font-weight: 700; + } + + .admonition-title:before { + @extend %base-iconfont; + cursor: auto; + position: absolute; + left: .75rem; + top: .75rem; + } + + &.note { + border-left-color: #448aff; + + .admonition-title:before { + color: #448aff; + content: "\e903"; + } + } + + &.abstract { + border-left-color: #00b0ff; + + .admonition-title { + background-color: rgba(0,176,255,.1); + } + + .admonition-title:before { + color: #00b0ff; + content: "\e9bb"; + } + } + + &.info { + border-left-color: #00b8d4; + + .admonition-title { + background-color: rgba(0,184,212,.1); + } + + .admonition-title:before { + color: #00b8d4; + content: "\ea0c"; + } + } + + &.tip { + border-left-color: #00bfa5; + + .admonition-title { + background-color: rgba(0,191,165,.1); + } + + .admonition-title:before { + color: #00bfa5; + content: "\e906"; + } + } + + &.success { + border-left-color: #00c853; + + .admonition-title { + background-color: rgba(0,200,83,.1); + } + + .admonition-title:before { + color: #00c853; + content: "\ea10"; + } + } + + &.question { + border-left-color: #64dd17; + + .admonition-title { + background-color: rgba(100,221,23,.1); + } + + .admonition-title:before { + color: #64dd17; + content: "\ea09"; + } + } + + &.warning { + border-left-color: #ff9100; + + .admonition-title { + background-color: rgba(255,145,0,.1); + } + + .admonition-title:before { + color: #ff9100; + content: "\ea07"; + } + } + + &.failure { + border-left-color: #ff5252; + + .admonition-title { + background-color: rgba(255,82,82,.1); + } + + .admonition-title:before { + color: #ff5252; + content: "\ea0f"; + } + } + + &.danger { + border-left-color: #ff1744; + + .admonition-title { + background-color: rgba(255,23,68,.1); + } + + .admonition-title:before { + color: #ff1744; + content: "\e905"; + } + } + + &.bug { + border-left-color: #f50057; + + .admonition-title { + background-color: rgba(245,0,87,.1); + } + + .admonition-title:before { + color: #f50057; + content: "\e907"; + } + } + + &.example { + border-left-color: #651fff; + + .admonition-title { + background-color: rgba(101,31,255,.1); + } + + .admonition-title:before { + color: #651fff; + content: "\e9b9"; + } + } + + &.quote { + border-left-color: #9e9e9e; + + .admonition-title { + background-color: hsla(0,0%,62%,.1); + } + + .admonition-title:before { + color: #9e9e9e; + content: "\e904"; + } + } + + &:last-child { + margin-bottom: .75rem; + } +} + +details.admonition { + summary { + display: block; + outline: none; + cursor: pointer; + + &::-webkit-details-marker { + display: none; + } + + &:after { + @extend %base-iconfont; + position: absolute; + top: .75rem; + right: .75rem; + color: rgba(0,0,0,.26); + content: "\e908"; + } + } +} + +details.admonition[open] { + > summary:after { + transform: rotate(180deg); + } +} diff --git a/src/css/_partial/_post/_content.scss b/src/css/_partial/_post/_content.scss index 0ff9eba..0e50aed 100644 --- a/src/css/_partial/_post/_content.scss +++ b/src/css/_partial/_post/_content.scss @@ -65,6 +65,7 @@ } @import 'code'; + @import 'admonition'; .post-summary { margin-bottom: 1em; @@ -126,6 +127,21 @@ border-bottom: none; } + .footnote-ref { + > a { + font-weight: bold; + margin-left: 3px; + + &:before { + content: "["; + } + + &:after { + content: "]"; + } + } + } + .task-list { list-style: none; padding-left: 1.5rem; diff --git a/src/css/_variables.scss b/src/css/_variables.scss index ef3fea7..9b7c166 100644 --- a/src/css/_variables.scss +++ b/src/css/_variables.scss @@ -239,6 +239,7 @@ $code-type-list: ( language-groovy: "Groovy", language-haskell: "Haskell", language-kotlin: "Kotlin", + language-clojure: "Clojure", language-less: "Less", language-lisp: "Lisp", language-lua: "Lua", |