mirror of
https://github.com/amehime/hexo-theme-shoka.git
synced 2026-04-05 02:16:56 +08:00
首页布局,音乐列表,代码块
This commit is contained in:
amehime
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,4 +1,4 @@
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
node_modules/
|
||||
yarn.lock
|
||||
yarn.lock
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
# Hexo Theme Shoka
|
||||
|
||||
[中文使用说明](https://shoka.lostyu.me/computer-science/note/theme-shoka-doc/)
|
||||
|
||||
## Usage
|
||||
|
||||
1. Clone this repository
|
||||
|
||||
64
_config.yml
64
_config.yml
@@ -7,28 +7,6 @@ assets: assets
|
||||
css: css
|
||||
js: js
|
||||
images: images
|
||||
#! ---------------------------------------------------------------
|
||||
#! DO NOT EDIT THE FOLLOWING `vendors` SETTINGS
|
||||
#! UNLESS YOU KNOW WHAT YOU ARE DOING
|
||||
#! Script dependencies will be combined with jsDelivr (cdn.jsdelivr.net)
|
||||
#! ---------------------------------------------------------------
|
||||
vendors:
|
||||
css:
|
||||
katex: npm/katex@0/dist/katex.min.css
|
||||
comment: css/comment.css
|
||||
js:
|
||||
pace: npm/pace-js@1.0.2/pace.min.js
|
||||
pjax: npm/pjax@0.2.8/pjax.min.js
|
||||
velocity: npm/velocity-animate@1.5.2/velocity.min.js
|
||||
velocity_ui: npm/velocity-animate@1.5.2/velocity.ui.min.js
|
||||
algolia: npm/algoliasearch@4/dist/algoliasearch-lite.umd.js
|
||||
instantsearch: npm/instantsearch.js@4/dist/instantsearch.production.min.js
|
||||
lazyload: npm/lozad@1/dist/lozad.min.js
|
||||
quicklink: npm/quicklink@2/dist/quicklink.umd.js
|
||||
mediumzoom: npm/medium-zoom@1.0.5/dist/medium-zoom.min.js
|
||||
valine: js/valine.js
|
||||
copy_tex: npm/katex@0/dist/contrib/copy-tex.min.js
|
||||
chart: npm/frappe-charts@1.5.0/dist/frappe-charts.min.iife.min.js
|
||||
|
||||
# themes/shoka/source/images/***
|
||||
favicon:
|
||||
@@ -53,7 +31,7 @@ font:
|
||||
# Global font settings used for all elements inside <body>.
|
||||
global:
|
||||
external: true
|
||||
family:
|
||||
family: Mulish
|
||||
size:
|
||||
|
||||
# Font settings for alternate title.
|
||||
@@ -66,7 +44,7 @@ font:
|
||||
title:
|
||||
external: true
|
||||
family: Noto Serif JP
|
||||
size: 2
|
||||
size: 2.5
|
||||
|
||||
# Font settings for headlines (<h1> to <h6>).
|
||||
headings:
|
||||
@@ -95,14 +73,6 @@ menu:
|
||||
# friends: /friends/ || heart
|
||||
# links: /links/ || magic
|
||||
|
||||
# themes/shoka/source/images/banner/***
|
||||
header_bg:
|
||||
- 1.jpg
|
||||
- 2.jpg
|
||||
- 3.jpg
|
||||
- 4.jpg
|
||||
- 5.jpg
|
||||
- 6.jpg
|
||||
|
||||
# Social Links
|
||||
# Usage: `Key: permalink || icon || color`
|
||||
@@ -180,8 +150,7 @@ reward:
|
||||
|
||||
# bgm
|
||||
audio:
|
||||
- 563563649 || 花の戦士 - 樱花大战~炽热之血
|
||||
- 430208037 || 偽りの空の先にあるもの - KOKIA
|
||||
- https://music.163.com/#/my/m/music/playlist?id=2031842656
|
||||
|
||||
# ---------------------------------------------------------------
|
||||
# Third Party Plugins & Services Settings
|
||||
@@ -213,7 +182,7 @@ valine:
|
||||
- nick
|
||||
- mail
|
||||
enableQQ: true
|
||||
masters: ['master@email.com', 'master2@email.com']
|
||||
masters: ['hash of master@email.com', 'hash of master2@email.com']
|
||||
masterTag: 主人
|
||||
tips: "昵称框中填入QQ号，将自动获取QQ昵称&邮箱&头像；其他邮箱由Gavatar提供头像。"
|
||||
|
||||
@@ -258,3 +227,28 @@ baidu_site_verification:
|
||||
|
||||
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
|
||||
baidu_push: false
|
||||
|
||||
|
||||
#! ---------------------------------------------------------------
|
||||
#! DO NOT EDIT THE FOLLOWING `vendors` SETTINGS
|
||||
#! UNLESS YOU KNOW WHAT YOU ARE DOING
|
||||
#! Script dependencies will be combined with jsDelivr (cdn.jsdelivr.net)
|
||||
#! ---------------------------------------------------------------
|
||||
vendors:
|
||||
css:
|
||||
katex: npm/katex@0/dist/katex.min.css
|
||||
comment: css/comment.css
|
||||
js:
|
||||
pace: npm/pace-js@1.0.2/pace.min.js
|
||||
pjax: npm/pjax@0.2.8/pjax.min.js
|
||||
fetch: npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js
|
||||
velocity: npm/velocity-animate@1.5.2/velocity.min.js
|
||||
velocity_ui: npm/velocity-animate@1.5.2/velocity.ui.min.js
|
||||
algolia: npm/algoliasearch@4/dist/algoliasearch-lite.umd.js
|
||||
instantsearch: npm/instantsearch.js@4/dist/instantsearch.production.min.js
|
||||
lazyload: npm/lozad@1/dist/lozad.min.js
|
||||
quicklink: npm/quicklink@2/dist/quicklink.umd.js
|
||||
mediumzoom: npm/medium-zoom@1.0.5/dist/medium-zoom.min.js
|
||||
valine: js/valine.js
|
||||
copy_tex: npm/katex@0/dist/contrib/copy-tex.min.js
|
||||
chart: npm/frappe-charts@1.5.0/dist/frappe-charts.min.iife.min.js
|
||||
|
||||
56
_images.yml
Normal file
56
_images.yml
Normal file
@@ -0,0 +1,56 @@
|
||||
- 6833939bly1giciryrr3rj20zk0m8nhk.jpg
|
||||
- 6833939bly1gicis081o9j20zk0m8dmr.jpg
|
||||
- 6833939bly1gicis3attqj20zk0m8k7l.jpg
|
||||
- 6833939bly1giciszlczyj20zk0m816d.jpg
|
||||
- 6833939bly1gicit31ffoj20zk0m8naf.jpg
|
||||
- 6833939bly1gicit4jrvuj20zk0m8785.jpg
|
||||
- 6833939bly1gicitcxhpij20zk0m8hdt.jpg
|
||||
- 6833939bly1gicitf0kl1j20zk0m87fe.jpg
|
||||
- 6833939bly1gicitht3xtj20zk0m8k5v.jpg
|
||||
- 6833939bly1gicitspjpbj20zk0m81ky.jpg
|
||||
- 6833939bly1gicitzannuj20zk0m8b29.jpg
|
||||
- 6833939bly1giciub8ja1j20zk0m81ky.jpg
|
||||
- 6833939bly1giciuja1j1j20zk0m8kjl.jpg
|
||||
- 6833939bly1giciukx8a7j20zk0m8aio.jpg
|
||||
- 6833939bly1giciundwu5j20zk0m8n9e.jpg
|
||||
- 6833939bly1giciusoyjnj219g0u0x56.jpg
|
||||
- 6833939bly1giciuv0socj20zk0m8qes.jpg
|
||||
- 6833939bly1gicivghyooj20zk0m8dir.jpg
|
||||
- 6833939bly1giclfb3vzhj20zk0m8wny.jpg
|
||||
- 6833939bly1giclfdu6exj20zk0m87hw.jpg
|
||||
- 6833939bly1giclffsa1cj20zk0m811l.jpg
|
||||
- 6833939bly1giclflwv2aj20zk0m84qp.jpg
|
||||
- 6833939bly1giclfw2t96j20zk0m8x6p.jpg
|
||||
- 6833939bly1giclg5ms2rj20zk0m8u0x.jpg
|
||||
- 6833939bly1giclga70tsj20zk0m84mr.jpg
|
||||
- 6833939bly1giclgi503lj20zk0m8hdt.jpg
|
||||
- 6833939bly1giclgrvbd6j20zk0m8qv5.jpg
|
||||
- 6833939bly1giclh0m9pdj20zk0m8hdt.jpg
|
||||
- 6833939bly1giclh3brzpj20zk0m8ann.jpg
|
||||
- 6833939bly1giclh5u05ej20zk0m87df.jpg
|
||||
- 6833939bly1giclhfehz7j20zk0m8u0x.jpg
|
||||
- 6833939bly1giclhnx9glj20zk0m8npd.jpg
|
||||
- 6833939bly1giclhpw3lwj20zk0m8gvw.jpg
|
||||
- 6833939bly1giclhtuo6nj20zk0m8ttm.jpg
|
||||
- 6833939bly1gicli3sbvtj20zk0m8x6p.jpg
|
||||
- 6833939bly1gicli9lfebj20zk0m84qp.jpg
|
||||
- 6833939bly1gicliierfjj20zk0m8npd.jpg
|
||||
- 6833939bly1giclil3m4ej20zk0m8tn8.jpg
|
||||
- 6833939bly1giclimtf7dj20zk0m8qav.jpg
|
||||
- 6833939bly1giclip4jbpj20zk0m87cv.jpg
|
||||
- 6833939bly1gicliwyw55j20zk0m8hdt.jpg
|
||||
- 6833939bly1giclize41wj20zk0m87gk.jpg
|
||||
- 6833939bly1giclj61ylzj20zk0m8b29.jpg
|
||||
- 6833939bly1giclj9410cj20zk0m8h12.jpg
|
||||
- 6833939bly1gicljgocqbj20zk0m8e81.jpg
|
||||
- 6833939bly1gicljitigmj20zk0m87fp.jpg
|
||||
- 6833939bly1giclwrdwyaj20zk0m8are.jpg
|
||||
- 6833939bly1giclwuom7cj20zk0m8dvn.jpg
|
||||
- 6833939bly1giclx29mstj20zk0m8hdt.jpg
|
||||
- 6833939bly1giclx6phq6j20zk0m8e36.jpg
|
||||
- 6833939bly1giclxfdlttj20zk0m8npd.jpg
|
||||
- 6833939bly1giclxp31goj20zk0m8qv5.jpg
|
||||
- 6833939bly1giclxxcb6rj20zk0m8b29.jpg
|
||||
- 6833939bly1gicm07ih54j20zk0m84qp.jpg
|
||||
- 6833939bly1gicm0fdw5cj20zk0m8hdt.jpg
|
||||
- 6833939bly1gicm0n457cj20zk0m8e81.jpg
|
||||
@@ -10,6 +10,9 @@ title:
|
||||
tag: Tag
|
||||
all: All
|
||||
not_found: Σ( ° △ °|||)︴404!
|
||||
category_in: Posted in category "%s"
|
||||
tag_in: Posted with tag "%s"
|
||||
archive_in: Posted on "%s"
|
||||
|
||||
menu:
|
||||
home: Home
|
||||
|
||||
@@ -10,6 +10,9 @@ title:
|
||||
tag: 标签
|
||||
all: 全部
|
||||
not_found: Σ( ° △ °|||)︴404！何も見えない
|
||||
category_in: 分类于"%s"的文章
|
||||
tag_in: 包含标签"%s"的文章
|
||||
archive_in: 发表于"%s"的文章
|
||||
|
||||
menu:
|
||||
home: 首页
|
||||
@@ -28,6 +31,11 @@ sidebar:
|
||||
toc: 文章目录
|
||||
related: 系列文章
|
||||
|
||||
index:
|
||||
sticky: 置顶文章
|
||||
category: 精选分类
|
||||
posts: 文章列表
|
||||
|
||||
post:
|
||||
posted: 发表于
|
||||
edited: 更新于
|
||||
@@ -55,8 +63,8 @@ footer:
|
||||
|
||||
counter:
|
||||
index:
|
||||
post: "共 %d 篇文章"
|
||||
category: "共 %d 个子项"
|
||||
post: "%d 篇文章"
|
||||
category: "%d 个子项"
|
||||
tag_cloud:
|
||||
zero: 暂无标签
|
||||
one: 目前共计 1 个标签
|
||||
|
||||
@@ -1,86 +1,44 @@
|
||||
{% macro render(item, type) %}
|
||||
<div class="card{{ ' ' + item.class if item.class }}">
|
||||
|
||||
{%- if type == "category" %}
|
||||
{%- set cover = theme.statics + item.path + 'cover.jpg' %}
|
||||
{%- if item.path.startsWith('/') %}
|
||||
{%- set cover = theme.statics + item.path.substr(1) + 'cover.jpg' %}
|
||||
{%- endif %}
|
||||
{%- set itemname = item.name %}
|
||||
{%- else %}
|
||||
{%- if item.cover %}
|
||||
{%- if item.cover.startsWith('//') or item.cover.startsWith('http') %}
|
||||
{%- set cover = item.cover %}
|
||||
{%- else %}
|
||||
{%- set cover = theme.statics + item.cover %}
|
||||
{%- endif %}
|
||||
{%- elseif item.photos.length > 0 %}
|
||||
{%- if item.photos[0].startsWith('//') or item.photos[0].startsWith('http') %}
|
||||
{%- set cover = item.photos[0] %}
|
||||
{%- else %}
|
||||
{%- set cover = theme.statics + item.photos[0] %}
|
||||
{%- endif %}
|
||||
{%- endif %}
|
||||
{%- set itemname = item.title %}
|
||||
{% macro render(item) %}
|
||||
{%- set cover = url_for(theme.statics + item.slug + '/cover.jpg') %}
|
||||
{%- set itemname = item.name %}
|
||||
<section class="item">
|
||||
<div data-top="{{item.top.name}}" class="cover"{%- if cover %} data-background-image="{{ url_for(cover) }}"{% endif %}>
|
||||
<h2 class="title">{{ itemname }}</h2>
|
||||
</div>
|
||||
<div class="info">
|
||||
{%- if item.link %}
|
||||
{%- set postTitleIcon = '<i class="ic i-link-alt"></i>' %}
|
||||
{%- endif %}
|
||||
|
||||
|
||||
<div class="cover"{%- if cover %} data-background-image="{{ url_for(cover) }}"{% endif %}>
|
||||
<p>{{ itemname }}</p>
|
||||
</div>
|
||||
<div class="message">
|
||||
<div class="inner">
|
||||
<h2 class="title">
|
||||
{%- if item.link %}
|
||||
{%- set postTitleIcon = '<i class="ic i-link-alt"></i>' %}
|
||||
{%- set postText = itemname or item.link %}
|
||||
{{ _url(item.link, postText + postTitleIcon, {itemprop: 'url', title: postText}) }}
|
||||
{%- else %}
|
||||
{{ _url(item.path, itemname or __('post.untitled'), {itemprop: 'url', title: itemname or __('post.untitled')}) }}
|
||||
{%- endif %}
|
||||
</h2>
|
||||
{%- if type == "category" %}
|
||||
{%- if item.child %}
|
||||
<div class="meta">
|
||||
<i class="ic i-file"></i>{{ _p('counter.index.category', item.child.length) }}
|
||||
</div>
|
||||
<ul class="posts">
|
||||
{%- set subitems = item.child.sort({name: 1}) %}
|
||||
{%- for subitem in subitems.toArray() %}
|
||||
{% if loop.index < 7 %}
|
||||
<li><a title="{{ subitem.name }}" href="{{ url_for(subitem.path) }}">{{ subitem.name }}</a></li>
|
||||
{% endif %}
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
{%- else %}
|
||||
<div class="meta">
|
||||
<i class="ic i-file"></i>{{ _p('counter.index.post', item.length) }}
|
||||
</div>
|
||||
<ul class="posts">
|
||||
{%- set posts = item.posts.sort({title: 1}) %}
|
||||
{%- for post in posts.toArray() %}
|
||||
{% if loop.index < 7 %}
|
||||
<li><a title="{{ post.title }}" href="{{ url_for(post.path) }}">{{ post.title }}</a></li>
|
||||
{% endif %}
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
{%- endif %}
|
||||
{%- else %}
|
||||
<div class="meta">
|
||||
<i class="ic i-calendar"></i><time itemprop="dateCreated datePublished" datetime="{{ moment(item.date).format() }}">{{ date(item.date) }}</time>
|
||||
</div>
|
||||
<div class="posts">
|
||||
{%- if item.description and theme.index.excerpt_description %}
|
||||
{{ item.description }}
|
||||
{% elif item.excerpt %}
|
||||
{{ item.excerpt }}
|
||||
{% else %}
|
||||
{{ item.content }}
|
||||
{%- set postText = itemname or item.link or __('post.untitled') %}
|
||||
<div class="ribbon">{{ _url(item.link or item.path, postText + (postTitleIcon or ''), {itemprop: 'url', title: postText}) }}</div>
|
||||
<div class="inner">
|
||||
{%- if item.child %}
|
||||
{%- set subs = item.child.sort({name: 1}) %}
|
||||
{%- set len = _p('counter.index.category', item.child.length) %}
|
||||
{%- else %}
|
||||
{%- set subs = item.posts.sort({title: 1}) %}
|
||||
{%- set len = _p('counter.index.post', item.length) %}
|
||||
{%- endif %}
|
||||
<ul class="posts">
|
||||
{%- for sub in subs.toArray() %}
|
||||
{%- if loop.index < 7 %}
|
||||
{%- set subname = sub.name or sub.title %}
|
||||
<li><a title="{{ subname }}" href="{{ url_for(sub.path) }}">{{ subname }}</a></li>
|
||||
{%- endif %}
|
||||
</div>
|
||||
{%- endif %}
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
<div class="meta footer">
|
||||
{%- if item.top %}
|
||||
<span>
|
||||
{{ _url(item.top.path, '<i class="ic i-flag"></i>'+item.top.name, {itemprop: 'url', title: item.top.name}) }}
|
||||
</span>
|
||||
{%- endif %}
|
||||
<span>
|
||||
<i class="ic i-file"></i>{{ len }}
|
||||
</span>
|
||||
</div>
|
||||
{{ _url(item.path, 'more...', {itemprop: 'url', title: itemname, class: 'btn'}) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% endmacro %}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% macro render() %}
|
||||
{%- if page.comment !== false %}
|
||||
<div class="comments wrap" id="comments" data-id="{{ page.path | replace('index.html', '') }}"></div>
|
||||
<div class="wrap" id="comments" data-id="{{ page.path | replace('index.html', '') }}"></div>
|
||||
{%- endif %}
|
||||
{% endmacro %}
|
||||
|
||||
35
layout/_macro/postmeta.njk
Normal file
35
layout/_macro/postmeta.njk
Normal file
@@ -0,0 +1,35 @@
|
||||
{% macro render(item, full = false) %}
|
||||
<div class="meta">
|
||||
{%- set create_title = __('post.created') + __('symbol.colon') + full_date(item.date) %}
|
||||
<span class="item" title="{{ create_title }}">
|
||||
<span class="icon">
|
||||
<i class="ic i-calendar"></i>
|
||||
</span>
|
||||
{%- if full %}
|
||||
<span class="text">{{ __('post.posted') }}</span>
|
||||
{%- endif %}
|
||||
<time itemprop="dateCreated datePublished" datetime="{{ moment(item.date).format() }}">{{ date(item.date) }}</time>
|
||||
</span>
|
||||
{%- if theme.post.count %}
|
||||
<span class="item" title="{{ __('symbols_count_time.count') }}">
|
||||
<span class="icon">
|
||||
<i class="ic i-pen"></i>
|
||||
</span>
|
||||
{%- if full %}
|
||||
<span class="text">{{ __('symbols_count_time.count') }}</span>
|
||||
{%- endif %}
|
||||
<span>{{ symbolsCount(item) }}</span>
|
||||
<span class="text">{{ __('symbols_count_time.word') }}</span>
|
||||
</span>
|
||||
<span class="item" title="{{ __('symbols_count_time.time') }}">
|
||||
<span class="icon">
|
||||
<i class="ic i-clock"></i>
|
||||
</span>
|
||||
{%- if full %}
|
||||
<span class="text">{{ __('symbols_count_time.time') }}</span>
|
||||
{%- endif %}
|
||||
<span>{{ symbolsTime(item, config.symbols_count_time.awl, config.symbols_count_time.wpm, __('symbols_count_time.time_minutes')) }}</span>
|
||||
</span>
|
||||
{%- endif %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
33
layout/_macro/segment.njk
Normal file
33
layout/_macro/segment.njk
Normal file
@@ -0,0 +1,33 @@
|
||||
{% macro render(item) %}
|
||||
{%- if item.link %}
|
||||
{%- set postTitleIcon = '<i class="ic i-link-alt"></i>' %}
|
||||
{%- endif %}
|
||||
{%- set postText = item.title or item.link or __('post.untitled') %}
|
||||
<article class="item">
|
||||
<div class="cover">
|
||||
{{ _url(item.link or item.path, '<img src="'+ _cover(item) +'">', {itemprop: 'url', title: postText}) }}
|
||||
</div>
|
||||
<div class="info">
|
||||
{{postmeta.render(item)}}
|
||||
<h3>{{ _url(item.link or item.path, postText + (postTitleIcon or ''), {itemprop: 'url', title: postText}) }}</h3>
|
||||
<div class="excerpt">
|
||||
{%- if item.description %}
|
||||
{{ item.description }}
|
||||
{% elif item.excerpt %}
|
||||
{{ item.excerpt }}
|
||||
{% else %}
|
||||
{{ item.content | striptags(true) | escape | truncate(300) }}
|
||||
{%- endif %}
|
||||
</div>
|
||||
{%- if item.categories.length > 0 %}
|
||||
<div class="meta footer">
|
||||
<span>
|
||||
{%- set lastcat = item.categories.last() %}
|
||||
{{ _url(lastcat.path, '<i class="ic i-flag"></i>' + lastcat.name, {itemprop: 'url', title: lastcat.name}) }}
|
||||
</span>
|
||||
</div>
|
||||
{%- endif %}
|
||||
{{ _url(item.link or item.path, 'more...', {itemprop: 'url', title: postText, class: 'btn'}) }}
|
||||
</div>
|
||||
</article>
|
||||
{% endmacro %}
|
||||
@@ -26,7 +26,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="quick">
|
||||
<ul id="quick">
|
||||
<li class="prev pjax">
|
||||
{%- if page and page.prev %}
|
||||
{%- set prevlink = page.prev_link %}
|
||||
|
||||
@@ -1,48 +1,26 @@
|
||||
<nav>
|
||||
<nav id="nav">
|
||||
<div class="inner">
|
||||
<div class="toggle menu">
|
||||
<div class="toggle">
|
||||
<div class="lines" aria-label="{{ __('accessibility.nav_toggle') }}">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="list menu">
|
||||
<ul class="menu">
|
||||
{{ partial('_partials/sidebar/menu.njk', {}, {cache: true}) }}
|
||||
</ul>
|
||||
<div class="right menu">
|
||||
<div class="theme-btn">
|
||||
<ul class="right">
|
||||
<li class="item theme">
|
||||
<i class="ic i-sun"></i>
|
||||
</div>
|
||||
<div class="search-btn">
|
||||
</li>
|
||||
<li class="item search">
|
||||
<i class="ic i-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="brand">
|
||||
<div class="meta">
|
||||
<a href="{{ config.root }}" class="logo" rel="start">
|
||||
<span class="artboard">{{ alternate }}</span>
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
</a>
|
||||
{%- if subtitle %}
|
||||
<p class="subtitle" itemprop="description">= {{ subtitle }} =</p>
|
||||
{%- endif %}
|
||||
</div>
|
||||
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
||||
<defs>
|
||||
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use xlink:href="#gentle-wave" x="48" y="0" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="3" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="5" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="7" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="search">
|
||||
<div id="search">
|
||||
<div class="inner">
|
||||
<div class="header">
|
||||
<span class="icon">
|
||||
@@ -62,7 +40,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tool">
|
||||
<div id="tool">
|
||||
<div class="item player"></div>
|
||||
<div class="item chat"><i class="ic i-comments"></i></div>
|
||||
<div class="item back-to-top">
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<title>{% block title %}{% endblock %}{{ alternate + " = " if alternate }}{{ title }}{{ " = "+subtitle if subtitle }}</title>
|
||||
</head>
|
||||
<body itemscope itemtype="http://schema.org/WebPage">
|
||||
<div class="loading">
|
||||
<div id="loading">
|
||||
<div class="cat">
|
||||
<div class="body"></div>
|
||||
<div class="body"></div>
|
||||
@@ -15,31 +15,62 @@
|
||||
<div class="head"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<header itemscope itemtype="http://schema.org/WPHeader">
|
||||
<div id="container">
|
||||
<header id="header" itemscope itemtype="http://schema.org/WPHeader">
|
||||
<div class="inner">
|
||||
{% block header %}{{ partial('_partials/header.njk', {}, {cache: true}) }}{% endblock %}
|
||||
<div id="brand">
|
||||
<div class="pjax">
|
||||
{% block header %}
|
||||
<a href="{{ config.root }}" class="logo" rel="start">
|
||||
{%- if alternate %}<p class="artboard">{{ alternate }}</p>{%- endif %}
|
||||
<h1 itemprop="name headline" class="title">{{ title }}</h1>
|
||||
</a>
|
||||
{%- if subtitle %}
|
||||
<p class="meta" itemprop="description">= {{ subtitle }} =</p>
|
||||
{%- endif %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
{{ partial('_partials/header.njk', {}, {cache: true}) }}
|
||||
</div>
|
||||
<div id="imgs" class="pjax">
|
||||
{%- set covers = _cover(page, 6) %}
|
||||
{%- if covers.length > 1 %}
|
||||
<ul>
|
||||
{%- for image in covers %}
|
||||
<li class="item" data-background-image="{{ image }}"></li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
{%- else %}
|
||||
<img src="{{ covers }}">
|
||||
{%- endif %}
|
||||
</div>
|
||||
<ul class="lozad">
|
||||
{%- for image in theme.header_bg %}
|
||||
<li data-background-image="{{ url_for(theme.statics + theme.images +'/banner/'+ image) }}"></li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
</header>
|
||||
<main>
|
||||
<div id="waves">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
||||
<defs>
|
||||
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use xlink:href="#gentle-wave" x="48" y="0" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="3" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="5" />
|
||||
<use xlink:href="#gentle-wave" x="48" y="7" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<main id="main">
|
||||
<div class="inner">
|
||||
<div class="content pjax">
|
||||
<div id="content" class="pjax">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
<div class="sidebar">
|
||||
<div id="sidebar">
|
||||
{% block sidebar %}{{ sidebar.render() }}{% endblock %}
|
||||
</div>
|
||||
<div class="dimmer"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<footer id="footer">
|
||||
<div class="inner">
|
||||
{{ partial('_partials/footer.njk', {}, {cache: true}) }}
|
||||
</div>
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
{%- set ccIcon = '<i class="ic i-creative-commons"></i>' %}
|
||||
{%- set ccText = theme.creative_commons.license | upper %}
|
||||
|
||||
<div id="copyright" class="copyright">
|
||||
<div id="copyright">
|
||||
<ul>
|
||||
<li class="author">
|
||||
<strong>{{ __('post.copyright.author') + __('symbol.colon') }} </strong>
|
||||
{{- page.author or author }} @ {{- title}}
|
||||
{{- page.author or author }} <i class="ic i-at"></i> {{- title}}
|
||||
</li>
|
||||
<li class="link">
|
||||
<strong>{{ __('post.copyright.link') + __('symbol.colon') }}</strong>
|
||||
|
||||
@@ -1,18 +1,25 @@
|
||||
{% macro navpost(item, type) %}
|
||||
{%- set postText = item.title or item.link or __('post.untitled') %}
|
||||
{%- set lastcat = item.categories.last() %}
|
||||
|
||||
{%- set itemlink %}
|
||||
<span class="type">{{__('post.' + type)}}</span>
|
||||
<span class="category"><i class="ic i-flag"></i> {{lastcat.name}}</span>
|
||||
<h3>{{ postText }}</h3>
|
||||
{% endset %}
|
||||
|
||||
{{ _url(item.path, itemlink, {itemprop: 'url', rel: type, 'data-background-image': _cover(item), title: postText}) }}
|
||||
{% endmacro %}
|
||||
|
||||
<div class="nav">
|
||||
<div class="inner">
|
||||
<div class="item">
|
||||
<div class="item left">
|
||||
{%- if post.next %}
|
||||
<a href="{{ url_for(post.next.path) }}" rel="prev">
|
||||
<i class="ic i-chevron-left"></i> {{__('post.prev')}}
|
||||
</a>
|
||||
{{navpost(post.next, 'prev')}}
|
||||
{%- endif %}
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item right">
|
||||
{%- if post.prev %}
|
||||
<a href="{{ url_for(post.prev.path) }}" rel="next">
|
||||
{{__('post.next')}} <i class="ic i-chevron-right"></i>
|
||||
</a>
|
||||
{{navpost(post.prev, 'next')}}
|
||||
{%- endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,75 +4,13 @@
|
||||
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||||
<meta itemprop="image" content="{{ url_for(theme.statics + theme.images +'/avatar.jpg') }}">
|
||||
<meta itemprop="name" content="{{ author }}">
|
||||
<meta itemprop="description" content="{{ subtitle }}{{ description }}">
|
||||
<meta itemprop="description" content="{{ subtitle }}, {{ description }}">
|
||||
</span>
|
||||
|
||||
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
|
||||
<meta itemprop="name" content="{{ title }}">
|
||||
</span>
|
||||
|
||||
|
||||
{%- if post.header !== false %}
|
||||
<header>
|
||||
|
||||
<h1 class="title{%- if post.direction and post.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}" itemprop="name headline">
|
||||
{# Link posts #}
|
||||
{%- if post.link %}
|
||||
{%- if post.sticky > 0 %}
|
||||
<span class="sticky" title="{{ __('post.sticky') }}">
|
||||
<i class="ic i-thumbtack"></i>
|
||||
</span>
|
||||
{%- endif %}
|
||||
{%- set postTitleIcon = '<i class="ic i-link-alt"></i>' %}
|
||||
{%- set postText = post.title or post.link %}
|
||||
{{ _url(post.link, postText + postTitleIcon, {class: 'link external', itemprop: 'url'}) }}
|
||||
{%- else %}
|
||||
{{- post.title }}
|
||||
{%- endif %}
|
||||
</h1>
|
||||
{%- if is_post() %}
|
||||
<div class="meta">
|
||||
{%- set create_title = __('post.created') + __('symbol.colon') + full_date(post.date) %}
|
||||
<span class="item" title="{{ create_title }}">
|
||||
<span class="icon">
|
||||
<i class="ic i-calendar"></i>
|
||||
</span>
|
||||
<span class="text">{{ __('post.posted') }}</span>
|
||||
<time itemprop="dateCreated datePublished" datetime="{{ moment(post.date).format() }}">{{ date(post.date) }}</time>
|
||||
</span>
|
||||
{%- if theme.post.count %}
|
||||
<span class="item" title="{{ __('symbols_count_time.count') }}">
|
||||
<span class="icon">
|
||||
<i class="ic i-file-word"></i>
|
||||
</span>
|
||||
<span class="text">{{ __('symbols_count_time.count') }}</span>
|
||||
<span>{{ symbolsCount(post) }}</span>
|
||||
<span class="text">{{ __('symbols_count_time.word') }}</span>
|
||||
</span>
|
||||
|
||||
<span class="item" title="{{ __('symbols_count_time.time') }}">
|
||||
<span class="icon">
|
||||
<i class="ic i-clock"></i>
|
||||
</span>
|
||||
<span class="text">{{ __('symbols_count_time.time') }}</span>
|
||||
<span> ≈ {{ symbolsTime(post, config.symbols_count_time.awl, config.symbols_count_time.wpm, __('symbols_count_time.time_minutes')) }}</span>
|
||||
</span>
|
||||
{%- endif %}
|
||||
</div>
|
||||
{%- endif %}
|
||||
{%- if post.tags and post.tags.length %}
|
||||
<div class="tags">
|
||||
{%- for tag in post.tags.toArray() %}
|
||||
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="ic i-tag"></i> {{ tag.name }}</a>
|
||||
{%- endfor %}
|
||||
</div>
|
||||
{%- endif %}
|
||||
</header>
|
||||
{%- endif %}
|
||||
|
||||
{#################}
|
||||
{### POST BODY ###}
|
||||
{#################}
|
||||
<div class="body md{%- if post.direction and post.direction.toLowerCase() === 'rtl' %} rtl{%- endif %}" itemprop="articleBody">
|
||||
{# Gallery support #}
|
||||
{%- if post.photos and post.photos.length %}
|
||||
@@ -84,11 +22,15 @@
|
||||
{%- endif %}
|
||||
|
||||
{{ post.content }}
|
||||
</div>
|
||||
|
||||
{#####################}
|
||||
{### END POST BODY ###}
|
||||
{#####################}
|
||||
{%- if post.tags and post.tags.length %}
|
||||
<div class="tags">
|
||||
{%- for tag in post.tags.toArray() %}
|
||||
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="ic i-tag"></i> {{ tag.name }}</a>
|
||||
{%- endfor %}
|
||||
</div>
|
||||
{%- endif %}
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
|
||||
|
||||
@@ -7,9 +7,9 @@
|
||||
{%- set menuIcon = '<i class="ic i-' + path[1] | trim + '"></i>' %}
|
||||
{%- set menuText = __('menu.' + name) | replace('menu.', '') %}
|
||||
{%- if parent %}
|
||||
<li class="item">
|
||||
<li class="item dropdown">
|
||||
<a href="javascript:void(0);">{{menuIcon + menuText}}</a>
|
||||
<ul class="sub menu">
|
||||
<ul class="submenu">
|
||||
{%- else %}
|
||||
<li class="item">
|
||||
{{ _url(itemURL, menuIcon + menuText, {rel: 'section'}) }}
|
||||
|
||||
@@ -9,13 +9,25 @@
|
||||
{{ __('title.archive') }} |
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<h1 itemprop="name headline">
|
||||
{%- if is_month() %}
|
||||
{{ _p('title.archive_in', page.year + __('symbol.year') + page.month + __('symbol.month')) }}
|
||||
{%- elif is_year() %}
|
||||
{{ _p('title.archive_in', page.year + __('symbol.year')) }}
|
||||
{%- else %}
|
||||
{{- __('title.archive') }}
|
||||
{%- endif %}
|
||||
</h1>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="collapse wrap">
|
||||
<h2 class="item header">
|
||||
{%- if is_month() %}
|
||||
<a href="{{ url_for(config.archive_dir + '/' + page.year )}}">{{page.year}} {{__('symbol.year')}}</a> <small>/</small> {{page.month}} {{__('symbol.month')}}<small>{{ __('title.archive') }}</small>
|
||||
<a href="{{ url_for(config.archive_dir) }}">{{ __('title.all') }}</a> <small>/</small> <a href="{{ url_for(config.archive_dir + '/' + page.year )}}">{{page.year}} {{__('symbol.year')}}</a> <small>/</small> {{page.month}} {{__('symbol.month')}}<small>{{ __('title.archive') }}</small>
|
||||
{% elif is_year() %}
|
||||
<a href="{{ url_for(config.archive_dir )}}">{{page.year}} {{__('symbol.year')}}</a> <small>{{ __('title.archive') }}</small>
|
||||
<a href="{{ url_for(config.archive_dir) }}">{{ __('title.all') }}</a> <small>/</small> {{page.year}} {{__('symbol.year')}} <small>{{ __('title.archive') }}</small>
|
||||
{% else %}
|
||||
<a href="{{ url_for(site.path) }}">{{ __('menu.home') }}</a> <small>/</small>
|
||||
{%- set posts_length = site.posts.length %}
|
||||
|
||||
@@ -2,11 +2,17 @@
|
||||
|
||||
{% block title %}{{ __('title.category') }}{{ __('symbol.colon') }}{{ page.category }} | {% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<h1 itemprop="name headline">
|
||||
{{ _p('title.category_in', page.title) }}
|
||||
</h1>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="collapse wrap">
|
||||
{%- set prev = _category_prev(page.category) %}
|
||||
<h2 class="item header">
|
||||
<a href="{{ url_for(config.tag_dir) }}">{{ __('title.all') }}</a>
|
||||
<a href="{{ url_for(config.category_dir) }}">{{ __('title.all') }}</a>
|
||||
{%- if prev %}
|
||||
<small>/</small> {{prev}}
|
||||
{%- endif %}
|
||||
|
||||
@@ -1,23 +1,43 @@
|
||||
{% extends '_partials/layout.njk' %}
|
||||
{% import '_macro/card.njk' as card with context %}
|
||||
{% import '_macro/postmeta.njk' as postmeta with context %}
|
||||
{% import '_macro/segment.njk' as segment with context %}
|
||||
|
||||
{% block content %}
|
||||
<div class="index wrap">
|
||||
{%- if theme.index.mode == 'category' %}
|
||||
{%- set categories = _categories() %}
|
||||
{%- if categories %}
|
||||
{%- for id,cat in categories %}
|
||||
{{ card.render(cat, theme.index.mode) }}
|
||||
{%- endfor %}
|
||||
{%- if page.current == 1 %}
|
||||
{%- if page.sticky.length > 0%}
|
||||
<h2 class="divider">{{ __('index.sticky') }}</h2>
|
||||
{%- set sticky = page.sticky.toArray() %}
|
||||
<div class="segments sticky">
|
||||
{%- for post in sticky %}
|
||||
{{ segment.render(post) }}
|
||||
{%- endfor %}
|
||||
</div>
|
||||
{%- endif %}
|
||||
|
||||
{%- if page.catlist.length > 0%}
|
||||
<h2 class="divider">{{ __('index.category') }}</h2>
|
||||
<div class="cards">
|
||||
{%- for cat in page.catlist %}
|
||||
{{ card.render(cat) }}
|
||||
{%- endfor %}
|
||||
</div>
|
||||
{%- endif %}
|
||||
{%- endif %}
|
||||
{%- else %}
|
||||
|
||||
{%- if page.posts.length > 0%}
|
||||
{%- set posts = page.posts.toArray() %}
|
||||
|
||||
{%- if page.current == 1 %}
|
||||
<h2 class="divider">{{ __('index.posts') }}</h2>
|
||||
{%- endif %}
|
||||
<div class="segments posts">
|
||||
{%- for post in posts %}
|
||||
{{ card.render(post, theme.index.mode) }}
|
||||
{{ segment.render(post) }}
|
||||
{%- endfor %}
|
||||
</div>
|
||||
{%- endif %}
|
||||
|
||||
{%- endif %}
|
||||
</div>
|
||||
|
||||
{% include '_partials/pagination.njk' %}
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
|
||||
{% block title %}
|
||||
{%- if page.type === 'categories' %}
|
||||
{{- __('title.category') }}
|
||||
{{- __('title.all') + __('title.category') }}
|
||||
{%- elif page.type === 'tags' %}
|
||||
{{- __('title.tag') }}
|
||||
{{- __('title.all') + __('title.tag') }}
|
||||
{%- elif page.type === '404' %}
|
||||
{{- __('title.not_found') }}
|
||||
{%- else %}
|
||||
@@ -14,6 +14,26 @@
|
||||
{%- endif %} |
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<h1 itemprop="name headline">
|
||||
{%- if page.link %}
|
||||
{%- set postTitleIcon = '<i class="ic i-link-alt"></i>' %}
|
||||
{%- set postText = page.title or page.link %}
|
||||
{{ _url(page.link, postText + postTitleIcon, {class: 'link external', itemprop: 'url'}) }}
|
||||
{%- else %}
|
||||
{%- if page.type === 'categories' %}
|
||||
{{- __('title.all') + __('title.category') }}
|
||||
{%- elif page.type === 'tags' %}
|
||||
{{- __('title.all') + __('title.tag') }}
|
||||
{%- elif page.type === '404' %}
|
||||
{{- __('title.not_found') }}
|
||||
{%- else %}
|
||||
{{- page.title }}
|
||||
{%- endif %}
|
||||
{%- endif %}
|
||||
</h1>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{%- if page.type === 'categories' %}
|
||||
<div class="collapse wrap">
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
{% import '_macro/sidebar.njk' as sidebar with context %}
|
||||
{% import '_macro/breadcrumb.njk' as breadcrumb with context %}
|
||||
{% import '_macro/comment.njk' as comment with context %}
|
||||
{% import '_macro/postmeta.njk' as postmeta with context %}
|
||||
|
||||
{% block title %}
|
||||
{%- set page_title = page.title %}
|
||||
@@ -17,6 +18,19 @@
|
||||
{{ page_title }} |
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<h1 itemprop="name headline">
|
||||
{%- if page.link %}
|
||||
{%- set postTitleIcon = '<i class="ic i-link-alt"></i>' %}
|
||||
{%- set postText = page.title or page.link %}
|
||||
{{ _url(page.link, postText + postTitleIcon, {class: 'link external', itemprop: 'url'}) }}
|
||||
{%- else %}
|
||||
{{- page.title }}
|
||||
{%- endif %}
|
||||
</h1>
|
||||
{{postmeta.render(page, true)}}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="article wrap">
|
||||
{{ breadcrumb.render(page) }}
|
||||
|
||||
@@ -2,6 +2,12 @@
|
||||
|
||||
{% block title %}{{ __('title.tag') }}{{ __('symbol.colon') }}{{ page.tag }} | {% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<h1 itemprop="name headline">
|
||||
{{ _p('title.tag_in', page.tag) }}
|
||||
</h1>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="collapse wrap">
|
||||
<h2 class="item header">
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
{
|
||||
"name": "hexo-theme-shoka",
|
||||
"version": "0.1.2",
|
||||
"version": "0.1.1",
|
||||
"description": "",
|
||||
"author": "Ruri Shimotsuki",
|
||||
"license": "MIT",
|
||||
"private": true
|
||||
}
|
||||
|
||||
9
scripts/generaters/config.js
Normal file
9
scripts/generaters/config.js
Normal file
@@ -0,0 +1,9 @@
|
||||
'use strict';
|
||||
|
||||
const merge = require('hexo-util').deepMerge || require('lodash/merge');
|
||||
|
||||
hexo.on('generateBefore', function () {
|
||||
if (hexo.config.theme_config) {
|
||||
hexo.theme.config = merge(hexo.theme.config, hexo.config.theme_config);
|
||||
}
|
||||
})
|
||||
@@ -1,29 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
var fs = require('hexo-fs');
|
||||
|
||||
|
||||
hexo.extend.generator.register('cover', function (locals) {
|
||||
const config = this.config;
|
||||
let result = [];
|
||||
let categories = locals.categories;
|
||||
|
||||
categories.forEach((cat, i) => {
|
||||
let cover_path = cat.path.replace(config.category_dir, '') + 'cover.jpg';
|
||||
|
||||
let cover = 'source/_posts' + cover_path
|
||||
|
||||
if (fs.existsSync(cover)) {
|
||||
result.push({
|
||||
path: cat.path + 'cover.jpg',
|
||||
data: function () {
|
||||
return fs.createReadStream(cover)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
return result;
|
||||
|
||||
});
|
||||
@@ -1,5 +1,6 @@
|
||||
'use strict';
|
||||
|
||||
const fs = require('hexo-fs');
|
||||
const pagination = require('hexo-pagination');
|
||||
|
||||
hexo.config.index_generator = Object.assign({
|
||||
@@ -8,31 +9,77 @@ hexo.config.index_generator = Object.assign({
|
||||
}, hexo.config.index_generator);
|
||||
|
||||
hexo.extend.generator.register('index', function(locals) {
|
||||
let covers = [];
|
||||
let catlist = [];
|
||||
let pages = [];
|
||||
const config = this.config;
|
||||
const theme = this.theme.config;
|
||||
const posts = locals.posts.sort(config.index_generator.order_by);
|
||||
const sticky = locals.posts.find({'sticky': true}).sort(config.index_generator.order_by);
|
||||
const posts = locals.posts.find({'sticky': {$exists: false}}).sort(config.index_generator.order_by);
|
||||
const paginationDir = config.pagination_dir || 'page';
|
||||
const path = config.index_generator.path || '';
|
||||
|
||||
const categories = locals.categories;
|
||||
|
||||
if (theme.index.mode == 'category' && categories && categories.length) {
|
||||
return {
|
||||
path,
|
||||
layout: ['index', 'archive'],
|
||||
data: {
|
||||
__index: true
|
||||
}
|
||||
};
|
||||
var getTopcat = function(cat) {
|
||||
if (cat.parent) {
|
||||
var pCat = categories.findOne({'_id': cat.parent})
|
||||
return getTopcat(pCat);
|
||||
} else {
|
||||
return cat
|
||||
}
|
||||
}
|
||||
|
||||
return pagination(path, posts, {
|
||||
perPage: config.index_generator.per_page,
|
||||
layout: ['index', 'archive'],
|
||||
format: paginationDir + '/%d/',
|
||||
data: {
|
||||
__index: true
|
||||
}
|
||||
});
|
||||
if (categories && categories.length) {
|
||||
categories.forEach((cat) => {
|
||||
let cover = 'source/_posts/' + cat.slug + '/cover.jpg'
|
||||
|
||||
if (fs.existsSync(cover)) {
|
||||
covers.push({
|
||||
path: cat.slug + '/cover.jpg',
|
||||
data: function () {
|
||||
return fs.createReadStream(cover)
|
||||
}
|
||||
});
|
||||
|
||||
let topcat = getTopcat(cat)
|
||||
|
||||
if (topcat._id != cat._id) {
|
||||
cat.top = topcat;
|
||||
}
|
||||
|
||||
let child = categories.find({'parent': cat._id});
|
||||
if (child.length != 0) {
|
||||
cat.child = child;
|
||||
}
|
||||
|
||||
catlist.push(cat)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if(posts.length > 0) {
|
||||
pages = pagination(path, posts, {
|
||||
perPage: config.index_generator.per_page,
|
||||
layout: ['index', 'archive'],
|
||||
format: paginationDir + '/%d/',
|
||||
data: {
|
||||
__index: true,
|
||||
catlist: catlist,
|
||||
sticky: sticky
|
||||
}
|
||||
});
|
||||
} else {
|
||||
pages = [{
|
||||
path,
|
||||
layout: ['index', 'archive'],
|
||||
data: {
|
||||
__index: true,
|
||||
catlist: catlist,
|
||||
sticky: sticky
|
||||
}
|
||||
}];
|
||||
}
|
||||
|
||||
return [...covers, ...pages];
|
||||
|
||||
});
|
||||
|
||||
@@ -1,45 +1,14 @@
|
||||
/* global hexo */
|
||||
|
||||
'use strict';
|
||||
|
||||
const nunjucks = require('nunjucks');
|
||||
const path = require('path');
|
||||
|
||||
function njkCompile(data) {
|
||||
const templateDir = path.dirname(data.path);
|
||||
const env = nunjucks.configure(templateDir, {
|
||||
autoescape: false
|
||||
});
|
||||
env.addFilter('safedump', dictionary => {
|
||||
if (typeof dictionary !== 'undefined' && dictionary !== null) {
|
||||
return JSON.stringify(dictionary);
|
||||
}
|
||||
return '""';
|
||||
});
|
||||
return nunjucks.compile(data.text, env, data.path);
|
||||
}
|
||||
|
||||
function njkRenderer(data, locals) {
|
||||
return njkCompile(data).render(locals);
|
||||
}
|
||||
|
||||
// Return a compiled renderer.
|
||||
njkRenderer.compile = function(data) {
|
||||
const compiledTemplate = njkCompile(data);
|
||||
// Need a closure to keep the compiled template.
|
||||
return function(locals) {
|
||||
return compiledTemplate.render(locals);
|
||||
};
|
||||
};
|
||||
|
||||
hexo.extend.renderer.register('njk', 'html', njkRenderer);
|
||||
|
||||
const fs = require('hexo-fs');
|
||||
const url = require('url');
|
||||
|
||||
hexo.extend.renderer.register('js', 'js', function(data, options){
|
||||
|
||||
hexo.extend.generator.register('script', function(locals){
|
||||
const config = hexo.config;
|
||||
const theme = hexo.theme.config;
|
||||
|
||||
var env = require('../../package.json')
|
||||
|
||||
var siteConfig = {
|
||||
hostname : url.parse(config.url).hostname || config.url,
|
||||
root: config.root,
|
||||
@@ -60,10 +29,12 @@ hexo.extend.renderer.register('js', 'js', function(data, options){
|
||||
mermaid: theme.css + "/mermaid.css"
|
||||
},
|
||||
search : null,
|
||||
valine: theme.valine,
|
||||
quicklink: {
|
||||
timeout : theme.quicklink.timeout,
|
||||
priority: theme.quicklink.priority
|
||||
}
|
||||
},
|
||||
versoin: env['version']
|
||||
};
|
||||
|
||||
if(config.algolia) {
|
||||
@@ -79,7 +50,16 @@ hexo.extend.renderer.register('js', 'js', function(data, options){
|
||||
siteConfig.audio = theme.audio
|
||||
}
|
||||
|
||||
return data.text
|
||||
.replace("/*CONFIG*/", JSON.stringify(siteConfig))
|
||||
.replace("/*COMMENTCONFIG*/", JSON.stringify(theme.valine));
|
||||
var text = 'var CONFIG = ' + JSON.stringify(siteConfig) + ';';
|
||||
|
||||
['utils', 'dom', 'global', 'sidebar', 'page', 'pjax'].forEach(function(item) {
|
||||
text += fs.readFileSync('themes/shoka/source/js/_app/'+item+'.js').toString();
|
||||
});
|
||||
|
||||
return {
|
||||
path: theme.js + '/app.js',
|
||||
data: function(){
|
||||
return hexo.render.renderSync({text: text, engine: 'js'});
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -35,7 +35,7 @@ hexo.extend.helper.register('_vendor_js', () => {
|
||||
if (!config) return '';
|
||||
|
||||
//Get a font list from config
|
||||
let vendorJs = ['pace', 'pjax', 'velocity', 'velocity_ui', 'algolia', 'instantsearch', 'lazyload', 'quicklink'].map(item => {
|
||||
let vendorJs = ['pace', 'pjax', 'fetch', 'velocity', 'velocity_ui', 'algolia', 'instantsearch', 'lazyload', 'quicklink'].map(item => {
|
||||
if (config[item]) {
|
||||
return config[item];
|
||||
}
|
||||
|
||||
@@ -5,6 +5,44 @@
|
||||
const { htmlTag } = require('hexo-util');
|
||||
const url = require('url');
|
||||
const crypto = require('crypto');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const yaml = require('js-yaml');
|
||||
|
||||
const imageListFile = fs.readFileSync(path.join(__dirname, '../../_images.yml'));
|
||||
const imageList = yaml.safeLoad(imageListFile);
|
||||
|
||||
const randomServer = function() {
|
||||
return [1,2,3,4][Math.floor(Math.random() * 4)]
|
||||
}
|
||||
|
||||
const randomBG = function(count = 1) {
|
||||
if(count && count > 1) {
|
||||
var shuffled = imageList.slice(0), i = imageList.length, min = i - count, temp, index;
|
||||
while (i-- > min) {
|
||||
index = Math.floor((i + 1) * Math.random());
|
||||
temp = shuffled[index];
|
||||
shuffled[index] = shuffled[i];
|
||||
shuffled[i] = temp;
|
||||
}
|
||||
|
||||
return shuffled.slice(min).map(function(img) {
|
||||
return 'https://tva'+randomServer()+'.sinaimg.cn/large/'+img
|
||||
});
|
||||
}
|
||||
return 'https://tva'+randomServer()+'.sinaimg.cn/mw690/'+imageList[Math.floor(Math.random() * imageList.length)]
|
||||
}
|
||||
|
||||
|
||||
hexo.extend.helper.register('hexo_env', function (type) {
|
||||
return this.env[type]
|
||||
})
|
||||
|
||||
|
||||
hexo.extend.helper.register('theme_env', function (type) {
|
||||
var env = require('../../package.json')
|
||||
return env[type]
|
||||
})
|
||||
|
||||
hexo.extend.helper.register('_css', function(...urls) {
|
||||
const { statics, css } = hexo.theme.config;
|
||||
@@ -76,6 +114,27 @@ hexo.extend.helper.register('_url', function(path, text, options = {}) {
|
||||
});
|
||||
|
||||
|
||||
hexo.extend.helper.register('_cover', function(item, num) {
|
||||
var that = this
|
||||
const { statics, js } = hexo.theme.config;
|
||||
|
||||
var format = function(img) {
|
||||
if (img.startsWith('//') || img.startsWith('http')) {
|
||||
return img
|
||||
} else {
|
||||
return that.url_for(statics + img)
|
||||
}
|
||||
}
|
||||
|
||||
if(item.cover) {
|
||||
return format(item.cover)
|
||||
} else if (item.photos && item.photos.length > 0) {
|
||||
return format(item.photos[0])
|
||||
} else {
|
||||
return randomBG(num || 1);
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
hexo.extend.helper.register('_md5', function(path) {
|
||||
let str = this.url_for(path);
|
||||
|
||||
45
scripts/renderer/njk.js
Normal file
45
scripts/renderer/njk.js
Normal file
@@ -0,0 +1,45 @@
|
||||
'use strict';
|
||||
|
||||
const nunjucks = require('nunjucks');
|
||||
const path = require('path');
|
||||
|
||||
const pangu = require('pangu') || {
|
||||
spacing: data => {
|
||||
return data;
|
||||
}
|
||||
};
|
||||
|
||||
function njkCompile(data) {
|
||||
const templateDir = path.dirname(data.path);
|
||||
const env = nunjucks.configure(templateDir, {
|
||||
autoescape: false
|
||||
});
|
||||
env.addFilter('safedump', dictionary => {
|
||||
if (typeof dictionary !== 'undefined' && dictionary !== null) {
|
||||
return JSON.stringify(dictionary);
|
||||
}
|
||||
return '""';
|
||||
});
|
||||
env.addFilter('pangu', dictionary => {
|
||||
if (typeof dictionary !== 'undefined' && dictionary !== null) {
|
||||
return pangu.spacing(dictionary);
|
||||
}
|
||||
return '""';
|
||||
});
|
||||
return nunjucks.compile(data.text, env, data.path);
|
||||
}
|
||||
|
||||
function njkRenderer(data, locals) {
|
||||
return njkCompile(data).render(locals);
|
||||
}
|
||||
|
||||
// Return a compiled renderer.
|
||||
njkRenderer.compile = function(data) {
|
||||
const compiledTemplate = njkCompile(data);
|
||||
// Need a closure to keep the compiled template.
|
||||
return function(locals) {
|
||||
return compiledTemplate.render(locals);
|
||||
};
|
||||
};
|
||||
|
||||
hexo.extend.renderer.register('njk', 'html', njkRenderer);
|
||||
@@ -1,59 +0,0 @@
|
||||
/* global hexo */
|
||||
|
||||
/*
|
||||
{% links [image] [delimiter] [comment] %}
|
||||
alternate title for image tooltip (nullable) | main title | url | description | icon image | block color
|
||||
{% endlinks %}
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
function linkGrid(args, content) {
|
||||
|
||||
const config = hexo.theme.config;
|
||||
|
||||
|
||||
const image = args[0] || 'images/avatar.gif';
|
||||
const delimiter = args[1] || '|';
|
||||
const comment = args[2] || '%';
|
||||
|
||||
const url = require('url');
|
||||
const siteHost = url.parse(hexo.config.url).hostname || hexo.config.url;
|
||||
|
||||
const links = content.split('\n').map(item => {
|
||||
item = item.split(delimiter).map(arg => arg.trim());
|
||||
if (item[0][0] === comment) return '';
|
||||
let data = {};
|
||||
|
||||
if(item[2]) {
|
||||
data = url.parse(item[2]);
|
||||
}
|
||||
|
||||
var item_image = item[4] || image;
|
||||
|
||||
if (!item_image.startsWith('//') && !item_image.startsWith('http')) {
|
||||
item_image = config.statics + item_image;
|
||||
}
|
||||
|
||||
if (data.protocol && data.hostname !== siteHost) {
|
||||
item[2] = Buffer.from(item[2]).toString('base64');
|
||||
return `<div class="item" style="--block-color:${item[5] || '#666'};" title="${item[0] || item[1]}">
|
||||
<span class="exturl image" data-url="${item[2]}" data-background-image="${item_image}"></span>
|
||||
<div class="info">
|
||||
<span class="exturl title" data-url="${item[2]}">${item[1]}</span>
|
||||
<p class="desc">${item[3] || item[2]}</p>
|
||||
</div></div>`;
|
||||
} else {
|
||||
return `<div class="item" style="--block-color:${item[5] || '#666'};" title="${item[0] || item[1]}">
|
||||
<a href="${item[2]}" class="image" data-background-image="${item_image}"></a>
|
||||
<div class="info">
|
||||
<a href="${item[2]}" class="title">${item[1]}</a>
|
||||
<p class="desc">${item[3] || item[2]}</p>
|
||||
</div></div>`;
|
||||
}
|
||||
|
||||
});
|
||||
return `<div class="links">${links.join('')}</div>`;
|
||||
}
|
||||
|
||||
hexo.extend.tag.register('links', linkGrid, {ends: true});
|
||||
87
scripts/tags/links.js
Normal file
87
scripts/tags/links.js
Normal file
@@ -0,0 +1,87 @@
|
||||
/* global hexo */
|
||||
|
||||
/*
|
||||
{% links %}
|
||||
- site: #main title
|
||||
owner: #alternate title for image tooltip (nullable)
|
||||
url: #link of site
|
||||
desc: #description (nullable)
|
||||
image: #icon image (nullable)
|
||||
color: #block color (nullable)
|
||||
{% endlinks %}
|
||||
|
||||
{% linksfile [path] %}
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const yaml = require('js-yaml');
|
||||
const url = require('url');
|
||||
|
||||
function linkGrid(args, content) {
|
||||
const theme = hexo.theme.config;
|
||||
|
||||
if(!args[0] && !content) {
|
||||
return
|
||||
}
|
||||
|
||||
if(args[0]) {
|
||||
const filepath = path.join(hexo.source_dir, args[0]);
|
||||
if(fs.existsSync(filepath)) {
|
||||
content = fs.readFileSync(filepath);
|
||||
}
|
||||
}
|
||||
|
||||
if (!content) {
|
||||
return
|
||||
}
|
||||
|
||||
const siteHost = url.parse(hexo.config.url).hostname || hexo.config.url;
|
||||
|
||||
const list = yaml.safeLoad(content);
|
||||
|
||||
var result = ''
|
||||
|
||||
list.forEach(item => {
|
||||
if(!item.url || !item.site) {
|
||||
return;
|
||||
}
|
||||
|
||||
var urlparam = {};
|
||||
|
||||
if(item.url) {
|
||||
urlparam = url.parse(item.url);
|
||||
}
|
||||
|
||||
var item_image = item.image || theme.images + '/404.png';
|
||||
|
||||
if (!item_image.startsWith('//') && !item_image.startsWith('http')) {
|
||||
item_image = theme.statics + item_image;
|
||||
}
|
||||
|
||||
result += `<div class="item" style="--block-color:${item.color || '#666'};" title="${item.owner || item.site}">`;
|
||||
|
||||
if (urlparam.protocol && urlparam.hostname !== siteHost) {
|
||||
item.url = Buffer.from(item.url).toString('base64');
|
||||
result += `<span class="exturl image" data-url="${item.url}" data-background-image="${item_image}"></span>
|
||||
<div class="info">
|
||||
<span class="exturl title" data-url="${item.url}">${item.site}</span>
|
||||
<p class="desc">${item.desc || item.url}</p>
|
||||
</div></div>`;
|
||||
} else {
|
||||
result += `<a href="${item.url}" class="image" data-background-image="${item_image}"></a>
|
||||
<div class="info">
|
||||
<a href="${item.url}" class="title">${item.site}</a>
|
||||
<p class="desc">${item.desc || item.url}</p>
|
||||
</div></div>`;
|
||||
}
|
||||
});
|
||||
|
||||
return `<div class="links">${result}</div>`;
|
||||
|
||||
}
|
||||
|
||||
hexo.extend.tag.register('links', linkGrid, {ends: true});
|
||||
hexo.extend.tag.register('linksfile', linkGrid, {ends: false, async: true})
|
||||
@@ -15,6 +15,7 @@
|
||||
--grey-1-a3: alpha(#fdfdfd, .3);
|
||||
--grey-9-a1: alpha(#000, .1);
|
||||
--grey-9-a5: alpha(#000, .5);
|
||||
--grey-2-a0: alpha(#f7f7f7, 0);
|
||||
|
||||
--color-pink-light: #ffe6fa;
|
||||
--color-cyan-light: #e3fdf5;
|
||||
@@ -37,6 +38,7 @@
|
||||
--color-pink-light-a7: alpha(#ffe6fa, .7);
|
||||
|
||||
--body-bg-shadow: var(--grey-2);
|
||||
--box-bg-shadow: var(--grey-9-a1);
|
||||
--text-color: var(--grey-7);
|
||||
--header-text-color: var(--grey-0);
|
||||
--primary-color: var(--color-red);
|
||||
@@ -47,7 +49,7 @@
|
||||
&:root {
|
||||
--grey-0: #222;
|
||||
--grey-1: #21252b;
|
||||
--grey-2: #333;
|
||||
--grey-2: #363636;
|
||||
--grey-3: #444;
|
||||
--grey-4: #666;
|
||||
--grey-5: #aaa;
|
||||
@@ -61,6 +63,7 @@
|
||||
--grey-1-a5: alpha(#222, .5);
|
||||
--grey-1-a3: alpha(#222, .3);
|
||||
--grey-9-a1: alpha(#333, .1);
|
||||
--grey-2-a0: alpha(#363636, 0);
|
||||
|
||||
--color-pink-light: shade(#ffe6fa, 80%);
|
||||
--color-cyan-light: shade(#e3fdf5, 80%);
|
||||
@@ -75,12 +78,13 @@
|
||||
--color-purple: lighten(#9d5b8b, 50%);
|
||||
--color-grey: lighten(#869194, 50%);
|
||||
|
||||
--body-bg-shadow: var(--grey-0);
|
||||
--body-bg-shadow: #000;
|
||||
--box-bg-shadow: #000;
|
||||
--text-color: var(--grey-5);
|
||||
--header-text-color: var(--grey-9);
|
||||
}
|
||||
|
||||
.note, .label {
|
||||
.note, .label, .tags a {
|
||||
filter: brightness(.7);
|
||||
the-transition();
|
||||
|
||||
|
||||
@@ -1,46 +1,50 @@
|
||||
@import 'copy-code';
|
||||
@import 'operation';
|
||||
|
||||
// Placeholder: $code-block
|
||||
$code-block {
|
||||
background: var(--grey-2);
|
||||
color: var(--grey-7);
|
||||
line-height: $line-height-code-block;
|
||||
margin: 20px auto;
|
||||
margin: 1.25rem auto;
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
code,
|
||||
.code-container {
|
||||
font-family: $font-family-monospace;
|
||||
font-size: $font-size-medium;
|
||||
@extend $mini-scrollbar;
|
||||
}
|
||||
|
||||
pre.info {
|
||||
|
||||
:not(td)>pre {
|
||||
background: var(--grey-1);
|
||||
border: 1px solid var(--grey-3);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
code {
|
||||
background: var(--grey-0);
|
||||
border-radius: 3px;
|
||||
color: var(--primary-color);
|
||||
padding: .2em .3em;
|
||||
word-wrap();
|
||||
border: .0625rem solid var(--grey-3);
|
||||
border-radius: .3125rem;
|
||||
padding: 1rem;
|
||||
line-break: anywhere;
|
||||
white-space: break-spaces;
|
||||
code {
|
||||
background: transparent;
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
// 代码样式
|
||||
:not(pre)>code {
|
||||
color: var(--primary-color);
|
||||
border-radius: .3em;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border: .0625rem solid rgba(0, 0, 0, .1);
|
||||
background-color: var(--grey-0);
|
||||
padding: .2em .3em;
|
||||
word-wrap();
|
||||
}
|
||||
|
||||
.highlight {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 5px 10px -2px var(--grey-9-a1);
|
||||
border-radius: .5rem;
|
||||
box-shadow: 0 .3125rem .625rem -.125rem var(--grey-9-a1);
|
||||
|
||||
@extend $code-block;
|
||||
|
||||
@@ -53,18 +57,11 @@ code {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: #fc625d;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
left: 12px;
|
||||
top: 13px;
|
||||
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
box-sizing: unset;
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
left: .75rem;
|
||||
top: .8125rem;
|
||||
box-shadow: 1.25rem 0 #fdbc40, 2.5rem 0 #35cd4b;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@@ -73,13 +70,14 @@ code {
|
||||
font-size: $font-size-small;
|
||||
font-weight: 700;
|
||||
padding: 0 6em;
|
||||
min-height: 40px;
|
||||
min-height: 2.5rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background-color: var(--grey-3);
|
||||
margin-bottom: .625rem;
|
||||
|
||||
&::before {
|
||||
content: attr(data-lang);
|
||||
@@ -87,7 +85,7 @@ code {
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-left: 10px;
|
||||
margin-left: .625rem;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -100,73 +98,6 @@ code {
|
||||
|
||||
}
|
||||
|
||||
.code-container {
|
||||
display: flex;
|
||||
|
||||
.show-btn {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 70px;
|
||||
text-align: center;
|
||||
color: var(--text-color);
|
||||
background-image: linear-gradient(180deg, transparent 10%, var(--grey-2) 50%);
|
||||
|
||||
.ic {
|
||||
animation: UpDown 2s infinite;
|
||||
}
|
||||
|
||||
&.open {
|
||||
background: none;
|
||||
bottom: 10px;
|
||||
.ic {
|
||||
animation: DownUp 2s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.marked {
|
||||
display: inline-block;
|
||||
margin-right: -10px;
|
||||
padding-right: 10px;
|
||||
box-sizing: unset;
|
||||
background-color: var(--color-red-a1);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
pre.gutter {
|
||||
disable-user-select();
|
||||
width: 30px;
|
||||
color: var(--color-grey);
|
||||
padding-right: 10px;
|
||||
text-align: right;
|
||||
overflow-y: hidden;
|
||||
//border-right: 1px solid var(--grey-3);
|
||||
}
|
||||
|
||||
pre.code {
|
||||
background: var(--grey-2);
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
|
||||
.marked {
|
||||
margin: auto -10px;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
the-transition();
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -176,28 +107,107 @@ code {
|
||||
min-width: 100%;
|
||||
z-index: $zindex-5;
|
||||
margin: 0;
|
||||
animation: elastic 1s;
|
||||
border-radius: 0px;
|
||||
border-radius: 0rem;
|
||||
@extend .elastic;
|
||||
|
||||
pre.code {
|
||||
.code-container {
|
||||
height: 100vh;
|
||||
overflow: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
&.breakline {
|
||||
.code-container table {
|
||||
line-break: anywhere;
|
||||
white-space: break-spaces;
|
||||
|
||||
pre {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
pre {
|
||||
@extend $code-block;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
.code-container {
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
|
||||
code {
|
||||
background: none;
|
||||
color: var(--grey-7);
|
||||
font-size: $font-size-small;
|
||||
padding: 0;
|
||||
text-shadow: none;
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: .625rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
white-space: pre;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: unset;
|
||||
vertical-align: unset;
|
||||
border: unset;
|
||||
the-transition();
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
padding-left: 3.125rem;
|
||||
}
|
||||
|
||||
td[data-num]::before {
|
||||
position: absolute;
|
||||
content: attr(data-num);
|
||||
padding-right: .9375rem;
|
||||
text-align: right;
|
||||
overflow-y: hidden;
|
||||
left: 0;
|
||||
width: 2.5rem;
|
||||
height: 100%;
|
||||
overflow-x: visible !important;
|
||||
color: var(--color-grey);
|
||||
background: var(--grey-2);
|
||||
}
|
||||
|
||||
|
||||
.marked {
|
||||
background-color: var(--color-red-a1);
|
||||
}
|
||||
|
||||
td{
|
||||
&:hover {
|
||||
background-color: var(--grey-3);
|
||||
}
|
||||
}
|
||||
|
||||
.show-btn {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1.875rem;
|
||||
text-align: center;
|
||||
color: var(--text-color);
|
||||
background-image: linear-gradient(to bottom, var(--grey-2-a0) 0, var(--grey-2) 80%);
|
||||
|
||||
.ic {
|
||||
@extend .up-down;
|
||||
}
|
||||
|
||||
&.open {
|
||||
background: none;
|
||||
bottom: .5rem;
|
||||
.ic {
|
||||
@extend .down-up;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// For diff highlight
|
||||
21
source/css/_common/components/highlight/operation.styl
Normal file
21
source/css/_common/components/highlight/operation.styl
Normal file
@@ -0,0 +1,21 @@
|
||||
.operation {
|
||||
color: var(--grey-5);
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
padding: .125rem .375rem;
|
||||
right: .125rem;
|
||||
top: .375rem;
|
||||
font-size: $font-size-smaller;
|
||||
|
||||
span {
|
||||
the-transition();
|
||||
margin: 0 .3125rem;
|
||||
|
||||
&:hover {
|
||||
color: var(--grey-7);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -8,12 +8,12 @@
|
||||
|
||||
small {
|
||||
color: var(--grey-4);
|
||||
margin: auto 5px;
|
||||
margin: auto .3125rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
padding: 20px 30px;
|
||||
padding: 1.25rem 1.875rem;
|
||||
margin: 0;
|
||||
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
|
||||
.item.title, .item.header, .item.section {
|
||||
a {
|
||||
border-bottom: 1px dashed var(--grey-4);
|
||||
border-bottom: .0625rem dashed var(--grey-4);
|
||||
}
|
||||
&:hover a {
|
||||
border-bottom-color: var(--color-blue);
|
||||
@@ -96,13 +96,13 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 10px 30px;
|
||||
padding: .625rem 1.875rem;
|
||||
|
||||
|
||||
.meta {
|
||||
display: inline;
|
||||
font-size: $font-size-smallest;
|
||||
margin-right: 10px;
|
||||
margin-right: .625rem;
|
||||
|
||||
time {
|
||||
color: var(--grey-4);
|
||||
@@ -113,8 +113,7 @@
|
||||
display: inline;
|
||||
|
||||
|
||||
a,
|
||||
span.exturl {
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
|
||||
&:hover {
|
||||
@@ -124,7 +123,7 @@
|
||||
|
||||
.i-link-alt {
|
||||
font-size: $font-size-small;
|
||||
margin-left: 5px;
|
||||
margin-left: .3125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
378
source/css/_common/components/pages/home.styl
Normal file
378
source/css/_common/components/pages/home.styl
Normal file
@@ -0,0 +1,378 @@
|
||||
$item {
|
||||
position: relative;
|
||||
color: inherit;
|
||||
width: calc(50% - 2rem);
|
||||
min-width: calc(50% - 2rem);
|
||||
height: 14rem;
|
||||
margin: 1rem;
|
||||
opacity: 0;
|
||||
|
||||
&.show {
|
||||
@extend .slide-up-big-in;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
width: calc(100% - 1rem) !important;
|
||||
min-width: calc(100% - 1rem) !important;
|
||||
margin: 1rem .5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.index.wrap {
|
||||
.btn {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform-style: preserve-3d;
|
||||
transform: translateZ(2rem);
|
||||
backface-visibility: hidden;
|
||||
padding: .3rem 1rem;
|
||||
border-radius: 1rem 0;
|
||||
color: var(--grey-0);
|
||||
background-image: linear-gradient(to right, var(--color-pink) 0, var(--color-orange) 100%);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
transform-style: preserve-3d;
|
||||
transform: translateZ(-2rem);
|
||||
backface-visibility: hidden;
|
||||
height: calc(100% - 1rem);
|
||||
width: calc(100% - 1rem);
|
||||
border-radius: 5rem;
|
||||
left: .5rem;
|
||||
top: .8rem;
|
||||
box-shadow: 0 0 .6rem .6rem var(--color-pink-a3);
|
||||
background-color: var(--color-pink-a3);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateZ(2.5rem);
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
transform: translateZ(-2.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: $font-size-smaller;
|
||||
color: var(--grey-5);
|
||||
|
||||
.ic {
|
||||
margin-right: .0625rem;
|
||||
}
|
||||
|
||||
.item + .item {
|
||||
margin-left: .625rem;
|
||||
}
|
||||
|
||||
&.footer {
|
||||
position: absolute;
|
||||
bottom: .5rem;
|
||||
max-width: calc(100% - 7rem);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
justify-content: flex-start;
|
||||
|
||||
span {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
&.hide .item {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
@extend $item;
|
||||
perspective: 62.5rem;
|
||||
&.show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.cover,
|
||||
.info {
|
||||
position: absolute;
|
||||
the-flex();
|
||||
border-radius: .375rem;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
backface-visibility: hidden;
|
||||
transform-style: preserve-3d;
|
||||
transition: ease-in-out 600ms;
|
||||
}
|
||||
|
||||
.cover {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
padding: .5rem 1rem;
|
||||
font-size: $font-size-medium;
|
||||
color: var(--header-text-color);
|
||||
overflow: hidden;
|
||||
transform: rotateY(0deg);
|
||||
background-image: unquote(hexo-config('index.cover'));
|
||||
|
||||
.title {
|
||||
margin: 0rem;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: linear-gradient(135deg, #434343 0%, black 100%);
|
||||
opacity: .25;
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: attr(data-top);
|
||||
font-size: $font-size-smallest;
|
||||
position: absolute;
|
||||
right: .9375rem;
|
||||
top: .625rem;
|
||||
padding: 0 .3125rem;
|
||||
border-radius: .3125rem;
|
||||
box-shadow: 0 0rem .3125rem .0625rem rgba(0,0,0,.6);
|
||||
background: rgba(0,0,0,.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.info {
|
||||
background-color: var(--grey-0);
|
||||
transform: rotateY(-180deg);
|
||||
padding: 1rem 1.5rem 4rem;
|
||||
justify-content: space-between;
|
||||
|
||||
+mobile() {
|
||||
padding: 1rem 1rem 4rem;
|
||||
}
|
||||
|
||||
.ribbon {
|
||||
left: -2.5rem;
|
||||
margin-bottom: .8rem;
|
||||
max-width: calc(100% + 2rem);
|
||||
+mobile() {
|
||||
left: -2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(even) .info {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
.cover {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.info {
|
||||
transform: rotateY(0deg);
|
||||
box-shadow: 0em 0em 2em var(--box-bg-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(even).active {
|
||||
.cover {
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
.ic {
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
ul.posts {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: baseline;
|
||||
min-height: 5rem;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
width: 45%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.segments {
|
||||
the-flex();
|
||||
|
||||
> .item {
|
||||
@extend $item;
|
||||
|
||||
display: flex;
|
||||
border-radius: .625rem;
|
||||
|
||||
width: calc(100% - 2rem);
|
||||
min-width: calc(100% - 2rem);
|
||||
|
||||
shadow-box(false);
|
||||
the-transition();
|
||||
|
||||
|
||||
+mobile() {
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
max-height: fit-content;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0em 0em 2em var(--box-bg-shadow);
|
||||
|
||||
.cover img {
|
||||
transform: scale(1.05) rotate(1deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 50%;
|
||||
margin-right: 1.5rem;
|
||||
clip-path: polygon(0 0, 92% 0%, 100% 100%, 0% 100%);
|
||||
border-radius: .625rem 0 0 .625rem;
|
||||
overflow: hidden;
|
||||
|
||||
+mobile() {
|
||||
width: 100%;
|
||||
height: 14rem;
|
||||
margin: auto;
|
||||
clip-path: polygon(0 0,100% 0,100% 92%,0 100%);
|
||||
border-radius: .625rem .625rem 0 0;
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
the-transition();
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
padding: 1rem 1.5rem 3rem 0;
|
||||
perspective: 62.5rem;
|
||||
|
||||
+mobile() {
|
||||
width: 100%;
|
||||
height: 14rem;
|
||||
padding: 0rem 1rem 3rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 0;
|
||||
|
||||
+mobile() {
|
||||
.item:not(:first-child) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: .625rem 0;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
overflow: hidden;
|
||||
font-size: $font-size-small;
|
||||
max-height: 5rem;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
> .item:nth-child(even) {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
+mobile() {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cover {
|
||||
margin-right: auto;
|
||||
margin-left: 1.5rem;
|
||||
clip-path: polygon(0 0%, 100% 0%, 100% 100%, 8% 100%);
|
||||
border-radius: 0rem .625rem .625rem 0;
|
||||
|
||||
+mobile() {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
clip-path: polygon(0 0,100% 0,100% 100%,0 92%);
|
||||
border-radius: .625rem .625rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 1rem 0 3rem 1.5rem;
|
||||
|
||||
+mobile() {
|
||||
padding: 0rem 1rem 3rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
left: 0;
|
||||
right: auto;
|
||||
border-radius: 0 1rem;
|
||||
background-image: linear-gradient(to right, var(--color-orange) 0, var(--color-pink) 100%);
|
||||
}
|
||||
|
||||
.meta.footer {
|
||||
right: .5rem;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.cover img {
|
||||
transform: scale(1.05) rotate(-1deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -6,24 +6,23 @@
|
||||
|
||||
.page {
|
||||
.notfound {
|
||||
width: 300px;
|
||||
height: 330px;
|
||||
width: 18.75rem;
|
||||
height: 2.625rem;
|
||||
background: url("../images/404.png") no-repeat center bottom;
|
||||
text-align: center;
|
||||
margin:100px auto;
|
||||
margin:6.25rem auto;
|
||||
}
|
||||
|
||||
.anchor::before {
|
||||
font-family-icons();
|
||||
color: var(--grey-4);
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
left: -1.5625rem;
|
||||
margin-top: .25em;
|
||||
visibility: visible;
|
||||
the-transition(, ease-out);
|
||||
|
||||
+mobile-small() {
|
||||
left: -3px;
|
||||
left: -.1875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,10 +32,10 @@
|
||||
font-size: $font-size-small;
|
||||
margin-top: .15em;
|
||||
color: pink;
|
||||
left: -30px;
|
||||
left: -1.875rem;
|
||||
|
||||
+mobile-small() {
|
||||
left: -5px;
|
||||
left: -.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
margin: .625rem;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color) !important;
|
||||
@@ -1,9 +1,8 @@
|
||||
.breadcrumb {
|
||||
display: inline-flex;
|
||||
font-size: $font-size-smaller;
|
||||
color: var(--grey-4);
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
margin-top: 1.25rem;
|
||||
padding: 1rem 2rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@@ -11,12 +10,13 @@
|
||||
padding: $content-tablet-padding !important;
|
||||
}
|
||||
|
||||
i {
|
||||
margin: 0 2px;
|
||||
.ic {
|
||||
margin: 0 .125rem;
|
||||
color: var(--grey-4);
|
||||
|
||||
&:nth-child(1) {
|
||||
margin-left: 0px;
|
||||
margin-right: 5px;
|
||||
margin-left: 0rem;
|
||||
margin-right: .3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,8 +26,8 @@
|
||||
|
||||
span.current {
|
||||
background-color: var(--color-red-a1);
|
||||
border-radius: 10px;
|
||||
padding: 0 10px;
|
||||
border-radius: .625rem;
|
||||
padding: 0 .625rem;
|
||||
the-transition();
|
||||
|
||||
span {
|
||||
41
source/css/_common/components/post/copyright.styl
Normal file
41
source/css/_common/components/post/copyright.styl
Normal file
@@ -0,0 +1,41 @@
|
||||
#copyright {
|
||||
background: var(--grey-2);
|
||||
padding: 1em 2em;
|
||||
position: relative;
|
||||
font-size: $font-size-smallest;
|
||||
border-radius: .625rem;
|
||||
color: var(--grey-6);
|
||||
|
||||
li {
|
||||
&::before {
|
||||
font-family-icons()
|
||||
color: var(--grey-5);
|
||||
margin-right: .3125rem;
|
||||
font-size: 1.1em;
|
||||
line-height: .75em;
|
||||
vertical-align: -.0667em;
|
||||
}
|
||||
}
|
||||
|
||||
.author::before {
|
||||
@extend .i-person:before;
|
||||
}
|
||||
|
||||
.link::before {
|
||||
@extend .i-link-circle:before;
|
||||
}
|
||||
|
||||
.license::before {
|
||||
@extend .i-share:before;
|
||||
}
|
||||
// &::before {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// width: .3125rem;
|
||||
// height: 100%;
|
||||
// left: -.3125rem;
|
||||
// top: 0rem;
|
||||
// background: var(--primary-color);
|
||||
// border-radius: .375rem;
|
||||
// }
|
||||
}
|
||||
@@ -1,7 +1,12 @@
|
||||
.md {
|
||||
|
||||
a,
|
||||
span.exturl {
|
||||
@keyframes rainbow {
|
||||
to {
|
||||
background-position: -2000vw;
|
||||
}
|
||||
}
|
||||
|
||||
.md {
|
||||
a {
|
||||
color: var(--primary-color); //原始链接颜色
|
||||
|
||||
&:hover {
|
||||
@@ -14,6 +19,10 @@
|
||||
font-size: $font-size-headings-base - $font-size-headings-step * headline;
|
||||
}
|
||||
}
|
||||
|
||||
> h1:first-child {
|
||||
margin-top: -1.5rem;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
@@ -21,7 +30,7 @@
|
||||
h5,
|
||||
h6 {
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
padding-top: .625rem;
|
||||
|
||||
&:hover .anchor {
|
||||
visibility: visible;
|
||||
@@ -37,18 +46,18 @@
|
||||
display: block;
|
||||
box-sizing: unset;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
height: .0625rem;
|
||||
background: var(--grey-3);
|
||||
padding-right: 20px;
|
||||
margin-left: -20px;
|
||||
margin-top: 5px;
|
||||
padding-right: 1.25rem;
|
||||
margin-left: -1.25rem;
|
||||
margin-top: .3125rem;
|
||||
}
|
||||
|
||||
.anchor {
|
||||
border-bottom-style: none;
|
||||
color: var(--grey-4);
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-left: .625rem;
|
||||
visibility: hidden;
|
||||
|
||||
&:hover {
|
||||
@@ -77,27 +86,27 @@
|
||||
blockquote {
|
||||
font-size: 90%;
|
||||
background-color: var(--grey-2);
|
||||
margin: 20px 0;
|
||||
margin: 1.25rem 0;
|
||||
|
||||
ul {
|
||||
margin: 10px 0 !important;
|
||||
margin: .625rem 0 !important;
|
||||
}
|
||||
|
||||
ul li::before {
|
||||
width: 6px !important;
|
||||
height: 6px !important;
|
||||
top: 11px !important;
|
||||
width: .375rem !important;
|
||||
height: .375rem !important;
|
||||
top: .6875rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
>blockquote {
|
||||
/*margin: 0 -30px 20px -33px;*/
|
||||
border-left: 3px solid var(--primary-color);
|
||||
padding: 10px 15px;
|
||||
/*margin: 0 -1.875rem 1.25rem -2.0625rem;*/
|
||||
border-left: .1875rem solid var(--primary-color);
|
||||
padding: .625rem .9375rem;
|
||||
|
||||
+tablet-mobile() {
|
||||
//margin: 0 -20px 20px;
|
||||
padding: 10px 25px;
|
||||
//margin: 0 -1.25rem 1.25rem;
|
||||
padding: .625rem 1.5625rem;
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -105,12 +114,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
overflow: auto
|
||||
}
|
||||
|
||||
iframe {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.image-info {
|
||||
@@ -122,7 +127,7 @@
|
||||
|
||||
.video-container {
|
||||
height: 0;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.25rem;
|
||||
overflow: hidden;
|
||||
padding-top: 75%;
|
||||
position: relative;
|
||||
@@ -152,7 +157,7 @@
|
||||
summary {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
padding: .625rem;
|
||||
|
||||
.details-marker:before {
|
||||
font-family-icons();
|
||||
@@ -161,8 +166,8 @@
|
||||
}
|
||||
}
|
||||
p {
|
||||
padding: 10px;
|
||||
margin: 0px;
|
||||
padding: .625rem;
|
||||
margin: 0rem;
|
||||
}
|
||||
li p {
|
||||
padding: 0;
|
||||
@@ -171,7 +176,7 @@
|
||||
|
||||
details[open] {
|
||||
> summary {
|
||||
border-radius: 20px;
|
||||
border-radius: 1.25rem;
|
||||
background: var(--grey-2);
|
||||
.details-marker:before {
|
||||
@extend .i-angle-down:before;
|
||||
@@ -180,7 +185,7 @@
|
||||
}
|
||||
p {
|
||||
color: var(--grey-6);
|
||||
animation: fadeIn .5s;
|
||||
@extend .fade-in;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -190,65 +195,72 @@
|
||||
|
||||
ins {
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
border-bottom: .125rem solid var(--primary-color);
|
||||
}
|
||||
|
||||
ruby {
|
||||
padding: 0 5px;
|
||||
padding: 0 .3125rem;
|
||||
}
|
||||
|
||||
.katex-display {
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
@extend $mini-scrollbar;
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
position: relative;
|
||||
.spoiler:not(.bulr) {
|
||||
background-color: var(--text-color);
|
||||
color: var(--text-color);
|
||||
text-shadow: none;
|
||||
transition: color .3s;
|
||||
padding:0 .1875rem;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: var(--text-color);
|
||||
z-index: -1;
|
||||
the-transition();
|
||||
&:hover {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: .15
|
||||
}
|
||||
.bulr {
|
||||
text-shadow: rgba(0, 0, 0, .7) 0rem 0rem .625rem;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.rainbow {
|
||||
background-image: linear-gradient( to left, orangered, orange, gold, lightgreen, cyan, dodgerblue, mediumpurple, hotpink, orangered);
|
||||
background-size: 110vw;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
animation: rainbow 60s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.article .md {
|
||||
|
||||
.anchor::before,
|
||||
.anchor::after {
|
||||
content: "H";
|
||||
font-family: $font-family-posts;
|
||||
left: -30px;
|
||||
top: 16px;
|
||||
width: 20px;
|
||||
height: 25px;
|
||||
left: -1.875rem;
|
||||
top: 1rem;
|
||||
width: 1.25rem;
|
||||
height: 1.5625rem;
|
||||
text-align: right;
|
||||
visibility: visible;
|
||||
font-size: 80%;
|
||||
|
||||
+mobile-small() {
|
||||
left: -10px;
|
||||
left: -.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.anchor::after {
|
||||
font-size: 50%;
|
||||
left: -22px;
|
||||
left: -1.375rem;
|
||||
line-height: 3em;
|
||||
|
||||
+mobile-small() {
|
||||
left: -3px;
|
||||
left: -.1875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
&::before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
height: .0625rem;
|
||||
background: var(--grey-3);
|
||||
display: block;
|
||||
margin: 20px auto 0px;
|
||||
margin: 1.25rem auto 0rem;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
.md > .gallery {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-gap: 10px;
|
||||
grid-gap: .625rem;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 1.25rem;
|
||||
|
||||
+mobile() {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@@ -1,6 +1,6 @@
|
||||
.post header {
|
||||
font-size: $font-size-large;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: .625rem;
|
||||
|
||||
|
||||
.title {
|
||||
@@ -8,16 +8,10 @@
|
||||
margin: initial;
|
||||
text-align: center;
|
||||
word-wrap();
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: .625rem;
|
||||
}
|
||||
|
||||
|
||||
.sticky {
|
||||
display: inline-block;
|
||||
transform: rotate(30deg);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@@ -25,13 +19,13 @@
|
||||
|
||||
.i-link-alt {
|
||||
font-size: $font-size-small;
|
||||
margin-left: 5px;
|
||||
margin-left: .3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
text-align: center;
|
||||
border-top: 1px dashed var(--grey-9-a1);
|
||||
border-top: .0625rem dashed var(--grey-9-a1);
|
||||
font-family: $font-family-posts;
|
||||
}
|
||||
|
||||
@@ -44,11 +38,11 @@
|
||||
text-align: right;
|
||||
|
||||
.item {
|
||||
//border-radius: 10px;
|
||||
//padding: 0 10px;
|
||||
//border-radius: .625rem;
|
||||
//padding: 0 .625rem;
|
||||
display: inline-block;
|
||||
//margin-bottom: 5px;
|
||||
margin-right: 10px;
|
||||
//margin-bottom: .3125rem;
|
||||
margin-right: .625rem;
|
||||
//the-transition();
|
||||
}
|
||||
|
||||
@@ -75,7 +69,7 @@
|
||||
}*/
|
||||
|
||||
.icon {
|
||||
margin-right: 3px;
|
||||
margin-right: .1875rem;
|
||||
|
||||
+tablet-mobile() {
|
||||
display: inline-block;
|
||||
63
source/css/_common/components/post/nav.styl
Normal file
63
source/css/_common/components/post/nav.styl
Normal file
@@ -0,0 +1,63 @@
|
||||
.nav {
|
||||
display: flex;
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
+mobile() {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 50%;
|
||||
+mobile() {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
color: var(--header-text-color);
|
||||
padding: 1.25rem 2.5rem;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg,#434343,#000);
|
||||
opacity: .5;
|
||||
the-transition();
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: $font-size-smaller;
|
||||
}
|
||||
|
||||
&.left {
|
||||
span, h3 {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
span, h3 {
|
||||
align-self: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@@ -11,9 +11,9 @@
|
||||
font-size: $font-size-large;
|
||||
}
|
||||
|
||||
.exturl i {
|
||||
.exturl .ic {
|
||||
font-size: $font-size-small;
|
||||
margin-left: 4px;
|
||||
margin-left: .25rem;
|
||||
}
|
||||
|
||||
.image-caption,
|
||||
@@ -22,12 +22,12 @@
|
||||
font-size: $font-size-small;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
margin: -20px auto 15px;
|
||||
margin: -1.25rem auto .9375rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 40px;
|
||||
margin-top: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -1,17 +1,17 @@
|
||||
.reward {
|
||||
margin: 20px auto;
|
||||
padding: 10px 0;
|
||||
margin: 1.25rem auto;
|
||||
padding: .625rem 0;
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
background: var(--primary-color);
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
border-radius: .3125rem;
|
||||
color: var(--grey-0);
|
||||
cursor: pointer;
|
||||
line-height: 2;
|
||||
outline: 0;
|
||||
padding: 0 15px;
|
||||
padding: 0 .9375rem;
|
||||
vertical-align: text-top;
|
||||
|
||||
&:hover {
|
||||
@@ -19,7 +19,7 @@
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
margin-right: .3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
}
|
||||
|
||||
#qr {
|
||||
padding-top: 20px;
|
||||
padding-top: 1.25rem;
|
||||
display: none;
|
||||
|
||||
a {
|
||||
62
source/css/_common/components/post/tags.styl
Normal file
62
source/css/_common/components/post/tags.styl
Normal file
@@ -0,0 +1,62 @@
|
||||
.post .tags {
|
||||
text-align: left;
|
||||
margin-top: .625rem;
|
||||
font-size: $font-size-smallest;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0rem .3125rem;
|
||||
border-radius: .3125rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: .625rem;
|
||||
}
|
||||
|
||||
&:nth-child(1n) {
|
||||
background: $primary-bg;
|
||||
color: $primary-text;
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
background: $info-bg;
|
||||
color: $info-text;
|
||||
}
|
||||
|
||||
&:nth-child(3n) {
|
||||
background: $success-bg;
|
||||
color: $success-text;
|
||||
}
|
||||
|
||||
&:nth-child(4n) {
|
||||
background: $warning-bg;
|
||||
color: $warning-text;
|
||||
}
|
||||
|
||||
&:nth-child(5n) {
|
||||
background: $danger-bg;
|
||||
color: $danger-text;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
right: 0;
|
||||
background: var(--color-red-a1);
|
||||
border-radius: .25rem;
|
||||
the-transition();
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
|
||||
&:before {
|
||||
width: 104%;
|
||||
left: -2%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,21 +1,21 @@
|
||||
.widgets {
|
||||
border-top: 1px solid var(--grey-2);
|
||||
margin-top: 15px;
|
||||
border-top: .0625rem solid var(--grey-2);
|
||||
margin-top: .9375rem;
|
||||
text-align: center;
|
||||
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
padding-left: .625rem;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
width: .3125rem;
|
||||
height: 2em;
|
||||
left: -5px;
|
||||
left: -.3125rem;
|
||||
background: var(--primary-color);
|
||||
border-radius: 6px;
|
||||
border-radius: .375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
span.label {
|
||||
display: inline;
|
||||
border-radius: .3em;
|
||||
border: 1px solid;
|
||||
border: .0625rem solid;
|
||||
padding: .2em .3em;
|
||||
font-family: $font-family-monospace;
|
||||
font-size: $font-size-medium;
|
||||
@@ -20,7 +20,7 @@
|
||||
display: block;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 15px;
|
||||
border-radius: .9375rem;
|
||||
background: var(--grey-1) center no-repeat;
|
||||
background-size: contain;
|
||||
flex-shrink: 0;
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
.title {
|
||||
margin: .5rem 0;
|
||||
font-family: $font-family-headings;
|
||||
font-family: $font-family-title;
|
||||
font-weight: bold;
|
||||
color: var(--block-color);
|
||||
.ic {
|
||||
@@ -49,7 +49,7 @@
|
||||
&:hover {
|
||||
color: var(--header-text-color);
|
||||
background-color: var(--block-color);
|
||||
box-shadow: 0 2px 20px var(--block-color);
|
||||
box-shadow: 0 .125rem 1.25rem var(--block-color);
|
||||
border-color: var(--block-color);
|
||||
|
||||
.image {
|
||||
@@ -75,15 +75,15 @@
|
||||
}
|
||||
|
||||
dl {
|
||||
padding-inline-start: 40px;
|
||||
padding-inline-start: 2.5rem;
|
||||
+tablet-mobile() {
|
||||
padding-inline-start: 20px;
|
||||
padding-inline-start: 1.25rem;
|
||||
}
|
||||
dt {
|
||||
position: relative;
|
||||
}
|
||||
dd {
|
||||
padding-left: 15px;
|
||||
padding-left: .9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -108,7 +108,7 @@
|
||||
font-family-icons();
|
||||
color: var(--grey-4);
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
margin-right: .625rem;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked+label::before {
|
||||
@@ -119,7 +119,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.comments {
|
||||
#comments {
|
||||
ul > li::before {
|
||||
width: .3rem;
|
||||
height: .3rem;
|
||||
@@ -1,12 +1,12 @@
|
||||
.md .note {
|
||||
|
||||
border-radius: 3px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: .1875rem;
|
||||
margin-bottom: 1.25rem;
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
|
||||
background: var(--note-bg);
|
||||
border: 1px solid var(--note-border);
|
||||
border: .0625rem solid var(--note-border);
|
||||
color: var(--note-text);
|
||||
font-size: $font-size-small;
|
||||
|
||||
@@ -16,11 +16,10 @@
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
a,
|
||||
span.exturl {
|
||||
a {
|
||||
&:not(.btn) {
|
||||
color: var(--note-hover);
|
||||
border-bottom: 1px dashed var(--note-border);
|
||||
border-bottom: .0625rem dashed var(--note-border);
|
||||
|
||||
&:hover {
|
||||
color: var(--note-text);
|
||||
@@ -42,7 +41,7 @@
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 3px;
|
||||
margin-top: .1875rem;
|
||||
border-bottom: initial;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0;
|
||||
@@ -1,5 +1,5 @@
|
||||
.md ol>li.quiz {
|
||||
margin: 10px 0;
|
||||
margin: .625rem 0;
|
||||
|
||||
&::before{
|
||||
counter-increment: counter;
|
||||
@@ -26,7 +26,7 @@
|
||||
content: "[单选题]";
|
||||
font-size: $font-size-smallest;
|
||||
color: var(--grey-4);
|
||||
margin: auto 5px;
|
||||
margin: auto .3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,24 +38,24 @@
|
||||
|
||||
.gap {
|
||||
display: inline-block;
|
||||
min-width: 40px;
|
||||
min-width: 2.5rem;
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
text-indent: -9999px;
|
||||
padding: 0 .625rem;
|
||||
text-indent: -624.9375rem;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
content: "";
|
||||
background: var(--text-color);
|
||||
width: calc(100% + 20px);
|
||||
height: 1px;
|
||||
margin-bottom: -1px;
|
||||
margin-left: -10px;
|
||||
width: calc(100% + 1.25rem);
|
||||
height: .0625rem;
|
||||
margin-bottom: -.0625rem;
|
||||
margin-left: -.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.show.fill .gap{
|
||||
text-indent: 0px;
|
||||
text-indent: 0rem;
|
||||
}
|
||||
|
||||
&.true,
|
||||
@@ -105,10 +105,10 @@
|
||||
|
||||
.mistake {
|
||||
display: block;
|
||||
border: 3px dashed var(--grey-4);
|
||||
padding: 10px 20px;
|
||||
border: .1875rem dashed var(--grey-4);
|
||||
padding: .625rem 1.25rem;
|
||||
background: var(--grey-3);
|
||||
margin: 5px;
|
||||
margin: .3125rem;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
@@ -121,17 +121,17 @@
|
||||
|
||||
&.show blockquote {
|
||||
display: block;
|
||||
animation: slide .5s;
|
||||
@extend .slide;
|
||||
}
|
||||
|
||||
ul.options {
|
||||
padding-inline-start: 10px;
|
||||
padding-inline-start: .625rem;
|
||||
|
||||
li {
|
||||
|
||||
&::before {
|
||||
color: var(--color-grey);
|
||||
margin-right: 10px;
|
||||
margin-right: .625rem;
|
||||
the-transition();
|
||||
li-nodot();
|
||||
}
|
||||
@@ -166,8 +166,8 @@
|
||||
&::after {
|
||||
font-family-icons();
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
top: 0px;
|
||||
left: -1.5625rem;
|
||||
top: 0rem;
|
||||
}
|
||||
|
||||
&.right {
|
||||
@@ -192,7 +192,7 @@
|
||||
&::after {
|
||||
@extend .i-times:before;
|
||||
color: var(--color-red);
|
||||
animation: fadeIn .5s;
|
||||
@extend .fade-in;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -7,19 +7,19 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
margin-bottom: -1px;
|
||||
margin-bottom: -.0625rem;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
border: none;
|
||||
z-index: 0;
|
||||
border-bottom: 1px solid var(--grey-3);
|
||||
border-bottom: .0625rem solid var(--grey-3);
|
||||
|
||||
li {
|
||||
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
padding: 5px 20px;
|
||||
padding: .3125rem 1.25rem;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
@@ -28,11 +28,11 @@
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
transition: all .2s ease-in-out;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-bottom: .125rem solid transparent;
|
||||
}
|
||||
|
||||
&.active::before {
|
||||
@@ -45,9 +45,9 @@
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 20px;
|
||||
padding: 1.25rem;
|
||||
display: none;
|
||||
animation: fadeIn .5s;
|
||||
@extend .fade-in;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
@@ -5,6 +5,7 @@ $cat-img {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
animation: rotating 2.79s cubic-bezier(.65, .54, .12, .93) infinite;
|
||||
backface-visibility: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
@@ -19,19 +20,20 @@ $cat-img {
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
#loading {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: $zindex-5;
|
||||
transform: translateZ(.125rem);
|
||||
background-color: var(--grey-1);
|
||||
}
|
||||
|
||||
.cat {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 10em;
|
||||
max-width: 10rem;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -91,12 +93,3 @@ $cat-img {
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotating {
|
||||
from {
|
||||
transform: rotate(720deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@ g.classGroup text {
|
||||
fill: var(--text-color);
|
||||
stroke: none;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 10px;
|
||||
font-size: .625rem;
|
||||
|
||||
.title {
|
||||
font-weight: bolder;
|
||||
@@ -27,12 +27,12 @@ g.classGroup line {
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: var(--grey-1);
|
||||
opacity: 0.5;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.classLabel .label {
|
||||
fill: var(--text-color);
|
||||
font-size: 10px;
|
||||
font-size: .625rem;
|
||||
}
|
||||
|
||||
.relation {
|
||||
@@ -15,7 +15,7 @@
|
||||
.node path {
|
||||
fill: var(--grey-1);
|
||||
stroke: var(--text-color);
|
||||
stroke-width: 1px;
|
||||
stroke-width: .0625rem;
|
||||
}
|
||||
|
||||
.node .label {
|
||||
@@ -31,13 +31,13 @@
|
||||
|
||||
.edgePath .path {
|
||||
stroke: var(--text-color);
|
||||
stroke-width: 1.5px;
|
||||
stroke-width: 1..3125rem;
|
||||
}
|
||||
|
||||
.edgeLabel {
|
||||
background-color: #e8e8e8;
|
||||
rect {
|
||||
opacity: 0.9;
|
||||
opacity: .9;
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
@@ -45,7 +45,7 @@
|
||||
.cluster rect {
|
||||
fill: var(--grey-2);
|
||||
stroke: var(--text-color);
|
||||
stroke-width: 1px;
|
||||
stroke-width: .0625rem;
|
||||
}
|
||||
|
||||
.cluster text {
|
||||
@@ -55,13 +55,13 @@
|
||||
div.mermaidTooltip {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
max-width: 200px;
|
||||
padding: 2px;
|
||||
max-width: 12.5rem;
|
||||
padding: .125rem;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 12px;
|
||||
font-size: .75rem;
|
||||
background: var(--grey-1);
|
||||
border: 1px solid var(--text-color);
|
||||
border-radius: 2px;
|
||||
border: .0625rem solid var(--text-color);
|
||||
border-radius: .125rem;
|
||||
pointer-events: none;
|
||||
z-index: $zindex-3;
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
.section {
|
||||
stroke: none;
|
||||
opacity: 0.2;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
.section0 {
|
||||
@@ -20,7 +20,7 @@
|
||||
.section1,
|
||||
.section3 {
|
||||
fill: var(--grey-0);
|
||||
opacity: 0.2;
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
.sectionTitle0 {
|
||||
@@ -41,8 +41,8 @@
|
||||
|
||||
.sectionTitle {
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
text-height: 14px;
|
||||
font-size: .6875rem;
|
||||
text-height: .875rem;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
|
||||
.grid .tick {
|
||||
stroke: var(--text-color);
|
||||
opacity: 0.8;
|
||||
opacity: .8;
|
||||
shape-rendering: crispEdges;
|
||||
text {
|
||||
font-family: var(--mermaid-font-family);
|
||||
@@ -68,7 +68,7 @@
|
||||
.today {
|
||||
fill: none;
|
||||
stroke: var(--primary-color);
|
||||
stroke-width: 2px;
|
||||
stroke-width: .125rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -86,13 +86,13 @@
|
||||
}
|
||||
|
||||
.taskText:not([font-size]) {
|
||||
font-size: 11px;
|
||||
font-size: .6875rem;
|
||||
}
|
||||
|
||||
.taskTextOutsideRight {
|
||||
fill: var(--text-color);
|
||||
text-anchor: start;
|
||||
font-size: 11px;
|
||||
font-size: .6875rem;
|
||||
font-family: var(--mermaid-font-family);
|
||||
|
||||
}
|
||||
@@ -100,7 +100,7 @@
|
||||
.taskTextOutsideLeft {
|
||||
fill: var(--text-color);
|
||||
text-anchor: end;
|
||||
font-size: 11px;
|
||||
font-size: .6875rem;
|
||||
}
|
||||
|
||||
/* Special case clickable */
|
||||
@@ -223,7 +223,7 @@
|
||||
}
|
||||
|
||||
.milestone {
|
||||
transform: rotate(45deg) scale(0.8,0.8);
|
||||
transform: rotate(45deg) scale(.8,.8);
|
||||
}
|
||||
|
||||
.milestoneText {
|
||||
@@ -245,7 +245,7 @@
|
||||
|
||||
.titleText {
|
||||
text-anchor: middle;
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
fill: var(--text-color);
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
@@ -10,7 +10,7 @@ pre > svg {
|
||||
|
||||
pre.graphviz {
|
||||
white-space: normal;
|
||||
max-width: calc(100% - 50px);
|
||||
max-width: calc(100% - 3.125rem);
|
||||
svg > g > polygon {
|
||||
fill: var(--grey-1);
|
||||
}
|
||||
@@ -18,7 +18,7 @@ pre.graphviz {
|
||||
|
||||
.mermaid {
|
||||
&.graph svg{
|
||||
max-height: 300px;
|
||||
max-height: 18.75rem;
|
||||
}
|
||||
|
||||
@import 'flowchart';
|
||||
@@ -1,6 +1,6 @@
|
||||
.pieTitleText {
|
||||
text-anchor: middle;
|
||||
font-size: 25px;
|
||||
font-size: 1.5625rem;
|
||||
fill: $taskTextDarkColor;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
@@ -76,7 +76,7 @@ text.actor {
|
||||
fill: black;
|
||||
stroke: none;
|
||||
font-family: var(--mermaid-font-family);
|
||||
font-size: 14px;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.activation0 {
|
||||
@@ -1,13 +1,13 @@
|
||||
g.stateGroup text {
|
||||
fill: var(--text-color);
|
||||
stroke: none;
|
||||
font-size: 10px;
|
||||
font-size: .625rem;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
g.stateGroup text {
|
||||
fill: var(--text-color);
|
||||
stroke: none;
|
||||
font-size: 10px;
|
||||
font-size: .625rem;
|
||||
|
||||
}
|
||||
g.stateGroup .state-title {
|
||||
@@ -33,12 +33,12 @@ g.stateGroup line {
|
||||
|
||||
.stateGroup .composit {
|
||||
fill: white;
|
||||
border-bottom: 1px
|
||||
border-bottom: .0625rem
|
||||
}
|
||||
|
||||
.stateGroup .alt-composit {
|
||||
fill: #e0e0e0;
|
||||
border-bottom: 1px
|
||||
border-bottom: .0625rem
|
||||
}
|
||||
|
||||
.state-note {
|
||||
@@ -48,7 +48,7 @@ g.stateGroup line {
|
||||
text {
|
||||
fill: black;
|
||||
stroke: none;
|
||||
font-size: 10px;
|
||||
font-size: .625rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,12 +56,12 @@ g.stateGroup line {
|
||||
stroke: none;
|
||||
stroke-width: 0;
|
||||
fill: var(--grey-1);
|
||||
opacity: 0.5;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.stateLabel text {
|
||||
fill: black;
|
||||
font-size: 10px;
|
||||
font-size: .625rem;
|
||||
font-weight: bold;
|
||||
font-family: var(--mermaid-font-family);
|
||||
}
|
||||
@@ -82,19 +82,19 @@ g.stateGroup line {
|
||||
.statediagram-cluster rect {
|
||||
fill: var(--grey-1);
|
||||
stroke: var(--text-color);
|
||||
stroke-width: 1px;
|
||||
stroke-width: .0625rem;
|
||||
}
|
||||
.statediagram-cluster rect.outer {
|
||||
rx: 5px;
|
||||
ry: 5px;
|
||||
rx: .3125rem;
|
||||
ry: .3125rem;
|
||||
}
|
||||
.statediagram-state .divider {
|
||||
stroke: var(--text-color);
|
||||
}
|
||||
|
||||
.statediagram-state .title-state {
|
||||
rx: 5px;
|
||||
ry: 5px;
|
||||
rx: .3125rem;
|
||||
ry: .3125rem;
|
||||
}
|
||||
.statediagram-cluster.statediagram-cluster .inner {
|
||||
fill: white;
|
||||
@@ -109,8 +109,8 @@ g.stateGroup line {
|
||||
}
|
||||
|
||||
.statediagram-state rect.basic {
|
||||
rx: 5px;
|
||||
ry: 5px;
|
||||
rx: .3125rem;
|
||||
ry: .3125rem;
|
||||
}
|
||||
.statediagram-state rect.divider {
|
||||
stroke-dasharray: 10,10;
|
||||
@@ -124,7 +124,7 @@ g.stateGroup line {
|
||||
.statediagram-note rect {
|
||||
stroke: var(--grey-4);
|
||||
fill: var(--grey-3);
|
||||
stroke-width: 1px;
|
||||
stroke-width: .0625rem;
|
||||
rx: 0;
|
||||
ry: 0;
|
||||
}
|
||||
@@ -14,5 +14,5 @@
|
||||
top: 0;
|
||||
right: 100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
height: .125rem;
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
.search {
|
||||
#search {
|
||||
position: fixed;
|
||||
background: linear-gradient(-225deg,var(--color-cyan-light) 0,var(--color-pink-light) 100%);
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
padding: 1.25rem;
|
||||
z-index: $zindex-4;
|
||||
display: none;
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
width: 700px;
|
||||
width: 43.75rem;
|
||||
text-shadow: none;
|
||||
|
||||
+mobile() {
|
||||
@@ -22,8 +22,8 @@
|
||||
.icon,
|
||||
.close-btn {
|
||||
color: var(--grey-5);
|
||||
font-size: 18px;
|
||||
padding: 0 10px;
|
||||
font-size: 1.125rem;
|
||||
padding: 0 .625rem;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
@@ -38,9 +38,9 @@
|
||||
display: flex;
|
||||
background: var(--grey-1-a5);
|
||||
border-radius: 3rem;
|
||||
padding: 0.5rem 1.5rem;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid var(--grey-5);
|
||||
padding: .5rem 1.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
border: .0625rem solid var(--grey-5);
|
||||
font-size: $font-size-large;
|
||||
color: var(--grey-5);
|
||||
align-items: center;
|
||||
@@ -50,11 +50,11 @@
|
||||
flex-grow: 1;
|
||||
|
||||
form {
|
||||
padding: 2px;
|
||||
padding: .125rem;
|
||||
}
|
||||
}
|
||||
|
||||
input.search-input {
|
||||
.search-input {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
@@ -64,15 +64,13 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.results {
|
||||
height: calc(100% - 100px);
|
||||
padding: 30px 30px 5px;
|
||||
border-radius: 5px;
|
||||
height: calc(100% - 6.25rem);
|
||||
padding: 1.875rem 1.875rem .3125rem;
|
||||
border-radius: .3125rem;
|
||||
|
||||
background: var(--grey-1-a7) url(../images/search.png) no-repeat bottom right;
|
||||
|
||||
@@ -83,7 +81,7 @@
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 10px 0;
|
||||
margin: .625rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -94,25 +92,25 @@
|
||||
float: right;
|
||||
background: url('../images/algolia_logo.svg') no-repeat;
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
width: 68px;
|
||||
margin: 8px auto;
|
||||
height: 1.125rem;
|
||||
width: 4.25rem;
|
||||
margin: .5rem auto;
|
||||
}
|
||||
|
||||
|
||||
#search-hits {
|
||||
overflow-y: scroll;
|
||||
height: calc(100% - 130px);
|
||||
height: calc(100% - 8.125rem);
|
||||
|
||||
ol {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 15px 0;
|
||||
margin: .9375rem 0;
|
||||
|
||||
a {
|
||||
border-bottom: 1px dashed var(--grey-4);
|
||||
border-bottom: .0625rem dashed var(--grey-4);
|
||||
display: block;
|
||||
the-transition();
|
||||
}
|
||||
@@ -123,7 +121,7 @@
|
||||
|
||||
i {
|
||||
color: var(--grey-4);
|
||||
margin: 0 5px;
|
||||
margin: 0 .3125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -133,8 +131,8 @@
|
||||
|
||||
#search-pagination {
|
||||
ul {
|
||||
padding: 0px;
|
||||
margin: 20px 0;
|
||||
padding: 0rem;
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
.pagination {
|
||||
opacity: 1;
|
||||
@@ -17,5 +17,5 @@
|
||||
}
|
||||
|
||||
.lozaded {
|
||||
animation: blur .8s ease-in-out forwards;
|
||||
@extend .blur;
|
||||
}
|
||||
@@ -14,11 +14,11 @@
|
||||
}
|
||||
|
||||
.pd5 {
|
||||
padding: 5px
|
||||
padding: .3125rem
|
||||
}
|
||||
|
||||
.pd10 {
|
||||
padding: 10px
|
||||
padding: .625rem
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -47,25 +47,26 @@
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 10px;
|
||||
padding: .625rem;
|
||||
overflow: auto;
|
||||
line-height: 1.45
|
||||
}
|
||||
|
||||
pre code {
|
||||
font-size: $font-size-medium;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 0 0 0 1em;
|
||||
border-left: 4px solid var(--grey-3);
|
||||
border-left: .25rem solid var(--grey-3);
|
||||
}
|
||||
|
||||
.vinput {
|
||||
border: none;
|
||||
resize: none;
|
||||
outline: none;
|
||||
padding: 10px 5px;
|
||||
padding: .625rem .3125rem;
|
||||
max-width: 100%;
|
||||
font-size: $font-size-smallest;
|
||||
}
|
||||
@@ -74,7 +75,7 @@
|
||||
input[type=radio] {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: -2px
|
||||
margin-top: -.125rem
|
||||
}
|
||||
|
||||
.clear {
|
||||
@@ -92,7 +93,7 @@
|
||||
}
|
||||
|
||||
.vicon+.vicon {
|
||||
margin-left: 10px
|
||||
margin-left: .625rem
|
||||
}
|
||||
|
||||
.vicon.actived {
|
||||
@@ -100,7 +101,7 @@
|
||||
}
|
||||
|
||||
.vrow {
|
||||
padding: 10px 0;
|
||||
padding: .625rem 0;
|
||||
|
||||
.vcol {
|
||||
display: inline-block;
|
||||
@@ -147,18 +148,18 @@
|
||||
|
||||
.emoji,
|
||||
.vemoji {
|
||||
max-width: 25px;
|
||||
max-width: 1.5625rem;
|
||||
vertical-align: middle;
|
||||
margin: 0 1px;
|
||||
margin: 0 .0625rem;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.vwrap {
|
||||
shadow-box();
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: .625rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
padding: .625rem;
|
||||
|
||||
input {
|
||||
background: transparent
|
||||
@@ -166,29 +167,29 @@
|
||||
|
||||
.vedit {
|
||||
position: relative;
|
||||
padding-top: 10px
|
||||
padding-top: .625rem
|
||||
}
|
||||
|
||||
.cancel-reply-btn {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
right: .3125rem;
|
||||
top: .3125rem;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.vemojis {
|
||||
display: none;
|
||||
font-size: 18px;
|
||||
max-height: 145px;
|
||||
font-size: 1.125rem;
|
||||
max-height: 9.0625rem;
|
||||
overflow: auto;
|
||||
padding-bottom: 10px;
|
||||
box-shadow: 0 0 1px var(--grey-9-a1);
|
||||
padding-bottom: .625rem;
|
||||
box-shadow: 0 0 .0625rem var(--grey-9-a1);
|
||||
}
|
||||
|
||||
.vemojis i {
|
||||
font-style: normal;
|
||||
padding-top: 7px;
|
||||
width: 36px;
|
||||
padding-top: .4375rem;
|
||||
width: 2.25rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
@@ -196,14 +197,14 @@
|
||||
}
|
||||
|
||||
.vpreview {
|
||||
padding: 7px 20px;
|
||||
padding: .4375rem 1.25rem;
|
||||
shadow-box();
|
||||
}
|
||||
|
||||
.vheader{
|
||||
.vinput {
|
||||
width: 33.33%;
|
||||
border-bottom: 1px dashed var(--grey-4);
|
||||
border-bottom: .0625rem dashed var(--grey-4);
|
||||
|
||||
&:focus {
|
||||
border-bottom-color: var(--primary-color);
|
||||
@@ -224,7 +225,7 @@
|
||||
|
||||
|
||||
.vcount {
|
||||
padding: 5px;
|
||||
padding: .3125rem;
|
||||
font-weight: 600;
|
||||
font-size: $font-size-larger;
|
||||
}
|
||||
@@ -276,12 +277,12 @@
|
||||
float: left;
|
||||
border-radius: 50%;
|
||||
margin-right: .7525em;
|
||||
border: 1px solid var(--grey-3);
|
||||
border: .0625rem solid var(--grey-3);
|
||||
padding: .125em
|
||||
}
|
||||
|
||||
&:hover > .vimg {
|
||||
animation: 0.8s ease-out 0s 1 normal both running shake;
|
||||
animation: .8s ease-out 0s 1 normal both running shake;
|
||||
}
|
||||
|
||||
.vhead {
|
||||
@@ -304,12 +305,12 @@
|
||||
}
|
||||
|
||||
.vtag {
|
||||
font-size: 12px;
|
||||
font-size: .75rem;
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
border-radius: 2px;
|
||||
line-height: 1.25rem;
|
||||
border-radius: .125rem;
|
||||
color: var(--grey-1);
|
||||
padding: 0 5px;
|
||||
padding: 0 .3125rem;
|
||||
position: inherit;
|
||||
&.vmaster {
|
||||
background: var(--color-orange);
|
||||
@@ -319,7 +320,7 @@
|
||||
.vh {
|
||||
overflow: hidden;
|
||||
padding-bottom: .5em;
|
||||
border-bottom: 1px dashed var(--grey-3);
|
||||
border-bottom: .0625rem dashed var(--grey-3);
|
||||
|
||||
.vtime {
|
||||
font-size: .75em;
|
||||
@@ -393,7 +394,7 @@
|
||||
|
||||
.vquote {
|
||||
padding-left: 1em;
|
||||
border-left: 1px dashed var(--grey-3);
|
||||
border-left: .0625rem dashed var(--grey-3);
|
||||
.vimg {
|
||||
width: 2.225em;
|
||||
height: 2.225em
|
||||
@@ -408,7 +409,7 @@
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width:520px) {
|
||||
@media screen and (max-width:51.25rem) {
|
||||
.v .vwrap .vheader.item2 .vinput,
|
||||
.v .vwrap .vheader .vinput {
|
||||
width: 100%
|
||||
@@ -419,7 +420,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:720px) {
|
||||
@media screen and (max-width:71.25rem) {
|
||||
.v .vcards .vcard .vimg {
|
||||
width: 2.5em;
|
||||
height: 2.5em
|
||||
@@ -444,10 +445,10 @@
|
||||
}
|
||||
|
||||
.v .vspinner {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
width: 1.375rem;
|
||||
height: 1.375rem;
|
||||
display: inline-block;
|
||||
border: 6px double #a0a0a0;
|
||||
border: .375rem double #a0a0a0;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 50%;
|
||||
@@ -455,6 +456,6 @@
|
||||
animation: spin 1s infinite linear;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
margin: 0 5px
|
||||
margin: 0 .3125rem
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// Footer Section
|
||||
// --------------------------------------------------
|
||||
.container > footer {
|
||||
#container > footer {
|
||||
position: fixed;
|
||||
color: var(--grey-5);
|
||||
font-size: $font-size-small;
|
||||
@@ -11,7 +11,7 @@
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
width: $content-desktop;
|
||||
padding-left: 260px;
|
||||
padding-left: 16.25rem;
|
||||
|
||||
+desktop-large() {
|
||||
width: $content-desktop-large;
|
||||
@@ -51,10 +51,10 @@
|
||||
.with-love {
|
||||
color: unquote(hexo-config('footer.icon.color'));
|
||||
display: inline-block;
|
||||
margin: 0 5px 0 2px;
|
||||
margin: 0 .3125rem 0 .125rem;
|
||||
}
|
||||
|
||||
.powered-by, .theme-info {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: .625rem;
|
||||
}
|
||||
77
source/css/_common/outline/header/brand.styl
Normal file
77
source/css/_common/outline/header/brand.styl
Normal file
@@ -0,0 +1,77 @@
|
||||
#brand {
|
||||
position: fixed;
|
||||
padding: 3rem 5rem 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
min-height: 10rem;
|
||||
|
||||
&.affix {
|
||||
z-index: $zindex-0;
|
||||
}
|
||||
|
||||
&, .pjax {
|
||||
the-flex();
|
||||
}
|
||||
|
||||
.artboard {
|
||||
font-family: $font-family-logo;
|
||||
font-size: $font-size-logo;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $font-size-title;
|
||||
letter-spacing: .125rem;
|
||||
}
|
||||
|
||||
.artboard + h1 {
|
||||
margin: .625rem 0;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
font-size: $font-size-smallest;
|
||||
display: inline-block;
|
||||
transform: rotate(30deg);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
font-size: $font-size-subtitle;
|
||||
margin: 0;
|
||||
|
||||
.item+.item {
|
||||
margin-left: .625rem;
|
||||
}
|
||||
}
|
||||
|
||||
+tablet() {
|
||||
.meta {
|
||||
font-size: $font-size-smaller;
|
||||
}
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
padding: 3rem .5rem 0;
|
||||
|
||||
h1 {
|
||||
font-size: $font-size-largest;
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: $font-size-smallest;
|
||||
|
||||
.text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+mobile-smallest() {
|
||||
.artboard {
|
||||
font-size: $font-size-title;
|
||||
}
|
||||
}
|
||||
}
|
||||
20
source/css/_common/outline/header/header.styl
Normal file
20
source/css/_common/outline/header/header.styl
Normal file
@@ -0,0 +1,20 @@
|
||||
// Header Section
|
||||
// --------------------------------------------------
|
||||
#header {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
text-shadow: 0rem .2rem .3rem alpha(#000, .5);
|
||||
color: var(--header-text-color);
|
||||
|
||||
a:hover {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@import 'image';
|
||||
@import 'nav';
|
||||
@import 'brand';
|
||||
@import 'tool';
|
||||
@import 'waves';
|
||||
67
source/css/_common/outline/header/image.styl
Normal file
67
source/css/_common/outline/header/image.styl
Normal file
@@ -0,0 +1,67 @@
|
||||
#imgs {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
min-height: 25rem;
|
||||
z-index: -9;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0rem;
|
||||
left: 0rem;
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
animation: imageAnimation 36s linear infinite 0s;
|
||||
}
|
||||
|
||||
for num in (1 .. 6) {
|
||||
.item:nth-child({num+1}) {
|
||||
animation-delay: unit(num * 6, 's');
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
z-index: $zindex-1;
|
||||
the-transition();
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes imageAnimation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
2% {
|
||||
opacity: 1;
|
||||
}
|
||||
8% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
17% {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
25% {
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% { opacity: 0 }
|
||||
}
|
||||
112
source/css/_common/outline/header/menu.styl
Normal file
112
source/css/_common/outline/header/menu.styl
Normal file
@@ -0,0 +1,112 @@
|
||||
// Menu
|
||||
// --------------------------------------------------
|
||||
#nav .menu {
|
||||
padding: .625rem 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
padding: 0 .625rem;
|
||||
letter-spacing: .0625rem;
|
||||
|
||||
+mobile() {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ic {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
font-size: $font-size-medium;
|
||||
|
||||
@extend $hover-underline;
|
||||
}
|
||||
|
||||
&.active:not(.dropdown), &:not(.dropdown):hover {
|
||||
a::before {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
margin-top: .5rem;
|
||||
padding: 0;
|
||||
width: max-content;
|
||||
background-color: var(--grey-9-a5);
|
||||
box-shadow: 0 .3125rem 1.25rem -.25rem var(--grey-9-a1);
|
||||
border-radius: .625rem 0;
|
||||
@extend .slide-up-in;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -1.25rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: block;
|
||||
|
||||
&:first-child{
|
||||
border-radius: .625rem 0 0 0;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
border-radius: 0 0 .625rem 0
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: .3rem .7rem;
|
||||
width: 100%;
|
||||
text-shadow: none;
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover a {
|
||||
transform: translateX(.3rem);
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
@extend $color-btn;
|
||||
a {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item.dropdown {
|
||||
>a::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
margin-left: .3em;
|
||||
vertical-align: middle;
|
||||
border-top: .3em solid;
|
||||
border-right: .3em solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: .3em solid transparent;
|
||||
}
|
||||
&:hover {
|
||||
.submenu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
.container>header nav {
|
||||
#nav {
|
||||
position: fixed;
|
||||
z-index: $zindex-2;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
height: 3.125rem;
|
||||
the-transition();
|
||||
|
||||
&.up {
|
||||
@@ -14,25 +14,24 @@
|
||||
}
|
||||
|
||||
&.show {
|
||||
background: linear-gradient(-225deg, var(--color-cyan-light) 0%, var(--color-pink-light) 100%);
|
||||
background: linear-gradient(-225deg, var(--color-cyan-light) 0, var(--color-pink-light) 100%);
|
||||
box-shadow: .1em .1em .2em var(--grey-9-a1);
|
||||
text-shadow: 0px 0px 1px var(--grey-9-a1);
|
||||
|
||||
a,
|
||||
span.exturl,
|
||||
div {
|
||||
color: var(--text-color);
|
||||
}
|
||||
text-shadow: 0rem 0rem .0625rem var(--grey-9-a1);
|
||||
color: var(--text-color);
|
||||
|
||||
.line {
|
||||
background: var(--text-color);
|
||||
box-shadow: 0px 0px 1px var(--grey-9-a1);
|
||||
box-shadow: 0rem 0rem .0625rem var(--grey-9-a1);
|
||||
}
|
||||
|
||||
.menu .item.active a {
|
||||
.item.active a {
|
||||
color: var(--color-aqua);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.menu .submenu {
|
||||
background-color: var(--grey-1);
|
||||
}
|
||||
}
|
||||
|
||||
.inner {
|
||||
@@ -52,22 +51,24 @@
|
||||
+tablet-mobile() {
|
||||
//width: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.toggle {
|
||||
display: none;
|
||||
|
||||
+tablet-mobile() {
|
||||
the-flex();
|
||||
}
|
||||
|
||||
.lines {
|
||||
padding: 1.25rem;
|
||||
width: 1.375rem;
|
||||
box-sizing: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle.menu {
|
||||
display: none;
|
||||
|
||||
+tablet-mobile() {
|
||||
flex-column();
|
||||
}
|
||||
|
||||
.lines {
|
||||
padding: 20px;
|
||||
width: 22px;
|
||||
box-sizing: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@import 'menu';
|
||||
@import 'right';
|
||||
@@ -1,16 +1,12 @@
|
||||
.right.menu {
|
||||
#nav .right {
|
||||
display: inline-flex;
|
||||
line-height: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
.search-btn, .theme-btn {
|
||||
padding: 10px 8px;
|
||||
}
|
||||
|
||||
div.search-btn + div {
|
||||
margin-left: 5px;
|
||||
.item {
|
||||
padding: .625rem .5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.i-sun {
|
||||
327
source/css/_common/outline/header/tool.styl
Normal file
327
source/css/_common/outline/header/tool.styl
Normal file
@@ -0,0 +1,327 @@
|
||||
#tool {
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
top: 50vh;
|
||||
z-index: $zindex-2;
|
||||
|
||||
.item {
|
||||
display: none;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
opacity: .5;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
the-transition();
|
||||
&:hover {
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
|
||||
.player {
|
||||
display: inline-flex;
|
||||
flex-direction: row-reverse;
|
||||
font-size: $font-size-largest;
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
> .btn {
|
||||
font-family-icons();
|
||||
width: 1.875rem;
|
||||
text-align: center;
|
||||
&+.btn {
|
||||
margin-right: .625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.play-pause {
|
||||
&::before {
|
||||
@extend .i-play:before;
|
||||
}
|
||||
}
|
||||
|
||||
.music {
|
||||
display: none;
|
||||
&::before {
|
||||
@extend .i-music:before;
|
||||
}
|
||||
}
|
||||
|
||||
&.playing {
|
||||
.play-pause::before {
|
||||
@extend .i-pause:before;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.play-list {
|
||||
shadow-box();
|
||||
background: var(--grey-1-a7);
|
||||
backdrop-filter: blur(.625rem);
|
||||
position: fixed;
|
||||
display: none;
|
||||
bottom: 0;
|
||||
right: 3.5rem;
|
||||
width: 50vw;
|
||||
z-index: $zindex-2;
|
||||
color: var(--text-color);
|
||||
font-size: $font-size-base;
|
||||
min-width: 16.25rem;
|
||||
max-width: 25rem;
|
||||
overflow: hidden;
|
||||
|
||||
+mobile() {
|
||||
right: 2.5rem;
|
||||
}
|
||||
|
||||
ol {
|
||||
font-size: $font-size-smaller;
|
||||
padding: .3125rem 0;
|
||||
margin: .625rem 0 0;
|
||||
height: 12.5rem;
|
||||
max-height: 40vh;
|
||||
overflow-x: scroll;
|
||||
counter-reset: counter;
|
||||
position: relative;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: .1875rem;
|
||||
height: .1875rem;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
padding: .3125rem .9375rem .3125rem 1.5625rem;
|
||||
cursor: pointer;
|
||||
the-transition();
|
||||
height: 2rem;
|
||||
overflow: hidden;
|
||||
|
||||
&.error {
|
||||
opacity: .5;
|
||||
text-decoration-line: line-through;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-left: -1.25rem;
|
||||
width: 1.875rem;
|
||||
counter-increment: counter;
|
||||
content: counter(counter);
|
||||
text-align: right;
|
||||
padding-right: .3125rem;
|
||||
color: var(--grey-5);
|
||||
}
|
||||
|
||||
.info {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
&:nth-child(2) {
|
||||
float: right;
|
||||
margin-left: .625rem;
|
||||
color: var(--grey-5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
color: var(--primary-color);
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
font-family-icons();
|
||||
@extend .i-play:before;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: var(--color-pink-a3);
|
||||
top: 0;
|
||||
left: 0;
|
||||
the-transition(.2s, ease-out);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-1-a7);
|
||||
&::before {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.playing {
|
||||
|
||||
.cover {
|
||||
&::before {
|
||||
animation: rotate-needle-resume .5s 1 normal linear forwards;
|
||||
}
|
||||
.disc {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1.25rem;
|
||||
border-bottom: .125rem solid var(--grey-9-a1);
|
||||
|
||||
+mobile() {
|
||||
padding: 1.25rem .625rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cover{
|
||||
position: relative;
|
||||
width: 9rem;
|
||||
flex-shrink: 0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
background: url("../images/play_needle.png") no-repeat center/contain;
|
||||
width: 3.4375rem;
|
||||
height: 5.1875rem;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: -1.5625rem;
|
||||
left: -1.5625rem;
|
||||
transform: rotateZ(-60deg);
|
||||
animation: rotate-needle-pause .5s 1 normal linear forwards;
|
||||
transform-origin: .625rem .625rem;
|
||||
}
|
||||
|
||||
.disc {
|
||||
animation: rotate 20s linear infinite;
|
||||
animation-play-state: paused;
|
||||
background: url("../images/play_disc.png") no-repeat center/contain;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: .625rem;
|
||||
|
||||
+mobile() {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
text-overflow: ellipsis;
|
||||
max-height: 3rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: $font-size-smallest;
|
||||
}
|
||||
}
|
||||
|
||||
.lrc {
|
||||
max-height: 4rem;
|
||||
margin-top: .3125rem;
|
||||
font-size: $font-size-smallest;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
.inner {
|
||||
width: 100%;
|
||||
transition: all .5s ease-out;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: .75rem;
|
||||
color: var(--grey-6);
|
||||
line-height: 1rem!important;
|
||||
height: 1rem!important;
|
||||
padding: 0!important;
|
||||
margin: 0!important;
|
||||
transition: all .5s ease-out;
|
||||
opacity: .3;
|
||||
overflow: hidden;
|
||||
|
||||
&.current {
|
||||
opacity: 1;
|
||||
overflow: visible;
|
||||
height: auto!important;
|
||||
min-height: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
span {
|
||||
font-size: $font-size-smallest;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.affix {
|
||||
text-shadow: none;
|
||||
top: auto;
|
||||
bottom: 1rem;
|
||||
box-shadow: 0 0 .5rem rgba(0,0,0,.1);
|
||||
background: var(--grey-1-a3);
|
||||
border-radius: .3125rem;
|
||||
|
||||
+mobile() {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.player {
|
||||
font-size: $font-size-base;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
> .btn+.btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.music {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.play-list {
|
||||
&.on {
|
||||
display: block;
|
||||
@extend .slide-right-in;
|
||||
}
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: auto;
|
||||
padding: .3125rem 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
53
source/css/_common/outline/header/waves.styl
Normal file
53
source/css/_common/outline/header/waves.styl
Normal file
@@ -0,0 +1,53 @@
|
||||
#waves {
|
||||
transform: translateZ(.0625rem);
|
||||
|
||||
>svg {
|
||||
width: 100%;
|
||||
height: 15vh;
|
||||
margin-bottom: -.6875rem;
|
||||
min-height: 3.125rem;
|
||||
max-height: 9.375rem;
|
||||
|
||||
+mobile() {
|
||||
height: 10vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Animation */
|
||||
.parallax>use {
|
||||
animation: wave 25s cubic-bezier(.55, .5, .45, .5) infinite;
|
||||
}
|
||||
|
||||
.parallax>use:nth-child(1) {
|
||||
animation-delay: -2s;
|
||||
animation-duration: 7s;
|
||||
fill: var(--grey-1-a7);
|
||||
}
|
||||
|
||||
.parallax>use:nth-child(2) {
|
||||
animation-delay: -3s;
|
||||
animation-duration: 10s;
|
||||
fill: var(--grey-1-a5);
|
||||
}
|
||||
|
||||
.parallax>use:nth-child(3) {
|
||||
animation-delay: -4s;
|
||||
animation-duration: 13s;
|
||||
fill: var(--grey-1-a3);
|
||||
}
|
||||
|
||||
.parallax>use:nth-child(4) {
|
||||
animation-delay: -5s;
|
||||
animation-duration: 20s;
|
||||
fill: var(--grey-1);
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
0% {
|
||||
transform: translate3d(-5.625rem, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(5.3125rem, 0, 0);
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
/*
|
||||
// < 767px
|
||||
// < 47.9375rem
|
||||
+mobile() {
|
||||
|
||||
}
|
||||
@@ -13,49 +13,49 @@
|
||||
.md {
|
||||
// For headers narrow width.
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
padding-left: 20px;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
// Rewrite paddings & margins inside tags.
|
||||
.note, .tabs .tab-content .tab-pane {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0 5px;
|
||||
margin: 0 .3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
// For paragraphs narrow width.
|
||||
> p {
|
||||
margin: 0 0 10px 0;
|
||||
margin: 0 0 .625rem 0;
|
||||
}
|
||||
|
||||
// Rewrite paddings & margins inside tags.
|
||||
.note > p, .tabs .tab-content .tab-pane > p {
|
||||
padding: 0 5px;
|
||||
padding: 0 .3125rem;
|
||||
}
|
||||
|
||||
img, video {
|
||||
margin-bottom: 10px !important;
|
||||
margin-bottom: .625rem !important;
|
||||
}
|
||||
|
||||
.note {
|
||||
margin-bottom: 10px !important;
|
||||
padding: 10px !important;
|
||||
padding-left: 35px !important;
|
||||
margin-bottom: .625rem !important;
|
||||
padding: .625rem !important;
|
||||
padding-left: 2.1875rem !important;
|
||||
}
|
||||
|
||||
.tabs .tab-content .tab-pane {
|
||||
padding: 10px 10px 0 10px !important;
|
||||
padding: .625rem .625rem 0 .625rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.post .eof {
|
||||
margin: 40px auto 20px !important;
|
||||
margin: 2.5rem auto 1.25rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
// < 413px
|
||||
// < 25.8125rem
|
||||
+mobile-smallest() {
|
||||
|
||||
}
|
||||
78
source/css/_common/outline/outline.styl
Normal file
78
source/css/_common/outline/outline.styl
Normal file
@@ -0,0 +1,78 @@
|
||||
#container {
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.inner {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#main {
|
||||
padding-bottom: 10rem;
|
||||
background: linear-gradient(to top, var(--body-bg-shadow) 0, var(--grey-1) 20%) no-repeat bottom;
|
||||
|
||||
>.inner {
|
||||
width: $content-desktop;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
+desktop-large() {
|
||||
width: $content-desktop-large;
|
||||
}
|
||||
|
||||
+desktop-largest() {
|
||||
width: $content-desktop-largest;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#content {
|
||||
background: linear-gradient(to top, var(--grey-0) 0, var(--grey-1) 20%) no-repeat top;
|
||||
box-shadow: 0rem 1.25rem 1rem .3125rem var(--body-bg-shadow);
|
||||
|
||||
width: $content-wrap;
|
||||
|
||||
z-index: $zindex-1;
|
||||
|
||||
min-height: 37.5rem;
|
||||
|
||||
.cat {
|
||||
margin-top: 6.25rem;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
padding: $content-desktop-padding;
|
||||
}
|
||||
|
||||
.wrap:nth-child(1) {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
+tablet-mobile() {
|
||||
width: 100%;
|
||||
|
||||
.wrap {
|
||||
padding: $content-tablet-padding;
|
||||
}
|
||||
}
|
||||
|
||||
+mobile() {
|
||||
.wrap {
|
||||
padding: $content-mobile-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import 'header';
|
||||
@import 'sidebar';
|
||||
@import 'footer';
|
||||
|
||||
@import 'mobile';
|
||||
@@ -1,17 +1,16 @@
|
||||
.overview .author {
|
||||
margin-top: 30px;
|
||||
|
||||
&:hover .image {
|
||||
animation: 0.8s ease-out 0s 1 normal both running shake;
|
||||
@extend .shake;
|
||||
}
|
||||
|
||||
.image {
|
||||
border: 1px solid var(--body-bg-shadow);
|
||||
border: .0625rem solid var(--body-bg-shadow);
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 160px;
|
||||
padding: 2px;
|
||||
box-shadow: 0 0rem 1rem 10px var(--body-bg-shadow);
|
||||
max-width: 10rem;
|
||||
padding: .125rem;
|
||||
box-shadow: 0 0rem 1rem .625rem var(--body-bg-shadow);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@@ -19,14 +18,14 @@
|
||||
.name {
|
||||
color: var(--grey-7);
|
||||
font-weight: normal;
|
||||
margin: 5px 0 0;
|
||||
margin: .3125rem 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--grey-5);
|
||||
font-size: $font-size-medium;
|
||||
margin-top: 5px;
|
||||
margin-top: .3125rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -38,7 +37,7 @@
|
||||
|
||||
10%,
|
||||
20% {
|
||||
transform: scale(0.9) rotate(3deg);
|
||||
transform: scale(.9) rotate(3deg);
|
||||
}
|
||||
|
||||
30%,
|
||||
@@ -14,7 +14,7 @@
|
||||
transition: opacity 1s;
|
||||
}
|
||||
|
||||
.sidebar.on + .dimmer {
|
||||
#sidebar.on + .dimmer {
|
||||
position: fixed;
|
||||
display: block;
|
||||
opacity: .3;
|
||||
@@ -1,12 +1,12 @@
|
||||
.overview .menu {
|
||||
padding: 20px;
|
||||
padding: 1.25rem;
|
||||
margin: 0;
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
.item {
|
||||
border-radius: 15px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: .9375rem;
|
||||
margin-bottom: .625rem;
|
||||
display: block;
|
||||
color: var(--grey-5);
|
||||
the-transition();
|
||||
@@ -17,31 +17,30 @@
|
||||
line-height: 3;
|
||||
}
|
||||
|
||||
.sub {
|
||||
.submenu {
|
||||
display: none;
|
||||
padding: 0;
|
||||
animation: slideUpIn 0.3s 0.1s ease both;
|
||||
@extend .slide-down-in;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,.1);
|
||||
color: inherit;
|
||||
|
||||
.sub {
|
||||
.submenu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 10px;
|
||||
.ic {
|
||||
margin-right: .625rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--grey-0);
|
||||
background-image: linear-gradient(to right,var(--color-pink) 0,var(--color-orange) 100%);
|
||||
box-shadow: 0 0 12px var(--color-pink-a3);
|
||||
@extend $color-btn;
|
||||
&:hover {
|
||||
box-shadow: 0 0 12px var(--color-pink);
|
||||
box-shadow: 0 0 .75rem var(--color-pink);
|
||||
color: var(--grey-0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,7 +48,7 @@
|
||||
&.expand {
|
||||
background-color: rgba(0,0,0,.05);
|
||||
|
||||
.sub {
|
||||
.submenu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
.quick {
|
||||
#quick {
|
||||
display: none;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: $sidebar-desktop;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
width: 25%;
|
||||
min-height: 30px;
|
||||
min-height: 1.875rem;
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
@@ -24,15 +23,15 @@
|
||||
li.percent {
|
||||
display: block;
|
||||
background: var(--primary-color);
|
||||
width: 0px;
|
||||
min-height: 2px;
|
||||
width: 0rem;
|
||||
min-height: .125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar.affix, .sidebar.on {
|
||||
.quick {
|
||||
#sidebar.affix, #sidebar.on {
|
||||
#quick {
|
||||
position: fixed;
|
||||
bottom: 2px;
|
||||
bottom: .125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
|
||||
ul {
|
||||
|
||||
padding: 0 2px 5px 20px;
|
||||
padding: 0 .125rem .3125rem 1.25rem;
|
||||
text-align: left;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
line-height: 1.8;
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: .625rem;
|
||||
|
||||
a {
|
||||
text-overflow: ellipsis;
|
||||
@@ -25,15 +25,15 @@
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
background: var(--primary-color);
|
||||
box-sizing: unset;
|
||||
left: -20px;
|
||||
top: 5px;
|
||||
left: -1.25rem;
|
||||
top: .3125rem;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
border: 3px solid var(--grey-1);
|
||||
border: .1875rem solid var(--grey-1);
|
||||
z-index: $zindex-1;
|
||||
the-transition();
|
||||
}
|
||||
@@ -45,11 +45,11 @@
|
||||
&:not(:last-child)::after {
|
||||
content: "";
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
width: .125rem;
|
||||
background: var(--color-red-a3);
|
||||
position: absolute;
|
||||
left: -14px;
|
||||
top: 8px;
|
||||
left: -.875rem;
|
||||
top: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
.sidebar {
|
||||
//margin-top: 100%;
|
||||
#sidebar {
|
||||
position: static;
|
||||
width: $sidebar-desktop;
|
||||
top: 0;
|
||||
@@ -11,13 +10,18 @@
|
||||
position: fixed;
|
||||
right: 0;
|
||||
background: var(--grey-1);
|
||||
box-shadow: 0 6px 15px 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 .375rem .9375rem .3125rem rgba(0, 0, 0, .2);
|
||||
z-index: $zindex-3;
|
||||
}
|
||||
|
||||
&.affix>.inner {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
&.affix {
|
||||
>.inner {
|
||||
position: fixed;
|
||||
top: 0rem;
|
||||
}
|
||||
.panels {
|
||||
padding-top: 3.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
>.inner {
|
||||
@@ -34,11 +38,10 @@
|
||||
}
|
||||
|
||||
.panels {
|
||||
padding: 75px 15px 32px;
|
||||
padding: 4.6875rem .9375rem 2rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
.inner {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
@@ -52,34 +55,10 @@
|
||||
|
||||
.panel {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar.affix .panels {
|
||||
padding-top: 58px;
|
||||
}
|
||||
|
||||
.cc-license {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
|
||||
.cc-opacity {
|
||||
border-bottom: none;
|
||||
opacity: .7;
|
||||
|
||||
&:hover {
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@import 'dimmer';
|
||||
@import 'author';
|
||||
@@ -1,11 +1,11 @@
|
||||
.social {
|
||||
margin-top: 15px;
|
||||
margin-top: .9375rem;
|
||||
text-align: center;
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
line-height: 1.875rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -14,7 +14,7 @@
|
||||
i {
|
||||
font-size: 1.4em;
|
||||
vertical-align: middle;
|
||||
transform: scale(0.8);
|
||||
transform: scale(.8);
|
||||
}
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
&::before,
|
||||
i {
|
||||
the-transition(.35s, cubic-bezier(0.31, -0.105, 0.43, 1.59));
|
||||
the-transition(.35s, cubic-bezier(.31, -.105, .43, 1.59));
|
||||
}
|
||||
|
||||
&:focus::before,
|
||||
@@ -1,18 +1,18 @@
|
||||
nav.state {
|
||||
.state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
line-height: 1.4;
|
||||
margin-top: 10px;
|
||||
margin-top: .625rem;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
|
||||
.item {
|
||||
padding: 0 15px;
|
||||
padding: 0 .9375rem;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left: 1px solid var(--grey-4);
|
||||
border-left: .0625rem solid var(--grey-4);
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -1,20 +1,19 @@
|
||||
// Sidebar Navigation
|
||||
.sidebar .tab {
|
||||
#sidebar .tab {
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
padding: 30px 0 10px;
|
||||
padding: 1.875rem 0 .625rem;
|
||||
margin: 0;
|
||||
min-height: 30px;
|
||||
min-height: 1.875rem;
|
||||
|
||||
|
||||
li {
|
||||
.item {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-size: $font-size-small;
|
||||
padding: 5px 15px;
|
||||
padding: .3125rem .9375rem;
|
||||
color: var(--grey-5);
|
||||
|
||||
border-radius: 10px;
|
||||
border-radius: .625rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: rgba(0, 0, 0, .08);
|
||||
@@ -22,7 +21,7 @@
|
||||
the-transition(.2s, ease-out);
|
||||
|
||||
&:nth-child(2) {
|
||||
margin: auto 10px;
|
||||
margin: auto .625rem;
|
||||
}
|
||||
|
||||
span {
|
||||
@@ -36,14 +35,12 @@
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: var(--grey-0);
|
||||
background-image: linear-gradient(to right,var(--color-pink) 0,var(--color-orange) 100%);
|
||||
box-shadow: 0 0 12px var(--color-pink-a3);
|
||||
@extend $color-btn;
|
||||
}
|
||||
|
||||
|
||||
&.active:hover {
|
||||
box-shadow: 0px 0px 12px var(--color-pink);
|
||||
box-shadow: 0rem 0rem .75rem var(--color-pink);
|
||||
}
|
||||
|
||||
&::before {
|
||||
@@ -63,12 +60,12 @@
|
||||
}
|
||||
|
||||
&.active::before {
|
||||
margin-right: 5px;
|
||||
margin-right: .3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sidebar.affix .tab {
|
||||
padding-top: 10px;
|
||||
#sidebar.affix .tab {
|
||||
padding-top: .625rem;
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
.contents {
|
||||
ol {
|
||||
|
||||
padding: 0 2px 5px 10px;
|
||||
padding: 0 .125rem .3125rem .625rem;
|
||||
text-align: left;
|
||||
|
||||
>ol {
|
||||
293
source/css/_common/scaffolding/animate.styl
vendored
Normal file
293
source/css/_common/scaffolding/animate.styl
vendored
Normal file
@@ -0,0 +1,293 @@
|
||||
// animation: name duration timing-function delay iteration-count direction;
|
||||
|
||||
.rotate {
|
||||
animation: rotate 6s linear infinite;
|
||||
}
|
||||
|
||||
.beat {
|
||||
animation: beat 1.33s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.flash {
|
||||
animation: flash 6s cubic-bezier(.22, .61, .36, 1) infinite;
|
||||
}
|
||||
|
||||
.shake {
|
||||
animation: shake 1s;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn .5s;
|
||||
}
|
||||
|
||||
.up-down {
|
||||
animation: UpDown 2s infinite;
|
||||
}
|
||||
|
||||
.down-up {
|
||||
animation: DownUp 2s infinite;
|
||||
}
|
||||
|
||||
.slide {
|
||||
animation: slide .5s;
|
||||
}
|
||||
|
||||
.slide-up-in {
|
||||
animation: slideUpIn .3s;
|
||||
}
|
||||
|
||||
.slide-up-big-in {
|
||||
animation: slideUpBigIn .5s;
|
||||
}
|
||||
|
||||
.slide-right-in {
|
||||
animation: slideRightIn .3s;
|
||||
}
|
||||
|
||||
.slide-down-in {
|
||||
animation: slideDownIn .3s;
|
||||
}
|
||||
|
||||
.blur {
|
||||
animation: blur .8s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.elastic {
|
||||
animation: elastic 1s;
|
||||
}
|
||||
|
||||
.reverse {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0)
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotating {
|
||||
from {
|
||||
transform: rotate(720deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate-needle-pause {
|
||||
0% {
|
||||
transform: rotateZ(-35deg)
|
||||
}
|
||||
100% {
|
||||
transform: rotateZ(-60deg)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes rotate-needle-resume {
|
||||
0% {
|
||||
transform: rotateZ(-60deg)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateZ(-35deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
10%,
|
||||
30% {
|
||||
transform: scale(.9);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
50%,
|
||||
70% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
|
||||
0%,
|
||||
50%,
|
||||
to {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
25%,
|
||||
75% {
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
from,
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: translate3d(-.625rem, 0, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: translate3d(.625rem, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes blur {
|
||||
0% {
|
||||
filter: blur(.625rem)
|
||||
}
|
||||
|
||||
to {
|
||||
filter: blur(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blur-dark {
|
||||
0% {
|
||||
filter: blur(.625rem) brightness(.9)
|
||||
}
|
||||
|
||||
to {
|
||||
filter: blur(0) brightness(.9)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes UpDown {
|
||||
0%, 100% {
|
||||
opacity: .8;
|
||||
transform: translateY(.625rem);
|
||||
}
|
||||
50% {
|
||||
opacity: .4;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes DownUp {
|
||||
0%, 100% {
|
||||
opacity: .8;
|
||||
transform: rotate(180deg) translateY(0);
|
||||
}
|
||||
50% {
|
||||
opacity: .4;
|
||||
transform: rotate(180deg) translateY(-.625rem);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideRightIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUpIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(.625rem);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUpBigIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(5rem)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-1.125rem)
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes elastic {
|
||||
0% {
|
||||
transform: scale(0)
|
||||
}
|
||||
|
||||
55% {
|
||||
transform: scale(1)
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(.98)
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,9 @@
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
@@ -12,7 +14,7 @@ html, body {
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(to top, var(--body-bg-shadow) 0%, var(--grey-1) 20%) no-repeat bottom;
|
||||
background: linear-gradient(to top, var(--body-bg-shadow) 0, var(--grey-1) 20%) no-repeat bottom;
|
||||
color: var(--text-color);
|
||||
font-family: $font-family-base;
|
||||
font-size: $font-size-base;
|
||||
@@ -22,6 +24,19 @@ body {
|
||||
|
||||
&.loaded {
|
||||
overflow: auto;
|
||||
|
||||
#content .wrap {
|
||||
@extend .slide-up-big-in;
|
||||
}
|
||||
|
||||
#sidebar .panel.active {
|
||||
@extend .slide-up-big-in;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#brand .pjax {
|
||||
@extend .slide-down-in;
|
||||
}
|
||||
}
|
||||
|
||||
+tablet-mobile() {
|
||||
@@ -31,10 +46,10 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
html.fullscreen {
|
||||
.fullscreen {
|
||||
overflow: hidden;
|
||||
|
||||
header nav, header .tool, .sidebar>.inner {
|
||||
#nav, #tool, #sidebar>.inner {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
@@ -43,18 +58,15 @@ h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $font-family-headings;
|
||||
font-weight: bold;
|
||||
line-height: 1.5;
|
||||
margin: 20px 0 15px;
|
||||
margin: 1.25rem 0 .9375rem;
|
||||
&.title {
|
||||
font-family: $font-family-title;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*p {
|
||||
margin: 0 0 20px 0;
|
||||
}*/
|
||||
|
||||
a, span.exturl {
|
||||
//border-bottom: 1px solid $link-decoration-color;
|
||||
a {
|
||||
border: none;
|
||||
color: var(--grey-7);
|
||||
color: currentColor;
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
word-wrap();
|
||||
@@ -65,7 +77,10 @@ a, span.exturl {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
// For spanned external links.
|
||||
&::before, &::after {
|
||||
the-transition(.4s);
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -85,21 +100,21 @@ iframe, img, video {
|
||||
}
|
||||
|
||||
hr {
|
||||
background-image: repeating-linear-gradient(-45deg, var(--grey-3), var(--grey-4) 4px, transparent 4px, transparent 8px);
|
||||
border: 0;
|
||||
height: 3px;
|
||||
margin: 40px 0;
|
||||
background-image: repeating-linear-gradient(-45deg, var(--grey-3), var(--grey-4) .25rem, transparent .25rem, transparent .5rem);
|
||||
border: none;
|
||||
height: .125rem;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 4px solid var(--grey-4);
|
||||
border-left: .25rem solid var(--grey-4);
|
||||
color: var(--grey-6);
|
||||
margin: 20px 0;
|
||||
padding: 10px 20px;
|
||||
margin: 1.25rem 0;
|
||||
padding: .625rem 1.25rem;
|
||||
|
||||
cite::before {
|
||||
content: '-';
|
||||
padding: 0 5px;
|
||||
padding: 0 .3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -115,7 +130,7 @@ dd {
|
||||
kbd {
|
||||
background-color: var(--grey-1);
|
||||
background-image: linear-gradient(var(--grey-2), var(--grey-0), var(--grey-2));
|
||||
border: 1px solid var(--grey-4);
|
||||
border: .0625rem solid var(--grey-4);
|
||||
border-radius: .2em;
|
||||
box-shadow: .1em .1em .2em var(--grey-9-a1);
|
||||
color: var(--primary-color);
|
||||
@@ -1,4 +1,4 @@
|
||||
button {
|
||||
.button {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
@@ -7,7 +7,7 @@ button {
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
border-radius: .3rem;
|
||||
border: 1px solid var(--grey-3);
|
||||
border: .0625rem solid var(--grey-3);
|
||||
|
||||
color: var(--grey-6);
|
||||
font-size: $font-size-small;
|
||||
@@ -23,7 +23,7 @@ button {
|
||||
will-change: auto;
|
||||
the-transition();
|
||||
|
||||
&+button {
|
||||
&+.button {
|
||||
margin-left: 1.25em
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@ button {
|
||||
cursor: not-allowed
|
||||
}
|
||||
|
||||
i {
|
||||
.ic {
|
||||
text-align: left;
|
||||
width: (18em / 14);
|
||||
}
|
||||
36
source/css/_common/scaffolding/divider.styl
Normal file
36
source/css/_common/scaffolding/divider.styl
Normal file
@@ -0,0 +1,36 @@
|
||||
.divider {
|
||||
margin: 1rem 0;
|
||||
line-height: 1;
|
||||
height: 0;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .05em;
|
||||
user-select: none;
|
||||
color: var(--grey-4);
|
||||
|
||||
display: table;
|
||||
white-space: nowrap;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC")
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-position: right 1em top 50%
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-position: left 1em top 50%
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
@font-face {
|
||||
font-family: 'ic'; /* project id 1832207 */
|
||||
src: url('//at.alicdn.com/t/font_1832207_16d5m0t1l6j.eot');
|
||||
src: url('//at.alicdn.com/t/font_1832207_16d5m0t1l6j.eot?#iefix') format('embedded-opentype'),
|
||||
url('//at.alicdn.com/t/font_1832207_16d5m0t1l6j.woff2') format('woff2'),
|
||||
url('//at.alicdn.com/t/font_1832207_16d5m0t1l6j.woff') format('woff'),
|
||||
url('//at.alicdn.com/t/font_1832207_16d5m0t1l6j.ttf') format('truetype'),
|
||||
url('//at.alicdn.com/t/font_1832207_16d5m0t1l6j.svg#ic') format('svg');
|
||||
src: url('//at.alicdn.com/t/font_1832207_kps3v6bwwrr.eot');
|
||||
src: url('//at.alicdn.com/t/font_1832207_kps3v6bwwrr.eot?#iefix') format('embedded-opentype'),
|
||||
url('//at.alicdn.com/t/font_1832207_kps3v6bwwrr.woff2') format('woff2'),
|
||||
url('//at.alicdn.com/t/font_1832207_kps3v6bwwrr.woff') format('woff'),
|
||||
url('//at.alicdn.com/t/font_1832207_kps3v6bwwrr.ttf') format('truetype'),
|
||||
url('//at.alicdn.com/t/font_1832207_kps3v6bwwrr.svg#ic') format('svg');
|
||||
}
|
||||
|
||||
.ic {
|
||||
@@ -27,6 +27,70 @@
|
||||
vertical-align: -.0667em;
|
||||
}
|
||||
|
||||
.i-share:before {
|
||||
content: "\e61b";
|
||||
}
|
||||
|
||||
.i-link-circle:before {
|
||||
content: "\e67b";
|
||||
}
|
||||
|
||||
.i-person:before {
|
||||
content: "\e69d";
|
||||
}
|
||||
|
||||
.i-sun:before {
|
||||
content: "\e6d1";
|
||||
}
|
||||
|
||||
.i-moon:before {
|
||||
content: "\e71e";
|
||||
}
|
||||
|
||||
.i-compress:before {
|
||||
content: "\ef82";
|
||||
}
|
||||
|
||||
.i-expand:before {
|
||||
content: "\efb4";
|
||||
}
|
||||
|
||||
.i-align-justify:before {
|
||||
content: "\ef13";
|
||||
}
|
||||
|
||||
.i-align-left:before {
|
||||
content: "\ef14";
|
||||
}
|
||||
|
||||
.i-eye:before {
|
||||
content: "\efb8";
|
||||
}
|
||||
|
||||
.i-pen:before {
|
||||
content: "\f071";
|
||||
}
|
||||
|
||||
.i-clock:before {
|
||||
content: "\ef75";
|
||||
}
|
||||
|
||||
.i-flag:before {
|
||||
content: "\e680";
|
||||
}
|
||||
|
||||
.i-at:before {
|
||||
content: "\e619";
|
||||
}
|
||||
|
||||
.i-file:before {
|
||||
content: "\e68d";
|
||||
}
|
||||
|
||||
.i-clipboard:before {
|
||||
content: "\e651";
|
||||
}
|
||||
|
||||
.i-feather:before {
|
||||
content: "\efbd";
|
||||
}
|
||||
@@ -47,22 +111,10 @@
|
||||
content: "\f07f";
|
||||
}
|
||||
|
||||
.i-moon:before {
|
||||
content: "\f057";
|
||||
}
|
||||
|
||||
.i-sun:before {
|
||||
content: "\f0e6";
|
||||
}
|
||||
|
||||
.i-calendar-check:before {
|
||||
content: "\ef5b";
|
||||
}
|
||||
|
||||
.i-eye:before {
|
||||
content: "\e8e6";
|
||||
}
|
||||
|
||||
.i-angle-up:before {
|
||||
content: "\ef1b";
|
||||
}
|
||||
@@ -163,10 +215,6 @@
|
||||
content: "\f082";
|
||||
}
|
||||
|
||||
.i-clock:before {
|
||||
content: "\f284";
|
||||
}
|
||||
|
||||
.i-file-word:before {
|
||||
content: "\f299";
|
||||
}
|
||||
@@ -175,10 +223,6 @@
|
||||
content: "\ef65";
|
||||
}
|
||||
|
||||
.i-clipboard:before {
|
||||
content: "\e651";
|
||||
}
|
||||
|
||||
.i-times:before {
|
||||
content: "\f109";
|
||||
}
|
||||
@@ -227,10 +271,6 @@
|
||||
content: "\efb6";
|
||||
}
|
||||
|
||||
.i-file:before {
|
||||
content: "\efc0";
|
||||
}
|
||||
|
||||
.i-heart:before {
|
||||
content: "\f013";
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
/* normalize.css v8..1 | MIT License | github.com/necolas/normalize.css */
|
||||
/* Document
|
||||
========================================================================== */
|
||||
/**
|
||||
@@ -59,7 +59,7 @@ pre {
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
* Remove the gray background on active links in IE 1.
|
||||
*/
|
||||
a {
|
||||
background: transparent;
|
||||
@@ -120,7 +120,7 @@ sup {
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
* Remove the border on images inside links in IE 1.
|
||||
*/
|
||||
img {
|
||||
border-style: none;
|
||||
@@ -176,7 +176,7 @@ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-mo
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
outline: .0625rem dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -216,8 +216,8 @@ textarea {
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
* 1. Add the correct box sizing in IE 1.
|
||||
* 2. Remove the padding in IE 1.
|
||||
*/
|
||||
[type='checkbox'], [type='radio'] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
@@ -236,7 +236,7 @@ textarea {
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
[type='search'] {
|
||||
outline-offset: -2px; /* 2 */
|
||||
outline-offset: -.125rem; /* 2 */
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
}
|
||||
|
||||
@@ -282,7 +282,7 @@ template {
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
* Add the correct display in IE 1.
|
||||
*/
|
||||
[hidden] {
|
||||
display: none;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user