From 8b9801cb922000f8e265ba89f44da915a258e2c8 Mon Sep 17 00:00:00 2001 From: tiger2005 <41613797+tiger2005@users.noreply.github.com> Date: Thu, 2 Mar 2023 23:11:05 +0800 Subject: [PATCH] Add new theme: OI Press --- src/templates/oipress/article.js | 292 +++++++++++++++ src/templates/oipress/article_list.js | 18 + src/templates/oipress/common.js | 1 + src/templates/oipress/components/loader.vue | 43 +++ .../oipress/components/pagination.vue | 61 +++ src/templates/oipress/example-config.json | 1 + .../oipress/handlebars/article/content.hbs | 32 ++ .../oipress/handlebars/article/scripts.hbs | 8 + .../oipress/handlebars/article/styles.hbs | 1 + .../handlebars/article_list/content.hbs | 11 + .../handlebars/article_list/scripts.hbs | 1 + .../handlebars/article_list/styles.hbs | 1 + src/templates/oipress/handlebars/template.hbs | 54 +++ src/templates/oipress/layouts/admonition.vue | 147 ++++++++ .../oipress/layouts/article_comments.vue | 122 ++++++ .../oipress/layouts/article_list.vue | 152 ++++++++ .../oipress/layouts/article_list_nav.vue | 162 ++++++++ src/templates/oipress/layouts/article_nav.vue | 162 ++++++++ .../oipress/layouts/article_vote.vue | 35 ++ src/templates/oipress/layouts/toc.vue | 154 ++++++++ src/templates/oipress/styles/article.css | 264 +++++++++++++ src/templates/oipress/styles/article_list.css | 1 + src/templates/oipress/styles/github.css | 11 + src/templates/oipress/styles/github_dark.css | 11 + src/templates/oipress/styles/style.css | 349 ++++++++++++++++++ 25 files changed, 2094 insertions(+) create mode 100644 src/templates/oipress/article.js create mode 100644 src/templates/oipress/article_list.js create mode 100644 src/templates/oipress/common.js create mode 100644 src/templates/oipress/components/loader.vue create mode 100644 src/templates/oipress/components/pagination.vue create mode 100644 src/templates/oipress/example-config.json create mode 100644 src/templates/oipress/handlebars/article/content.hbs create mode 100644 src/templates/oipress/handlebars/article/scripts.hbs create mode 100644 src/templates/oipress/handlebars/article/styles.hbs create mode 100644 src/templates/oipress/handlebars/article_list/content.hbs create mode 100644 src/templates/oipress/handlebars/article_list/scripts.hbs create mode 100644 src/templates/oipress/handlebars/article_list/styles.hbs create mode 100644 src/templates/oipress/handlebars/template.hbs create mode 100644 src/templates/oipress/layouts/admonition.vue create mode 100644 src/templates/oipress/layouts/article_comments.vue create mode 100644 src/templates/oipress/layouts/article_list.vue create mode 100644 src/templates/oipress/layouts/article_list_nav.vue create mode 100644 src/templates/oipress/layouts/article_nav.vue create mode 100644 src/templates/oipress/layouts/article_vote.vue create mode 100644 src/templates/oipress/layouts/toc.vue create mode 100644 src/templates/oipress/styles/article.css create mode 100644 src/templates/oipress/styles/article_list.css create mode 100644 src/templates/oipress/styles/github.css create mode 100644 src/templates/oipress/styles/github_dark.css create mode 100644 src/templates/oipress/styles/style.css diff --git a/src/templates/oipress/article.js b/src/templates/oipress/article.js new file mode 100644 index 0000000..3610d8b --- /dev/null +++ b/src/templates/oipress/article.js @@ -0,0 +1,292 @@ +import Vue from 'vue' +import './common' +import { + initKatex, + initHighlight +} from 'scripts/article' +import ArticleVote from './layouts/article_vote.vue' +import ArticleComments from './layouts/article_comments.vue' +import $ from 'jquery' +import ArticleNav from './layouts/article_nav.vue' +import TOC from './layouts/toc.vue' +import Admonition from './layouts/admonition.vue' +import './styles/github.css' +import './styles/github_dark.css' +import './styles/article.css' + +BlogGlobals.luoguAddress = 'https://www.luogu.com.cn' +BlogGlobals.picAddress = 'https://cdn.luogu.com.cn' + +window.navBar = new Vue({ + el: '#nav-bar', + render: h => h(ArticleNav) +}) + +async function initHljs () { + // Function + $('pre code').each((_, block) => { + const classes = $(block)[0].className.split(' ') + let isHljs = false + for (let i = 0; i < classes.length; i++) { + const name = classes[i] + if (name === 'hljs') { + isHljs = true + } + const matchLang = name.match(/^language-(\w+)(\{[\d\-,]+\})?(\*?)$/) + if (!matchLang) { + continue + } + isHljs = true + classes[i] = 'language-' + matchLang[1] + if (matchLang[2] !== undefined) { + const res = matchLang[2].match(/\d+-\d+|\d+/g) + for (let i = 0; i < res.length; i++) { + const ps = res[i].split('-') + if (ps.length === 1) { + ps.push(ps[0]) + } + res[i] = ps + // add highlights here + } + $(block).parent().attr('line-highlights', JSON.stringify(res)) + } + if (matchLang[3] === '*') { + $(block).parent().attr('line-numbers', true) + } + } + if (isHljs) { + $(block).parent().attr('is-hljs', true) + } + $(block).attr('class', classes.join(' ')) + }) + await initHighlight() + $('pre').each((_, block) => { + if ($(block).attr('is-hljs') === undefined) { + return + } + const code = $(block).find('code') + const u = $('
') + $(block).append(u) + u.append(code) + const len = code.text().split('').reduce((prev, curr) => prev + (curr === '\n'), 0) + 1 + if ($(block).attr('line-numbers') !== undefined) { + u.prepend('
' + [...Array(len).keys()].map(x => x + 1).join('
') + '
') + } + if ($(block).attr('line-highlights') !== undefined) { + const lines = JSON.parse($(block).attr('line-highlights')) + const arr = [] + for (let i = 1; i <= len; i++) { + arr.push(false) + } + for (let i = 0; i < lines.length; i++) { + for (let j = lines[i][0]; j <= lines[i][1]; j++) { + if (j > 0 && j <= len) { + arr[j - 1] = true + } + } + } + $(block).prepend('
' + arr.map(x => (x ? '
 
' : '
')).join('') + '
') + } + if (navigator.clipboard !== undefined) { + $(block).prepend(` +
+ +
+ `) + } + }) + $('.copy-code').click(function () { + const that = this + if ($(this).hasClass('locked')) { + return + } + const str = $(this).parent().find('code').text() + navigator.clipboard.writeText(str).then( + () => { + $(that).addClass('locked') + $(that).html(` + + `) + setTimeout(() => { + $(that).html(` + + `) + $(that).removeClass('locked') + }, 1000) + }, + () => { + $(that).addClass('locked') + $(that).html(` + + `) + setTimeout(() => { + $(that).html(` + + `) + $(that).removeClass('locked') + }, 1000) + } + ) + }) +} + +function initTOC () { + const tocList = [] + const nameList = {} + $('#article-content h1, #article-content h2, #article-content h3, #article-content h4, #article-content h5, #article-content h6').each((_, block) => { + const idx = parseInt($(block)[0].tagName.substring(1)) + const original = $(block).text() + let content = original.slice().replace(/\s/g, '_') + if (nameList[content] !== undefined) { + for (let i = 1; ; i++) { + if (nameList[content + '_' + i] === undefined) { + content = content + '_' + i + break + } + } + } + nameList[content] = true + const lnk = $(``) + $(block).append(lnk).attr('name', content) + tocList.push([idx, content, original]) + }) + + window.headerlinkInfo = tocList + window.tocComponent = new Vue({ + el: '#toc-wrapper', + render: h => h(TOC) + }) + + window.locateHeader = (context) => { + if (context.length === 0) { + document.body.scrollTop = 0 + document.documentElement.scrollTop = 0 + $('.headerlink-actve').removeClass('headerlink-actve') + } + context = decodeURIComponent(context) + const u = $(`[name='${context.replace(/'/g, "\\'")}']`) + if (u.length !== 0) { + const loc = u.position().top + document.body.scrollTop = loc - 48 + document.documentElement.scrollTop = loc - 48 + $('.headerlink-actve').removeClass('headerlink-actve') + u.find('.headerlink').addClass('headerlink-actve') + } + location.hash = '#' + context + } + + if (location.hash.length !== 0) { + window.locateHeader(location.hash.substring(1)) + } + window.addEventListener('hashchange', () => { + if (location.hash.length !== 0) { + window.locateHeader(location.hash.substring(1)) + } + }) +} + +function initAdmonitions () { + const alias = { + note: 'blue', + abstract: 'skyblue', + info: 'cyan', + tip: 'teal', + success: 'green', + question: 'lightgreen', + warning: 'orange', + error: 'deeporange', + failure: 'deeporange', + danger: 'red', + bug: 'darkred', + example: 'deeppurple', + quote: 'grey' + } + const bqList = [] + $('#article-content blockquote').each((_, block) => { + const ele = $(block) + if (ele.parents('[is-admonition]').length !== 0) { + return + } + if (ele.children().length > 1) { + const fele = $(block).children().eq(0) + const info = [-1, '', '', '', false, null] + if (fele[0].tagName !== 'P') { + return + } + const cnts = $.trim(fele.html()).split(' ') + if (cnts.length === 0) { + return + } + if (cnts[0] === '!!!') { + info[0] = 0 + } else if (cnts[0] === '???') { + info[0] = 1 + } else if (cnts[0] === '???+') { + info[0] = 2 + } else { + return + } + if (cnts.length === 1 || !Object.prototype.hasOwnProperty.call(alias, cnts[1])) { + info[1] = 'note' + info[3] = $.trim(cnts.slice(1).join(' ')) + } else { + info[1] = cnts[1] + info[3] = $.trim(cnts.slice(2).join(' ')) + } + info[2] = alias[info[1]] + info[5] = block + fele.remove() + if (ele.children().length === 1) { + const lele = ele.children().eq(0) + if (lele[0].tagName === 'PRE') { + info[4] = true + } + } + bqList.push(info) + ele.attr('is-admonition', true) + } + }) + window.admonitions = [] + for (let i = 0; i < bqList.length; i++) { + const [block, type, color, title, fullWidth, ele] = bqList[i] + window.admonitions.push(new Vue({ + el: ele, + render: h => h(Admonition, { + props: { + block: block, + type: type, + color: color, + title: title, + fullWidth: fullWidth, + html: ele.innerHTML + } + }) + })) + } +} + +function initTable () { + $('#article-content table').each((_, block) => { + $(block).wrapAll('
') + }) +} + +async function initAll () { + initKatex() + initAdmonitions() + await initHljs() + initTOC() + initTable() +} + +initAll() + +window.articleVote = new Vue({ + el: '#post-votes', + render: h => h(ArticleVote) +}) + +window.articleComments = new Vue({ + el: '#article-comments', + render: h => h(ArticleComments) +}) diff --git a/src/templates/oipress/article_list.js b/src/templates/oipress/article_list.js new file mode 100644 index 0000000..dac7060 --- /dev/null +++ b/src/templates/oipress/article_list.js @@ -0,0 +1,18 @@ +import Vue from 'vue' +import './common' +import ArticleList from './layouts/article_list.vue' +import ArticleListNav from './layouts/article_list_nav.vue' +import './styles/article_list.css' + +BlogGlobals.luoguAddress = 'https://www.luogu.com.cn' +BlogGlobals.picAddress = 'https://cdn.luogu.com.cn' + +window.articleList = new Vue({ + el: '#artile-list-container', + render: h => h(ArticleList) +}) + +window.navBar = new Vue({ + el: '#nav-bar', + render: h => h(ArticleListNav) +}) diff --git a/src/templates/oipress/common.js b/src/templates/oipress/common.js new file mode 100644 index 0000000..9a5f7e9 --- /dev/null +++ b/src/templates/oipress/common.js @@ -0,0 +1 @@ +import './styles/style.css' diff --git a/src/templates/oipress/components/loader.vue b/src/templates/oipress/components/loader.vue new file mode 100644 index 0000000..b94ee03 --- /dev/null +++ b/src/templates/oipress/components/loader.vue @@ -0,0 +1,43 @@ + + + + + \ No newline at end of file diff --git a/src/templates/oipress/components/pagination.vue b/src/templates/oipress/components/pagination.vue new file mode 100644 index 0000000..27a8413 --- /dev/null +++ b/src/templates/oipress/components/pagination.vue @@ -0,0 +1,61 @@ + + + + + \ No newline at end of file diff --git a/src/templates/oipress/example-config.json b/src/templates/oipress/example-config.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/src/templates/oipress/example-config.json @@ -0,0 +1 @@ +{} diff --git a/src/templates/oipress/handlebars/article/content.hbs b/src/templates/oipress/handlebars/article/content.hbs new file mode 100644 index 0000000..7d13575 --- /dev/null +++ b/src/templates/oipress/handlebars/article/content.hbs @@ -0,0 +1,32 @@ + +
+
+
{{ postTitle }}
+
+
+ 发布于 {{ postTime }} +
+
+
+ +
+
+
+
+ {{{ postContent }}} +
+

文章发布于 {{ postTime }}，在 {{ postType }} 分类下。{{#if isBlogAdmin}} + 编辑此页。 + {{/if}}

+
+
+
+
+
+
+
+
+ +
+ + diff --git a/src/templates/oipress/handlebars/article/scripts.hbs b/src/templates/oipress/handlebars/article/scripts.hbs new file mode 100644 index 0000000..0930b8a --- /dev/null +++ b/src/templates/oipress/handlebars/article/scripts.hbs @@ -0,0 +1,8 @@ + + diff --git a/src/templates/oipress/handlebars/article/styles.hbs b/src/templates/oipress/handlebars/article/styles.hbs new file mode 100644 index 0000000..3f50393 --- /dev/null +++ b/src/templates/oipress/handlebars/article/styles.hbs @@ -0,0 +1 @@ + diff --git a/src/templates/oipress/handlebars/article_list/content.hbs b/src/templates/oipress/handlebars/article_list/content.hbs new file mode 100644 index 0000000..cddfb78 --- /dev/null +++ b/src/templates/oipress/handlebars/article_list/content.hbs @@ -0,0 +1,11 @@ + +
+
+
{{ blogName }}
+
+ {{ blogSubtitle }}  +
+
+
+ +
diff --git a/src/templates/oipress/handlebars/article_list/scripts.hbs b/src/templates/oipress/handlebars/article_list/scripts.hbs new file mode 100644 index 0000000..e7922b7 --- /dev/null +++ b/src/templates/oipress/handlebars/article_list/scripts.hbs @@ -0,0 +1 @@ + diff --git a/src/templates/oipress/handlebars/article_list/styles.hbs b/src/templates/oipress/handlebars/article_list/styles.hbs new file mode 100644 index 0000000..94a06dc --- /dev/null +++ b/src/templates/oipress/handlebars/article_list/styles.hbs @@ -0,0 +1 @@ + diff --git a/src/templates/oipress/handlebars/template.hbs b/src/templates/oipress/handlebars/template.hbs new file mode 100644 index 0000000..5cb39cb --- /dev/null +++ b/src/templates/oipress/handlebars/template.hbs @@ -0,0 +1,54 @@ + + + + + + + + + + + + + {{>styles}} + {{ title }} - {{ blogName }} - 洛谷博客 + + + + +
+{{>content}} +
+
+

+ Site Map + + GitHub + + 洛谷 + + Theme Guide +

+

+ The major design concept of this theme originated from MKDocs Material. +

+

Powered by Luogu Blog. Theme "OI Press" by tiger2005. All rights reserved.

+
+
+
+ + {{>scripts}} + + + diff --git a/src/templates/oipress/layouts/admonition.vue b/src/templates/oipress/layouts/admonition.vue new file mode 100644 index 0000000..1f9aa52 --- /dev/null +++ b/src/templates/oipress/layouts/admonition.vue @@ -0,0 +1,147 @@ + + + + + diff --git a/src/templates/oipress/layouts/article_comments.vue b/src/templates/oipress/layouts/article_comments.vue new file mode 100644 index 0000000..bd2b331 --- /dev/null +++ b/src/templates/oipress/layouts/article_comments.vue @@ -0,0 +1,122 @@ + + + + + diff --git a/src/templates/oipress/layouts/article_list.vue b/src/templates/oipress/layouts/article_list.vue new file mode 100644 index 0000000..8883724 --- /dev/null +++ b/src/templates/oipress/layouts/article_list.vue @@ -0,0 +1,152 @@ + + + + + diff --git a/src/templates/oipress/layouts/article_list_nav.vue b/src/templates/oipress/layouts/article_list_nav.vue new file mode 100644 index 0000000..5744301 --- /dev/null +++ b/src/templates/oipress/layouts/article_list_nav.vue @@ -0,0 +1,162 @@ + + + + + diff --git a/src/templates/oipress/layouts/article_nav.vue b/src/templates/oipress/layouts/article_nav.vue new file mode 100644 index 0000000..bca1ccb --- /dev/null +++ b/src/templates/oipress/layouts/article_nav.vue @@ -0,0 +1,162 @@ + + + + + diff --git a/src/templates/oipress/layouts/article_vote.vue b/src/templates/oipress/layouts/article_vote.vue new file mode 100644 index 0000000..f31e907 --- /dev/null +++ b/src/templates/oipress/layouts/article_vote.vue @@ -0,0 +1,35 @@ + + + diff --git a/src/templates/oipress/layouts/toc.vue b/src/templates/oipress/layouts/toc.vue new file mode 100644 index 0000000..36d73fc --- /dev/null +++ b/src/templates/oipress/layouts/toc.vue @@ -0,0 +1,154 @@ + + + + + \ No newline at end of file diff --git a/src/templates/oipress/styles/article.css b/src/templates/oipress/styles/article.css new file mode 100644 index 0000000..3c5a9c0 --- /dev/null +++ b/src/templates/oipress/styles/article.css @@ -0,0 +1,264 @@ +/* Post Title */ +.post-title { + font-size: 36px; + padding-bottom: 16px; +} + +.post-info { + display: flow-root; + position: relative; +} + +.post-detail { + font-size: 16px; + line-height: 36px; +} + +.post-detail a { + color: white; +} + +/* Structure */ +#blog-container { + width: 100%; +} + +#blog-contents { + display: flex; + flex-direction: row; + width: calc(100% - 32px); + max-width: 1220px; + margin: 0 auto; + height: 100%; +} + +#article-wrapper { + flex-grow: 1; + min-width: 0; + overflow-x: hidden; +} + +#article-content { + padding-top: 24px; + font-size: 16px; + line-height: 1.6; + width: 100%; + overflow-x: hidden; + box-sizing: border-box; +} + +/* Margin Collapse */ +#article-content >:first-child { + margin-top: 0px; +} + +#article-content >:last-child { + margin-bottom: 1rem; +} + +/* Hr */ +#article-content hr { + background-color: var(--line-color); + height: 1px; + border: 0; + margin: 1.5em 0; +} + +/* Code */ +pre[is-hljs=true] { + position: relative; + background: var(--block-background); + border-radius: 5px; + overflow: hidden; + font-size: 0.85em; + line-height: 1.5; +} + +pre[is-hljs=true] .copy-code { + position: absolute; + top: .05rem; + right: .05rem; + transition: 0.2s; + opacity: 0.2; + z-index: 2; +} + +pre[is-hljs=true]:hover .copy-code { + opacity: 1; +} + +/* Normal Code Style */ +code { + tab-size: 4; + font-size: 0.85em; + background: var(--block-background); + word-break: break-word; + padding: 0 .2941176471em; + border-radius: .1rem; +} + +pre, code, kbd { + font-feature-settings: "kern"; + font-family: var(--code-font) !important; +} + +.code-wrapper { + position: relative; + display: flex; + flex-direction: row; + overflow-x: auto; + width: 100%; +} + +pre[is-hljs=true] { + white-space: nowrap; +} + +/* Overwritten Code Styles */ +pre[is-hljs=true] code { + padding: 1.2em 0.8em 1.2em 0.8em; + z-index: 2; + min-height: 1.2em; + border-radius: 0px; + font-size: inherit; + background: transparent; + white-space: pre; +} + +.hljs-line-numbers { + padding: 1.2em 0 1.2em 1.2em; + text-align: right; + user-select: none; + z-index: 2; + color: var(--blurred-color); +} + +.hljs-line-numbers-wrapper { + padding-right: 1em; + border-right: 2px solid var(--code-splitter); +} + +.hljs-line-highlights { + padding: 1.2em 0px 1.2em 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + z-index: 1; + user-select: none; +} + +.hljs-line-highlights .highlighted { + background: var(--highlighted-line); +} + +/* KaTeX Desplay */ +.katex-display { + width: 100%; + overflow-x: auto; + overflow-y: hidden; + touch-action: auto; +} + +/* Header Link */ +.headerlink { + transform: translateY(-2.5px); + margin-left: .5em; + opacity: 0; +} + +h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .headerlink, h5:hover .headerlink, h6:hover .headerlink { + opacity: 0.3; + color: inherit; +} + +h1:hover .headerlink:is(:focus, :active, :hover), h2:hover .headerlink:is(:focus, :active, :hover), h3:hover .headerlink:is(:focus, :active, :hover), h4:hover .headerlink:is(:focus, :active, :hover), h5:hover .headerlink:is(:focus, :active, :hover), h6:hover .headerlink:is(:focus, :active, :hover), .headerlink.headerlink-actve { + opacity: 1 !important; + color: var(--link-hover-color) !important; +} + +.headerlink:before { + content: '¶'; +} + +/* Block Quote */ +#article-content blockquote { + padding-left: .6rem; + box-sizing: border-box; + margin-left: 0px; + margin-right: 0px; + color: var(--blurred-color); + border-left: .2rem solid var(--blurred-color); + padding-left: .6rem; +} + +/* List */ +#article-content:is(ul, ol) li:is(blockquote, p) { + margin: 0.5em 0; +} + +#article-content:is(ul, ol) { + display: flow-root; + margin: 0.5em 0em 0.5em 0.625em; + padding: 0; +} + +#article-content li { + margin-left: 1.25em; + margin-bottom: .5em; +} + +#article-content:is(ul, ol) li:last-child { + margin-bottom: 0; +} + +/* Table */ +#article-content .table-wrapper { + margin: 1em 0; + width: 100%; + overflow-x: auto; + overflow-y: hidden; +} + +#article-content table { + margin: 0; + font-size: .64rem; + border: 0.05rem solid var(--line-color); + background-color: var(--background); + border-radius: .1rem; + min-width: 100%; + overflow: hidden; + touch-action: auto; + border-spacing: 0; + box-sizing: border-box; + border-collapse: initial; + table-layout: fixed; +} + +#article-content table tr { + width: 100%; +} + +#article-content table th { + font-weight: 700; /*min-width: 5rem;*/ + padding: .9375em 1.25em; + vertical-align: top; + box-sizing: border-box; +} + +#article-content table tbody tr { + background-color: var(--background); + transition: background-color .125s; +} + +#article-content table tbody tr:hover { + background-color: var(--table-hover-color); +} + +#article-content table td { + border-top: .05rem solid var(--line-color); + padding: .9375em 1.25em; + vertical-align: top; + word-wrap: break-word; + width: auto !important; +} diff --git a/src/templates/oipress/styles/article_list.css b/src/templates/oipress/styles/article_list.css new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/src/templates/oipress/styles/article_list.css @@ -0,0 +1 @@ + diff --git a/src/templates/oipress/styles/github.css b/src/templates/oipress/styles/github.css new file mode 100644 index 0000000..fbe9af2 --- /dev/null +++ b/src/templates/oipress/styles/github.css @@ -0,0 +1,11 @@ +/*! + Theme: GitHub + Description: Light theme as seen on github.com + Author: github.com + Maintainer: @Hirse + Updated: 2021-05-15 + + Outdated base version: https://github.com/primer/github-syntax-light + Current colors taken from GitHub's CSS +*/ +:root[data-theme=light] .hljs{color:#24292e}:root[data-theme=light] .hljs-doctag,:root[data-theme=light] .hljs-keyword,:root[data-theme=light] .hljs-meta:root[data-theme=light] .hljs-keyword,:root[data-theme=light] .hljs-template-tag,:root[data-theme=light] .hljs-template-variable,:root[data-theme=light] .hljs-type,:root[data-theme=light] .hljs-variable.language_{color:#d73a49}:root[data-theme=light] .hljs-title,:root[data-theme=light] .hljs-title.class_,:root[data-theme=light] .hljs-title.class_.inherited__,:root[data-theme=light] .hljs-title.function_{color:#6f42c1}:root[data-theme=light] .hljs-attr,:root[data-theme=light] .hljs-attribute,:root[data-theme=light] .hljs-literal,:root[data-theme=light] .hljs-meta,:root[data-theme=light] .hljs-number,:root[data-theme=light] .hljs-operator,:root[data-theme=light] .hljs-selector-attr,:root[data-theme=light] .hljs-selector-class,:root[data-theme=light] .hljs-selector-id,:root[data-theme=light] .hljs-variable{color:#005cc5}:root[data-theme=light] .hljs-meta:root[data-theme=light] .hljs-string,:root[data-theme=light] .hljs-regexp,:root[data-theme=light] .hljs-string{color:#032f62}:root[data-theme=light] .hljs-built_in,:root[data-theme=light] .hljs-symbol{color:#e36209}:root[data-theme=light] .hljs-code,:root[data-theme=light] .hljs-comment,:root[data-theme=light] .hljs-formula{color:#6a737d}:root[data-theme=light] .hljs-name,:root[data-theme=light] .hljs-quote,:root[data-theme=light] .hljs-selector-pseudo,:root[data-theme=light] .hljs-selector-tag{color:#22863a}:root[data-theme=light] .hljs-subst{color:#24292e}:root[data-theme=light] .hljs-section{color:#005cc5;font-weight:700}:root[data-theme=light] .hljs-bullet{color:#735c0f}:root[data-theme=light] .hljs-emphasis{color:#24292e;font-style:italic}:root[data-theme=light] .hljs-strong{color:#24292e;font-weight:700}:root[data-theme=light] .hljs-addition{color:#22863a;background-color:#f0fff4}:root[data-theme=light] .hljs-deletion{color:#b31d28;background-color:#ffeef0} diff --git a/src/templates/oipress/styles/github_dark.css b/src/templates/oipress/styles/github_dark.css new file mode 100644 index 0000000..7ea5f91 --- /dev/null +++ b/src/templates/oipress/styles/github_dark.css @@ -0,0 +1,11 @@ +/*! + Theme: GitHub Dark + Description: Dark theme as seen on github.com + Author: github.com + Maintainer: @Hirse + Updated: 2021-05-15 + + Outdated base version: https://github.com/primer/github-syntax-dark + Current colors taken from GitHub's CSS +*/ +:root[data-theme=dark] .hljs{color:#c9d1d9}:root[data-theme=dark] .hljs-doctag,:root[data-theme=dark] .hljs-keyword,:root[data-theme=dark] .hljs-meta:root[data-theme=dark] .hljs-keyword,:root[data-theme=dark] .hljs-template-tag,:root[data-theme=dark] .hljs-template-variable,:root[data-theme=dark] .hljs-type,:root[data-theme=dark] .hljs-variable.language_{color:#ff7b72}:root[data-theme=dark] .hljs-title,:root[data-theme=dark] .hljs-title.class_,:root[data-theme=dark] .hljs-title.class_.inherited__,:root[data-theme=dark] .hljs-title.function_{color:#d2a8ff}:root[data-theme=dark] .hljs-attr,:root[data-theme=dark] .hljs-attribute,:root[data-theme=dark] .hljs-literal,:root[data-theme=dark] .hljs-meta,:root[data-theme=dark] .hljs-number,:root[data-theme=dark] .hljs-operator,:root[data-theme=dark] .hljs-selector-attr,:root[data-theme=dark] .hljs-selector-class,:root[data-theme=dark] .hljs-selector-id,:root[data-theme=dark] .hljs-variable{color:#79c0ff}:root[data-theme=dark] .hljs-meta:root[data-theme=dark] .hljs-string,:root[data-theme=dark] .hljs-regexp,:root[data-theme=dark] .hljs-string{color:#a5d6ff}:root[data-theme=dark] .hljs-built_in,:root[data-theme=dark] .hljs-symbol{color:#ffa657}:root[data-theme=dark] .hljs-code,:root[data-theme=dark] .hljs-comment,:root[data-theme=dark] .hljs-formula{color:#8b949e}:root[data-theme=dark] .hljs-name,:root[data-theme=dark] .hljs-quote,:root[data-theme=dark] .hljs-selector-pseudo,:root[data-theme=dark] .hljs-selector-tag{color:#7ee787}:root[data-theme=dark] .hljs-subst{color:#c9d1d9}:root[data-theme=dark] .hljs-section{color:#1f6feb;font-weight:700}:root[data-theme=dark] .hljs-bullet{color:#f2cc60}:root[data-theme=dark] .hljs-emphasis{color:#c9d1d9;font-style:italic}:root[data-theme=dark] .hljs-strong{color:#c9d1d9;font-weight:700}:root[data-theme=dark] .hljs-addition{color:#aff5b4;background-color:#033a16}:root[data-theme=dark] .hljs-deletion{color:#ffdcd7;background-color:#67060c} diff --git a/src/templates/oipress/styles/style.css b/src/templates/oipress/styles/style.css new file mode 100644 index 0000000..6550e66 --- /dev/null +++ b/src/templates/oipress/styles/style.css @@ -0,0 +1,349 @@ +/* Color Scheme */ +:root[data-theme=dark] { + --background: #2e303e; + --color: #F0F0F0; + --color-1:rgb(255 255 255 / 54%); + --color-2:rgb(255 255 255 / 87%); + --block-background: #222222; + --code-splitter: #767676; + --highlighted-line: #473a2f; + --primary-background: #01579b; + --primary-color: #F0F0F0; + --button-color: #ffffff20; + --blurred-color: #9a9a9a; + --upvote-button-color: #e53935; + --upvote-button-hover-color: #d32f2f; + --downvote-button-color: #757575; + --downvote-button-hover-color: #616161; + --link-color: #7388ff; + --link-hover-color: #00bda4; + --line-color: #ffffff3f; + --table-hover-color: rgb(255 255 255 / 4%); + --scrollbar-main: #666; + --scrollbar-hover: #009688; + --footer-background: #16171d; + --footer-hover-color: #ffffff; +} + +:root[data-theme=light] { + --background: #FFFFFF; + --color: #000000; + --color-1:rgba(0, 0, 0, 0.54); + --color-2:rgba(0, 0, 0, 0.87); + --block-background: #f5f5f5; + --code-splitter: #c6c6c6; + --highlighted-line: #ece6e2; + --primary-background: #2196f3; + --primary-color: #FFF; + --button-color: #00000020; + --blurred-color: #999; + --upvote-button-color: #e53935; + --upvote-button-hover-color: #d32f2f; + --downvote-button-color: #757575; + --downvote-button-hover-color: #616161; + --link-color: #4051b5; + --link-hover-color: #ff1947; + --line-color: #0000003f; + --table-hover-color: rgba(0, 0, 0, .035); + --scrollbar-main: #ADADAD; + --scrollbar-hover: #ff1947; + --footer-background: #16171d; + --footer-hover-color: #ffffff; +} + +:root { + --global-font: 'Fira Sans', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; + --code-font: 'Fira Mono', SFMono-Regular, Consolas, Menlo, monospace; + --blue-main: #448aff; + --blue-blur: #448aff1a; + --skyblue-main: #00b0ff; + --skyblue-blur: #00b0ff1a; + --cyan-main: #00b8d4; + --cyan-blur: #00b8d41a; + --teal-main: #00bfa5; + --teal-blur: #00bfa51a; + --green-main: #00c853; + --green-blur: #00c8531a; + --lightgreen-main: #64dd17; + --lightgreen-blur: #64dd171a; + --orange-main: #ff9100; + --orange-blur: #ff91001a; + --deeporange-main: #ff5252; + --deeporange-blur: #ff52521a; + --red-main: #ff1744; + --red-blur: #ff17441a; + --darkred-main: #f50057; + --darkred-blur: #f500571a; + --deeppurple-main: #7c4dff; + --deeppurple-blur: #7c4dff1a; + --grey-main: #9e9e9e; + --grey-blur: #9e9e9e1a; +} + +/* Html & Body */ +html, body { + font-size: 20px; + margin: 0; + background-color: var(--background); + font-family: var(--global-font); + color: var(--color); +} + +body { + overflow-x: hidden; +} + +/* Scrollbar */ +body * { + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-main) #00000000; +} + +body *:hover { + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-hover) #00000000; +} + +body *::-webkit-scrollbar { + height: 4px; + width: 4px; +} + +body *::-webkit-scrollbar-button { + width: 0px; + height: 0px; +} + +body *::-webkit-scrollbar-track, body *::-webkit-scrollbar-corner { + background-color: #00000000; +} + +body *::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-main); +} + +body *::-webkit-scrollbar-thumb:hover { + background-color: var(--scrollbar-hover); +} + +/* Header */ +#header-block { + width: 100%; + background-color: var(--primary-background); + color: var(--primary-color); + padding: 64px 0px 12px 0px; +} + +#header-block-content { + width: calc(100% - 32px); + max-width: 1220px; + margin: 0 auto; +} + +/* Class: Button */ +.active-button { + user-select: none; + margin: 4px; + height: 40px; + cursor: pointer; + transition: 0.25s; + border-radius: 5px; + background-color: #00000000; + line-height: 40px; + font-size: 20px; + display: flex; + flex-direction: row; + box-sizing: border-box; + padding: 0px 8px; + min-width: 40px; + text-align: center; + overflow: hidden; + gap: .3rem; +} + +.active-button.small { + margin: 3px; + height: 30px; + border-radius: 5px; + background-color: #00000000; + line-height: 30px; + font-size: 15px; + padding: 0px 6px; + min-width: 30px; +} + +.active-button > svg { + margin: 8px 0px; + width: 24px; + height: 24px; + fill: currentColor; +} + +.active-button.small > svg { + margin: 6px 0px; + width: 18px; + height: 18px; +} + +.active-button.outlined { + border: .05rem solid var(--line-color); +} + +.active-button.disabled { + cursor: default; + background-color: var(--button-color); +} + +.active-button:hover { + background-color: var(--button-color); +} + +.active-button.upvote { + background-color: var(--upvote-button-color); +} + +.active-button.upvote:hover { + background-color: var(--upvote-button-hover-color); +} + +.active-button.downvote { + background-color: var(--downvote-button-color); +} + +.active-button.downvote:hover { + background-color: var(--downvote-button-hover-color); +} + +.active-button-wrapper { + height: 48px; + opacity: 1; + width: 48px; + transition: 0.25s; + overflow: hidden; +} + +.active-button-wrapper.collapsed { + width: 0px; + opacity: 0; +} + +.active-button > * { + flex-shrink: 0; +} + +/* Link */ +a { + text-decoration: none; + color: var(--link-color); + transition: 0.125s; +} + +a:is(:active, :clicked, :visited) { + outline: 0; + color: var(--link-color); +} + +a:is(:hover) { + outline: 0; + color: var(--link-hover-color); +} + +/* Headers */ +h1 { + font-size: 2em; + font-weight: 300; + letter-spacing: -.01em; + margin: 2.5em 0 1.25em; + color: var(--color-1); +} + +h2 { + font-size: 1.5625em; + font-weight: 300; + letter-spacing: -.01em; + margin: 1.6em 0 .64em; + color: var(--color-2); +} + +h3 { + font-size: 1.25em; + font-weight: 400; + letter-spacing: -.01em; + margin: 1.6em 0 .8em; + color: var(--color-2); +} + +h4 { + font-size: 1em; + font-weight: 700; + margin: 1em 0; +} + +h5 { + font-size: 0.8em; + font-weight: 700; + letter-spacing: -.01em; + text-transform: uppercase; + margin: 1.25em 0; + color: var(--color-2); +} + +h6 { + font-size: 0.8em; + font-weight: 700; + letter-spacing: -.01em; + margin: 1.25em 0; + color: var(--color-1); +} + +#article-content:is(h1, h2, h3, h4, h5, h6) { + font-family: inherit; + line-height: 1.35; +} + +/* Image */ +img { + max-width: 100%; + height: auto; +} + +:root[data-theme=dark] img { + background: white; + filter: brightness(0.9); +} + +/* Splitter */ +.splitter::after { + content: "·"; + margin: 0 .2rem; +} + +/* Footer */ +.footer-wrapper { + width: 100%; + background-color: var(--footer-background); + color: var(--blurred-color); + font-size: .65rem; +} + +.footer { + width: calc(100% - 32px); + max-width: 1220px; + margin: 0 auto; + padding: 1.2rem 0; +} + +.footer-wrapper p { + margin: 0; + line-height: 1.6; +} + +.footer-wrapper a { + color: var(--blurred-color); + text-decoration: underline; + font-weight: bold; +} + +.footer-wrapper a:hover { + color: var(--footer-hover-color); +}