Custom help theme

jh-changes
Shin'ya UEOKA 5 years ago
parent 9db4794a88
commit 9a7e261f60
  1. 1
      docs/_config.yml
  2. 46
      docs/_layouts/default.html
  3. 167
      docs/assets/css/style.scss

@ -1 +0,0 @@
theme: jekyll-theme-slate

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,maximum-scale=2">
<link rel="stylesheet" type="text/css" media="screen" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Zilla+Slab:700&display=swap" rel="stylesheet">
{%- if page.title -%}
<title>{{ page.title }} - Vim Vixen</title>
{%- else -%}
<title>Vim Vixen</title>
{%- endif -%}
{% seo title=false%}
</head>
<body>
<header>
<h1><a href='index.html'>Vim Vixen</a></h1>
<ul>
<li><a target="_blank" rel="noopener" href='https://github.com/ueokande/vim-vixen'>GtiHub</a></li>
<li><a target="_blank" rel="noopener" href='https://addons.mozilla.org/firefox/addon/vim-vixen/'>Firefox Add-ons</a></li>
</ul>
</header>
<aside>
<h1>Guide</h1>
<ul>
<li><a href='./keymaps.html'>Keymaps</a></li>
<li><a href='./console_commands.html'>Console commands</a></li>
<li><a href='./blacklist.html'>Blacklist</a></li>
<li><a href='./search_engines.html'>Search engines</a></li>
<li><a href='./properties.html'>Properties</a></li>
</ul>
</aside>
<main>
<article>
{{ content }}
</article>
</main>
</body>
</html>

@ -0,0 +1,167 @@
---
---
$link-color: #0099ff;
$border-color: #dedede;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #222;
font-family: 'Open Sans',Arial,Helvetica,sans-serif;
line-height: 2;
}
a {
&:link, &:active {
color: $link-color;
text-decoration: none;
}
&:hover, &:visited {
color: $link-color;
text-decoration: underline;
}
}
h1, h2, h3, h4, h5 {
font-family: 'Zilla Slab','Open Sans',X-LocaleSpecific,sans-serif;
font-weight: bold;
color: #222;
a:link, a:visited, a:hover, a:active {
color: #222;
}
}
header {
border-bottom: 1px solid $border-color;
position: fixed;
width: 100%;
background-color: white;
h1 {
padding: 0 1.5rem;
float: left;
line-height: 4rem;
}
ul {
display: inline-block;
float: right;
padding: 0 1rem;
li {
display: inline-block;
padding: 0 1rem;
a {
line-height: 4rem;
}
}
}
}
aside {
width: 15rem;
position: fixed;
top: 4rem;
left: 0;
bottom: 0;
border-right: 1px solid $border-color;
padding: 1rem 0;
h1 {
font-size: 1.2rem;
line-height: 2.5;
padding: 0 1.5rem;
}
ul {
li {
a {
padding: .35rem 1.5rem .35rem 1.5rem;
line-height: 2.5;
}
}
}
}
main {
padding: 4rem 4rem 4rem 20rem;
margin: 0 auto;
article {
h1, h2, h3, h4, h5 {
font-family: 'Zilla Slab','Open Sans',X-LocaleSpecific,sans-serif;
font-weight: bold;
}
h1 {
font-size: 3rem;
line-height: 2;
}
h2 {
border-top: 1px dotted #c1c5c8;
font-size: 1.8;
margin-top: 36px;
padding-top: 36px;
font-family: 'Zilla Slab','Open Sans',X-LocaleSpecific,sans-serif;
}
kbd {
display: inline-block;
padding: 3px 5px;
line-height: 10px;
color: #444d56;
vertical-align: middle;
background-color: #fafbfc;
border: 1px solid #c6cbd1;
border-bottom-color: rgb(198, 203, 209);
border-bottom-color: #959da5;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #959da5;
}
pre {
padding: 16px;
overflow: auto;
line-height: 1.45;
background-color: #f6f8fa;
border-radius: 3px;
}
pre > code {
background: none;
}
code {
padding: .2em .4em;
margin: 0;
background-color: rgba(27,31,35,.05);
border-radius: 3px;
}
ul {
li {
padding: .25rem 0;
margin-left: 1rem;
}
}
p {
margin-bottom: 1rem;
}
}
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: lightgreen;
}