diff --git a/_config.yml b/_config.yml index ac0c388..5a3d10f 100755 --- a/_config.yml +++ b/_config.yml @@ -1,14 +1,11 @@ ############################### Basic Information ############################### info: name: Volantis - version: '2.0-beta6' + version: '2.0' docs: https://volantis.js.org/ cdn: # To use CDN, write 'use_cdn: true' in 'blog/_config.yml'. - css: - # style: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@1.7.4/css/style.css - js: - # app: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@1.7.4/js/app.js - # search: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@1.7.4/js/search.js + css: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.0.0/css/style.css + js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.0.0/js/app.js ############################### Style ############################### @@ -30,11 +27,11 @@ style: h4: left p: justify gap: - h2: 2.5em # H2标题上方的间距 - h3: 1.5em # H3标题上方的间距 - h4: 1em # H4标题上方的间距 - line: 1rem # 段落间距 - inline: .5rem # 区块内的段落间距 + h2: 2.5em # Spacing above H2 + h3: 1.5em # Spacing above H3 + h4: 1em # Spacing above H4 + line: 1rem # Paragraph spacing + inline: .5rem # Paragraph spacing within a block fontfamily: bodyfont: name: 'Varela Round' @@ -47,17 +44,17 @@ style: # weight: normal # style: normal # color: - # site: '#21232F' # 网页背景颜色 - # card: '#444' # 卡片背景 - # text: '#fff' # 卡片上的文字 - # theme: '#ff9800' # 主题色 - # link: '#1BCDFC' # 链接 - # hover: '#ff5722' # 链接高亮颜色 - # inner: '#333' # 主题色按钮内部文字颜色 - # block: '#555' # 区块颜色 - # inlinecode: yellow # 行内代码颜色 - # codeblock: '#555' # 代码块背景 - # p: '#ccc' + # site: '#21232F' # Website background color + # card: '#444' # Card background color + # text: '#fff' # The color of the text on the card. + # theme: '#ff9800' # Main color + # link: '#1BCDFC' # Link color + # hover: '#ff5722' # Link highlight color + # inner: '#333' # Text color inside the button + # block: '#555' # Block color + # inlinecode: yellow # Inline code color + # codeblock: '#555' # Codeblock color + # p: '#ccc' # Paragraph color @@ -73,7 +70,6 @@ cover: title: Volantis subtitle: 'A Wonderful Theme for Hexo' search: # search bar placeholder - # 主页封面菜单 features: - name: 文档 icon: fas fa-book @@ -94,20 +90,15 @@ cover: url: https://volantis.js.org/contributors/ -# 导航栏 +# Navigation Bar navbar: - # 左侧logo区 - logo: - # 显示图片，使用图片时将不会显示icon和title + logo: # choose [img] or [icon + title] img: - # 显示图标 icon: - # 显示标题 title: - # logo后面的导航菜单 menu: # The following can be written in `blog/source/_data/menu.yml` - # 在桌面端显示的导航菜单 + # This menu will be displayed on the laptop or desktop. on_desktop: - name: 博客 icon: fas fa-rss @@ -127,7 +118,7 @@ navbar: - name: 关于 icon: fas fa-info-circle url: about/ - # 手机端导航菜单（从右上角的按钮点击展开） + # This menu will be displayed on the mobile. on_mobile: - name: 博客 icon: fas fa-rss @@ -147,15 +138,12 @@ navbar: - name: 关于 icon: fas fa-info-circle url: about/ - search: 搜索 # 搜索框文字 + search: 搜索 # Search bar placeholder -# 布局 layout: # The following can be written in `blog/source/_data/layout.yml` - # 文章列表多列布局 - multiple_columns: false # 部分浏览器不兼容，谨慎使用 # 文章列表（主页、自定义的列表）布局 on_list: # 列表中每一篇文章的meta信息 @@ -261,28 +249,28 @@ meta: widget: # The following can be written in `blog/source/_data/widget.yml` # --------------------------------------- - # 博主信息小部件配置 + # blogger info widget blogger: class: blogger display: [desktop] # [desktop, mobile] avatar: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png - # title: 标题 - # subtitle: 副标题 - jinrishici: true # 今日诗词。可以设置字符串，加载失败时会显示占位字符串。 + title: + subtitle: + jinrishici: true # Poetry Today. You can set a string, and it will be displayed when loading fails. social: true # --------------------------------------- - # 目录小部件配置(仅在文章中有效) + # toc widget (valid only in articles) toc: class: toc display: [desktop, mobile] # [desktop, mobile] header: icon: fas fa-list title: 本文目录 - list_number: false # 是否显示章节 - min_depth: 2 # H1建议用作网页或者文章的标题，章节从H2开始。 - max_depth: 5 # 由于宽度有限，主题没有针对所有层级进行布局优化，建议文章最多分为：H2/H3/H4/H5四个层级 + list_number: false + min_depth: 2 + max_depth: 5 # --------------------------------------- - # 文章分类小部件配置 + # category widget category: class: category display: [desktop] # [desktop, mobile] @@ -291,7 +279,7 @@ widget: title: 文章分类 url: /blog/categories/ # --------------------------------------- - # 标签云小部件配置 + # tagcloud widget tagcloud: class: tagcloud display: [desktop] # [desktop, mobile] @@ -305,52 +293,42 @@ widget: start_color: '#999' end_color: '#555' # --------------------------------------- - # 相关文章小部件配置 + # related posts widget related_posts: - class: related_posts # 需要安装插件 npm i -S hexo-related-popular-posts + class: related_posts # npm i -S hexo-related-popular-posts display: [desktop, mobile] # [desktop, mobile] header: icon: fas fa-bookmark title: 相关文章 max_count: 5 # --------------------------------------- - # 版权说明小部件（仅用于文章中） + # copyright widget (valid only in articles) copyright: class: copyright display: [desktop, mobile] # [desktop, mobile] - blockquote: true # 是否把内容放到blockquote中 - permalink: '本文永久链接是：' # 显示文章永久链接 + blockquote: true + permalink: '本文永久链接是：' content: - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议' - permalink # --------------------------------------- - # 二维码小部件（可用于文章中的打赏，只显示图片，无其他功能） - qrcode: - class: qrcode - display: [desktop] # [desktop, mobile] - header: - icon: fas fa-mobile - title: 手机观看 - height: #64px # 不设置则自动高度 - fancybox: #true # 是否允许点击放大 - images: - - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/wiki_volantis.png - # 打赏 + # qrcode widget donate: class: qrcode display: [desktop, mobile] # [desktop, mobile] - height: 64px # 不设置则自动高度 - fancybox: true # 是否允许点击放大 + height: 64px # Automatic height if not set + fancybox: true images: - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/wiki_volantis.png - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/wiki_volantis.png + # You can add your own widget here or 'blog/source/_data/widget.yml' + # class: text, list, grid, qrcode, page, ... see more at https://volantis.js.org/ + -# 网站页脚 footer: # layout of footer: [aplayer, social, license, info, copyright] layout: [aplayer, social, license, info, copyright] - # 社交信息配置 social: - icon: fas fa-rss url: atom.xml @@ -361,15 +339,15 @@ footer: - icon: fas fa-headphones-alt url: https://music.163.com/#/user/home?id=63035382 copyright: '[Copyright © 2017-2020 Mr. X](https://xaoxuu.com)' - # 可自己增加任意属性，支持markdown，例如：br: '
' + # You can add your own property here. (Support markdown, for example: br: '
') br: '
' ############################### SEO ############################### seo: - # 当文章front-matter中没有keywords时，使用tags作为keywords + # When there are no keywords in the article's front-matter, use tags as keywords. use_tags_as_keywords: true - # 当文章front-matter中没有description时，使用摘要作为description + # When there is no description in the article's front-matter, use excerpt as the description. use_excerpt_as_description: true robots: home_first_page: index,follow @@ -382,16 +360,14 @@ seo: ############################### Plugins ############################### plugins: - # Required + # Required plugins: jquery: https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js - ################################################## 提升速度类的服务 - + ######## Plugins to improve loading speed: # Preload (The menu's url must end with ‘/’) - instant_page: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@1.7.4/js/instant_page.js - - ################################################## 优化体验类的服务 + instant_page: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.0.0/js/instant_page.js + ######## Plugins to optimize the experience: # Picture Zoom fancybox: css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css @@ -403,38 +379,36 @@ plugins: # Codeblock Copy Button clipboard: https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js - ################################################## 运维服务 - - # 访问量统计【加载非常缓慢】 + ######## Plugins for SEO: + # Traffic statistics (very slow loading) busuanzi: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-busuanzi@2.3/js/busuanzi.pure.mini.js - # 文章字数统计、阅读时长，开启需要安装插件: npm i --save hexo-wordcount + # npm i --save hexo-wordcount wordcount: #true - ################################################## 美化类的服务 - + ######## Plugins for ... # Button Ripple Effect nodewaves: css: https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.css js: https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.js # Typing Effects - comment_typing: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@1.7.4/js/comment_typing.js + comment_typing: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.0.0/js/comment_typing.js # Slide Background backstretch: enable: true js: https://cdn.jsdelivr.net/npm/jquery-backstretch@2.1.18/jquery.backstretch.min.js - position: cover # cover: 封面背景 fixed: 整个网页背景 - duration: 20000 # 持续时间（毫秒） - fade: 2500 # 渐变（毫秒） - is_dark: #true # 图片是否是暗色的（调整文字为白色） - images: # 我上传了一些高清壁纸到CDN中，仅限个人使用，商用后果自负！！！ + position: cover # cover: sticky on the cover. fixed: Fixed as background for the site. + duration: 20000 # Duration (ms) + fade: 1500 # fade duration (ms) (Not more than 1500) + is_dark: #true # Whether the picture is dark (adjust the text to white) + images: # For personal use only. At your own risk if used for commercial purposes !!! - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg # - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/BBC19066-E176-47C2-9D22-48C81EE5DF6B.jpeg # - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg # - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg - # # 下面这些建议 is_dark: true + # # Suggest is_dark: true # - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg # - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg # - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg @@ -443,6 +417,7 @@ plugins: # - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/250662D4-5A21-4AAA-BB63-CD25CF97CFF1.jpeg # - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/298468D7-E388-44A8-8CC5-8213BDC33CED.jpeg + # APlayer is only available in mainland China. # APlayer config: https://github.com/metowolf/MetingJS aplayer: enable: true @@ -474,8 +449,8 @@ comments: valine: appId: # your appId appKey: # your appKey - js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@1.7.4/js/valine.js - path: # 全站采用同一个path（共用同一个评论框数据） + js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.0.0/js/valine.js + path: # All pages use the same path (share the same comments data) meta: nick,mail,link #valine comment header info placeholder: 快来评论吧~ # valine comment input placeholder(like: Please leave your footprints ) avatar: mp # gravatar style https://valine.js.org/avatar @@ -484,7 +459,7 @@ comments: notify: true # valine mail notify (true/false) lang: zh-cn highlight: true - visitor: false # 阅读统计，按照官网文档接入了，但是依然不能用。 + visitor: false # unavailable for now... disqus: shortname: gitalk: @@ -500,9 +475,12 @@ comments: ############################### Search ############################### +# To use hexo search, you need to install the following plugins: +# npm i -S hexo-generator-search hexo-generator-json-content search: enable: true service: hexo # hexo, google, algolia, azure, baidu + js: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-volantis@2.0.0/js/search.js google: apiKey: engineId: diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs index 15c2948..45baf37 100755 --- a/layout/_partial/head.ejs +++ b/layout/_partial/head.ejs @@ -105,10 +105,10 @@ <%- item %><% }) %> <% } %> - <% if (config.use_cdn && theme.info && theme.info.cdn && theme.info.cdn.css && theme.info.cdn.css.style) { %> - <%- css(theme.info.cdn.css.style) %> + <% if (config.use_cdn && theme.info && theme.info.cdn && theme.info.cdn.css) { %> + <%- css(theme.info.cdn.css) %> <% } else { %> - <%- css('css/index.css') %> + <%- css('css/style.css') %> <% } %> <% } %> -<% if (config.use_cdn && theme.info && theme.info.cdn && theme.info.cdn.js && theme.info.cdn.js.app) { %> - <%- js(theme.info.cdn.js.app) %> +<% if (config.use_cdn && theme.info && theme.info.cdn && theme.info.cdn.js) { %> + <%- js(theme.info.cdn.js) %> <% } else { %> <%- js(['js/app.js']) %> <% } %> -<% if (config.use_cdn && theme.info && theme.info.cdn && theme.info.cdn.js && theme.info.cdn.js.search) { %> - <%- js(theme.info.cdn.js.search) %> -<% } else { %> - <%- js(['js/search.js']) %> +<% if (theme.search && theme.search.enable && theme.search.js) { %> + <%- js(theme.search.js) %> <% } %> <% if (theme.plugins.comment_typing) { %> <%- js(theme.plugins.comment_typing) %> diff --git a/source/css/index.styl b/source/css/style.styl similarity index 100% rename from source/css/index.styl rename to source/css/style.styl diff --git a/source/js/app.js b/source/js/app.js index ec18c3c..90ac818 100755 --- a/source/js/app.js +++ b/source/js/app.js @@ -13,7 +13,7 @@ var customSearch; const $elem = elem.href ? $(elem.getAttribute('href')) : $(elem); $('html, body').animate({ 'scrollTop': $elem.offset().top - correction - }, 750); + }, 500); } function setScrollAnchor() { diff --git a/source/less/_archive.less b/source/less/_archive.less deleted file mode 100755 index 7cd9221..0000000 --- a/source/less/_archive.less +++ /dev/null @@ -1,94 +0,0 @@ -#archive-page { - margin-bottom: @gap * 2; - .archive { - position: relative; - .archive-year { - font-size: @fontsize_base; - margin-top: 4em; - margin-bottom: 1em; - &:first-child{ - margin-top: 0em; - padding-top: 0; - } - h2 { - margin-top: 1em; - } - a { - color: @color_text_main; - text-decoration: none; - } - } - .archive-post { - a { - width: 100%; - display: inline-flex; - flex-flow: row nowrap; - justify-content: flex-start; - align-items: flex-start; - text-decoration: none; - &.child{ - padding-left: 2*@gap; - } - } - time { - color: @color_text_main; - flex: none; - font-size: @fontsize_small; - padding: .5em .5em .5em 3em; - @media (max-width: @on_phone) { - padding: .5em .5em .5em 0; - } - } - .title { - flex: auto; - padding: .5em; - font-size: @fontsize_small; - color: @color_text_main; - i{ - color: @theme_main; - &.music { - color: @color_text_highlight; - } - &.red { - color: @color_mac_close; - } - &.green { - color: @color_mac_maximize; - } - &.yellow { - color: @color_mac_minimize; - } - &.blue { - color: @color_mac_finder; - } - &.theme { - color: @theme_main; - } - &.accent { - color: @color_text_highlight; - } - &.orange { - color: @color_md_deep_orange; - } - } - } - } - - .all-tags { - display: flex; - flex-wrap: wrap; - align-items: flex-start; - justify-content: flex-start; - align-items: baseline; - word-spacing: @gap/2; - text-align: center; - a { - color: fade(@color_text_main, 80%); - margin-right: @gap; - &:hover,&:active,&.active{ - color: @color_text_highlight; - } - } - } - } -} diff --git a/source/less/_article.less b/source/less/_article.less deleted file mode 100755 index b570e28..0000000 --- a/source/less/_article.less +++ /dev/null @@ -1,972 +0,0 @@ -.article { - color: @color_text_main; - font-size: @fontsize_base; - line-height: @lineheight_base; - // word-break: break-all; - word-wrap: break-word; - img { - position: relative; - margin: 0 auto; - background: white; - .enable-trans(); - @media (max-width: @on_phone) { - box-shadow: none; - } - } - span{ - img { - display: inline; - margin: auto; - } - } - .aplayer{ - margin: 0; - display: inline-block; - width: 400px; - max-width: 100%; - border-radius: 4px; - color: #666; - font-family: @fontfamily_base; - } - p.small-img, - div.small-img { - img { - width: auto; - max-width: 100%; - margin: 0; - box-shadow: none; - } - } - p { - // margin: 20px 0px; - margin-top: .6em; - margin-bottom: .6em; - // text-align: justify; - strong{ - // color: @color_text_main; - // padding-left: 2px; - // padding-right: 2px; - } - u{ - color: @color_md_deep_orange; - } - s{ - color: fade(@color_text_main, 70%); - } - max-width: 100%; - overflow: auto; - &.has-jax{ - font-family: @fontfamily_code; - background: @color_bg_mathjax; - padding: @gap @gap/2; - border-radius: @border_radius_code_block; - .mjx-chtml.MJXc-display{ - margin: 0; - } - } - } - ul, - ol { - font-size: @fontsize_base * .95; - list-style: initial; - padding-left: 8px; - margin-left: @gap; - margin-top: .6em; - margin-bottom: .6em; - ul,ol{ - margin-top: 0; - margin-bottom: 0; - } - &.task-list{ - padding-left: 0; - margin-left: 4px; - li{ - list-style: none; - input{ - margin-right: 4px; - } - } - } - &.center{ - justify-content: center; - } - &.pure{ - margin: 0; - padding: 0; - display: flex; - flex-wrap: wrap; - align-items: stretch; - br{ - display: none; - } - @media screen and (max-width: 900px){ - justify-content: space-between; - } - li{ - margin: 8px; - display: flex; - width: 75px; - flex-direction: column; - align-items: stretch; - vertical-align: middle; - text-align: center; - font-size: .8em; - line-height: 1.2em; - overflow: hidden; - a{ - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - } - - img{ - margin-bottom: 8px; - } - - } - &.rounded{ - img{ - border-radius: 25%; - } - } - - &.circle{ - img{ - border-radius: 50%; - } - } - &.about{ - @media screen and (max-width: 900px){ - justify-content: center; - } - } - } - } - ul { - & > li{ - list-style: initial; - } - - } - ol { - & > li{ - list-style: decimal; - } - } - a { - &:before{ - display: none; - } - color: @color_text_link; - .enable-trans(); - &:hover { - color: @color_text_highlight; - text-decoration: underline; - } - &:active { - color: darken(@color_text_highlight, 25%); - } - } - h1, - h2, - h3, - h4, - h5, - h6 { - position: relative; - font-family: @fontfamily_base; - font-weight: normal; - margin-top: 1.5em; - margin-bottom: 0.6em; - &.title { - left: 0; - &:before { - content: none; - } - } - } - h1, h2 { - color: @color_text_header; - margin-top: @height_h2; - border-bottom: 1px solid fade(@color_text_main, 10%); - padding-bottom: .2em; - } - h1 { - font-size: @fontsize_h1; - } - h2 { - font-size: @fontsize_h2; - text-align: @text_align_h2; - } - h3 { - margin-top: @height_h3; - font-size: @fontsize_h3; - color: @color_text_h3; - text-align: @text_align_h3; - } - h4 { - font-size: @fontsize_h4; - } - h5 { - font-weight: bold; - color: @color_text_main; - font-size: @fontsize_h5; - } - h6 { - color: fade(@color_text_main, 75%); - font-size: @fontsize_h6; - } - h3, h4, h5, h6 { - &:first-child{ - margin-top: 0; - padding-top: 0; - } - } - .subtitle{ - h6 { - color: fade(@color_text_main, 90%); - } - } - figure { - figcaption { - span { - display: inline-block; - margin-right: 5px; - } - } - } - blockquote { - background: fade(@color_bg_quote, 10%); - border-left: @border_radius_code_block solid @color_bg_quote; - border-radius: @border_radius_code_block; - } - blockquote,div.info,div.success,div.warning,div.danger { - p{ - text-align: left; - word-wrap: normal; - font-size: @fontsize_small; - line-height: @fontsize_small * 1.5; - margin: .6em 0; - } - position: relative; - width: 100%; - font-size: @fontsize_small; - margin: .6em 0; - padding: .7em 1.2em; - - .enable-trans(); - footer { - padding: 0; - text-align: justify; - color: inherit; - font-style: italic; - margin: .6em 0; - cite{ - &::before{ - content: '----'; - padding: 0 .3em; - } - color: fade(@color_text_main, 70%); - margin-left: 1em; - } - } - &.pullquote{ - &.right{ - border-left: none; - border-right: @border_radius_code_block solid @color_bg_quote; - p{ - text-align: right; - } - } - } - } - - pre { - display: block; - -moz-box-sizing: border-box; - box-sizing: border-box; - margin-top: .7em; - margin-bottom: .7em; - overflow: auto; - background: @color_bg_code_block; - font-size: @fontsize_small * .95; - font-family:@fontfamily_code; - line-height: @lineheight_base; - border: 1px solid darken(@color_bg_code_block, 10%); - padding: @gap; - } - div>pre{ - border-radius: @border_radius_code_block; - &>code{ - padding: 0; - margin: 0; - background: transparent; - color: fade(@color_text_main, 90%); - } - } - code { - font-family: @fontfamily_code; - padding: 3px 3px 0px 3px; - margin: 0px 1px; - vertical-align: center; - border-radius: 2px; - border: 1px solid fade(@color_bg_code, 20%); - font-size: @fontsize_base * .8; - background: @color_bg_code; - color: @color_text_code; - @media(max-width: @on_phone){ - font-size: @fontsize_base * .8 * .95; - } - } - .readmore { - // display: none; // howtodesign? - font-family: @fontfamily_base; - font-size: .8em; - letter-spacing: .1em; - margin-top: @gap; - a { - text-decoration: none; - display: inline-block; - vertical-align: middle; - line-height: 2rem; - font-weight: bold; - background-color: @theme_main; - padding: .2em 2.4em; - color: @color_text_in_header; - border-radius: @border_radius/2; - .enable-trans(); - &:hover { - background: darken(@theme_main, 10%); - } - &:active { - // background: darken(@theme_main, 20%); - } - } - - } - .tags { - position: relative; - padding-top: @gap/2; - padding-bottom: @gap/2; - font-size: @fontsize_small; - line-height: @lineheight_base; - margin-top: @gap; - background: @color_bg_code_block; - &.article-tags { - // padding-top: 2*@gap; - // background: transparent; - } - word-spacing: @gap/2; - a { - color: @color_text_main; - position: relative; - display: inline-block; - word-spacing: 0; - // letter-spacing: .1em; - // &+a{ - // margin-left: @gap/2; - // } - .enable-trans(); - &:hover { - color: @color_text_highlight; - background: transparent; - text-decoration: none; - } - &::before { - // content: "#"; - } - } - } - - table:not('.highlight table') { - width: 100%; - - td, - th { - padding: 12px 24px; - } - tr { - // border-bottom: 1px solid #ddd; - } - &>thead>th { - // border-bottom-width: 2px; - } - } - @media (max-width: @on_phone) { - ul, - ol { - font-size: @fontsize_base * .95; - } - figure { - font-size: 13px; - line-height: 1.6em; - } - } - .prev-next{ - width: 100%; - display: flex; - justify-content: space-between; - align-content: flex-start; - section{ - width: 100%; - padding: @gap/2; - color: fade(@color_text_main, 70%); - background-color: @color_bg_code_block; - border-radius: @border_radius_code_block; - p{ - font-size: @fontsize_base; - line-height: @lineheight_base; - margin: 0; - } - h4{ - margin-top: @gap/2; - margin-bottom: @gap/2; - position: relative; - font-family: @fontfamily_base; - font-weight: bold; - font-size: @fontsize_h5; - @media(max-width:@on_phone) { - letter-spacing: -1px; - } - - } - h6{ - margin: 0; - word-spacing: normal; - } - .enable-trans(); - // border: 1px solid transparent; - // &:hover{ - // border: 1px solid fade(@theme_main, 30%); - // } - .tags{ - background: transparent; - padding: 0; - margin-top: @gap/2; - margin-bottom: 0; - font-size: @fontsize_small * 0.9; - word-spacing: 4px; - } - &:first-child{ - margin-left: 0; - margin-right: 0; - } - } - .prev{ - text-align: left; - margin-left: 0; - margin-right: @gap/2; - border-top-right-radius: @border_radius_code_block; - border-bottom-right-radius: @border_radius_code_block; - } - .next{ - text-align: right; - margin-left: @gap/2; - margin-right: 0; - border-top-left-radius: @border_radius_code_block; - border-bottom-left-radius: @border_radius_code_block; - } - - } - - p btn, li btn { - .btn-wrapper(); - } - - p{ - &[small]{ - font-size: @fontsize_small; - } - &[large]{ - font-size: 4em; - line-height: 1.2em; - } - &[huge]{ - font-size: 6em; - line-height: 1.2em; - } - &[small],&[large],&[huge]{ - margin: 0; - } - &[bold]{ - font-weight: bold; - } - &[left]{ - text-align: left; - } - &[center]{ - text-align: center; - } - &[right]{ - text-align: right; - } - - } - red,p[red]{ - color: @color_mac_close; - } - yellow,p[yellow]{ - color: @color_mac_minimize; - } - green,p[green]{ - color: @color_mac_maximize; - } - cyan,p[cyan]{ - color: @color_mac_finder; - } - blue,p[blue]{ - color: @color_md_blue; - } - gray,p[gray]{ - color: #666; - } - btns { - .btns-wrapper(); - } - -} - - -.highlight { - position: relative; - width: 100%; - margin-top: .7em; - margin-bottom: .7em; - overflow: auto; - display: block; - background: @color_bg_code_block; - font-size: @fontsize_small * .95; - font-family:@fontfamily_code; - line-height: @lineheight_base; - border-radius: @border_radius_code_block; - border: 1px solid darken(@color_bg_code_block, 10%); - .enable-trans(); - figcaption{ - position: sticky; - left: 0; - padding: @gap/4 @gap/2 @gap/4 @gap/2; - background-color: darken(@color_bg_code_block, 5%); - - } - table { - td,th{ - padding: 0; - border: none; - } - margin: 0; - background-color: transparent; - border: none; - tr{ - background-color: transparent; - &:hover{ - background-color: transparent; - } - } - .gutter{ - width: 24px; - padding: 0 12px; - text-align: right; - border-width: 0; - margin-left: 0; - position: sticky; - left: 0; - background-color: darken(@color_bg_code_block, 5%); - pre{ - color: fade(@color_text_main, 80%); - } - } - pre{ - background: transparent; - margin: 0; - padding: 0; - border: none; - } - .code{ - padding: @gap; - vertical-align: top; - background-color: transparent; - &:before{ - content: ""; - position: absolute; - top: 0; - right: 0; - color: fade(@color_text_main, 80%); - font-size: @fontsize_footnote; - padding: 4px 8px; - line-height: @lineheight_base; - } - } - } - - - &.html .code:before{ - content: "HTML"; - } - &.js .code:before{ - content: "JS"; - } - &.bash .code:before{ - content: "BASH"; - } - &.shell .code:before{ - content: "SHELL"; - } - &.css .code:before{ - content: "CSS"; - } - &.less .code:before{ - content: "LESS"; - } - &.swift .code:before{ - content: "SWIFT"; - } - &.objc .code:before{ - content: "OBJECTIVE-C"; - } - &.c .code:before{ - content: "C"; - } - &.cpp .code:before{ - content: "C++"; - } - &.java .code:before{ - content: "JAVA"; - } - &.python .code:before{ - content: "PYTHON"; - } - &.yaml .code:before{ - content: "YAML"; - } - &.plain .code:before{ - content: ""; - } - - &::-webkit-scrollbar { - height: @border_radius_line; - width: @border_radius_line; - } - // /* Track */ - - &::-webkit-scrollbar-track-piece { - background: transparent; - } - - -/* Handle */ - - &::-webkit-scrollbar-thumb { - background: darken(@color_bg_code_block, 5%); - cursor: pointer; - border-radius: @border_radius_code_block; - .enable-trans(); - &:hover { - background: darken(@color_bg_code_block, 12%); - } - } - -} - -.article { - @media (max-width: @on_phone) { - .highlight { - font-size: @fontsize_small * .95 * .95; - } - } -} - -.art-item-footer{ - height: 40px; - line-height: @lineheight_base; - font-size: @fontsize_small; - .art-item-left,.art-item-right{ - width:50%; - height: 40px; - line-height: 40px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - .art-item-left{ - float: left; - text-align: left; - } - .art-item-right{ - float: right; - text-align: right; - } - @media (max-width: @on_phone) { - font-size: @fontsize_small * .95 * .95; - } -} - -@hl_keyword: #9c27b0; -@hl_blue: #1E80F0; -@hl_cyan: #17AFCA; -@hl_green: #3FA33F; -@hl_light_blue: #6ECDF9; -@hl_red: #EE2B29; -@hl_orange: #FB3F1B; -@hl_amber: #FD8607; - -pre{ - // 行 - line-height: @lineheight_base*1.1; - .line{ - color: fade(@color_text_main, 90%); - } - .marked{ - background-color: fade(@color_mac_minimize, 40%); - padding: 3px 8px 3px 0; - border-radius: 2px; - width: 100%; - } - .title{ - color: @color_md_indigo; - } - // 注释 - .comment { - color: fade(darken(@color_md_green, 10%), 70%); - } - .keyword, .javascript .function, .attr { - color: @hl_keyword; - } - .type, .built_in, .tag .name{ - color: @color_md_light_blue; - } - .variable, .attribute, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo { - color: @hl_amber; - } - .number, .preprocessor, .literal, .params, .constant { - color: @hl_amber; - } - .class, .ruby .class .title, .css .rules .attribute { - color: @color_md_orange; - } - .string { - color: darken(@color_md_green, 10%); - } - .value, .inheritance, .header, .ruby .symbol, .xml .cdata { - color: @color_md_green; - } - .css .hexcolor { - color: #66cccc; - } - .function, .python .decorator, .python .title, .ruby .function .title, .ruby .title .keyword, .perl .sub, .javascript .title, .coffeescript .title { - color: #6699cc; - } - -} -.html{ - .tag .name{ - color: @hl_red; - } -} - -//代码块复制按钮 -.highlight{ - //方便copy代码按钮（btn-copy）的定位 - position: relative; -} -.btn-copy { - display: inline-block; - cursor: pointer; - background-color: #FCFCFC; - background-image: linear-gradient(#fcfcfc,#eee); - border: 1px solid #d5d5d5; - border-radius: 2px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-appearance: none; - font-size: 13px; - font-weight: 700; - line-height: 20px; - color: #666; - padding: 2px 6px; - position: absolute; - right: 5px; - top: 5px; - opacity: 0; - .enable-trans(); - &:hover{ - color: #444; - } -} -.btn-copy span { - margin-left: 5px; -} -.highlight:hover .btn-copy{ - opacity: 1; -} - - -.article-entry{ - div.info { - background-color: fade(@color_mac_finder, 20%); - border-left: @border_radius_code_block solid @color_mac_finder; - border-radius: @border_radius_code_block; - :before { - content: " "; - position: absolute; - top: 50%; - left: -14.5px; - margin-top: -12px; - width: 24px; - height: 24px; - border-radius: 50%; - text-align: center; - color: #fff; - background-size: 16px 16px; - background-position: 4px 4px; - background-repeat: no-repeat; - background-color: @color_mac_finder; - background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPSIxNzkyIiBoZWlnaHQ9IjE3OTIiIHZpZXdCb3g9IjAgMCAxNzkyIDE3OTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyMTYgMTM0NHYxMjhxMCAyNi0xOSA0NXQtNDUgMTloLTUxMnEtMjYgMC00NS0xOXQtMTktNDV2LTEyOHEwLTI2IDE5LTQ1dDQ1LTE5aDY0di0zODRoLTY0cS0yNiAwLTQ1LTE5dC0xOS00NXYtMTI4cTAtMjYgMTktNDV0NDUtMTloMzg0cTI2IDAgNDUgMTl0MTkgNDV2NTc2aDY0cTI2IDAgNDUgMTl0MTkgNDV6bS0xMjgtMTE1MnYxOTJxMCAyNi0xOSA0NXQtNDUgMTloLTI1NnEtMjYgMC00NS0xOXQtMTktNDV2LTE5MnEwLTI2IDE5LTQ1dDQ1LTE5aDI1NnEyNiAwIDQ1IDE5dDE5IDQ1eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="); - } - } - - div.success { - background-color: fade(@color_mac_maximize, 20%); - border-left: @border_radius_code_block solid @color_mac_maximize; - border-radius: @border_radius_code_block; - :before { - content: " "; - position: absolute; - top: 50%; - left: -14.5px; - margin-top: -12px; - width: 24px; - height: 24px; - border-radius: 50%; - text-align: center; - color: #fff; - background-size: 16px 16px; - background-position: 4px 4px; - background-repeat: no-repeat; - background-color: @color_mac_maximize; - background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNjcxIDU2NnEwIDQwLTI4IDY4bC03MjQgNzI0LTEzNiAxMzZxLTI4IDI4LTY4IDI4dC02OC0yOGwtMTM2LTEzNi0zNjItMzYycS0yOC0yOC0yOC02OHQyOC02OGwxMzYtMTM2cTI4LTI4IDY4LTI4dDY4IDI4bDI5NCAyOTUgNjU2LTY1N3EyOC0yOCA2OC0yOHQ2OCAyOGwxMzYgMTM2cTI4IDI4IDI4IDY4eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="); - } - } - - - div.warning { - background-color: fade(@color_mac_minimize, 20%); - border-left: @border_radius_code_block solid @color_mac_minimize; - border-radius: @border_radius_code_block; - :before { - content: " "; - position: absolute; - top: 50%; - left: -14.5px; - margin-top: -12px; - width: 24px; - height: 24px; - border-radius: 50%; - text-align: center; - color: #fff; - background-size: 16px 16px; - background-position: 4px 4px; - background-repeat: no-repeat; - background-color: @color_mac_minimize; - background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMDg4IDEyNTZ2MjQwcTAgMTYtMTIgMjh0LTI4IDEyaC0yNDBxLTE2IDAtMjgtMTJ0LTEyLTI4di0yNDBxMC0xNiAxMi0yOHQyOC0xMmgyNDBxMTYgMCAyOCAxMnQxMiAyOHptMzE2LTYwMHEwIDU0LTE1LjUgMTAxdC0zNSA3Ni41LTU1IDU5LjUtNTcuNSA0My41LTYxIDM1LjVxLTQxIDIzLTY4LjUgNjV0LTI3LjUgNjdxMCAxNy0xMiAzMi41dC0yOCAxNS41aC0yNDBxLTE1IDAtMjUuNS0xOC41dC0xMC41LTM3LjV2LTQ1cTAtODMgNjUtMTU2LjV0MTQzLTEwOC41cTU5LTI3IDg0LTU2dDI1LTc2cTAtNDItNDYuNS03NHQtMTA3LjUtMzJxLTY1IDAtMTA4IDI5LTM1IDI1LTEwNyAxMTUtMTMgMTYtMzEgMTYtMTIgMC0yNS04bC0xNjQtMTI1cS0xMy0xMC0xNS41LTI1dDUuNS0yOHExNjAtMjY2IDQ2NC0yNjYgODAgMCAxNjEgMzF0MTQ2IDgzIDEwNiAxMjcuNSA0MSAxNTguNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4="); - } - } - - div.danger { - background-color: fade(@color_mac_close, 20%); - border-left: @border_radius_code_block solid @color_mac_close; - border-radius: @border_radius_code_block; - :before { - content: " "; - position: absolute; - top: 50%; - left: -14.5px; - margin-top: -12px; - width: 24px; - height: 24px; - border-radius: 50%; - text-align: center; - color: #fff; - background-size: 16px 16px; - background-position: 4px 4px; - background-repeat: no-repeat; - background-color: @color_mac_close; - background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMDg4IDEyNDh2MjI0cTAgMjYtMTkgNDV0LTQ1IDE5aC0yNTZxLTI2IDAtNDUtMTl0LTE5LTQ1di0yMjRxMC0yNiAxOS00NXQ0NS0xOWgyNTZxMjYgMCA0NSAxOXQxOSA0NXptMzAtMTA1NmwtMjggNzY4cS0xIDI2LTIwLjUgNDV0LTQ1LjUgMTloLTI1NnEtMjYgMC00NS41LTE5dC0yMC41LTQ1bC0yOC03NjhxLTEtMjYgMTcuNS00NXQ0NC41LTE5aDMyMHEyNiAwIDQ0LjUgMTl0MTcuNSA0NXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4="); - } - } - - .widget{ - background: transparent; - margin: .6em 0; - font-family: @fontfamily_base; - font-size: @fontsize_base; - box-shadow: none; - border-radius: @border_radius_code_block; - cursor: auto; - background: @color_bg_code_block; - padding: @gap/2 0; - .enable-trans(); - &:hover { - box-shadow: none; - } - &:active { - box-shadow: none; - } - header { - padding: @gap/4 .6em; - padding-bottom: 0; - color: fade(@color_text_main, 85%); - } - &.copyright,&.qrcode{ - background: none; - padding: 0; - header { - display: none; - } - .content{ - padding: 0; - } - } - .content{ - padding: 0 .6em; - margin: 0; - ul.entry, ul.popular-posts{ - padding-left: 8px; - margin-left: @gap; - a{ - display: inline; - border-left: none; - padding: 0; - padding-left: 4px; - color: inherit; - font-weight: normal; - &:hover,&.active,&:active{ - border-left: none; - background: none; - color: @color_text_highlight; - } - } - } - } - &.qrcode > .content{ - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; - padding-left: @gap; - padding-right: @gap; - &>fancybox, &>img{ - margin: 0 @gap/2; - } - img{ - margin-bottom: 4px; - } - margin-bottom: 4px; - } - } - .widget-blur{ - backdrop-filter: none; - } -} diff --git a/source/less/_base.less b/source/less/_base.less deleted file mode 100755 index 1a7e755..0000000 --- a/source/less/_base.less +++ /dev/null @@ -1,755 +0,0 @@ -/* Basic Settings */ - -* { - box-sizing: border-box; - outline: none; - margin: 0; - padding: 0; -} - - -/* My Base */ - -html { - color: @color_text_main; - width: 100%; - height: 100%; - font-family: @fontfamily_base; - font-size: @fontsize_base; - line-height: 1.5rem; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - text-rendering: optimizelegibility; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -body { - background-color: @theme_background; - &.modal-active { - overflow: hidden; - @media (max-width: @on_modal_threshold) { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - } - } - &.z_menu-open { - .menu-phone { - transform: translate3d(-@gap, 0, 0); - } - } -} - -fancybox{ - display: flex; - justify-content: center; - align-items: center; -} -.backstretch { - -} -.cover-wrapper{ - padding-bottom: 2px; - .cover{ - top: 0; - left: 0; - max-width: 100%; - height: ~"calc(100vh)"; - display: flex; - flex-wrap: nowrap; - flex-direction: column; - align-items: center; - align-self: center; - align-content: center; - color: fade(@color_text_main, 75%); - padding: @gap; - .title, .logo{ - margin-top: ~"calc(30vh)"; - text-align: center; - } - .title{ - font-size: @fontsize_h1*2.2; - line-height: @fontsize_h1*2.2; - } - .subtitle{ - font-size: @fontsize_small; - } - .logo{ - max-height: 100px; - max-width: ~"calc(100% - 4*@{gap})"; - } - .white{ - color: white; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - } - @media(max-width: @on_phone){ - .title, .logo { - font-size: @fontsize_h1*2; - line-height: @fontsize_h1*2; - } - } - .m_search{ - @iconW: 32px; - @iconMargin: 4px; - margin-top: ~"calc(2vh + 32px)"; - position: relative; - max-width: ~"calc(100% - 1*@{gap})"; - width: 340px; - // @media(max-width: @on_laptop){ - // width: 1.4*@width_sidebar_m; - // } - line-height: @height_navbar - @gap; - vertical-align: middle; - .form { - position: relative; - display: block; - width: 100%; - } - .icon,.input{ - .enable-trans(.3s); - } - .icon { - position: absolute; - display:block; - line-height: @searchbar_height_cover; - height: @searchbar_height_cover; - width: @iconW; - top: 0; - left: @iconMargin+1px; - font-size: @fontsize_base; - color: fade(@color_text_main, 60%); - } - .input { - display: block; - font-size: @fontsize_base; - line-height: @fontsize_base; - height: @searchbar_height_cover; - width: 100%; - color: @color_text_main; - box-shadow: none; - box-sizing: border-box; - -webkit-appearance: none; - padding-left: @iconW + @iconMargin; - @media(max-width: @on_phone){ - padding-left: @iconW + @iconMargin; - } - border-radius: @height_navbar; - background: lighten(@theme_cardbg, 10%); - border: 1px dashed transparent; - .set-placeholder({ - padding-top: 2px; - font-size: @fontsize_small; - color: fade(@color_text_main, 60%); - }); - &:hover{ - ~.icon{ - color: @theme_main; - } - } - &:focus { - ~.icon{ - color: @theme_main; - } - border: 1px solid @theme_main; - } - } - - } - &.half{ - margin-bottom: ~"calc(-100px)"; - height: ~"calc(60vh - @{height_navbar} + 120px)"; - .title, .logo{ - margin-top: ~"calc(28vh - 80px)"; - } - .m_search{ - margin-top: @gap*2; - } - @media(max-width: @on_pad){ - height: ~"calc(40vh - @{height_navbar} + 160px)"; - .title, .logo{ - margin-top: ~"calc(22vh - 90px)"; - } - } - @media(max-width: @on_phone){ - height: ~"calc(30vh - @{height_navbar} + 200px)"; - .title, .logo{ - margin-top: ~"calc(22vh - 70px)"; - } - } - } - .menu{ - margin-top: @gap; - ul { - display: flex; - flex-wrap: wrap; - align-items: baseline; - justify-content: center; - li { - display: flex; - flex-wrap: wrap; - align-items: center; - padding: 0; - height: auto; - } - } - ul > li > a{ - font-size: @fontsize_small; - padding: 2px; - margin: 0 4px; - .enable-trans(); - color: fade(@color_text_main, 85%); - border-bottom: 1px solid transparent; - &:hover, &.active, &:active{ - color: @theme_main; - border-bottom: 1px solid @theme_main; - } - &.white{ - color: fade(white, 70%); - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - &:hover, &.active, &:active{ - color: white; - border-bottom: 1px solid white; - } - } - } - } - .switcher{ - & > li{ - a{ - &:hover { - background: fade(@theme_main, 15%); - } - } - } - } - } - .scroll-down{ - width: 100%; - height: 64px; - position: absolute; - bottom: 0; - text-align: center; - cursor: pointer; - .scroll-down-effects{ - color: white; - font-size: 24px; - line-height: 64px; - position: absolute; - text-shadow: 0 1px 2px rgba(0, 0, 0, .1); - @keyframes scroll-down-effect{ - 0%{ - top: 0; - opacity: .4; - } - 50%{ - top: -16px; - opacity: 1; - } - 100%{ - top: 0; - opacity: .4; - } - } - animation: scroll-down-effect 1.5s infinite; - transform: rotateX(20px); - } - } - - - - - -} - - - -.z-depth-nav { - box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.24), 0 3px 6px 0px rgba(0, 0, 0, 0.1); -} -.z-depth-nav-raised { - box-shadow: @boxshadow_card_raised; -} - -.hoverable { - .enable-trans(); - box-shadow: 0; -} - -.hoverable:hover { - .enable-trans(); - box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -} - -::-moz-selection { - background: @color_bg_selection; -} - -::selection { - background: @color_bg_selection; -} -// transition -.enable-trans(@time: 0.25s){ - transition: all @time ease; - -moz-transition: all @time ease; - -webkit-transition: all @time ease; - -o-transition: all @time ease; -} - -.set-placeholder(@rules){ - &::-webkit-input-placeholder {@rules();} - &:-moz-placeholder {@rules();} - &::-moz-placeholder {@rules();} - &:-ms-input-placeholder {@rules();} -} - - -h1, -h2, -h3, -h4, -h5, -h6 { - -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; - -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; - -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1; - text-rendering: geometricPrecision; - margin: 0 0 0.4em 0; -} - -h1 { - font-size: @fontsize_h1; -} - -h2 { - font-size: @fontsize_h2; -} - -h3 { - font-size: @fontsize_h3; -} - -h4 { - font-size: @fontsize_h4; -} - -h5 { - font-size: @fontsize_h5; -} - -h6 { - font-size: @fontsize_h6; -} - -a { - color: @black; - cursor: pointer; - text-decoration: none; - .enable-trans(); - &:hover { - text-decoration: none; - } -} - -pre { - tab-size: 4; - -moz-tab-size: 4; - -o-tab-size: 4; - -webkit-tab-size: 4; -} - -img { - max-width: 100%; -} - - -/** -* Util -*/ - -.clearfix { - zoom: 1; - &:before, - &:after { - content: " "; // 1 - display: table; // 2 - } - &:after { - clear: both; - } -} - - -.hidden { - text-indent: -9999px; - visibility: hidden; - display: none; -} - -.inner { - position: relative; - width: 80%; - max-width: 710px; - margin: 0 auto; -} - -.vertical { - display: table-cell; - vertical-align: middle; -} - -.right { - float: right; -} - -.left { - float: left; -} - -.disable-trans { - -moz-transition: none !important; - -webkit-transition: none !important; - transition: none !important; -} - -.txt-ellipsis { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -ul, -ol { - padding-left: 0; -} - -li { - list-style: none; -} - -.mark { - position: relative; - a { - color: @black; - background: transparent; - display: inline-block; - padding: 0 8px; - border-left: @border_radius_line solid transparent; - background: transparent; - border-radius: @border_radius_code_block; - .enable-trans(); - &:hover { - background: fade(@theme_main, 10%); - border-left: @border_radius_line solid @theme_main; - padding: 8px; - } - &:active { - border-left: 2*@border_radius_line solid @theme_main; - } - - } -} - -ul.h-list { - display: flex; - align-items: center; - height: 100%; - &>li { - // flex: none; - height: 100%; - justify-content: center; - } -} - - -/** - * Loading bar - */ - -#loading-bar-wrapper { - position: fixed; - top: @height_navbar - @loading_height; - // top: 0; - left: 0; - width: 100%; - // overflow: scroll; - z-index: 99999; -} - -#loading-bar { - position: fixed; - width: 0; - height: @loading_height; - // height: @height_navbar; - .enable-trans(); - background-color: fade(@theme_main, 50%); -} - -.body-wrapper { - position: relative; - display: flex; - width: 100%; - max-width: @width_container; - margin: 0 auto; - flex-wrap: wrap; - justify-content: space-between; - align-items: stretch; -} - -.container--flex { - display: flex; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center; -} - -.l_body { - position: relative; - margin: @gap; - margin-top: @gap; - &.nocover{ - margin-top: @gap + @height_navbar; - } - @media(max-width: @on_phone) { - margin: @height_navbar + @gap 0 @gap; - border-radius: 0; - } - // padding-top: -@gap/2; - .s-top{ - .enable-trans(0.6s); - z-index: 9; - position: fixed; - width: 48px; - height: 48px; - line-height: 48px; - border-radius: 100%; - bottom: @gap*2; - right: @gap*2; - transform: translateY(100px) scale(0); - transform-origin: bottom; - color: @color_text_main; - @media(max-width: @on_pad) { - right: @gap; - } - &.show{ - transform: translateY(0) scale(1); - &.hl{ - background: @theme_main; - color: white; - box-shadow: @boxshadow_card_normal; - } - } - @media(min-width: @on_pad) { - &:hover{ - transform: scale(1.2); - border-radius: 25%; - background: @theme_main; - color: white; - box-shadow: @boxshadow_card_raised; - &.hl{ - box-shadow: @boxshadow_card_raised; - } - } - } - } -} -.white-box{ - background: @theme_cardbg; -} -.reveal { - // visibility: hidden; -} - -.btn-wrapper{ - a { - line-height: @lineheight_base * 1.3; - background: @color_text_link; - color: @color_text_in_header; - padding: 3px 5px 1px 5px; - margin: 2px; - border-radius: 2px; - .enable-trans(); - &:hover { - color: @color_text_in_header; - text-decoration: none; - background: @color_text_highlight; - } - } - &[regular] { - a { - line-height: @lineheight_base * 1.8; - padding: 9px 16px 7px 16px; - i { - margin-right: 2px; - } - } - } - &[large] { - a { - line-height: @lineheight_base * 3; - padding: 11px 40px 10px 40px; - i { - margin: 0 5px 0 -2px; - } - } - } - &[center] { - display: block; - text-align: center; - } -} - -.btns-wrapper{ - display: flex; - flex-wrap: wrap; - margin: .6em -@gap/2; - align-items: flex-start; - &[wide]{ - a{ - padding-left: @gap*2; - padding-right: @gap*2; - } - } - &[fill]{ - a{ - flex-grow: 1; - width: auto; - } - } - &[around]{ - justify-content: space-around; - } - &[center]{ - justify-content: center; - } - &[grid2]{ - a{ - width:~"calc(100%/2 - @{gap})"; - @media(max-width: @on_laptop){ - width:~"calc(100%/2 - @{gap})"; - } - @media(max-width: @on_pad){ - width:~"calc(100%/2 - @{gap})"; - } - @media(max-width: @on_phone){ - width:~"calc(100%/1 - @{gap})"; - } - } - } - &[grid3]{ - a{ - width:~"calc(100%/3 - @{gap})"; - @media(max-width: @on_laptop){ - width:~"calc(100%/3 - @{gap})"; - } - @media(max-width: @on_pad){ - width:~"calc(100%/3 - @{gap})"; - } - @media(max-width: @on_phone){ - width:~"calc(100%/1 - @{gap})"; - } - } - } - &[grid4]{ - a{ - width:~"calc(100%/4 - @{gap})"; - @media(max-width: @on_laptop){ - width:~"calc(100%/3 - @{gap})"; - } - @media(max-width: @on_pad){ - width:~"calc(100%/3 - @{gap})"; - } - @media(max-width: @on_phone){ - width:~"calc(100%/2 - @{gap})"; - } - } - } - &[grid5]{ - a{ - width:~"calc(100%/5 - @{gap})"; - @media(max-width: @on_laptop){ - width:~"calc(100%/4 - @{gap})"; - } - @media(max-width: @on_pad){ - width:~"calc(100%/3 - @{gap})"; - } - @media(max-width: @on_phone){ - width:~"calc(100%/2 - @{gap})"; - } - } - } - - a{ - .enable-trans(); - margin: @gap/2; - margin-top: ~"calc(@{gap}*1.25 + 32px)"; - min-width: 120px; - font-weight: bold; - display: flex; - justify-content: flex-start; - align-content: center; - align-items: center; - flex-direction: column; - line-height: @lineheight_base; - padding: @gap/2; - text-align: center; - font-size: @fontsize_small; - &>img:first-child, &>i:first-child{ - .enable-trans(); - height: 64px; - width: 64px; - &[auto]{ - width: auto; - } - margin: @gap @gap/2 @gap/4 @gap/2; - margin-top: ~"calc(-@{gap}*1.25 - 32px)"; - border: 2px solid @theme_cardbg; - background: @color_text_in_header; - line-height: 60px; - font-size: 28px; - } - &>i:first-child{ - color: @color_text_in_header; - background: @color_text_link; - } - background: darken(@color_bg_code_block, 10%); - border-radius: 4px; - color: @color_text_main; - p,b{ - margin: .25em; - font-weight: normal; - line-height: 1.25; - word-wrap: break-word; - } - b{ - font-size: @fontsize_base; - font-weight: bold; - line-height: 1.3; - } - img{ - margin: .4em auto; - } - &:hover{ - text-decoration: none; - background: fade(@color_text_highlight, 15%); - &>img:first-child, &>i:first-child{ - transform: scale(1.1) translateY(-8px); - box-shadow: @boxshadow_base_4; - } - &>i:first-child{ - background: @color_text_highlight; - } - } - } - &[circle] > a { - &>img:first-child, &>i:first-child{ - border-radius: 32px; - } - } - &[rounded] > a { - &>img:first-child, &>i:first-child{ - border-radius: 16px; - } - } -} diff --git a/source/less/_color.less b/source/less/_color.less deleted file mode 100755 index 5de9409..0000000 --- a/source/less/_color.less +++ /dev/null @@ -1,66 +0,0 @@ -// 如果你只想简单地换个风格，可以只改这里的几项： -// 网页背景颜色 -@theme_background: #F4F4F4; -// @theme_background: #454545; // 暗色主题 -// 主题色 -@theme_main: @color_md_blue; -// 卡片背景颜色 -@theme_cardbg: white; -// @theme_cardbg: #555; // 暗色主题 - - - - -// 如果你想更自由地定制颜色，可以修改这里的几项： - -// 背景色 ---------------- -// 导航栏背景，默认和主题色保持一致 -@color_bg_navbar: @theme_main; -// 代码的背景色 -@color_bg_code: #FFF8F0; -// 代码块的背景色 -@color_bg_code_block: fade(darken(@theme_cardbg, 5%), 60%); -// 公式背景颜色 -@color_bg_mathjax: #FFF0; -// 引用的颜色 -@color_bg_quote: @theme_main; -// 选中部分文字的背景颜色 -@color_bg_selection: fade(@color_md_blue, 20%); - -// 文字颜色 ---------------- -// 标题文字颜色（h1/h2） -@color_text_header: darken(@color_text_main, 5%); -// 标题文字颜色（h3） -@color_text_h3: darken(@theme_main, 5%); -// 链接颜色 -@color_text_link: @theme_main; -// 链接高亮颜色 -@color_text_highlight: @color_md_deep_orange; -// 在主题色中显示的文本（一般为白或深灰） -@color_text_in_header: white; -// 正文文字颜色 -@color_text_main: @dark; -// @color_text_main: white; // 暗色主题 -// 代码颜色 -@color_text_code: #A55A00; - -// 导航栏毛玻璃效果 -.nav-blur { - background: fade(@theme_cardbg, 85%); - backdrop-filter: blur(20px); -} - -// 卡片毛玻璃效果 -.body-blur,.widget-blur { - background: fade(@theme_cardbg, 85%); - backdrop-filter: blur(20px); -} - -// 卡片阴影 -.shadow { - .enable-trans(); - box-shadow: @boxshadow_card_normal; - &:hover { - box-shadow: @boxshadow_card_raised; - } -} diff --git a/source/less/_defines.less b/source/less/_defines.less deleted file mode 100755 index 76f5988..0000000 --- a/source/less/_defines.less +++ /dev/null @@ -1,52 +0,0 @@ -// 颜色 -// Material color scheme -@color_md_red: #f44336; -@color_md_pink: #E91E63; -@color_md_purple: #9c27b0; -@color_md_deep_purple: #673ab7; -@color_md_indigo: #3f51b5; -@color_md_light_blue: #4BA7EE; -@color_md_blue: #2196f3; -@color_md_deep_blue: #3367d6; -@color_md_teal: #009688; -@color_md_green: #4caf50; -@color_md_light_green: #8bc34a; -@color_md_orange: #ff9800; -@color_md_deep_orange: #ff5722; -@color_md_brown: #795548; -@color_md_blue_grey: #607d8b; -@color_md_grey: #9e9e9e; -@color_md_light_grey:#e0e0e0; -@color_md_yellow: #FCEC60; -@color_md_amber: #F6C344; -// 基本不变的黑白灰 -@black: #444444; -@color_grey: #828282; -@white: #ffffff; -@light: #eeeeee; -@dark: #333333; -// 这些颜色取自macOS -@color_mac_maximize: #3DC550; -@color_mac_minimize: #FFBD2B; -@color_mac_close: #FE5F58; -@color_mac_finder: #1BCDFC; -// xx -@color_light_green: #5CC281; -@color_vue: #4fc08d; -@color_yellow: #e96900; -// 这些颜色由xaoxuu调配 -@color_ax_light_red: #FF6868; -@color_ax_red: #F24E32; -@color_ax_blue: #52A1F8; - -// 阴影 -@boxshadow_base_1: 0 1px 2px 0px rgba(0, 0, 0, 0.1); -@boxshadow_base_2: 0 2px 4px 0px rgba(0, 0, 0, 0.1); -@boxshadow_base_4: 0 4px 8px 0px rgba(0, 0, 0, 0.1); -@boxshadow_base_8: 0 8px 16px 0px rgba(0, 0, 0, 0.1); - - -// 卡片正常状态的阴影 -@boxshadow_card_normal: @boxshadow_base_1; -// 卡片漂浮起来时的阴影 -@boxshadow_card_raised: @boxshadow_base_2, @boxshadow_base_4, @boxshadow_base_8; diff --git a/source/less/_fonts.less b/source/less/_fonts.less deleted file mode 100755 index 37f3e09..0000000 --- a/source/less/_fonts.less +++ /dev/null @@ -1,39 +0,0 @@ -@font-face{ - font-family: 'Varela Round'; - src: url(https://cdn.jsdelivr.net/gh/xaoxuu/cdn-fonts@19.1.7/VarelaRound/VarelaRound-Regular.ttf); - font-weight: normal; - font-style: normal; -} -@font-face{ - font-family: 'Source Sans Pro'; - src: url(https://cdn.jsdelivr.net/gh/xaoxuu/cdn-fonts@master/SourceSansPro/SourceSansPro-Regular.ttf); - font-weight: normal; - font-style: normal; -} - -// 大部分文字字体 -@fontfamily_base: 'Varela Round', "Microsoft YaHei", "Source Sans Pro", "Helvetica Neue", Menlo, Monaco, monospace, "Lucida Console", sans-serif, Helvetica, "Hiragino Sans GB", "Hiragino Sans GB W3", Source Han Sans CN Regular, WenQuanYi Micro Hei, Arial, sans-serif; -// 代码字体 -@fontfamily_code: Menlo, Monaco, courier, monospace, "Lucida Console", 'Source Code Pro', "Microsoft YaHei", Helvetica, Arial, sans-serif, 'Ubuntu'; -// LOGO字体 -@fontfamily_logo: @fontfamily_base; - - -// 字号 -// base -@fontsize_base: 16px; -@fontsize_small: @fontsize_base * 0.88; -@fontsize_footnote: @fontsize_base * 0.7; -@lineheight_base: 1.5; -// title -@fontsize_h1: @fontsize_base * 1.5; -@fontsize_h2: @fontsize_base * 1.42; -@fontsize_h3: @fontsize_base * 1.28; -@fontsize_h4: @fontsize_base * 1.08; -@fontsize_h5: @fontsize_base * 1; -@fontsize_h6: @fontsize_base * 1; -// 文章列表中的标题 -@fontsize_list_title: @fontsize_base * 1.4; -// 文章页的标题 -@fontsize_article_title: @fontsize_h2 * 1.1; -@fontsize_article_title_phone: @fontsize_h2; diff --git a/source/less/_footer.less b/source/less/_footer.less deleted file mode 100755 index 5df9cd5..0000000 --- a/source/less/_footer.less +++ /dev/null @@ -1,66 +0,0 @@ -footer { - position: relative; - padding: 40px 10px 120px 10px; - width: 100%; - color: fade(@color_text_main, 50%); - margin: 0px auto; - font-size: @fontsize_small; - overflow: hidden; - text-align: center; - font-family: @fontfamily_base; - &.white, &.white a{ - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - } - &.white{ - color: fade(white, 50%); - } - &.white a{ - color: fade(white, 80%); - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - } - .licenses { - color: fade(@color_text_main, 50%); - text-decoration: underline; - } - .codename { - // color: @color_vue; - text-decoration: underline; - } - .social-wrapper { - display: flex; - justify-content: center; - flex-wrap: wrap; - margin: 4px @gap/2; - } - a { - color: fade(@color_text_main, 70%); - padding: 0; - .enable-trans(); - &:hover { - color: @color_text_highlight; - } - &.social { - position: relative; - display: inline-block; - text-align: center; - display: flex; - justify-content: center; - align-items: center; - width: 32px; - height: 32px; - margin: 4px; - border-radius: 100px; - &:hover { - background: fade(@theme_main, 10%); - color: @theme_main; - } - } - } - .copyright { - margin-top: @gap; - font-size: @fontsize_small * 0.9; - } - @media(max-width: @on_pad){ - justify-content: center; - } -} diff --git a/source/less/_header.less b/source/less/_header.less deleted file mode 100755 index b90faa1..0000000 --- a/source/less/_header.less +++ /dev/null @@ -1,311 +0,0 @@ -.l_header { - @iconW: 32px; - @iconMargin: 4px; - position: fixed; - z-index: 9999; - top: 0; - overflow: hidden; - width: 100%; - font-size: @fontsize_base; - line-height: @height_navbar; - height: @height_navbar; - overflow: hidden; - font-family: @fontfamily_base; - padding: 0 @gap; - margin-bottom: @gap; - box-shadow: @boxshadow_card_normal; - .wrapper{ - padding: auto @gap; - max-width: @width_container; - margin: auto; - .enable-trans(); - a.logo { - color: @color_text_header; - } - } - &.no_sidebar{ - .wrapper{ - max-width: @on_pad; - margin: auto; - } - } - .wrapper.sub{ - .enable-trans(); - transform: translateY(-@height_navbar); - .logo{ - // padding-left: 0; - @media(max-width: @on_phone){ - .enable-trans(); - padding-left: @gap; - padding-right: 0; - font-size: @fontsize_base; - } - } - } - .nav--main,.nav-sub{ - height: @height_navbar; - } - background: @theme_cardbg; - &.hide{ - transform: translateY(100px) scale(0); - } - &.show{ - transform: translateY(0) scale(1); - } - &, a{ - .txt-ellipsis; - height: @height_navbar; - line-height: @height_navbar; - color: @theme_main; - } - &:extend(.z-depth-nav); // 适合深色导航栏背景 - - .enable-trans(); - &:hover { - // &:extend(.z-depth-nav-raised); - } - &:active { - - } - .logo { - padding: 0 @gap*1.5; - font-size: @fontsize_logo; - font-family: @fontfamily_logo; - @media(max-width: @on_phone){ - padding: 0 @gap; - } - &.img{ - padding: 0 @gap 0 0; - } - img{ - height: 100%; - } - letter-spacing: 0; - } - img.logo { - padding: 4px 0; - } - - .nav-sub{ - .logo { - padding: 0 @gap*1.5; - font-size: @fontsize_base; - font-family: @fontfamily_base; - @media(max-width: @on_phone){ - letter-spacing: -0.5px; - padding-top: 1px; - } - - } - } - .menu{ - position:relative; - flex: 1 0 auto; - height: @height_navbar; - .enable-trans(); - margin: 0 @gap 0 0; - ul > li > a{ - .enable-trans(); - display: block; - padding: 0 8px; - color: fade(@color_text_main, 85%); - &.current{ - border-bottom: @loading_height solid fade(@theme_main, 80%); - } - &:hover{ - color: @theme_main; - border-bottom: @loading_height solid @theme_main; - background: fade(@theme_main, 10%); - } - &:active,&.active{ - color: @theme_main; - border-bottom: @loading_height solid @theme_main; - } - } - @media(max-width: @on_phone){ - display:none; - } - } - .switcher{ - display: none; - font-size: @fontsize_base; - line-height: @height_navbar; - .s-toc { - display: none; - } - @media(max-width: @on_pad){ - .s-toc { - display: block; - } - } - & > li{ - height: @height_navbar - @gap; - .enable-trans(); - margin: 2px; - @height: @height_navbar - @gap; - @media(max-width: @on_phone){ - margin: 0; - height: @height; - } - a{ - display: flex; - justify-content: center; - align-items: center; - width: @height; - height: @height; - border-radius: 100px; - .enable-trans(); - &:hover { - background: fade(@theme_main, 15%); - } - @media(max-width: @on_phone){ - width: @iconW; - height: @height; - } - } - } - @media(max-width: @on_phone){ - display: flex; - padding-left: @gap/2; - padding-right: @gap - 6px; - } - } - .nav-sub .switcher{ - display: flex; - } - .m_search { - position: relative; - display: flex; - width: @width_sidebar; - height: @height_navbar; - @media(max-width: @on_desktop){ - width: @width_sidebar_m; - } - .form { - position: relative; - display: flex; - width: 100%; - margin: auto; - justify-content: flex-start; - align-items: center; - } - .icon,.input{ - .enable-trans(.3s); - } - .icon { - position: absolute; - width: @iconW; - left: @iconMargin+1px; - font-size: @fontsize_small; - color: fade(@color_text_main, 70%); - } - .input { - display: block; - font-size: @fontsize_small; - padding-top: 8px; - padding-bottom: 8px; - width: 100%; - color: @color_text_main; - background: fade(darken(@theme_cardbg, 5%), 75%); - box-shadow: none; - box-sizing: border-box; - padding-left: @iconW + @iconMargin; - @media(max-width: @on_phone){ - padding-left: @iconW + @iconMargin; - } - border-radius: @border_radius_searchbar; - border: 1px dashed transparent; - .set-placeholder({ - color: fade(@color_text_main, 50%); - }); - &:hover{ - color: @color_text_in_header; - ~.icon{ - color: fade(@theme_main, 80%); - } - border: 1px solid fade(@theme_main, 60%); - } - &:focus { - ~.icon{ - color: @theme_main; - } - color: @color_text_main; - background: fade(@theme_main, 15%); - border: 1px solid @theme_main; - } - } - } - @media (max-width: @on_phone) { - padding: 0; - .m_search{ - width:0; - overflow: hidden; - position: absolute; - .enable-trans(); - margin: 0 @gap/2; - } - &.z_search-open{ - .logo{ - opacity:0; - } - .m_search{ - width: ~"calc(100vw - 2*@{gap} - 2*@{iconW})"; - } - } - } -} - -.menu-phone{ - .header{ - border-top-left-radius: @border_radius; - border-top-right-radius: @border_radius; - background-color: fade(@color_bg_navbar,90%); - color: @color_text_in_header; - font-size: @fontsize_base; - line-height: 1.8em; - padding: 8px @gap+6px; - } - position: fixed; - top: @height_navbar + @gap; - right: 0; - z-index:9999 + 1; - line-height: 2 * @gap; - border-right: 0; - box-shadow: @boxshadow_card_raised; - border-radius: @border_radius; - transform: translate3d(-40px, -40px, 0) scale(0,0); - transform-origin: right top; - .enable-trans(); - &:hover { - box-shadow: @boxshadow_card_raised; - } - &:active { - box-shadow: @boxshadow_card_normal; - } - nav { - padding: @gap/2 0px; - .nav { - height: @height_cell; - line-height: @height_cell; - position: relative; - display: block; - color: @black; - padding: 2px 20px; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - &:hover,&.active{ - border-left: 4px solid @theme_main; - background: fade(@theme_main, 10%); - } - } - } -} -.cover-wrapper{ - .l_header{ - .enable-trans(0.5s); - transform: translateY(-1.5*@height_navbar); - &.show{ - transform: translateY(0); - } - } -} diff --git a/source/less/_layout.less b/source/less/_layout.less deleted file mode 100755 index 1151cc6..0000000 --- a/source/less/_layout.less +++ /dev/null @@ -1,58 +0,0 @@ -// start: 间距 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -@gap: 16px; -// end: 间距 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - - -// start: 布局尺寸 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -@on_phone: 580px; -@on_pad: 768px; -@on_laptop: 1024px; // 1024 + 285 -@on_desktop: 1350px; -// container -@width_container: 1080px; -@on_modal_threshold: 680px; -// 侧边栏宽度 -@width_sidebar: 285px; -@width_sidebar_m: 240px; -// 搜索框的宽度，建议和侧边栏宽度保持一致 -@width_searchbar: @width_sidebar; -@width_searchbar_m: @width_sidebar_m; -// 搜索框的高度，建议不要超出导航栏的高度 -@height_searchbar: 40px; -@searchbar_height_cover: 44px; -// 一个cell的高度 -@height_cell: 36px; - -// H2标题高度 -@height_h2: 2.5em; -// H3标题高度 -@height_h3: 1.5em; - -// end: 布局尺寸 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - - -// start: 导航栏 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -// 导航栏高度 -@height_navbar: 64px; -@fontsize_logo: @fontsize_base * 1.2; -@fontsize_header_switcher: 1.3em; -@fontsize_header: 1em; -// 定位条和页面加载的进度条的高度 -@loading_height: 2px; -// end: 导航栏 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - - -// start: 圆角 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -@border_radius: 12px; // 圆角半径，可以根据心情随时调整风格 -@border_radius_line: 4px; // 线的宽度和滚动条的宽度 -@border_radius_code_block: 4px; // 引用、代码块的圆角 - -@border_radius_searchbar: 8px; // 搜索框的圆角半径，可以根据心情随时调整风格 -// end: 圆角 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - - -// start: 文字对齐方向 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -@text_align_h1: left; -@text_align_h2: left; -@text_align_h3: left; -// end: 文字对齐方向 <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< diff --git a/source/less/_links.less b/source/less/_links.less deleted file mode 100755 index 8a9064f..0000000 --- a/source/less/_links.less +++ /dev/null @@ -1,92 +0,0 @@ -.article.typo.l_friends{ - .friends-group{ - .friend-content{ - display: flex; - flex-wrap: wrap; - margin: -@gap/2; - border-radius: @border_radius; - align-items: flex-start; - .friend-card{ - display: flex; - border-radius: @border_radius/4; - box-shadow: @boxshadow_card_normal; - padding: @gap/2 0; - margin: @gap/2; - margin-top: ~"calc(@{gap}*1.25 + 32px)"; - color: fade(@color_text_main, 80%); - background: darken(@color_bg_code_block, 10%); - justify-content: flex-start; - align-content: flex-start; - flex-direction: column; - width:~"calc(100%/4 - @{gap})"; - @media(max-width: @on_laptop){ - width:~"calc(100%/4 - @{gap})"; - } - @media(max-width: @on_pad){ - width:~"calc(100%/3 - @{gap})"; - } - @media(max-width: @on_phone){ - width:~"calc(100%/2 - @{gap})"; - } - &:hover{ - text-decoration: none; - transform: scale(1.05); - border-radius: @border_radius/2; - .friend-left{ - .avatar{ - transform: scale(1.2) rotate(12deg); - box-shadow: @boxshadow_card_raised; - } - } - } - .friend-left{ - display: flex; - align-self: center; - .avatar{ - width: 64px; - height: 64px; - .enable-trans(); - box-shadow: @boxshadow_card_normal; - margin: @gap @gap/2 @gap/4 @gap/2; - margin-top: ~"calc(-@{gap}*1.25 - 32px)"; - border-radius: 100%; - border: 2px solid white; - background: white; - } - } - .friend-right{ - margin: @gap/4 @gap/2; - display: flex; - flex-direction: column; - text-align: center; - p{ - text-align: center; - } - .friend-tags-wrapper{ - .enable-trans(); - margin-left: -2px; - word-break:break-all; - line-height: @fontsize_footnote; - } - p{ - margin: 0; - &.friend-name{ - font-family: @fontfamily_logo; - font-size: @fontsize_small; - line-height: @fontsize_small*1.5; - padding-top: 4px; - font-weight: bold; - } - &.tags{ - font-size: @fontsize_footnote; - display: inline; - background: none; - word-wrap: break-word; - padding-right: 4px; - } - } - } - } - } - } -} diff --git a/source/less/_main.less b/source/less/_main.less deleted file mode 100755 index 616350e..0000000 --- a/source/less/_main.less +++ /dev/null @@ -1,638 +0,0 @@ -.l_main { - width: ~"calc(100% - 1 * @{width_sidebar})"; - @media(max-width: @on_desktop) { - width: ~"calc(100% - 1 * @{width_sidebar_m})"; - } - @media(max-width: @on_pad) { - width: 100%; - } - padding-right: @gap; - &.no_sidebar{ - width: 100%; - padding-right: 0; - max-width: @on_pad; - margin: auto; - ~.l_side{ - display: none; - } - } - float: left; - .post-list { - position: relative; - margin: @gap auto; - column-gap: @gap; - @media(max-width: @on_phone) { - margin: 0; - } - &.multiple-columns{ - columns: 320px; // 支持多列 - } - :first-child{ - // margin-top: 0; - } - } - ul.popular-posts{ - h3{ - padding: 0; - margin: 0; - font-size: @fontsize_base; - } - } - #comments { - position: relative; - // padding-top: 1.5*@gap; - @media(max-width: @on_phone) { - // padding-top: @gap; - } - #valine_container{ - p{ - line-height: @lineheight_base; - } - img { - display: inline; - } - .info{ - // display: none; - } - .vwrap{ - border-radius: @border_radius; - border-style: dashed; - border: 1px dashed fade(@color_text_main, 30%); - .enable-trans(); - &:hover{ - border: 1px dashed fade(@theme_main, 100%); - } - .vheader{ - .vinput{ - border-radius: 0; - border-bottom: 1px dashed fade(@color_text_main, 30%); - &:hover{ - border-bottom: 1px dashed @theme_main; - } - &:focus{ - border-bottom: 1px solid @theme_main; - } - } - } - - .vedit .vctrl span { - color: @theme_main; - padding: 0; - margin: 10px; - } - - } - button{ - border: none; - padding-left: 2.4em; - padding-right: 2.4em; - font-weight: bold; - background-color: @theme_main; - color: @color_text_in_header; - border-radius: @border_radius/2; - .enable-trans(); - &:hover { - background: darken(@theme_main, 10%); - } - &:active { - // background: lighten(@theme_main, 20%); - } - } - blockquote{ - padding: @gap; - border-left: @border_radius_line solid @color_bg_quote; - // border-radius: @border_radius_code_block; - .enable-trans(); - p{ - text-align: left; - word-wrap: normal; - font-size: @fontsize_small; - line-height: @fontsize_small * 1.5; - } - } - pre code{ - border: none; - } - code{ - font-family: @fontfamily_code; - font-size: @fontsize_base * .8; - color: fade(@color_text_main, 90%); - } - a, .vemoji-btn, .vpreview-btn{ - color: @color_text_link; - .enable-trans(); - &:hover { - color: @color_text_highlight; - text-decoration: underline; - } - &:active { - color: darken(@color_text_highlight, 25%); - } - } - div.info a{ - font-size: @fontsize_footnote; - } - .vhead{ - span{ - &.vnick{ - color: fade(@color_text_main, 90%); - } - } - a{ - &.vnick{ - color: #ff9800; - font-weight: bold; - &:hover { - color: @color_text_highlight; - text-decoration: underline; - } - } - } - .vsys{ - margin: 2px; - padding: 1px 8px; - background-color: fade(@color_text_main, 10%); - } - - } - .vcard{ - .vquote{ - border-left: none; - } - .vh { - border-bottom: 1px dashed fade(@color_text_main, 10%); - } - } - .vmeta{ - .vat{ - font-weight: bold; - color: @theme_main; - .enable-trans(); - &:hover { - color: @color_text_highlight; - text-decoration: underline; - } - &:active { - color: darken(@color_text_highlight, 25%); - } - } - } - .vinput{ - color: @color_text_main; - } - p{ - color: @color_text_main; - } - } - .vemojis{ - justify-content: space-between; - i{ - width: auto; - height: 36px; - padding: 0; - margin: 8px 8px 0 8px; - #emoji{ - height: 24px; - margin-top: 6px; - background: transparent; - } - } - } - p{ - #emoji{ - display: inline; - max-height: 28px; - background: transparent; - } - } - } - .post-wrapper{ - // for firefox - column-break-inside: avoid; - break-inside: avoid-column; - } - .mobile-post() { - .post { - .meta { - margin-bottom: @gap; - .title { - font-size: @fontsize_article_title_phone; - } - } - .full-width { - margin-left: -@gap; - margin-right: -@gap; - padding-left: @gap; - padding-right: @gap; - width:~"calc(100% + 2 * @{gap})" - } - .auto-padding { - padding-left: @gap; - padding-right: @gap; - border-bottom-left-radius: @border_radius; - border-bottom-right-radius: @border_radius; - overflow: auto; - } - .highlight{ - margin-left: 0*@gap; - margin-right: 0*@gap; - width:~"calc(100% - 0 * @{gap})"; - } - @media(max-width:@on_phone) { - padding: 1.5*@gap @gap; - .highlight { - margin-left: 0*@gap; - margin-right: 0*@gap; - width:~"calc(100% - 0 * @{gap})"; - } - .auto-padding { - // padding-left: @gap; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - } - - } - } - .post-wrapper { - margin-bottom: @gap; - .post { - .meta { - margin-bottom: @gap; - .title { - font-size: @fontsize_list_title; - a { - font-size: @fontsize_list_title; - } - } - } - .full-width { - margin-left: -1.5*@gap; - margin-right: -1.5*@gap; - width:~"calc(100% + 3 * @{gap})" - } - .auto-padding { - padding-left: 1.5*@gap; - padding-right: 1.5*@gap; - border-bottom-left-radius: @border_radius; - border-bottom-right-radius: @border_radius; - overflow: auto; - } - } - .tags { - margin-bottom: -2*@gap; - } - @media(max-width:@on_phone) { - .tags { - margin-bottom: -1.5*@gap; - } - .mobile-post(); - } - - } - .widget{ - @media(max-width: @on_phone) { - border-radius: 0; - margin-left: 0; - margin-right: 0; - width: auto; - } - } - .post { - position: relative; - margin: @gap auto; - padding: 1.5*@gap; - // background: @theme_cardbg; - border-radius: @border_radius; - h1{ - font-weight: normal; - font-size: @fontsize_article_title; - line-height: @lineheight_base; - color: @color_text_main; - } - @media(max-width: @on_phone) { - border-radius: 0; - &:hover { - box-shadow: @boxshadow_card_normal; - } - } - .tags a{ - color: fade(@color_text_main, 70%); - } - .meta { - color: fade(@color_text_main, 70%); - &#header-meta{ - margin-top: 0; - margin-bottom: 1*@gap; - } - &#footer-meta{ - margin-top: 2*@gap; - margin-bottom: 0.5*@gap; - } - font-size: @fontsize_small * .95; - .aplayer,.thumbnail{ - .enable-trans(); - width: 65px; - height: 65px; - border-radius: 100%; - float: right; - margin: 4px; - box-shadow: @boxshadow_card_normal; - &:hover { - border-radius: 25%; - transform: scale(1.1); - box-shadow: @boxshadow_card_raised; - } - @media(max-width: @on_phone) { - &:hover { - border-radius: 100%; - transform: scale(1); - box-shadow: @boxshadow_card_normal; - } - } - } - .thumbnail{ - width: auto; - border-radius: 4px; - box-shadow: none; - &:hover { - border-radius: 4px; - transform: scale(1.1) rotate(4deg); - box-shadow: none; - } - } - .title { - // left: 0; - text-align: @text_align_h1; - font-size: @fontsize_article_title; - margin: 0; - @media(max-width: @on_phone) { - font-size: @fontsize_article_title_phone; - } - &:before { - // content: "#"; - } - a { - display: inline; - line-height: @lineheight_base; - font-weight: normal; - color: @color_text_main; - text-decoration: none; - font-size: @fontsize_article_title; - @media(max-width: @on_phone) { - font-size: @fontsize_article_title_phone; - } - &:hover { - color: @color_text_highlight; - } - } - } - @cellH: 28px; - .new-meta-box{ - @metaH: 24px; - .enable-trans(); - padding-top: 4px; - padding-bottom: 8px; - display: flex; - align-items: center; - flex-wrap: wrap; - .new-meta-item{ - color: fade(@color_text_main, 70%); - font-size: @fontsize_small * 1; - line-height: @metaH; - &.link-btns{ - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - .btn{ - font-size: @fontsize_small * .9; - line-height: @metaH - 4px; - color: white; - padding: 0 4px; - border-radius: 2px; - margin: 2px; - &:extend(.hoverable); - &:hover{ - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 8px 16px 0 rgba(0, 0, 0, 0.1); - } - i{ - padding-left: 3px; - font-size: @fontsize_small * 1; - } - p{ - color: white; - } - &:hover{ - color: white; - p{ - color: white; - } - } - } - } - .notlink{ - cursor: default; - &:hover{ - color: fade(@color_text_main, 70%); - p{ - color: fade(@color_text_main, 70%); - } - } - } - display: flex; - align-items: center; - justify-content: center; - padding: 2px; - margin: 0 8px 0 0; - border-radius: 4px; - &:last-child{ - margin-right: 0; - } - img,i{ - border-radius: 100%; - display: inline; - } - i{ - margin-right: 4px; - border-radius: 0; - &.fa-hashtag{ - margin-right: 1px; - } - } - p,a{ - color: fade(@color_text_main, 70%); - padding-left: 0; - padding-right: 4px; - } - a{ - font-family: @fontfamily_base; - display: flex; - justify-content: center; - align-items: center; - img{ - height: @metaH - 7px; - width: @metaH - 7px; - margin-right: 5px; - transform: translateY(-1px); - } - p{ - margin: 0; - padding-top: 2px; - font-weight: normal; - .enable-trans(); - } - &:hover{ - color: @color_text_highlight; - p{ - color: @color_text_highlight; - } - text-decoration: none; - } - } - } - .share-body{ - height: @metaH - 2px; - display: flex; - a{ - padding: 0; - margin-right: 4px; - img{ - height: @metaH - 2px; - width: auto; - background: transparent; - } - } - } - - } - - } - .full-width,.highlight{ - margin-left: 0*@gap; - margin-right: 0*@gap; - width:~"calc(100% - 0 * @{gap})"; - } - - img { - display: flex; - justify-content: center; - align-items: center; - max-width: 100%; - border-radius: 4px; - background: none; - } - span img{ - display: inline-block; - } - a { - img{ - display: inline; - } - } - } - @media(max-width:@on_pad) { - padding-right: 0; - @media(max-width: @on_phone) { - width: 100%; - } - .mobile-post(); - } - - .prev-next{ - width: 100%; - display: flex; - justify-content: space-between; - align-items: baseline; - color: fade(@color_text_main, 50%); - margin: 0; - .prev{ - text-align: left; - border-top-right-radius: 32px; - border-bottom-right-radius: 32px; - } - .next{ - text-align: right; - border-top-left-radius: 32px; - border-bottom-left-radius: 32px; - } - p{ - margin: @gap; - } - a{ - color: fade(@color_text_link, 90%); - } - section{ - color: fade(@color_text_main, 80%); - padding: @gap; - border-radius: @border_radius; - &:hover { - color: @color_text_highlight; - } - } - @media(max-width:@on_phone) { - section{ - border-radius: 0; - } - } - - } - -} - -.alert { - display: none; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - z-index: 99999; - text-align: center; - padding: 24px 36px 22px 36px; - border-radius: @border_radius_code_block; - box-shadow: @boxshadow_card_normal; - font-family: @fontfamily_base; - font-weight: bold; - font-size: @fontsize_base; - - &.alert-success { - color: darken(@color_mac_maximize, 20%); - background-color: lighten(@color_mac_maximize, 40%); - } - - &.alert-info { - color: darken(@color_mac_finder, 20%); - background-color: lighten(@color_mac_finder, 40%); - } - - &.alert-warning { - color: darken(@color_mac_minimize, 20%); - background-color: lighten(@color_mac_minimize, 40%); - } - - &.alert-danger { - color: darken(@color_mac_close, 20%); - background-color: lighten(@color_mac_close, 40%); - } - -} - -details { - display: block; - background: @color_bg_code_block; - padding: @gap; - margin: .6em 0; - border: 1px solid darken(@color_bg_code_block, 10%); - border-radius: @border_radius_code_block; - .enable-trans(); - summary { - cursor: pointer; - padding: @gap; - margin: -@gap; - color: fade(@color_text_main, 70%); - font-size: @fontsize_base * .95; - font-weight: bold; - &:hover { - color: @color_text_highlight; - } - } -} diff --git a/source/less/_normalize.less b/source/less/_normalize.less deleted file mode 100755 index 2122dcb..0000000 --- a/source/less/_normalize.less +++ /dev/null @@ -1,462 +0,0 @@ -/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined for any HTML5 element in IE 8/9. - * Correct `block` display not defined for `details` or `summary` in IE 10/11 - * and Firefox. - * Correct `block` display not defined for `main` in IE 11. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section, -summary { - display: block; -} - -/** - * 1. Correct `inline-block` display not defined in IE 8/9. - * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. - */ - -audio, -canvas, -progress, -video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9/10. - * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. - */ - -[hidden], -template { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ - -a:active, -a:hover { - outline: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Address styling not present in IE 8/9/10/11, Safari, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 65%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.6em; -} - -sub { - bottom: -0.3em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9/10. - */ - -img { - border: 0; -} - -/** - * Correct overflow not hidden in IE 9/10/11. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari. - */ - -figure { - margin: 1em 40px; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; - border: 0; - border-radius: 1px; - border-bottom: 1px solid fade(@color_text_main, 10%); -} - -/** - * Contain overflow in all browsers. - */ - -pre { - overflow: auto; -} - -/** - * Address odd `em`-unit font size rendering in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -/* Forms - ========================================================================== */ - -/** - * Known limitation: by default, Chrome and Safari on OS X allow very limited - * styling of `select`, unless a `border` property is set. - */ - -/** - * 1. Correct color not being inherited. - * Known issue: affects color of disabled elements. - * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. - */ - -button, -input, -optgroup, -select, -textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address `overflow` set to `hidden` in IE 8/9/10/11. - */ - -button { - overflow: visible; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. - * Correct `select` style inheritance in Firefox. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -input { - line-height: normal; -} - -/** - * It's recommended that you don't attempt to style these elements. - * Firefox's implementation doesn't respect box-sizing, padding, or width. - * - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Fix the cursor style for Chrome's increment/decrement buttons. For certain - * `font-size` values of the `input`, it causes the cursor style of the - * decrement button to change from `default` to `text`. - */ - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari and Chrome - * (include `-moz` to future-proof). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/** - * Remove inner padding and search cancel button in Safari and Chrome on OS X. - * Safari (but not Chrome) clips the cancel button when the search input has - * padding (and `textfield` appearance). - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9/10/11. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Remove default vertical scrollbar in IE 8/9/10/11. - */ - -textarea { - overflow: auto; -} - -/** - * Don't inherit the `font-weight` (applied by a rule above). - * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. - */ - -optgroup { - font-weight: bold; -} - -/* Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - margin-top: .7em; - margin-bottom: .7em; - width: 100%; - th { - background-color: darken(@color_bg_code_block, 5%); - } - td, - th { - padding: 4px 16px; - border: 1px solid darken(@color_bg_code_block, 10%); - } - tr { - background-color: lighten(@color_bg_code_block, 4%); - } - tbody>tr { - .enable-trans(); - &:hover{ - background-color: darken(@color_bg_code_block, 5%); - } - } - &>thead>th { - // border-bottom-width: 2px; - } -} - -overflow{ - table{ - overflow: auto; - display: block; - tr{ - word-break: keep-all; - } - } -} - -td, -th { - padding: 0; -} diff --git a/source/less/_pagination.less b/source/less/_pagination.less deleted file mode 100755 index e6737ab..0000000 --- a/source/less/_pagination.less +++ /dev/null @@ -1,40 +0,0 @@ -/* Pagination */ - -#page-nav { - position: relative; - width: 100%; - padding: 20px 0px; - - .page-number, - .space { - display: none; - } - .next, - .prev { - font-size: 0.8125em; - font-weight: normal; - color: lighten(@black, 40%); - border-radius: 2px; - - &:hover { - color: @black; - } - span { - line-height: 20px; - vertical-align: middle; - - &.icon { - position: relative; - top: 1px; - } - } - } - .next { - float: right; - padding: 0 7px 2px 10px; - } - .prev { - float: left; - padding: 0 10px 2px 7px; - } -} diff --git a/source/less/_search.less b/source/less/_search.less deleted file mode 100755 index d9c1561..0000000 --- a/source/less/_search.less +++ /dev/null @@ -1,311 +0,0 @@ -#u-search { - display: none; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 60px 20px; - z-index: 999999; - - @media (max-width: @on_modal_threshold) { - padding: 0px; - } - .modal { - position: fixed; - height: 80%; - width: 100%; - max-width: 640px; - left: 50%; - top: 0; - margin: 64px 0px 0px -320px; - background: #fff; - box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12); - z-index: 3; - border-radius: @border_radius; - overflow: hidden; - @media (max-width: @on_modal_threshold) { - box-shadow: none; - max-width: none; - top: 0; - left: 0; - margin: 0; - height: 100%; - border-radius: 0; - } - - .modal-ajax-content { - opacity: 0; - visibility: hidden; - .enable-trans(); - - &.loaded { - opacity: 1; - visibility: visible; - } - } - .modal-header { - position: relative; - width: 100%; - height: @height_navbar; - background-color: @color_bg_navbar; - z-index: 3; - border-top-left-radius: @border_radius; - border-top-right-radius: @border_radius; - @media (max-width: @on_modal_threshold) { - padding: 0px; - border-radius: 0; - } - &:extend(.z-depth-nav); - .enable-trans(); - &:hover { - &:extend(.z-depth-nav-raised); - } - &:active { - - } - .btn-close { - display: block; - position: absolute; - width: 50px + 5px; - height: @height_navbar; - top: 0; - right: 0; - color: @color_text_in_header; - cursor: pointer; - text-align: center; - line-height: @height_navbar; - vertical-align: middle; - font-size: @fontsize_header_switcher; - .enable-trans(); - z-index: 2; - - &:hover { - transform: rotate(90deg); - } - } - .modal-loading { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 2px; - background: transparent; - z-index: 1; - - .modal-loading-bar { - display: block; - position: relative; - width: 0%; - height: 100%; - background: fade(@white, 100%); - .enable-trans(); - } - } - #u-search-modal-form { - position: relative; - width: 100%; - height: 100%; - z-index: 2; - - #u-search-modal-input { - width: 100%; - padding: 0px 50px; - height: @height_navbar; - font-size: @fontsize_base; - line-height: @lineheight_base; - vertical-align: middle; - color: @color_text_in_header; - border: none; - background: transparent; - .enable-trans(); - font-weight: thin; - appearance: none; - box-shadow: none; - - &:focus { - border-top-left-radius: @border_radius; - border-top-right-radius: @border_radius; - } - } - } - #u-search-modal-btn-submit { - position: absolute; - top: 0; - left: 0; - padding-left: 5px; - padding-top: 2px; - background: transparent; - border: none; - width: 50px; - height: @height_navbar; - vertical-align: middle; - font-size: @fontsize_header_switcher; - color: @color_text_in_header; - z-index: 2; - } - } - .modal-footer { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 50px; - padding: 0px 15px; - background: #fff; - border-top: 1px solid lighten(@black,60%); - - .logo { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - text-align: center; - z-index: 0; - - a { - display: inline-block; - } - &.google img { - height: 24px; - margin-top: 13px; - } - &.baidu img { - height: 22px; - margin-top: 14px; - } - img { - position: relative; - display: inline-block; - width: auto; - height: 18px; - margin-top: 16px; - } - } - .modal-error { - position: relative; - float: left; - vertical-align: middle; - line-height: 50px; - font-size: 13px; - z-index: 1; - } - .modal-metadata { - position: relative; - float: left; - vertical-align: middle; - line-height: 50px; - font-size: 13px; - z-index: 1; - } - .nav { - position: relative; - display: block; - float: right; - vertical-align: middle; - font-size: 13px; - font-weight: 500; - line-height: 50px; - color: @color_grey; - cursor: pointer; - z-index: 1; - - &:hover { - color: @black; - } - &.btn-next { - margin-left: 10px; - } - .icon { - font-size: 12px; - } - } - } - .modal-body { - position: absolute; - padding: 64px 50px 80px 50px; - width: 100%; - height: 100%; - top: 0; - left: 0; - overflow-y: scroll; - -webkit-overflow-scrolling: touch; - background-color: @theme_cardbg; - border-radius: @border_radius; - @media (max-width: @on_modal_threshold) { - padding: 60px 20px 80px 20px; - } - .modal-results { - list-style: none; - - li { - border-bottom: 1px solid #e6e8ea; - - &:last-child { - border-bottom: none; - } - } - .result { - position: relative; - display: block; - padding-top: 20px; - text-decoration: none; - - &:hover { - .digest, .icon { - // color: @black; - } - .title { - color: @color_text_highlight; - } - } - .title { - display: inline-block; - max-width: 100%; - color: lighten(@color_text_main, 10%); - font-size: @fontsize_base; - font-weight: bold; - padding: 1px; - margin-bottom: 2px; - line-height: @lineheight_base; - white-space: normal; - overflow: hidden; - text-overflow: ellipsis; - } - .digest { - display: block; - white-space: inherit; - overflow: hidden; - word-break: break-all; - text-overflow: ellipsis; - font-size: @fontsize_small; - line-height: @lineheight_base; - color: lighten(@color_text_main, 30%); - .enable-trans(); - em { - // font-weight: bold; - } - } - .icon { - position: absolute; - top: 50%; - right: 0; - margin-top: -4px; - font-size: 11px; - color: @color_grey; - } - } - } - } - } - .modal-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0,0,0,0.7); - z-index: 1; - } -} diff --git a/source/less/_side.less b/source/less/_side.less deleted file mode 100755 index f83bc2d..0000000 --- a/source/less/_side.less +++ /dev/null @@ -1,387 +0,0 @@ -.l_side { - width: @width_sidebar; - float: right; - position: relative; - display: flex; - flex-direction: column; - @media(max-width: @on_desktop) { - width: @width_sidebar_m; - } - @media(max-width: @on_pad) { - // margin: @gap 0 0; - width: 100%; - } - -} - -.widget{ - z-index: 0; - background: @theme_cardbg; - margin-top: @gap; - font-family: @fontfamily_base; - font-size: @fontsize_base; - border-radius: @border_radius; - width: 100%; - display: none; - &.desktop{ - display: block; - } - @media(max-width: @on_pad) { - display: none !important; - &.mobile{ - display: block !important; - } - } - @media(max-width: @on_phone) { - width: ~"calc(100% - 2 * @{gap})"; - margin: @gap @gap 0 @gap; - display: none !important; - &.mobile{ - display: block !important; - } - } - header{ - border-top-left-radius: @border_radius; - border-top-right-radius: @border_radius; - font-weight: bold; - line-height: 1.5em; - padding: ~"calc(@{gap} - 2px)"; - padding-bottom: 0; - &,a{ - color: @theme_main; - } - a:hover{ - color: @color_text_highlight; - } - span.name{ - margin-left: @gap/2; - } - } - .content{ - text-align: justify; - padding: @gap/2 0; - max-height: ~"calc(100% - @{height_navbar} - 12.5 * @{gap})"; - max-width: 100%; - p { - margin: .6em 0; - } - ul > li{ - a{ - color: fade(@color_text_main, 80%); - padding: 0 @gap; - padding-left: @gap/2 + 4px; - line-height: @height_cell; - display: flex; - justify-content: space-between; - align-content: center; - border-left: 4px solid transparent; - .enable-trans(); - } - } - ul.entry, ul.popular-posts{ - a{ - .name{ - flex:auto; - &:extend(.txt-ellipsis); - color: fade(@color_text_main, 80%); - } - .badge{ - flex:none; - font-weight: normal; - font-size: @fontsize_small; - color: fade(@color_text_main, 70%); - } - &:hover{ - border-left: 4px solid @theme_main; - background: fade(@theme_main, 10%); - } - &.active{ - border-left: 4px solid @theme_main; - .name{ - color: @theme_main; - } - .badge{ - color: fade(@theme_main, 90%); - } - } - &:active{ - border-left: 8px solid @theme_main; - } - &.child{ - padding-left: @gap*2; - } - } - } - } - - - &.blogger{ - .enable-trans(); - .content{ - padding: 0; - div.avatar{ - display: flex; - justify-content: center; - } - img{ - padding: 0; - margin: 0; - display: flex; - justify-content: center; - width: @width_sidebar; - height: @width_sidebar; - border-top-left-radius: @border_radius; - border-top-right-radius: @border_radius; - @media(max-width: @on_desktop) { - width: @width_sidebar_m; - height: @width_sidebar_m; - } - @media(max-width: @on_pad){ - width: 96px; - height: 96px; - border-radius: 100%; - margin-top: @gap/2; - padding: @gap/2; - } - - } - h2{ - text-align: center; - font-weight: bold; - margin: @gap/2; - margin-top: @gap; - @media(max-width: @on_pad){ - margin: @gap/2; - } - } - p{ - font-size: @fontsize_base; - font-weight: bold; - text-align: center; - margin: @gap/2 @gap/2 0 @gap/2; - empty-cells: hide; - } - .social-wrapper{ - display: flex; - justify-content: space-between; - flex-wrap: wrap; - margin: 4px @gap/4; - a{ - color: fade(@color_text_main, 70%); - padding: 0; - .enable-trans(); - &:hover{ - color: @color_text_highlight; - } - &.social { - display: flex; - justify-content: center; - align-items: center; - width: 32px; - height: 32px; - margin: 4px; - border-radius: 100px; - &:hover { - background: fade(@theme_main, 10%); - color: @theme_main; - } - } - } - @media(max-width: @on_pad){ - justify-content: center; - display: none; - } - } - } - @media(max-width: @on_pad){ - box-shadow: none; - background: transparent; - margin-top: 2*@gap; - backdrop-filter: none; - } - } - - &.text{ - .content{ - font-size: @fontsize_small; - word-break: break-all; - padding: @gap/4 @gap; - line-height: @fontsize_small + 8px; - a{ - color: @color_text_link; - .enable-trans(); - &:hover { - color: @color_text_highlight; - text-decoration: underline; - } - &:active { - color: darken(@color_text_highlight, 25%); - } - } - p btn { - .btn-wrapper(); - } - } - } - - &.list{ - .content{ - padding: @gap/2 0; - a{ - font-size: @fontsize_small; - font-weight: bold; - &:hover{ - text-decoration: none; - } - i{ - color: fade(@color_text_main,70%); - line-height: @height_cell; - margin-right: 3px; - } - img{ - display: inline; - vertical-align: middle; - height: 18px; - width: 18px; - margin-bottom: 4px; - &#round{ - border-radius: 100%; - } - } - } - } - } - &.grid{ - .content{ - ul.grid{ - border: none; - display: flex; - flex-wrap: wrap; - justify-content: space-around; - padding: 0 @gap; - a{ - text-align: center; - border-radius: @border_radius; - margin: 4px 0; - padding: 4px 8px; - display: flex; - flex-direction: column; - align-items: center; - font-size: @fontsize_small * .9; - font-weight: bold; - line-height: @fontsize_small * 1.3; - color: fade(@color_text_main, 70%); - i{ - margin-top: .3em; - margin-bottom: .3em; - font-size: 1.8em; - } - img{ - display: inline; - vertical-align: middle; - margin-bottom: 4px; - &#round{ - border-radius: 100%; - } - } - border: 1px solid transparent; - &:hover { - color: @theme_main; - background: fade(@theme_main, 10%); - border-radius: 4px; - } - &:active { - color: @theme_main; - } - &.active { - color: @theme_main; - border: 1px solid @theme_main; - } - } - } - } - } - &.category{ - .content{ - font-size: @fontsize_small; - font-weight: bold; - } - } - - &.tagcloud{ - .content{ - text-align: justify; - padding: @gap/2 @gap; - a{ - display:inline-block; - .enable-trans(.1s); - line-height: 1.6em; - &:hover{ - color: @color_text_highlight !important; //to cover inline style. - text-decoration: underline - } - } - } - } - - &.related_posts{ - .content{ - font-size: @fontsize_small; - font-weight: bold; - h3{ - font-size: @fontsize_small; - font-weight: bold; - margin: 0; - a{ - line-height: inherit; - padding-top: 4px; - padding-bottom: 4px; - } - } - } - } - - &.qrcode{ - .content{ - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-around; - padding-left: @gap; - padding-right: @gap; - img{ - margin-bottom: 4px; - } - margin-bottom: 4px; - } - } -} - -.l_side > .widget.page{ - .content{ - padding-top: 0; - padding-left: @gap - 4px; - padding-right: @gap - 4px; - } -} - -.aplayer-container{ - display: flex; - justify-content: center; - min-height: 100px; - meting-js{ - max-width: 100%; - } -} -.aplayer{ - max-width: 500px; - border-radius: 4px; - color: @color_text_main; - font-family: @fontfamily_base; - .aplayer-list{ - text-align: left; - } - @media(max-width: @on_phone){ - border-radius: @border_radius; - } -} diff --git a/source/less/_toc.less b/source/less/_toc.less deleted file mode 100755 index b1d8620..0000000 --- a/source/less/_toc.less +++ /dev/null @@ -1,110 +0,0 @@ -.l_side .toc-wrapper{ - z-index: 1; - overflow: hidden; - border-radius: @border_radius; - position: sticky; - top: @height_navbar + @gap; - .enable-trans(); - header{ - position: sticky; - width: 100%; - top: 0; - padding-bottom: @gap/4; - } - .content{ - max-height: ~"calc(100vh - 5 * @{gap} - @{height_navbar})";; - overflow: auto; - a { - border-left: 4px solid transparent; - &:hover{ - background: fade(@theme_main, 10%); - } - &:active{ - border-left: 8px solid @theme_main; - } - &.active{ - color: @theme_main; - border-left: 4px solid @theme_main; - } - } - } - &.active{ - position: fixed; - box-shadow: @boxshadow_card_raised; - top: @height_navbar; - header{ - .s-toc{ - transform: rotate(30deg); - } - } - width: @width_sidebar; - @media(max-width: @on_desktop) { - width: @width_sidebar_m; - } - @media(max-width: @on_pad) { - width: ~"calc(100% - 2 * @{gap})"; - } - } - .enable-trans(); - @media(max-width: @on_pad){ - position: fixed; - max-height: 1000px; - width: ~"calc(100% - 2 * @{gap})"; - top: @height_navbar; - box-shadow: @boxshadow_card_raised; - visibility: hidden; - transform: scale(0,0); - transform-origin: right top; - &.active{ - visibility: visible; - transform: scale(1,1); - } - } - - a { - padding-left: 8px; - color: fade(@color_text_main, 70%); - font-size: @fontsize_small; - display: inline-block; - } - ol{ - .toc-item.toc-level-1 { - .toc-child a{ - padding-left: 0.8*@gap; - font-weight: normal; - } - } - .toc-item.toc-level-2 { - .toc-child a{ - padding-left: 1.6*@gap; - font-weight: normal; - } - } - .toc-item.toc-level-3 { - .toc-child a{ - padding-left: 2.4*@gap; - font-weight: normal; - } - } - .toc-item.toc-level-4 { - .toc-child a{ - padding-left: 3.2*@gap; - font-weight: normal; - } - } - li{ - a{ - padding: 0 @gap/2 0 (@gap - 5px); - font-weight: bold; - width: 100%; - - } - width: auto; - text-align: left; - // &:extend(.txt-ellipsis); - } - } - &:empty{ - display:none; - } -} diff --git a/source/less/_tog.less b/source/less/_tog.less deleted file mode 100755 index 461c6cc..0000000 --- a/source/less/_tog.less +++ /dev/null @@ -1,39 +0,0 @@ -.tog{ - position:fixed; - top: @height_navbar + @gap * 2; - right: ~"calc((100% - @{container-width})/2)"; - .enable-trans(); - @media(max-width: @width_container){ - right: 0; - } - @media(max-width: @on_phone){ - right: -@width_sidebar; - &.active{ - transform: translateX(-@width_sidebar); - } - } - width: @width_sidebar + 6px; - z-index:3; - padding: @gap; - border-left: 6px solid @color_bg_navbar; - background: @color_text_in_header; - a { - display: inline-block; - &:hover,&:active,&.active{ - color: @color_text_highlight; - } - } - ol{ - &.toc-child{ - padding-left: @gap; - } - li{ - list-style:none; - width: auto; - &:extend(.txt-ellipsis); - } - } - &:empty{ - display:none; - } -} diff --git a/source/less/_typo.less b/source/less/_typo.less deleted file mode 100755 index cab17d6..0000000 --- a/source/less/_typo.less +++ /dev/null @@ -1,334 +0,0 @@ -@charset "utf-8"; -.typo { - font-size:1.6rem; - @media (max-width: @on_phone) { - padding: 0px 20px; - } -} -/* 内外边距通常让各个浏览器样式的表现位置不同 */ -body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section { - margin: 0; - padding: 0; -} - -/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ -article, aside, details, figcaption, figure, footer, header, menu, nav, section { - display: block; -} - -/* HTML5 媒体文件跟 img 保持一致 */ -audio, canvas, video { - display: inline-block; -} - -/* 要注意表单元素并不继承父级 font 的问题 */ -body, button, input, select, textarea { - font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans; -} - -button::-moz-focus-inner, -input::-moz-focus-inner { - padding: 0; - border: 0; -} - -/* 去掉各Table cell 的边距并让其边重合 */ -table { - border-collapse: collapse; - border-spacing: 0; -} - -/* 去除默认边框 */ -fieldset, img { - border: 0; -} - -/* 块/段落引用 */ -blockquote { - position: relative; - color: #999; - font-weight: 400; - border-left: 1px solid #1abc9c; - padding-left: 1em; - margin: 1em 3em 1em 2em; -} - -@media only screen and ( max-width: 640px ) { - blockquote { - margin: 1em 0; - } -} - -/* Firefox 以外，元素没有下划线，需添加 */ -acronym, abbr { - border-bottom: 1px dotted; - font-variant: normal; -} - -/* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */ -abbr { - cursor: help; -} - -/* 一致的 del 样式 */ -del { - text-decoration: line-through; -} - -address, caption, cite, code, dfn, em, th, var { - font-style: normal; - font-weight: 400; -} - -/* 去掉列表前的标识, li 会继承，大部分网站通常用列表来很多内容，所以应该当去 */ -ul, ol { - list-style: none; -} - -/* 对齐是排版最重要的因素, 别让什么都居中 */ -caption, th { - text-align: left; -} - -q:before, q:after { - content: ''; -} - -/* 统一上标和下标 */ -sub, sup { - font-size: 75%; - line-height: 0; - position: relative; -} - -:root sub, :root sup { - vertical-align: baseline; /* for ie9 and other modern browsers */ -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* 让链接在 hover 状态下显示下划线 */ -a { - color: #1abc9c; -} - -a:hover { - text-decoration: underline; -} - -.typo a { - border-bottom: 1px solid #1abc9c; -} - -.typo a:hover { - border-bottom-color: #555; - color: #555; - text-decoration: none; -} - -/* 默认不显示下划线，保持页面简洁 */ -ins, a { - text-decoration: none; -} - -/* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的， - * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号 - * 关于 标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element - * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated - * 一篇关于 标签的很好文章：http://html5doctor.com/u-element/ - */ -u, .typo-u { - text-decoration: underline; -} - -/* 标记，类似于手写的荧光笔的作用 */ -mark { - background: #fffdd1; - border-bottom: 1px solid #ffedce; - padding: 2px; - margin: 0 5px; -} - -/* 代码片断 */ -pre, code, pre tt { - font-family: Courier, 'Courier New', monospace; -} - -pre { - background: #f8f8f8; - border: 1px solid #ddd; - padding: 1em 1.5em; - display: block; - -webkit-overflow-scrolling: touch; -} - -/* 一致化 horizontal rule */ -hr { - border: none; - border-bottom: 1px solid #cfcfcf; - margin-bottom: 0.8em; - height: 10px; -} - -/* 底部印刷体、版本等标记 */ -small, .typo-small, - /* 图片说明 */ -figcaption { - font-size: 0.9em; - color: #888; -} - -strong, b { - font-weight: bold; - color: #000; -} - -/* 可拖动文件添加拖动手势 */ -[draggable] { - cursor: move; -} - -.clearfix:before, .clearfix:after { - content: ""; - display: table; -} - -.clearfix:after { - clear: both; -} - -.clearfix { - zoom: 1; -} - -/* 强制文本换行 */ -.textwrap, .textwrap td, .textwrap th { - word-wrap: break-word; - word-break: break-all; -} - -.textwrap-table { - table-layout: fixed; -} - -/* 提供 serif 版本的字体设置: iOS 下中文自动 fallback 到 sans-serif */ -.serif { - font-family: Palatino, Optima, Georgia, serif; -} - -/* 保证块/段落之间的空白隔行 */ -.typo p, .typo pre, .typo ul, .typo ol, .typo dl, .typo form, .typo hr, .typo table, -.typo-p, .typo-pre, .typo-ul, .typo-ol, .typo-dl, .typo-form, .typo-hr, .typo-table, blockquote { - margin-bottom: 1.2em -} - -h1, h2, h3, h4, h5, h6 { - font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; - font-weight: 100; - color: #000; - line-height: 1.35; -} - -/* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */ -.typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6, -.typo-h1, .typo-h2, .typo-h3, .typo-h4, .typo-h5, .typo-h6 { - margin-top: 1.2em; - margin-bottom: 0.6em; - line-height: 1.35; -} - -.typo h1, .typo-h1 { - font-size: 2em; -} - -.typo h2, .typo-h2 { - font-size: 1.8em; -} - -.typo h3, .typo-h3 { - font-size: 1.6em; -} - -.typo h4, .typo-h4 { - font-size: 1.4em; -} - -.typo h5, .typo h6, .typo-h5, .typo-h6 { - font-size: 1.2em; -} - -/* 在文章中，应该还原 ul 和 ol 的样式 */ -.typo ul, .typo-ul { - margin-left: 1.3em; - list-style: disc; -} - -.typo ol, .typo-ol { - list-style: decimal; - margin-left: 1.9em; -} - -.typo li ul, .typo li ol, .typo-ul ul, .typo-ul ol, .typo-ol ul, .typo-ol ol { - margin-bottom: 0.8em; - margin-left: 2em; -} - -.typo li ul, .typo-ul ul, .typo-ol ul { - list-style: circle; -} - -/* 同 ul/ol，在文章中应用 table 基本格式 */ -.typo table th, .typo table td, .typo-table th, .typo-table td, .typo table caption { - border: 1px solid #ddd; - padding: 0.5em 1em; - color: #666; -} - -.typo table th, .typo-table th { - background: #fbfbfb; -} - -.typo table thead th, .typo-table thead th { - background: #f1f1f1; -} - -.typo table caption { - border-bottom: none; -} - -/* 去除 webkit 中 input 和 textarea 的默认样式 */ -.typo-input, .typo-textarea { - -webkit-appearance: none; - border-radius: 0; -} - -.typo-em, .typo em, legend, caption { - color: #000; - font-weight: inherit; -} - -/* 着重号，只能在少量（少于100个字符）且全是全角字符的情况下使用 */ -.typo-em { - position: relative; -} - -.typo-em:after { - position: absolute; - top: 0.65em; - left: 0; - width: 100%; - overflow: hidden; - white-space: nowrap; - content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・"; -} - -/* Responsive images */ -.typo img { - max-width: 100%; -} diff --git a/source/style.less b/source/style.less deleted file mode 100755 index aab2f39..0000000 --- a/source/style.less +++ /dev/null @@ -1,17 +0,0 @@ -@charset "utf-8"; -@import "less/_defines.less"; -@import "less/_fonts.less"; -@import "less/_normalize.less"; -@import "less/_base.less"; -@import "less/_header.less"; -@import "less/_main.less"; -@import "less/_side.less"; -@import "less/_toc.less"; -@import "less/_archive.less"; -@import "less/_article.less"; -@import "less/_pagination.less"; -@import "less/_search.less"; -@import "less/_footer.less"; -@import "less/_color.less"; -@import "less/_layout.less"; -@import "less/_links.less";