优化meta,解决导航面包蟹,背景图片,自定义CSS,夜间模式BUG,二级菜单等问题

master
julylies 2 years ago
parent b71d9a35d2
commit 92a6595097

@ -1,5 +1,5 @@
<#include "header.ftl" />
<@head title="500- ${blog_title!}"/>
<@head title="500 - ${blog_title!}"/>
<main>
<div class="wrap">
<div class="error-page">

@ -22,7 +22,7 @@
<#--存在问题 -->
<h3 class="title-date">时光机:</h3>
<ul>
<@postTag method="archiveMonth">
<@postTag method="archiveMonth" top="6">
<#list archives as archive>
<li>
<a href="${archive.fullPath!}" rel="nofollow" target="_blank">${archive.year?c} 年${archive.month?c} 月</a>
@ -52,7 +52,9 @@
<@global.footer />
<script type='text/javascript' src="${theme_base!}/source/js/kico.js"></script>
<script type='text/javascript' src="${theme_base!}/source/js/single.js"></script>
<script type='text/javascript' src="${theme_base!}/source/js/prism.js"></script>
<#if is_post??|| is_journals??>
<script type='text/javascript' src="${theme_base!}/source/plugins/prism/prism.min.js"></script>
</#if>
<script>var single = new Paul_Single({copyright: <#if settings.copy_notice!true>true<#else>false</#if>, night: <#if settings.night_mode=='1'>true<#else>false</#if>});</script>
</body>
</html>

@ -2,31 +2,64 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<#--<meta charset="UTF-8">-->
<title>${title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="renderer" content="webkit" />
<meta name="format-detection" content="telephone=no,email=no,adress=no"/>
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="keywords" content="${meta_keywords!}"/>
<meta name="description" content="${meta_description!}" />
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
<#--<meta name="theme-color" content="#4285f4">-->
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
<#-- 导航面包蟹-->
<meta property="og:image" content="${options.blog_favicon!}">
<meta property="og:description" content="${meta_description!}">
<meta property="og:type" content="website">
<meta property="og:locale" content="zh_CN">
<meta property="og:site_name" content="${blog_title!}">
<#-- 导航面包蟹 未完成-->
<meta property="og:title" content="${title}">
<meta property="og:url" content="${blog_url!}">
<meta property="og:title" content="${title!} ${blog_title!}">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="author" content="${user.nickname!}">
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta name="site" content="${blog_url!}">
<meta property="twitter:partner" content="ogwp">
<link rel="canonical" href="${blog_url!}">
<link rel="apple-touch-icon" sizes="180x180" href="${options.blog_favicon!}">
<link rel="alternate" type="application/rss+xml" title="atom 1.0" href="${atom_url!}">
<link href="${theme_base!}/source/css/kico.css" rel="stylesheet" type="text/css"/>
<link href="${theme_base!}/source/css/single.css" rel="stylesheet" type="text/css"/>
<#-- <link href="https://fastly.jsdelivr.net/gh/FortAwesome/Font-Awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="https://fastly.jsdelivr.net/gh/FortAwesome/Font-Awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link rel="preload stylesheet" as="style" href="${theme_base!}/source/plugins/prism/prism.css">
<link rel="preload stylesheet" as="style" href="${theme_base!}/source/plugins/prism/themes/prism-${settings.Code_highlighting!}.css">
<@global.head />
<#if ! (options.blog_favicon?? && options.blog_favicon!='')>
<link rel="shortcut icon" type="images/x-icon" href="${theme_base!}/source/images/icon.png" sizes="192x192"/>
</#if>
<#-- 背景图片-->
<#if settings.rimage_url?? && settings.rimage_url!=''>
<style>body:before{content: ''; background-image: url(${settings.rimage_url!})}</style>
<#if settings.background?? && settings.background!=''>
<style>body:before{content: ''; background-image: url(${settings.background!})}</style>
</#if>
<#-- 自定css-->
<#if settings.custom_css?? && settings.custom_css!=''>
${custom_css!}
</#if>
<#-- 自定css 未完成-->
</head>
<#-- 夜间模式 未完成-->
<body >
<#-- 夜间模式 -->
<body
<#if (settings.night_mode?? && settings.night_mode == '2')>
class="dark-theme"
<#elseif (settings.night_mode?? && settings.night_mode == '1')>
<#assign currentDateTime = .now>
<#assign hour=currentDateTime?string("HH") >
<#if (hour?eval >=20|| hour?eval <=6) >
class="dark-theme"
</#if>
</#if>
>
<header>
<div class="head-title">
<h4>${blog_title!}</h4>
@ -36,27 +69,39 @@
<div class="light-btn"></div>
<div class="search-btn"></div>
</div>
<form class="head-search" method="post">
<input type="text" name="s"lde placehor="搜索什么?">
<#-- 搜索BUG-->
<form class="head-search" method="get" action="/search" role="search">
<input class="text" type="search" name="keyword" placeholder="搜索什么呢" required>
</form>
<nav class="head-menu">
<#-- 菜单未优化-->
<@menuTag method="list">
<#list menus?sort_by('priority') as menu>
<a href="${menu.url}" target="${menu.target!}">${menu.name} </a>
</#list>
<@menuTag method="tree">
<#list menus?sort_by('priority') as menu>
<#if menu.children?? && menu.children?size gt 0>
<div class="has-child">
</#if >
<a <#if menu.url?? && menu.url?trim?length gt 0> href="${menu.url!}" target="${menu.target!}" </#if>>
<span class="faa-parent animated-hover">
<#if menu.icon?? && menu.icon?trim?length gt 0>
<i class="${menu.icon}" aria-hidden="true"></i>
</#if>${menu.name}
</span>
</a>
<#if menu.children?? && menu.children?size gt 0>
<div class="sub-menu">
<#list menu.children?sort_by('priority') as child>
<a href="${child.url!}" target="${child.target!}">
<#if child.icon?? && child.icon?trim?length gt 1>
<i class="${child.icon}" aria-hidden="true"></i>
</#if>${child.name}
</a>
</#list>
</div >
</#if>
<#if menu.children?? && menu.children?size gt 0>
</div >
</#if >
</#list>
</@menuTag>
<#-- <@menuTag method="tree">
<ul>
<#list menus as menu>
<a href="${menu.url!}" target="${menu.target!}">${menu.name!}
<#if menu.children?? && menu.children?size gt 0>
<#list menu.children as child>
<a href="${child.url!}" target="${menu.target!}">${child.name!}</a>
</#list>
</#if>
</#list>
</@menuTag>-->
</nav>
</header>
</#macro>

@ -1,4 +1,4 @@
<#include "header.ftl" />
<#include "header.ftl" >
<@head title="${blog_title!}"/>
<#include "module/post-module.ftl">
<#include "footer.ftl" />

@ -4,7 +4,13 @@
-->
<#list menus?sort_by('priority') as menu>
<li>
<a href="${menu.url}" target="${menu.target!}">${menu.name} </a>
<a href="${menu.url}" target="${menu.target!}">
<#if menu.icon?? && menu.icon?trim?length gt 0>
<i class="${menu.icon}" aria-hidden="true">
</i>
</#if>
${menu.name}
</a>
</li>
</#list>
</@menuTag>

@ -4,6 +4,7 @@
<section class="home-title">
<h1>${blog_title!}</h1>
<span>${user.description!}</span>
<#---->
<div class="home-social">
<#if settings.home_social?? && settings.home_social != ''>
${settings.home_social!}
@ -45,7 +46,10 @@
</#list>
</section>
<section class="page-navigator">
<@paginationTag method="archives" page="${posts.number}" total="${posts.totalPages}" display="3">
<#--<@paginationTag method="index" page="${posts.number}" total="${posts.totalPages}" display="3">
<#include "layouts/list-nextprev.ftl">
</@paginationTag>
<@paginationTag method="page" page="${posts.number}" total="${posts.totalPages}" display="3">
<#if pagination.hasPrev>
<a href="${pagination.prevPageFullPath!}">上一页</a>
</#if>
@ -59,7 +63,30 @@
<#if pagination.hasNext>
<a href="${pagination.nextPageFullPath!}">下一页</a>
</#if>
</@paginationTag>
</@paginationTag>-->
<@paginationTag method="index" slug="${slug!}" page="${posts.number}" total="${posts.totalPages}" display="3">
<#if pagination.hasPrev>
<span class="current">
<a href="${pagination.prevPageFullPath!}" title="上一页"></a>
</span>
</#if>
<#list pagination.rainbowPages as number>
<#if number.isCurrent>
<span class="current">
<a href="${number.fullPath!}">${number.page!}</a>
</span>
<#else>
<span class="current">
<a href="${number.fullPath!}">${number.page!}</a>
</span>
</#if>
</#list>
<#if pagination.hasNext>
<span class="current">
<a href="${pagination.nextPageFullPath!}" title="下一页"></a>
</span>
</#if>
</@paginationTag>
</section>
</div>
</main>

@ -1,3 +1,4 @@
<#include "header.ftl">
<@head title="page -${blog_title!}" />
<#include "module/post-module.ftl">
<#include "footer.ftl">

@ -13,8 +13,8 @@
</a>
</#list>
</span>
<span class="comments">${post.commentCount!}</span>
<span class="visits">${post.visits!}</span>
<span class="comments">${post.commentCount!}</span>
<span class="visits">${post.visits!}</span>
</div>
</section>
<article class="post-content">

@ -1,18 +1,6 @@
<#include "header.ftl">
<@head title="友情链接 -${blog_title!}" />
<h1>友情链接</h1>
<ul>
<@linkTag method="list">
<#if links?? && links?size gt 0>
<#list links as link>
<li>
<a href="${link.url}" target="_blank" rel="external">${link.name}</a>
<#if link.description!=''>
${link.description}
</#if>
</li>
</#list>
</#if>
</@linkTag>
</ul>
<@head title="搜索结果:${keyword!} - ${blog_title!}"/>
<#list posts.content as post>
<a href="${post.fullPath!}">${post.title!}</a>
</#list>
<#include "footer.ftl">

@ -13,34 +13,6 @@ general:
type: attachment
default: ''
description: '在这里填入一张图片地址,不填则显示纯色背景'
home_social:
name: home_social
label: 自定义社交链接
type: textarea
placeholder: ''
default: ''
description: '在这里填入你的自定义社交链接,不填则不输出。(格式请看<a href="https://github.com/Dreamer-Paul/Single/releases/tag/1.1" target="_blank">帮助信息</a>'
custom_css:
name: custom_css
label: 自定义样式表
type: textarea
placeholder: ''
default: ''
description: '在这里填入你的自定义样式表,不填则不输出。'
custom_script:
name: custom_script
label: 统计代码
type: textarea
placeholder: ''
default: ''
description: 在这里填入你的统计代码,不填则不输出。需要 <a>&lt;script&gt;</a>标签 '
author_text:
name: author_text
label: 自定义作者信息
type: textarea
placeholder: ''
default: ''
description: '显示在文章底部的作者信息,不填则不输出。'
night_mode:
name: night_mode
label: 夜间模式
@ -55,6 +27,93 @@ general:
- value: '2'
label: 始终
description: '在 22:00 - 5:00 期间自动开启夜间模式,始终则为始终开启夜间模式'
Code_highlighting:
name: Code_highlighting
label: 代码高亮
type: select
data-type: string
default: "one-dark"
description: "设置代码块主题,可通过后台元数据为每篇文章设置单独的代码主题,主题来自 prism-themes见https://github.com/PrismJS/prism-themes"
options:
- value: "one-dark"
label: "one-dark"
- value: "one-light"
label: "one-light"
- value: "a11y-dark"
label: "a11y-dark"
- value: "atom-dark"
label: "atom-dark"
- value: "base16-ateliersulphurpool.light"
label: "base16-ateliersulphurpool.light"
- value: "cb"
label: "cb"
- value: "coldark-cold"
label: "coldark-cold"
- value: "coldark-dark"
label: "coldark-dark"
- value: "coy-without-shadows"
label: "coy-without-shadows"
- value: "darcula"
label: "darcula"
- value: "dracula"
label: "dracula"
- value: "duotone-dark"
label: "duotone-dark"
- value: "duotone-earth"
label: "duotone-earth"
- value: "duotone-forest"
label: "duotone-forest"
- value: "duotone-light"
label: "duotone-light"
- value: "duotone-sea"
label: "duotone-sea"
- value: "duotone-space"
label: "duotone-space"
- value: "ghcolors"
label: "ghcolors"
- value: "gruvbox-dark"
label: "gruvbox-dark"
- value: "gruvbox-light"
label: "gruvbox-light"
- value: "holi-theme"
label: "holi-theme"
- value: "hopscotch"
label: "hopscotch"
- value: "lucario"
label: "lucario"
- value: "material-dark"
label: "material-dark"
- value: "material-light"
label: "material-light"
- value: "material-oceanic"
label: "material-oceanic"
- value: "night-owl"
label: "night-owl"
- value: "nord"
label: "nord"
- value: "pojoaque"
label: "pojoaque"
- value: "shades-of-purple"
label: "shades-of-purple"
- value: "solarized-dark-atom"
label: "solarized-dark-atom"
- value: "synthwave84"
label: "synthwave84"
- value: "vs"
label: "vs"
- value: "vsc-dark-plus"
label: "vsc-dark-plus"
- value: "xonokai"
label: "xonokai"
- value: "z-touch"
label: "z-touch"
author_text:
name: author_text
label: 自定义作者信息
type: textarea
placeholder: ''
default: ''
description: '显示在文章底部的作者信息,不填则不输出。'
copy_notice:
name: copy_notice
label: 复制提示
@ -79,5 +138,102 @@ general:
- value: false
label: 关闭
description: '是否显示信息栏在页尾显示 “最新文章”、“最近评论” 和 “时光机”'
custom_css:
name: custom_css
label: 自定义样式表
type: textarea
placeholder: ''
default: ''
description: '在这里填入你的自定义样式表,不填则不输出。'
home_social:
label: 社交链接
items:
wechat:
name: wechat
label: 微信二维码
type: attachment
sina:
name: sina
label: 新浪微博
type: text
qq:
name: qq
label: 腾讯QQ
type: text
qzone:
name: qzone
label: QQ空间
type: text
github:
name: github
label: Github
type: text
lofter:
name: lofter
label: Lofter
type: text
bili:
name: bili
label: BiliBili
type: text
wangyiyun:
name: wangyiyun
label: 网易云音乐
type: text
twitter:
name: twitter
label: Twitter
type: text
facebook:
name: facebook
label: Facebook
type: text
googleplus:
name: googleplus
label: Google+
type: text
jianshu:
name: jianshu
label: 简书
type: text
csdn:
name: csdn
label: CSDN
type: text
zhihu:
name: zhihu
label: 知乎
type: text
telegram:
name: telegram
label: Telegram
type: text
email:
name: email
label: 邮箱
type: text
stackoverflow:
name: stackoverflow
label: Stack Overflow
type: text
customize_icon:
name: customize_icon
label: 自定义社交图标
type: text
customize_title:
name: customize_title
label: 自定义社交标题
type: text
customize_link:
name: customize_link
label: 自定义社交链接
type: text
home_social:
name: home_social
label: 社交链接
type: textarea
placeholder: ''
default: ''
description: '在这里填入你的自定义社交链接,不填则不输出。(格式请看<a href="https://github.com/Dreamer-Paul/Single/releases/tag/1.1" target="_blank">帮助信息</a>'
# 首页、存档页属性显示
# 文章页属性显示

@ -17,7 +17,7 @@
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
/*a {
color: #e67474;
outline: none;
transition: color .2s ease-out, border .2s ease-out, opacity .2s ease-out
@ -34,7 +34,7 @@ a:hover,
a:active {
outline: none;
color: orange
}
}*/
.links {
margin-bottom: 80px
}
@ -445,7 +445,7 @@ button{
.btn.transparent{ background: transparent }
/* - 代码 */
pre, code{
/*pre, code{
word-break: normal;
font-family: 'Consolas', 'Courier New', monospace;
}
@ -470,7 +470,7 @@ pre{
word-break: break-all;
background-color: #f7f2f4;
}
*/
/* - 项目列表 */
ul, ol{ margin-left: 1.25em }
ul.clear, ol.clear{

@ -202,12 +202,12 @@ header{
}
.head-menu a:hover{ color: #ffa628 }
.head-menu .has-child > a:after{
/*.head-menu .has-child > a:after{
float: right;
content: "\f107";
margin-left: .3em;
font-family: "FontAwesome";
}
/*content: "\f107";
margin-left: .5em;
/*font-family: "FontAwesome";
}*/
/* -- 手机版 */
@media screen and (max-width: 599px){
@ -756,11 +756,11 @@ article ul p:first-child{
margin-right: .5em;
}
.article-list .item-2:before{ content: "-" }
.article-list .item-3:before{ content: "--" }
.article-list .item-4:before{ content: "---" }
.article-list .item-5:before{ content: "----" }
.article-list .item-6:before{ content: "-----" }
.article-list .item-2:before{ content: " " }
.article-list .item-3:before{ content: " " }
.article-list .item-4:before{ content: " " }
.article-list .item-5:before{ content: " " }
.article-list .item-6:before{ content: " " }
@media screen and (min-width: 800px){
body.has-trees{ margin-right: 15em }
@ -911,7 +911,7 @@ footer .sub-footer p{ font-size: .875em }
}
}
/* - Prism 代码块样式 */
/* - Prism
.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata{ color: #7D8B99 }
.token.punctuation{ color: #5F6364 }
.token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol, .token.deleted{ color: #c92c2c }
@ -931,4 +931,4 @@ footer .sub-footer p{ font-size: .875em }
.token.entity { cursor: help }
.token.important { font-weight: normal }
.namespace { opacity: .7 }
.namespace { opacity: .7 }*/

File diff suppressed because one or more lines are too long

@ -1,13 +1,9 @@
/* ----
# Single Theme
# By: Dreamer-Paul
# Last Update: 2020.9.11
一个简洁大气含夜间模式的 Typecho 博客模板
本代码为奇趣保罗原创并遵守 MIT 开源协议欢迎访问我的博客https://paugram.com
---- */
var Paul_Single = function (config) {
@ -17,16 +13,12 @@ var Paul_Single = function (config) {
// 菜单按钮
this.header = function () {
var menu = document.getElementsByClassName("head-menu")[0];
ks.select(".toggle-btn").onclick = function () {
menu.classList.toggle("active");
};
ks.select(".light-btn").onclick = this.night;
var search = document.getElementsByClassName("search-btn")[0];
var bar = document.getElementsByClassName("head-search")[0];
search.addEventListener("click", function () {
bar.classList.toggle("active");
})
@ -36,11 +28,11 @@ var Paul_Single = function (config) {
this.night = function () {
if(body.classList.contains("dark-theme")){
body.classList.remove("dark-theme");
document.cookie = "night=false;" + "path=/;" + "max-age=21600";
//document.cookie = "night=false;" + "path=/;" + "max-age=21600";
}
else{
body.classList.add("dark-theme");
document.cookie = "night=true;" + "path=/;" + "max-age=21600";
//document.cookie = "night=true;" + "path=/;" + "max-age=21600";
}
};
@ -134,11 +126,9 @@ var Paul_Single = function (config) {
// 返回页首
window.addEventListener("scroll", this.to_top);
// 如果开启自动夜间模式
if(config.night){
/* if(config.night){
var hour = new Date().getHours();
if(document.cookie.indexOf("night") === -1 && (hour <= 5 || hour >= 22)){
document.body.classList.add("dark-theme");
document.cookie = "night=true;" + "path=/;" + "max-age=21600";
@ -151,20 +141,16 @@ var Paul_Single = function (config) {
else{
document.body.classList.remove("dark-theme");
}
}
}*/
// 如果开启复制内容提示
if(config.copyright){
document.oncopy = function () {
ks.notice("复制内容请注明来源并保留版权信息!", {color: "yellow", overlay: true})
ks.notice("复制内容请注明来源并保留版权信息!", {color:"yellow", overlay:true, time:2000})
};
}
};
// 图片缩放
ks.image(".post-content:not(.is-special) img, .page-content:not(.is-special) img");
// 请保留版权说明
if (window.console && window.console.log) {
console.log("%c Single %c https://paugram.com ","color: #fff; margin: 1em 0; padding: 5px 0; background: #ffa628;","margin: 1em 0; padding: 5px 0; background: #efefef;");

@ -0,0 +1,262 @@
/* PrismJS 1.25.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+aspnet+bash+basic+batch+c+csharp+cpp+dart+django+docker+ejs+ftl+git+glsl+go+graphql+groovy+haml+haskell+http+java+jq+js-extras+json+kotlin+latex+less+lua+makefile+markup-templating+matlab+mermaid+mongodb+nginx+objectivec+php+powershell+pug+python+r+jsx+tsx+regex+ruby+rust+sass+scss+sql+stylus+swift+typescript+typoscript+unrealscript+vim+visual-basic+wasm+yaml&plugins=line-numbers+show-language+toolbar+copy-to-clipboard */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
/* text-shadow: 0 1px white; */
/* font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; */
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre code {
display: block;
margin-bottom: 10px;
padding: 12px;
border-radius: 8px;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.token.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
/* This background color was intended by the author of this theme. */
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
pre[class*="language-"].line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}
pre[class*="language-"].line-numbers > code {
position: relative;
white-space: inherit;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em; /* works for line-numbers below 1000 lines */
letter-spacing: -1px;
border-right: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.line-numbers-rows > span {
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
/* padding-right: 0.8em; */
text-align: center;
}
div.code-toolbar {
position: relative;
}
div.code-toolbar > .toolbar {
position: absolute;
z-index: 10;
top: .3em;
right: .2em;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
div.code-toolbar:hover > .toolbar {
opacity: 1;
}
/* Separate line b/c rules are thrown out if selector is invalid.
IE11 and old Edge versions don't support :focus-within. */
div.code-toolbar:focus-within > .toolbar {
opacity: 1;
}
div.code-toolbar > .toolbar > .toolbar-item {
display: inline-block;
}
div.code-toolbar > .toolbar > .toolbar-item:first-child span::before {
content: attr(data-rel);
}
div.code-toolbar > .toolbar > .toolbar-item > a {
cursor: pointer;
}
div.code-toolbar > .toolbar > .toolbar-item > button {
background: none;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
color: #bbb;
font-size: .8em;
padding: 0 .5em;
background: #f5f2f0;
background: rgba(224, 224, 224, 0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
border-radius: .5em;
}
div.code-toolbar > .toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar > .toolbar-item > a:focus,
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:focus,
div.code-toolbar > .toolbar > .toolbar-item > span:hover,
div.code-toolbar > .toolbar > .toolbar-item > span:focus {
color: inherit;
text-decoration: none;
}

File diff suppressed because one or more lines are too long

@ -0,0 +1,212 @@
code[class*="language-"],
pre[class*="language-"] {
color: #000;
background: 0 0;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre code {
display: block;
margin-bottom: 10px;
padding: 12px;
border-radius: 8px;
}
code[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
pre[class*="language-"]::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
code[class*="language-"] ::selection,
code[class*="language-"]::selection,
pre[class*="language-"] ::selection,
pre[class*="language-"]::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
pre[class*="language-"] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
:not(pre) > code[class*="language-"] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
color: #708090;
}
.token.punctuation {
color: #999;
}
.token.namespace {
opacity: 0.7;
}
.token.boolean,
.token.constant,
.token.deleted,
.token.number,
.token.property,
.token.symbol,
.token.tag {
color: #905;
}
.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
color: #690;
}
.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url {
color: #9a6e3a;
background: hsla(0, 0%, 100%, 0.5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.class-name,
.token.function {
color: #dd4a68;
}
.token.important,
.token.regex,
.token.variable {
color: #e90;
}
.token.bold,
.token.important {
font-weight: 700;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
pre[class*="language-"].line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}
pre[class*="language-"].line-numbers > code {
position: relative;
white-space: inherit;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em;
letter-spacing: -1px;
border-right: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.line-numbers-rows > span {
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
text-align: center;
}
div.code-toolbar {
position: relative;
}
div.code-toolbar > .toolbar {
position: absolute;
z-index: 10;
top: 0.3em;
right: 0.2em;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
div.code-toolbar:hover > .toolbar {
opacity: 1;
}
div.code-toolbar:focus-within > .toolbar {
opacity: 1;
}
div.code-toolbar > .toolbar > .toolbar-item {
display: inline-block;
}
div.code-toolbar > .toolbar > .toolbar-item:first-child span::before {
content: attr(data-rel);
}
div.code-toolbar > .toolbar > .toolbar-item > a {
cursor: pointer;
}
div.code-toolbar > .toolbar > .toolbar-item > button {
background: 0 0;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
color: #bbb;
font-size: 0.8em;
padding: 0 0.5em;
background: #f5f2f0;
background: rgba(224, 224, 224, 0.2);
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
border-radius: 0.5em;
}
div.code-toolbar > .toolbar > .toolbar-item > a:focus,
div.code-toolbar > .toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:focus,
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > span:focus,
div.code-toolbar > .toolbar > .toolbar-item > span:hover {
color: inherit;
text-decoration: none;
}

File diff suppressed because one or more lines are too long

@ -0,0 +1,161 @@
/**
* a11y-dark theme for JavaScript, CSS, and HTML
* Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
* @author ericwbailey
*/
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
background: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #2b2b2b;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #d4d0ab;
}
.token.punctuation {
color: #fefefe;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: #ffa07a;
}
.token.boolean,
.token.number {
color: #00e0e0;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #abe338;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #00e0e0;
}
.token.atrule,
.token.attr-value,
.token.function {
color: #ffd700;
}
.token.keyword {
color: #00e0e0;
}
.token.regex,
.token.important {
color: #ffd700;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
@media screen and (-ms-high-contrast: active) {
code[class*="language-"],
pre[class*="language-"] {
color: windowText;
background: window;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: window;
}
.token.important {
background: highlight;
color: window;
font-weight: normal;
}
.token.atrule,
.token.attr-value,
.token.function,
.token.keyword,
.token.operator,
.token.selector {
font-weight: bold;
}
.token.attr-value,
.token.comment,
.token.doctype,
.token.function,
.token.keyword,
.token.operator,
.token.property,
.token.string {
color: highlight;
}
.token.attr-value,
.token.url {
font-weight: normal;
}
}

@ -0,0 +1,143 @@
/**
* atom-dark theme for `prism.js`
* Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
* @author Joe Gibson (@gibsjose)
*/
code[class*="language-"],
pre[class*="language-"] {
color: #c5c8c6;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #1d1f21;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #7C7C7C;
}
.token.punctuation {
color: #c5c8c6;
}
.namespace {
opacity: .7;
}
.token.property,
.token.keyword,
.token.tag {
color: #96CBFE;
}
.token.class-name {
color: #FFFFB6;
text-decoration: underline;
}
.token.boolean,
.token.constant {
color: #99CC99;
}
.token.symbol,
.token.deleted {
color: #f92672;
}
.token.number {
color: #FF73FD;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #A8FF60;
}
.token.variable {
color: #C6C5FE;
}
.token.operator {
color: #EDEDED;
}
.token.entity {
color: #FFFFB6;
cursor: help;
}
.token.url {
color: #96CBFE;
}
.language-css .token.string,
.style .token.string {
color: #87C38A;
}
.token.atrule,
.token.attr-value {
color: #F9EE98;
}
.token.function {
color: #DAD085;
}
.token.regex {
color: #E9C062;
}
.token.important {
color: #fd971f;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}