mirror_php/typecho
1
0
Fork 0
mirror of https://github.com/typecho/typecho.git synced 2025-03-19 17:39:42 +01:00
Code Issues Projects Releases Wiki Activity

New theme (#1390)

Browse Source 
* 调整忽略目录

* add theme

* fix theme scss build

Co-authored-by: fen <f3nb0x@gmail.com>
This commit is contained in:
joyqi 2022-04-07 14:20:59 +08:00 committed by GitHub
parent a74206a89e
commit bad3ef651d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 863 additions and 1195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -34,4 +34,4 @@ usr/themes/*
!usr/themes/default
!usr/themes/classic-22
node_modules/
/tools/tmp/
tools/tmp/

212
admin/css/grid.css
View File

File diff suppressed because one or more lines are too long

25
admin/css/install.css
View File

@ -1,24 +1 @@
h1 { text-align: center; }
details summary { cursor: pointer; }
@keyframes fadein { from { opacity: 0; }
to { opacity: 1; } }
.fresh .keep-word { display: none; }
.keep .fresh-word { display: none; }
form > .message { display: none; padding: 20px; border-radius: 5px; }
.message textarea { width: 100%; height: 200px; resize: none; margin: 10px 0; }
.message.fade { display: block; animation: fadein .5s linear; }
.message *:last-child { margin-bottom: 0; }
.message p { margin-top: 10px; }
.message p button { margin-left: 5px; }
.message p button:first-child { margin-left: 0; }
h1{text-align:center}details summary{cursor:pointer}@keyframes fadein{from{opacity:0}to{opacity:1}}.fresh .keep-word{display:none}.keep .fresh-word{display:none}form>.message{display:none;padding:20px;border-radius:5px}.message textarea{width:100%;height:200px;resize:none;margin:10px 0}.message.fade{display:block;animation:fadein .5s linear}.message *:last-child{margin-bottom:0}.message p{margin-top:10px}.message p button{margin-left:5px}.message p button:first-child{margin-left:0}

945
admin/css/style.css
View File

File diff suppressed because one or more lines are too long

37
tools/build.js
View File

@ -5,6 +5,7 @@ const sass = require('node-sass'),
UglifyJS = require("uglify-js"),
srcDir = __dirname + '/../admin/src',
distDir = __dirname + '/../admin',
themeDir = __dirname + '/../usr/themes/classic-22',
action = process.argv.pop();
let spriteImporter = SpriteMagicImporter({
@ -29,16 +30,16 @@ let spriteImporter = SpriteMagicImporter({
}
});
function buildSass(file) {
let outFile = distDir + '/css/' + file.split('.')[0] + '.css',
sassDir = srcDir + '/scss';
function buildSass(file, dist, sassDir)
{
let outFile = dist + '/' + file.split('.')[0] + '.css';
console.log(color.green('processing ' + file));
sass.render({
file: sassDir + '/' + file,
outFile: outFile,
includePaths: [sassDir],
outputStyle: 'compact',
outputStyle: 'compressed',
importer: spriteImporter
}, function (error, result) {
if (error) {
@ -51,17 +52,21 @@ function buildSass(file) {
});
}
function minifyJs(file) {
function minifyJs(file, dist)
{
console.log(color.green('minify ' + file));
let code = {};
code[file] = fs.readFileSync(srcDir + '/js/' + file).toString('utf8');
fs.writeFileSync(distDir + '/js/' + file,
UglifyJS.minify(code).code);
fs.writeFileSync(
dist + '/' + file,
UglifyJS.minify(code).code
);
}
function listFiles(dir, regExp) {
let files = fs.readdirSync(srcDir + dir), result = [];
function listFiles(dir, regExp)
{
let files = fs.readdirSync(dir), result = [];
files.map(function (file) {
if (file.match(regExp)) {
@ -75,14 +80,20 @@ function listFiles(dir, regExp) {
if (action === 'css') {
console.log(color.blue('build css'));
listFiles('/scss', /^[a-z0-9-]+\.scss$/).forEach(function (file) {
buildSass(file);
listFiles(srcDir + '/scss', /^[a-z0-9-]+\.scss$/).forEach(function (file) {
buildSass(file, distDir + '/css', srcDir + '/scss');
});
} else if (action === 'js') {
console.log(color.blue('build js'));
listFiles('/js', /^[-\w]+\.js$/).forEach(function (file) {
minifyJs(file);
listFiles(srcDir + '/js', /^[-\w]+\.js$/).forEach(function (file) {
minifyJs(file, distDir + '/js');
});
} else if (action === 'theme_css') {
console.log(color.blue('build theme css'));
listFiles(themeDir + '/static/scss', /^[a-z0-9-]+\.scss$/).forEach(function (file) {
buildSass(file, themeDir + '/static/css', themeDir + '/static/scss');
});
} else {
console.log(color.red('Please choose correct action.'));

14
tools/package-lock.json generated
View File

@ -9,10 +9,14 @@
"version": "1.0.0",
"license": "GPL-2.0-only",
"dependencies": {
"@picocss/pico": "^1.5.0",
"chalk": "^4.0.0",
"node-sass": "^6.0.1",
"sprite-magic-importer": "^1.6.2",
"uglify-js": "^3.11.6"
},
"engines": {
"node": "16.x"
}
},
"node_modules/@babel/code-frame": {
@ -135,6 +139,11 @@
"node": ">= 8"
}
},
"node_modules/@picocss/pico": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@picocss/pico/-/pico-1.5.0.tgz",
"integrity": "sha512-1sLeGqpIYHf2ZgVEVqpewWFkfYMCMt4eUU8uINRXI21cUKAPv7Jxft+4567SEWLOjzQKH5EhlbkQdC9tGi/c+A=="
},
"node_modules/@sindresorhus/is": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
@ -5109,6 +5118,11 @@
"fastq": "^1.6.0"
}
},
"@picocss/pico": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@picocss/pico/-/pico-1.5.0.tgz",
"integrity": "sha512-1sLeGqpIYHf2ZgVEVqpewWFkfYMCMt4eUU8uINRXI21cUKAPv7Jxft+4567SEWLOjzQKH5EhlbkQdC9tGi/c+A=="
},
"@sindresorhus/is": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",

6
tools/package.json
View File

@ -4,11 +4,12 @@
"description": "Typecho build tools",
"main": "build.js",
"engines": {
"node": "16.x"
"node": "16.x"
},
"scripts": {
"build_js": "node build.js js",
"build_css": "node build.js css"
"build_css": "node build.js css",
"build_css:theme": "node build.js theme_css"
},
"keywords": [
"typecho"
@ -16,6 +17,7 @@
"author": "joyqi",
"license": "GPL-2.0-only",
"dependencies": {
"@picocss/pico": "^1.5.0",
"chalk": "^4.0.0",
"node-sass": "^6.0.1",
"sprite-magic-importer": "^1.6.2",

19
usr/themes/classic-22/404.php Normal file
View File

@ -0,0 +1,19 @@
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('header.php'); ?>
<main class="container">
<div class="container-thin">
<h1 class="text-center" style="font-size: 4rem; margin-bottom: 2rem">404</h1>
<ul style="margin-bottom: 2rem">
<li>当前页面无法访问，可能没权限或已删除。</li>
<li>The current page is not accessible, may not have permission or has been deleted.</li>
<li>La page actuelle n'est pas accessible, elle n'a peut-être pas de droits ou a été supprimée.</li>
<li>No se puede acceder a la página actual, puede que no tenga permiso o que haya sido eliminada.</li>
<li>Доступ к текущей странице невозможен, возможно, у нее нет разрешения или она была удалена.</li>
<li>現在のページにアクセスできない、権限がない、または削除された可能性があります。</li>
</ul>
<p class="text-center"><a href="<?php $this->options->siteUrl(); ?>" role="button" class="secondary"><?php _e('回首页'); ?></a></p>
</div>
</main>
<?php $this->need('footer.php'); ?>

40
usr/themes/classic-22/archive.php Normal file
View File

@ -0,0 +1,40 @@
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('header.php'); ?>
<main class="container">
<div class="container-thin">
<?php if (!($this->is('index')) and !($this->is('post'))): ?>
<h4 class="text-center text-muted">
<?php $this->archiveTitle('', '', ''); ?>
</h4>
<?php endif; ?>
<?php while ($this->next()): ?>
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<header class="entry-header text-center">
<h1 class="entry-title" itemprop="name headline"><a href="<?php $this->permalink() ?>" itemprop="url"><?php $this->title() ?></a></h1>
<ul class="entry-meta list-inline text-muted">
<li><i data-feather="calendar" class="is-sm me-2"></i><time datetime="<?php $this->date('c'); ?>" itemprop="datePublished"><?php $this->date(); ?></time></li>
<li><i data-feather="folder" class="is-sm me-2"></i><?php $this->category(', '); ?></li>
<li><i data-feather="message-circle" class="is-sm me-2"></i><a href="<?php $this->permalink() ?>#comments" itemprop="discussionUrl"><?php $this->commentsNum('暂无评论', '1 条评论', '%d 条评论'); ?></a></li>
</ul>
</header>
<div class="entry-content fmt" itemprop="articleBody">
<?php $this->content('阅读剩余部分'); ?>
</div>
</article>
<hr class="post-separator">
<?php endwhile; ?>
</div>
<!-- <div class="text-center">
<a href="#">&laquo; Older Posts</a>
<span class="mx-2 text-muted">&middot;</span>
<a href="#">Newer Posts &raquo;</a>
</div> -->
<?php $this->pageNav('&laquo; 前一页', '后一页 &raquo;'); ?>
</main>
<?php $this->need('footer.php'); ?>

44
usr/themes/classic-22/comments.php Normal file
View File

@ -0,0 +1,44 @@
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<div id="comments">
<?php $this->comments()->to($comments); ?>
<?php if ($comments->have()): ?>
<h2 class="text-center"><?php $this->commentsNum(_t('暂无评论'), _t('1 条评论'), _t('%d 条评论')); ?></h2>
<?php $comments->listComments(array(
'commentStatus' => _t('你的评论正等待审核'),
'avatarSize' => 120,
'defaultAvatar' => 'monsterid'
)); ?>
<?php $comments->pageNav('&laquo; 前一页', '后一页 &raquo;'); ?>
<?php endif; ?>
<?php if ($this->allow('comment')): ?>
<div id="<?php $this->respondId(); ?>" class="respond">
<div class="cancel-comment-reply">
<?php $comments->cancelReply(); ?>
</div>
<h5 id="response"><?php _e('你的评论'); ?></h5>
<form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">
<textarea placeholder="<?php _e('评论内容...'); ?>" rows="4" cols="50" name="text" id="textarea" required><?php $this->remember('text'); ?></textarea>
<?php if ($this->user->hasLogin()): ?>
<p>
<?php _e('登录身份：'); ?><a href="<?php $this->options->profileUrl(); ?>"><?php $this->user->screenName(); ?></a><span class="mx-2 text-muted">&middot;</span><a href="<?php $this->options->logoutUrl(); ?>"><?php _e('退出'); ?></a>
</p>
<?php else: ?>
<div class="grid">
<input type="text" placeholder="<?php _e('名字'); ?>" name="author" id="author" value="<?php $this->remember('author'); ?>" required/>
<input type="email" placeholder="<?php _e('Email'); ?>" name="mail" id="mail" value="<?php $this->remember('mail'); ?>"<?php if ($this->options->commentsRequireMail): ?> required<?php endif; ?> />
<input type="url" placeholder="<?php _e('网站'); ?><?php if (!($this->options->commentsRequireURL)): ?><?php _e('（选填）'); ?><?php endif; ?>" name="url" id="url" placeholder="<?php _e('https://'); ?>" value="<?php $this->remember('url'); ?>"<?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?> />
</div>
<?php endif; ?>
<button type="submit"><?php _e('提交评论'); ?></button>
</form>
</div>
<?php else: ?>
<div class="text-center text-muted"><?php _e('评论已关闭'); ?></div>
<?php endif; ?>
</div>

20
usr/themes/classic-22/footer.php Normal file
View File

@ -0,0 +1,20 @@
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<footer class="site-footer container-fluid">
<div class="d-flex justify-content-between container-inner">
<ul class="list-inline text-muted">
<li>&copy; <?php echo date('Y'); ?> <a href="<?php $this->options->siteUrl(); ?>"><?php $this->options->title(); ?></a></li>
<li><a href="<?php $this->options->feedUrl(); ?>" aria-label="<?php _e('Feed'); ?>"><i data-feather="rss" class="is-sm"></i></a></li>
</ul>
<ul class="list-inline text-muted">
<li><?php _e('由 <a href="http://www.typecho.org">Typecho</a> 强力驱动'); ?></li>
</ul>
</div>
</footer>
<?php $this->footer(); ?>
<script>
feather.replace();
</script>
</body>
</html>

18
usr/themes/classic-22/functions.php Normal file
View File

@ -0,0 +1,18 @@
<?php
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
function themeConfig($form)
{
$themeStyle = new \Typecho\Widget\Helper\Form\Element\Radio(
'themeStyle',
array(
'auto' => _t('自动'),
'light' => _t('浅色'),
'dark' => _t('深色')
),
'auto',
_t('外观风格')
);
$form->addInput($themeStyle);
}

60
usr/themes/classic-22/header.php Normal file
View File

@ -0,0 +1,60 @@
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<!DOCTYPE html>
<!-- <html lang="zh-CN"> -->
<html lang="zh-CN" data-theme="<?php $this->options->themeStyle(); ?>">
<head>
<meta charset="<?php $this->options->charset(); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php $this->archiveTitle('', '', ' - '); ?><?php $this->options->title(); ?></title>
<link rel="stylesheet" href="<?php $this->options->themeUrl('static/css/style.css'); ?>">
<link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">
<script src="//unpkg.com/feather-icons"></script>
<?php $this->header(); ?>
</head>
<body>
<header class="site-navbar container-fluid">
<div class="container-inner">
<nav>
<ul class="site-name">
<?php if ($this->options->logoUrl): ?>
<li><a href="<?php $this->options->siteUrl(); ?>" class="brand"><img src="<?php $this->options->logoUrl() ?>" alt="<?php $this->options->title() ?>"></a></li>
<?php else: ?>
<li><a href="<?php $this->options->siteUrl(); ?>" class="brand"><?php $this->options->title() ?></a></li>
<li class="desc"><?php $this->options->description() ?></li>
<?php endif; ?>
</ul>
<ul>
<li>
<label for="nav-toggler" class="nav-toggler-btn"><i data-feather="menu" class="is-sm"></i></label>
</li>
</ul>
</nav>
<nav class="site-nav">
<input type="checkbox" id="nav-toggler">
<ul class="nav-menu">
<li>
<a href="<?php $this->options->siteUrl(); ?>"<?php if ($this->is('index')): ?> class="active"<?php endif; ?>><?php _e('首页'); ?></a>
</li>
<?php \Widget\Contents\Page\Rows::alloc()->to($pages); ?>
<?php while ($pages->next()): ?>
<li>
<a href="<?php $pages->permalink(); ?>"<?php if ($this->is('page', $pages->slug)): ?> class="active"<?php endif; ?>><?php $pages->title(); ?></a>
</li>
<?php endwhile; ?>
<li>
<a href="<?php $this->options->index('search/keywords'); ?>" aria-label="<?php _e('搜索'); ?>"><i data-feather="search" class="is-sm"></i></a>
</li>
</ul>
</nav>
</div>
</header>

44
usr/themes/classic-22/index.php Normal file
View File

@ -0,0 +1,44 @@
<?php
/**
* Just another official theme
*
* @package Classic 22
* @author Typecho Team
* @version 1.0
* @link http://typecho.org
*/
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this->need('header.php');
?>
<main class="container">
<div class="container-thin">
<?php while ($this->next()): ?>
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<header class="entry-header text-center">
<h1 class="entry-title" itemprop="name headline"><a href="<?php $this->permalink() ?>" itemprop="url"><?php $this->title() ?></a></h1>
<ul class="entry-meta list-inline text-muted">
<li><i data-feather="calendar" class="is-sm me-2"></i><time datetime="<?php $this->date('c'); ?>" itemprop="datePublished"><?php $this->date(); ?></time></li>
<li><i data-feather="folder" class="is-sm me-2"></i><?php $this->category(', '); ?></li>
<li><i data-feather="message-circle" class="is-sm me-2"></i><a href="<?php $this->permalink() ?>#comments" itemprop="discussionUrl"><?php $this->commentsNum('暂无评论', '1 条评论', '%d 条评论'); ?></a></li>
</ul>
</header>
<div class="entry-content fmt" itemprop="articleBody">
<?php $this->content('阅读剩余部分'); ?>
</div>
</article>
<hr class="post-separator">
<?php endwhile; ?>
</div>
<!-- <div class="text-center">
<a href="#">&laquo; Older Posts</a>
<span class="mx-2 text-muted">&middot;</span>
<a href="#">Newer Posts &raquo;</a>
</div> -->
<?php $this->pageNav('&laquo; 前一页', '后一页 &raquo;'); ?>
</main>
<?php $this->need('footer.php'); ?>

25
usr/themes/classic-22/page.php Normal file
View File

@ -0,0 +1,25 @@
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('header.php'); ?>
<main class="container">
<div class="container-thin">
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<header class="entry-header text-center">
<h1 class="entry-title" itemprop="name headline"><a itemprop="url"
href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h1>
</header>
<div class="entry-content fmt" itemprop="articleBody">
<?php $this->content(); ?>
</div>
</article>
</div>
<hr class="post-separator">
<div class="container-thin">
<?php $this->need('comments.php'); ?>
</div>
</main>
<?php $this->need('footer.php'); ?>

40
usr/themes/classic-22/post.php Normal file
View File

@ -0,0 +1,40 @@
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('header.php'); ?>
<main class="container">
<div class="container-thin">
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<header class="entry-header text-center">
<h1 class="entry-title" itemprop="name headline"><a itemprop="url"
href="<?php $this->permalink() ?>"><?php $this->title() ?></a></h1>
<ul class="entry-meta list-inline text-muted">
<li><i data-feather="calendar" class="is-sm me-2"></i><time datetime="<?php $this->date('c'); ?>" itemprop="datePublished"><?php $this->date(); ?></time></li>
<li><i data-feather="folder" class="is-sm me-2"></i><?php $this->category(', '); ?></li>
<li><i data-feather="message-circle" class="is-sm me-2"></i><a href="#comments" itemprop="discussionUrl"><?php $this->commentsNum('暂无评论', '1 条评论', '%d 条评论'); ?></a></li>
</ul>
</header>
<div class="entry-content fmt" itemprop="articleBody">
<?php $this->content(); ?>
<p itemprop="keywords"><?php _e('标签：'); ?><?php $this->tags(', ', true, '无'); ?></p>
</div>
</article>
</div>
<div class="grid post-next">
<div>
<div class="text-muted">&laquo; 上一篇</div>
<?php $this->thePrev('%s', '已经是最后一篇了'); ?>
</div>
<div class="text-end">
<div class="text-muted">下一篇 &raquo;</div>
<?php $this->theNext('%s', '已经是最后一篇了'); ?>
</div>
</div>
<div class="container-thin">
<?php $this->need('comments.php'); ?>
</div>
</main>
<?php $this->need('footer.php'); ?>

BIN
usr/themes/classic-22/screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

45
usr/themes/classic-22/search.php Normal file
View File

@ -0,0 +1,45 @@
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('header.php'); ?>
<main class="container">
<div class="container-thin">
<h1 class="text-center"><?php _e('搜索关键词'); ?></h1>
<form method="post" action="<?php $this->options->siteUrl(); ?>">
<input type="search" id="s" name="s" placeholder="<?php _e('搜索关键字'); ?>" value="<?php $this->archiveTitle('','',''); ?>">
</form>
<div class="text-center">
<?php \Widget\Metas\Category\Rows::alloc()->listCategories('wrapClass=list-inline'); ?>
</div>
<?php while ($this->next()): ?>
<hr class="post-separator">
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<header class="entry-header text-center">
<h1 class="entry-title" itemprop="name headline"><a href="<?php $this->permalink() ?>" itemprop="url"><?php $this->title() ?></a></h1>
<ul class="entry-meta list-inline text-muted">
<li><i data-feather="calendar" class="is-sm me-2"></i><time datetime="<?php $this->date('c'); ?>" itemprop="datePublished"><?php $this->date(); ?></time></li>
<li><i data-feather="folder" class="is-sm me-2"></i><?php $this->category(', '); ?></li>
<li><i data-feather="message-circle" class="is-sm me-2"></i><a href="<?php $this->permalink() ?>#comments" itemprop="discussionUrl"><?php $this->commentsNum('暂无评论', '1 条评论', '%d 条评论'); ?></a></li>
</ul>
</header>
<div class="entry-content fmt" itemprop="articleBody">
<?php $this->content('阅读剩余部分'); ?>
</div>
</article>
<hr class="post-separator">
<?php endwhile; ?>
</div>
<!-- <div class="text-center">
<a href="#">&laquo; Older Posts</a>
<span class="mx-2 text-muted">&middot;</span>
<a href="#">Newer Posts &raquo;</a>
</div> -->
<?php $this->pageNav('&laquo; 前一页', '后一页 &raquo;'); ?>
</main>
<?php $this->need('footer.php'); ?>

17
usr/themes/classic-22/static/css/style.css Normal file
View File

File diff suppressed because one or more lines are too long

105
usr/themes/classic-22/static/scss/_pico.scss Normal file
View File

@ -0,0 +1,105 @@
/*!
* Pico.css (https://picocss.com)
* Licensed under MIT
*/
// Config
$enable-responsive-typography: false;
// Grey
$grey-50: #f8fafc;
$grey-100: #f1f5f9;
$grey-200: #e2e8f0;
$grey-300: #cbd5e1;
$grey-400: #94a3b8;
$grey-500: #64748b;
$grey-600: #475569;
$grey-700: #334155;
$grey-800: #1e293b;
$grey-900: #0f172a;
// Blue
$primary-50: #BBC8FF;
$primary-100: #A6B8FF;
$primary-200: #7D98FF;
$primary-300: #5577FF;
$primary-400: #2C57FF;
$primary-500: #0336FF;
$primary-600: #0029CA;
$primary-700: #001E92;
$primary-800: #00125A;
$primary-900: #000722;
// Amber
$amber-50: #fffbeb;
$amber-100: #fef3c7;
$amber-200: #fde68a;
$amber-300: #fcd34d;
$amber-400: #fbbf24;
$amber-500: #f59e0b;
$amber-600: #d97706;
$amber-700: #b45309;
$amber-800: #92400e;
$amber-900: #78350f;
// Green
$green-50: #f0fdf4;
$green-100: #dcfce7;
$green-200: #bbf7d0;
$green-300: #86efac;
$green-400: #4ade80;
$green-500: #22c55e;
$green-600: #16a34a;
$green-700: #15803d;
$green-800: #166534;
$green-900: #14532d;
// Red
$red-50: #fef2f2;
$red-100: #fee2e2;
$red-200: #fecaca;
$red-300: #fca5a5;
$red-400: #f87171;
$red-500: #ef4444;
$red-600: #dc2626;
$red-700: #b91c1c;
$red-800: #991b1b;
$red-900: #7f1d1d;
@import "../../../../../tools/node_modules/@picocss/pico/scss/variables";
// Theming
@import "../../../../../tools/node_modules/@picocss/pico/scss/themes/default";
// Layout
@import "../../../../../tools/node_modules/@picocss/pico/scss/layout/document"; // html
@import "../../../../../tools/node_modules/@picocss/pico/scss/layout/sectioning"; // body, header, main, footer
@import "../../../../../tools/node_modules/@picocss/pico/scss/layout/container"; // .container, .container-fluid
@import "../../../../../tools/node_modules/@picocss/pico/scss/layout/section"; // section
@import "../../../../../tools/node_modules/@picocss/pico/scss/layout/grid"; // .grid
// @import "../../../../../tools/node_modules/@picocss/pico/scss/layout/scroller"; // figure
// Content
@import "../../../../../tools/node_modules/@picocss/pico/scss/content/typography"; // a, headings, p, ul, blockquote, ...
@import "../../../../../tools/node_modules/@picocss/pico/scss/content/embedded"; // audio, canvas, iframe, img, svg, video
@import "../../../../../tools/node_modules/@picocss/pico/scss/content/button"; // button, a[role=button], type=button, type=submit ...
@import "../../../../../tools/node_modules/@picocss/pico/scss/content/form"; // input, select, textarea, label, fieldset, legend
// @import "../../../../../tools/node_modules/@picocss/pico/scss/content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch
@import "../../../../../tools/node_modules/@picocss/pico/scss/content/form-alt-input-types"; // type=color, type=date, type=file, type=search, ...
@import "../../../../../tools/node_modules/@picocss/pico/scss/content/table"; // table, tr, td, ...
@import "../../../../../tools/node_modules/@picocss/pico/scss/content/code"; // pre, code, ...
@import "../../../../../tools/node_modules/@picocss/pico/scss/content/miscs"; // hr, template, [hidden], dialog, canvas
// Components
// @import "../../../../../tools/node_modules/@picocss/pico/scss/components/accordion"; // details, summary
// @import "../../../../../tools/node_modules/@picocss/pico/scss/components/card"; // article
// @import "../../../../../tools/node_modules/@picocss/pico/scss/components/modal"; // dialog
@import "../../../../../tools/node_modules/@picocss/pico/scss/components/nav"; // nav
// @import "../../../../../tools/node_modules/@picocss/pico/scss/components/progress"; // progress
// @import "../../../../../tools/node_modules/@picocss/pico/scss/components/dropdown"; // dropdown
// Utilities
// @import "../../../../../tools/node_modules/@picocss/pico/scss/utilities/loading"; // aria-busy=true
// @import "../../../../../tools/node_modules/@picocss/pico/scss/utilities/tooltip"; // data-tooltip
@import "../../../../../tools/node_modules/@picocss/pico/scss/utilities/accessibility"; // -ms-touch-action, aria-*
@import "../../../../../tools/node_modules/@picocss/pico/scss/utilities/reduce-motion"; // prefers-reduced-motion

340
usr/themes/classic-22/static/scss/style.scss Normal file
View File

@ -0,0 +1,340 @@
@import "pico";
// Global Set
body {
cursor: auto;
}
// Theme
[data-theme="light"],
:root:not([data-theme="dark"]) {
--primary: #{$primary-500};
--primary-hover: #{$primary-600};
--muted-border-color: #{$grey-200};
}
[data-theme="dark"] {
--primary: #{$primary-500};
--primary-hover: #{$primary-400};
--muted-border-color: #{$grey-800};
}
// Content
h1, h2, h3, h4, h5 { line-height: 1.25; }
h1 { --font-size: 2.5rem; }
h2 { --font-size: 2rem; }
h3 { --font-size: 1.75rem; }
h4 { --font-size: 1.5rem; }
h5 { --font-size: 1.25rem; }
// Icon Size
.is-sm {
width: 1.25em;
height: 1.25em;
}
// Utilities
.text-muted,
.text-muted a {
color: var(--muted-color);
}
.text-muted a:hover {
color: var(--secondary-hover);
}
.text-center {
text-align: center;
}
.text-end {
text-align: right;
}
.ms-2 {
margin-left: calc(var(--spacing) / 2);
}
.me-2 {
margin-right: calc(var(--spacing) / 2);
}
.mx-2 {
margin-left: calc(var(--spacing) / 2);
margin-right: calc(var(--spacing) / 2);
}
.list-inline {
padding-left: 0;
list-style: none;
margin-bottom: 0;
li {
display: inline-block;
margin-bottom: 0;
&:not(:last-child) { margin-right: var(--spacing); }
}
svg { vertical-align: text-bottom; }
}
// Layout
.container-inner {
margin-left: auto;
margin-right: auto;
max-width: 84rem;
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
padding-left: calc(var(--spacing) * 1.5);
padding-right: calc(var(--spacing) * 1.5);
}
}
}
.container-thin {
margin: 0 auto;
max-width: 736px;
}
.d-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
.justify-content-between {
justify-content: space-between;
}
.justify-content-end {
justify-content: end;
}
.align-self-center {
align-self: center;
}
// Header & Navbar
.site-navbar {
padding-top: calc(var(--spacing) / 2);
padding-bottom: calc(var(--spacing) / 2);
background-color: var(--primary);
a {
color: rgba(255, 255, 255, 1.0);
&:hover { text-decoration: underline; }
}
.site-name {
flex-grow: 1;
}
.brand {
font-size: 1.25rem;
font-weight: 700;
}
.desc {
color: rgba(255, 255, 255, .75);
display: none;
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
display: inline-block;
}
}
}
}
.site-nav {
display: block;
.active { font-weight: 700; }
}
#nav-toggler {
display: none;
&:checked ~ .nav-menu {
display: block;
}
}
// Dropdown Menu
.nav-menu {
display: none;
li {
display: block;
padding: calc(var(--spacing) * .5);
}
a {
margin: calc(var(--spacing) * -.5);
padding: calc(var(--spacing) * .5);
}
}
.nav-toggler-btn {
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
padding: var(--spacing) calc(var(--spacing) * 0.5);
color: rgba(255, 255, 255, 1.0);
cursor: pointer;
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
.site-navbar .container-inner,
.site-nav { display: flex; }
.site-navbar .container-inner nav:first-child { flex-grow: 1; }
.nav-toggler-btn { display: none; }
.nav-menu {
display: flex !important;
li:not(:last-child) { margin-right: calc(var(--spacing) / 2); }
}
}
}
// Posts
.post-separator {
margin: var(--block-spacing-vertical) 0;
}
.entry-header {
margin-bottom: calc(var(--spacing) * 2);
}
.entry-title {
margin-bottom: var(--spacing);
a { color: var(--h1-color); }
}
.more {
text-align: center;
}
.post-next {
border-top: 1px solid var(--muted-border-color);
border-bottom: 1px solid var(--muted-border-color);
padding: calc(var(--spacing) * 1.5) 0;
margin: var(--block-spacing-vertical) 0;
a {
color: var(--h5-color);
font-weight: 700;
}
}
// Format
.fmt {
line-height: 1.6;
pre, hr {
margin-bottom: var(--typography-spacing-vertical);
}
}
// Footer
.site-footer {
padding-bottom: calc(var(--block-spacing-vertical) / 2);
}
// Comments
.comment-list {
list-style: none;
padding-left: calc(var(--spacing) * 4);
}
.comment-body {
margin: calc(var(--spacing) * 1.5) 0;
}
.comment-by-author > .comment-author::after {
content: "AU";
margin-left: .25rem;
color: var(--muted-color);
padding: 0 var(--border-radius);
border: 1px solid var(--muted-color);
font-size: .75rem;
border-radius: var(--border-radius);
}
.comment-author {
position: relative;
.avatar {
position: absolute;
width: calc(var(--spacing) * 3);
left: calc(var(--spacing) * -4);
border-radius: var(--border-radius);
}
cite {
font-style: normal;
font-weight: 700;
}
a {
color: var(--h5-color);
}
}
.comment-meta a,
.comment-reply a {
font-size: .875em;
color: var(--muted-color);
&:hover { color: var(--secondary-hover); }
}
.comment-meta {
margin-bottom: calc(var(--spacing) / 2);
}
.comment-reply:blank {
margin-top: 0;
}
.comment-awaiting-moderation {
margin-left: calc(var(--spacing) / 2);
font-size: .875em;
color: var(--del-color);
}
.comment-children {
margin: calc(var(--spacing) * 1.5) 0;
}
#response {
margin: 0 0 calc(var(--spacing) / 2);
}
#cancel-comment-reply-link {
font-size: .875em;
color: var(--del-color);
}
.comment-body .respond {
margin-top: var(--spacing);
}
// page nav
.page-navigator {
list-style: none;
padding: 0;
text-align: center;
li {
display: inline;
margin-left: calc(var(--spacing) / 2);
margin-right: calc(var(--spacing) / 2);
&.current a {
font-weight: 700;
color: var(--h5-color);
}
}
}