kienan
/
hugo-theme-zzo
mirror of https://github.com/zzossig/hugo-theme-zzo.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

prism theme setting support, clipboard added to code block,

This commit is contained in:
zzossig 2019-11-27 01:06:24 +09:00
parent e5f6738ff6
commit 2c23acd01e
29 changed files with 975 additions and 603 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
README.md
View File

@ -545,38 +545,6 @@ themeOptions = ["custom", "dark", ...]
5. Once you change the skin.toml file, restart hugo. 5. Once you change the skin.toml file, restart hugo.
### custom font
1. Make a font.toml file in data folder. (data/font.toml)
2. Copy the contents of themes/zzo/data/font.toml file and paste it into the font.toml file you created above.
3. Change the font you want. Make sure that you have imported that font.
4. Once you change the font.toml file, restart hugo.
```toml
data/font.toml example
search_placeholder = "'Montserrat', sans-serif"
summary_title = "'Montserrat', sans-serif"
summary_subtitle = "'Merriweather', serif"
summary_text = "'Merriweather', serif"
taxo_titie = "'Montserrat', sans-serif"
footer_content = "'Montserrat', sans-serif"
header_title = "'Montserrat', sans-serif"
navbar_item = "'Montserrat', sans-serif"
sidebar_title = "'Montserrat', sans-serif"
sidebar_list = "inherit"
page_not_found = "'Montserrat', sans-serif"
gallery_contents = "'Merriweather', serif"
list_title = "'Montserrat', sans-serif"
list_desc = "'Merriweather', serif"
single_title = "'Montserrat', sans-serif"
single_contents = "'Merriweather', serif"
```
### custom header ### custom header
You may want to change home page header. There are 4 options which is slider, image, text, empty. You may want to change home page header. There are 4 options which is slider, image, text, empty.

11
assets/sass/abstracts/_variables.scss
View File

@ -1,10 +1,9 @@
@import "../themes/theme"; @import "../themes/theme";
$text-font-stack: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", $text-font-stack: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
"Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default; $code-font-stack: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace !default;
$code-font-stack: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", $title-font: 'Montserrat', sans-serif;
"DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, $content-font: 'Merriweather', serif;
monospace !default;
$z-indexes: ("modal", "navbar", "dropdown", "header", "grid", "search-btn", "search", "content", "footer", "taxo", "toc", "gallery-mask"); $z-indexes: ("modal", "navbar", "dropdown", "header", "grid", "search-btn", "search", "content", "footer", "taxo", "toc", "gallery-mask");
$ls: ( $ls: (
@ -22,4 +21,4 @@ $breakpoints: (
); );
$search-height: 35px !default; $search-height: 35px !default;
$code-font-size: 0.9em !default; $code-font-size: .95em !default;

2
assets/sass/components/_bio.scss
View File

@ -6,7 +6,7 @@
@include animation('slide-in-down-2 .5s .2s 1 ease both'); @include animation('slide-in-down-2 .5s .2s 1 ease both');
width: 100%; width: 100%;
font-family: 'Montserrat', sans-serif; font-family: $title-font;
&__photo { &__photo {
border-radius: 0.25rem; border-radius: 0.25rem;

4
assets/sass/components/_search.scss
View File

@ -33,7 +33,7 @@
color: themed("search-color"); color: themed("search-color");
background-color: inherit; background-color: inherit;
@include input-placeholder { @include input-placeholder {
font-family: $search_placeholder_font; font-family: $title-font;
color: themed("search-placeholder-color"); color: themed("search-placeholder-color");
} }
} }
@ -164,7 +164,7 @@
background-color: themed('navbar-background-color'); background-color: themed('navbar-background-color');
@include input-placeholder { @include input-placeholder {
font-family: $search_placeholder_font; font-family: $title-font;
color: themed("search-placeholder-color"); color: themed("search-placeholder-color");
} }
} }

10
assets/sass/components/_summary.scss
View File

@ -10,7 +10,7 @@
.title { .title {
a { a {
font-family: $summary_title_font; font-family: $title-font;
font-weight: 700; font-weight: 700;
@include themify($themes) { @include themify($themes) {
color: themed('title-color'); color: themed('title-color');
@ -22,7 +22,6 @@
} }
.subtitle { .subtitle {
font-family: $summary_subtitle_font;
@include themify($themes) { @include themify($themes) {
color: themed('meta-color'); color: themed('meta-color');
} }
@ -37,7 +36,7 @@
&__text { &__text {
margin-top: 1rem; margin-top: 1rem;
line-height: 1.7rem; line-height: 1.7rem;
font-family: $summary_text_font; font-family: $content-font;
} }
&__image { &__image {
@ -93,7 +92,7 @@
.title { .title {
font-size: 24px; font-size: 24px;
a { a {
font-family: $summary_title_font; font-family: $title-font;
font-weight: 700; font-weight: 700;
@include themify($themes) { @include themify($themes) {
color: themed('title-color'); color: themed('title-color');
@ -105,7 +104,6 @@
} }
.subtitle { .subtitle {
font-family: $summary_subtitle_font;
@include themify($themes) { @include themify($themes) {
color: themed('meta-color'); color: themed('meta-color');
} }
@ -127,7 +125,7 @@
&__text { &__text {
margin-top: 1rem; margin-top: 1rem;
line-height: 1.7rem; line-height: 1.7rem;
font-family: $summary_text_font; font-family: $content_font;
} }
&__image { &__image {

2
assets/sass/components/_taxo.scss
View File

@ -13,7 +13,7 @@
&__title { &__title {
font-weight: 700; font-weight: 700;
font-family: $taxo_titie_font; font-family: $title-font;
@include themify($themes) { @include themify($themes) {
color: themed('taxo-title-color'); color: themed('taxo-title-color');
&:hover { &:hover {

6
assets/sass/layout/_header.scss
View File

@ -5,7 +5,7 @@
@include flex-direction(column); @include flex-direction(column);
.title { .title {
font-family: $header_title_font; font-family: $title-font;
font-weight: 900; font-weight: 900;
} }
@ -29,12 +29,12 @@
&__title { &__title {
line-height: 1.1; line-height: 1.1;
font-weight: 700; font-weight: 700;
font-family: $header_title_font; font-family: $title-font;
} }
&__subtitle { &__subtitle {
line-height: 1.2; line-height: 1.2;
font-family: $header_title_font; font-family: $title-font;
} }
&__align-left { &__align-left {

2
assets/sass/layout/_navigation.scss
View File

@ -155,7 +155,7 @@
height: $grid_navbar_height; height: $grid_navbar_height;
padding: 0.5rem; padding: 0.5rem;
font-size: 1rem; font-size: 1rem;
font-family: $navbar_item_font; font-family: $title-font;
font-weight: 400; font-weight: 400;
@include flexbox(); @include flexbox();

3
assets/sass/layout/_sidebar.scss
View File

@ -6,7 +6,7 @@
padding: 0.5rem; padding: 0.5rem;
&__title { &__title {
font-family: $sidebar_title_font; font-family: $title-font;
font-weight: 700; font-weight: 700;
@include themify($themes) { @include themify($themes) {
color: themed('sidebar-title-color'); color: themed('sidebar-title-color');
@ -31,7 +31,6 @@
} }
&__a { &__a {
font-family: $sidebar_list_font;
@include themify($themes) { @include themify($themes) {
color: themed('sidebar-li-color'); color: themed('sidebar-li-color');
} }

20
assets/sass/main.scss
View File

@ -1,5 +1,4 @@
{{- partial "functions/parse_theme" . -}} {{- partial "functions/parse_theme" . -}}
{{- partial "functions/parse_fonts" . -}}
{{- partial "functions/parse_grid" . -}} {{- partial "functions/parse_grid" . -}}
{{- $scr := .Scratch -}} {{- $scr := .Scratch -}}
@ -14,23 +13,8 @@ $grid_column_gap_unit: {{ $scr.Get "grid_column_gap_unit" }};
$grid_navbar_height: {{ $scr.Get "grid_navbar_height" }}; $grid_navbar_height: {{ $scr.Get "grid_navbar_height" }};
$grid_row_gap: {{ $scr.Get "grid_row_gap" }}; $grid_row_gap: {{ $scr.Get "grid_row_gap" }};
$search_placeholder_font: {{ $scr.Get "search_placeholder" }}; $custom_theme_primary_color: {{ $scr.Get "custom_theme_primary_color" }};
$summary_title_font: {{ $scr.Get "summary_title" }}; $prism_theme: {{ $scr.Get "prism_theme" }};
$summary_subtitle_font: {{ $scr.Get "summary_subtitle" }};
$summary_text_font: {{ $scr.Get "summary_text" }};
$taxo_titie_font: {{ $scr.Get "taxo_titie" }};
$header_title_font: {{ $scr.Get "header_title" }};
$navbar_item_font: {{ $scr.Get "navbar_item" }};
$sidebar_title_font: {{ $scr.Get "sidebar_title" }};
$sidebar_list_font: {{ $scr.Get "sidebar_list" }};
$page_not_found_font: {{ $scr.Get "page_not_found" }};
$gallery_contents_font: {{ $scr.Get "gallery_contents" }};
$list_title_font: {{ $scr.Get "list_title" }};
$list_desc_font: {{ $scr.Get "list_desc" }};
$single_title_font: {{ $scr.Get "single_title" }};
$single_contents_font: {{ $scr.Get "single_contents" }};
$primary_color: {{ $scr.Get "primary_color" }};
@import 'abstracts/variables'; @import 'abstracts/variables';
@import 'abstracts/mixins'; @import 'abstracts/mixins';

2
assets/sass/pages/_404.scss
View File

@ -1,6 +1,6 @@
.not-found { .not-found {
height: 100%; height: 100%;
font-family: $page_not_found_font; font-family: $title-font;
@include flexbox(); @include flexbox();
@include align-items(center); @include align-items(center);

4
assets/sass/pages/_gallery.scss
View File

@ -60,7 +60,7 @@
&__contents { &__contents {
padding: 1rem; padding: 1rem;
width: 65%; width: 65%;
font-family: $gallery_contents_font; font-family: $content-font;
font-size: 1rem; font-size: 1rem;
text-align: center; text-align: center;
} }
@ -84,7 +84,7 @@
height: calc(100% - 1rem); height: calc(100% - 1rem);
border-radius: 0.25rem; border-radius: 0.25rem;
z-index: z('gallery-mask'); z-index: z('gallery-mask');
font-family: $single_title_font; font-family: $title-font;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;

4
assets/sass/pages/_list.scss
View File

@ -4,7 +4,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0.5rem; margin: 0.5rem;
font-family: $list_title_font; font-family: $title-font;
&--title { &--title {
@include themify($themes) { @include themify($themes) {
@ -13,7 +13,7 @@
} }
&--desc { &--desc {
font-family: $list_desc_font; font-family: $content-font;
font-weight: italic; font-weight: italic;
padding: 1rem; padding: 1rem;
line-height: 1.7rem; line-height: 1.7rem;

6
assets/sass/pages/_single.scss
View File

@ -6,7 +6,7 @@
&__title { &__title {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 900; font-weight: 900;
font-family: $single_title_font; font-family: $title-font;
line-height: 3rem; line-height: 3rem;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -48,7 +48,7 @@
} }
font-size: 1rem; font-size: 1rem;
font-family: $single_contents_font; font-family: $content-font;
margin: 1rem 0; margin: 1rem 0;
line-height: 1.7rem; line-height: 1.7rem;
width: inheirt; width: inheirt;
@ -332,7 +332,7 @@ code {
left: 0; left: 0;
padding: 2px 7px; padding: 2px 7px;
font-size: $code-font-size; font-size: $code-font-size;
font-family: 'Montserrat', sans-serif; font-family: $title-font;
font-weight: bold; font-weight: bold;
@include themify($themes) { @include themify($themes) {
color: themed('content-pre-header-color'); color: themed('content-pre-header-color');

4
assets/sass/prism/_dark.scss
View File

@ -1,4 +1,4 @@
.theme__dark { @mixin theme-dark {
code[class*="language-"], code[class*="language-"],
pre[class*="language-"] { pre[class*="language-"] {
color: #d6deeb; color: #d6deeb;
@ -9,7 +9,7 @@
word-break: normal; word-break: normal;
word-wrap: normal; word-wrap: normal;
min-width: 100%; min-width: 100%;
font-size: 14px; font-size: $code-font-size;
line-height: 1.5em; line-height: 1.5em;
-moz-tab-size: 4; -moz-tab-size: 4;

410
assets/sass/prism/_dracula.scss Normal file
View File

@ -0,0 +1,410 @@
/* PrismJS 1.14.0
http://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+abap+actionscript+ada+apacheconf+apl+applescript+c+arff+asciidoc+asm6502+aspnet+autohotkey+autoit+bash+basic+batch+bison+brainfuck+bro+cpp+csharp+arduino+coffeescript+clojure+ruby+csp+css-extras+d+dart+diff+django+docker+eiffel+elixir+elm+markup-templating+erlang+fsharp+flow+fortran+gedcom+gherkin+git+glsl+go+graphql+groovy+haml+handlebars+haskell+haxe+http+hpkp+hsts+ichigojam+icon+inform7+ini+io+j+java+jolie+json+julia+keyman+kotlin+latex+less+liquid+lisp+livescript+lolcode+lua+makefile+markdown+erb+matlab+mel+mizar+monkey+n4js+nasm+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+perl+php+php-extras+sql+powershell+processing+prolog+properties+protobuf+pug+puppet+pure+python+q+qore+r+jsx+typescript+renpy+reason+rest+rip+roboconf+crystal+rust+sas+sass+scss+scala+scheme+smalltalk+smarty+plsql+soy+stylus+swift+tcl+textile+twig+tsx+vbnet+velocity+verilog+vhdl+vim+visual-basic+wasm+wiki+xeora+xojo+yaml&plugins=line-numbers+toolbar+show-language */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
/*
* Dracula Theme for Prism.JS
*
* @author Gustavo Costa
* e-mail: gusbemacbe@gmail.com
*
* @contributor Jon Leopard
* e-mail: jonlprd@gmail.com
*
* @license MIT 2016-2018
*/
@mixin theme-dracula {
pre::-webkit-scrollbar {
width: 14px;
}
pre::-webkit-scrollbar-track {
background-color: #6272a4;
border-radius: 0px;
}
pre::-webkit-scrollbar-thumb {
background-color: #bd93f9;
border-radius: 0px;
}
code[class*="language-"],
pre[class*="language-"] {
color: #ccc;
background: rgb(40, 41, 54);
text-shadow: none;
font-family: PT Mono, 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;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background-color: #5a5f80;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background-color: #5a5f80;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
background: rgba(40, 41, 54, 1) !important;
border-radius: 0.5em;
padding: 1em;
margin: 0.5em 0;
overflow: auto;
height: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: rgba(40, 41, 54, 1);
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: 4px 7px;
border-radius: 0.3em;
white-space: normal;
}
.limit-300
{
height: 300px !important;
}
.limit-400
{
height: 400px !important;
}
.limit-500
{
height: 500px !important;
}
.limit-600
{
height: 600px !important;
}
.limit-700
{
height: 700px !important;
}
.limit-800
{
height: 800px !important;
}
.token.comment {
color: rgba(98, 114, 164, 1);
}
.token.prolog {
color: rgba(207, 207, 194, 1);
}
.token.tag {
color: rgba(220, 104, 170, 1);
}
.token.entity {
color: rgba(139, 233, 253, 1);
}
.token.atrule {
color: rgba(98, 239, 117, 1);
}
.token.url {
color: rgba(102, 217, 239, 1);
}
.token.selector {
color: rgba(207, 207, 194, 1);
}
.token.string {
color: rgba(241, 250, 140, 1);
}
.token.property {
color: rgba(255, 184, 108, 1);
}
.token.important {
color: rgba(255, 121, 198, 1);
font-weight: bold;
}
.token.punctuation {
color: rgba(230, 219, 116, 1);
}
.token.number {
color: rgba(189, 147, 249, 1);
}
.token.function {
color: rgba(80, 250, 123, 1);
}
.token.class-name {
color: rgba(255, 184, 108, 1);
}
.token.keyword {
color: rgba(255, 121, 198, 1);
}
.token.boolean {
color: rgba(255, 184, 108, 1);
}
.token.operator {
color: rgba(139, 233, 253, 1);
}
.token.char {
color: rgba(255, 135, 157, 1);
}
.token.regex {
color: rgba(80, 250, 123, 1);
}
.token.variable {
color: rgba(80, 250, 123, 1);
}
.token.constant {
color: rgba(255, 184, 108, 1);
}
.token.symbol {
color: rgba(255, 184, 108, 1);
}
.token.builtin {
color: rgba(255, 121, 198, 1);
}
.token.attr-value {
color: #7ec699;
}
.token.deleted {
color: #e2777a;
}
.token.namespace {
color: #e2777a;
}
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token {
color: #ff79c6;
}
.language-cpp .token.string {
color: #8be9fd;
}
.language-c .token.string {
color: #8be9fd;
}
.language-css .token.selector {
color: rgba(80, 250, 123, 1);
}
.language-css .token.property {
color: rgba(255, 184, 108, 1);
}
.language-java span.token.class-name {
color: #8be9fd;
}
.language-java .token.class-name {
color: #8be9fd;
}
.language-markup .token.attr-value {
color: rgba(102, 217, 239, 1);
}
.language-markup .token.tag {
color: rgba(80, 250, 123, 1);
}
.language-objectivec .token.property {
color: #66d9ef;
}
.language-objectivec .token.string {
color: #50fa7b;
}
.language-php .token.boolean {
color: #8be9fd;
}
.language-php .token.function {
color: #ff79c6;
}
.language-php .token.keyword {
color: #66d9ef;
}
.language-ruby .token.symbol {
color: #8be9fd;
}
.language-ruby .token.class-name {
color: #cfcfc2;
}
pre.line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}
pre.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 {
pointer-events: none;
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
}
div.code-toolbar {
position: relative;
}
div.code-toolbar > .toolbar {
position: absolute;
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 > .toolbar .toolbar-item {
display: inline-block;
padding-right: 20px;
}
div.code-toolbar > .toolbar a {
cursor: pointer;
}
div.code-toolbar > .toolbar button {
background: none;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none; /* for button */
-moz-user-select: none;
-ms-user-select: none;
}
div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
color: #ccc;
font-size: 0.8em;
padding: 0.5em;
background: rgba(98, 114, 164, 1);
border-radius: 0.5em;
}
div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
color: inherit;
text-decoration: none;
background-color: var(--verde);
}
}

7
assets/sass/prism/_hacker.scss
View File

@ -1,4 +1,4 @@
.theme__hacker { @mixin theme-hacker {
code[class*="language-"], code[class*="language-"],
pre[class*="language-"] { pre[class*="language-"] {
text-align: left; text-align: left;
@ -6,10 +6,9 @@
word-spacing: normal; word-spacing: normal;
word-break: normal; word-break: normal;
word-wrap: normal; word-wrap: normal;
color: #fafafa !important; color: #fafafa;
background: #2f2f2f;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 14px; font-size: $code-font-size;
line-height: 1.5em; line-height: 1.5em;
-moz-tab-size: 4; -moz-tab-size: 4;

4
assets/sass/prism/_light.scss
View File

@ -4,11 +4,11 @@ Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projec
Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-morning-light.css) Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-morning-light.css)
Generated with Base16 Builder (https://github.com/base16-builder/base16-builder) Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
*/ */
.theme__light, .theme__custom { @mixin theme-light {
code[class*="language-"], code[class*="language-"],
pre[class*="language-"] { pre[class*="language-"] {
font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
font-size: 14px; font-size: $code-font-size;
direction: ltr; direction: ltr;
text-align: left; text-align: left;
white-space: pre; white-space: pre;

43
assets/sass/prism/_prism.scss
View File

@ -2,3 +2,46 @@
@import 'light'; @import 'light';
@import 'hacker'; @import 'hacker';
@import 'solarized'; @import 'solarized';
@import 'dracula';
@if $prism_theme == default {
.theme__light, .theme__custom {
@include theme-light;
}
.theme__dark {
@include theme-dark;
}
.theme__hacker {
@include theme-hacker;
}
.theme__solarized {
@include theme-solarized;
}
} @else if $prism_theme == dark {
.container {
@include theme-dark;
}
} @else if $prism_theme == hacker {
.container {
@include theme-hacker;
}
} @else if $prism_theme == light {
.container {
@include theme-light;
}
} @else if $prism_theme == solarized {
.container {
@include theme-solarized;
}
} @else if $prism_theme == dracula {
.container {
@include theme-dracula;
}
} @else {
.container {
@include theme-light;
}
}

12
assets/sass/prism/_solarized.scss
View File

@ -10,11 +10,11 @@
/********************************************************* /*********************************************************
* General * General
*/ */
.theme__solarized { @mixin theme-solarized {
pre[class*="language-"], pre[class*="language-"],
code[class*="language-"] { code[class*="language-"] {
color: #5c6e74; color: #5c6e74;
font-size: 14px; font-size: $code-font-size;
text-shadow: none; text-shadow: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
direction: ltr; direction: ltr;
@ -63,8 +63,8 @@
} }
/********************************************************* /*********************************************************
* Tokens * Tokens
*/ */
.namespace { .namespace {
opacity: .7; opacity: .7;
} }
@ -138,8 +138,8 @@
} }
/********************************************************* /*********************************************************
* Line highlighting * Line highlighting
*/ */
pre[data-line] { pre[data-line] {
position: relative; position: relative;
} }

190
assets/sass/themes/_custom.scss
View File

@ -1,97 +1,97 @@
$custom: ( $custom: (
footer-background-color: hsl($primary_color, 60%, 95%), footer-background-color: hsl($custom_theme_primary_color, 60%, 95%),
footer-color: hsl($primary_color, 100%, 10%), footer-color: hsl($custom_theme_primary_color, 100%, 10%),
link: hsl($primary_color, 65%, 32%), link: hsl($custom_theme_primary_color, 65%, 32%),
link-hover: hsl($primary_color, 65%, 22%), link-hover: hsl($custom_theme_primary_color, 65%, 22%),
title-color: hsl($primary_color, 100%, 8%), title-color: hsl($custom_theme_primary_color, 100%, 8%),
meta-color: hsl($primary_color, 40%, 40%), meta-color: hsl($custom_theme_primary_color, 40%, 40%),
body-color: hsl($primary_color, 100%, 10%), body-color: hsl($custom_theme_primary_color, 100%, 10%),
hr-color: hsl($primary_color, 60%, 30%), hr-color: hsl($custom_theme_primary_color, 60%, 30%),
body-background-color: hsl($primary_color, 100%, 98.5%), body-background-color: hsl($custom_theme_primary_color, 100%, 98.5%),
backdrop-background-color: hsl($primary_color, 100%, 99%), backdrop-background-color: hsl($custom_theme_primary_color, 100%, 99%),
dropdown-border-top-color: hsl($primary_color, 100%, 45%), dropdown-border-top-color: hsl($custom_theme_primary_color, 100%, 45%),
dropdown-item-active-background-color: hsl($primary_color, 100%, 90%), dropdown-item-active-background-color: hsl($custom_theme_primary_color, 100%, 90%),
dropdown-content-background-color: hsl($primary_color, 100%, 98%), dropdown-content-background-color: hsl($custom_theme_primary_color, 100%, 98%),
dropdown-item-hover-background-color: hsl($primary_color, 100%, 90%), dropdown-item-hover-background-color: hsl($custom_theme_primary_color, 100%, 90%),
dropdown-item-hover-color: hsl($primary_color, 100%, 35%), dropdown-item-hover-color: hsl($custom_theme_primary_color, 100%, 35%),
dropdown-item-color: hsl($primary_color, 100%, 10%), dropdown-item-color: hsl($custom_theme_primary_color, 100%, 10%),
navbar-border-bottom-color: hsl($primary_color, 65%, 32%), navbar-border-bottom-color: hsl($custom_theme_primary_color, 65%, 32%),
navbar-background-color: hsl($primary_color, 60%, 86%), navbar-background-color: hsl($custom_theme_primary_color, 60%, 86%),
navbar-mobile-background-color: hsl($primary_color, 60%, 92%), navbar-mobile-background-color: hsl($custom_theme_primary_color, 60%, 92%),
navbar-title-color: hsl($primary_color, 82%, 12%), navbar-title-color: hsl($custom_theme_primary_color, 82%, 12%),
navbar-title-hover-color: hsl($primary_color, 100%, 35%), navbar-title-hover-color: hsl($custom_theme_primary_color, 100%, 35%),
navbar-title-active-color: hsl($primary_color, 100%, 35%), navbar-title-active-color: hsl($custom_theme_primary_color, 100%, 35%),
navbar-menu-hover-background-color: hsl($primary_color, 100%, 90%), navbar-menu-hover-background-color: hsl($custom_theme_primary_color, 100%, 90%),
navbar-dropdown-item-hover-color: hsl($primary_color, 100%, 35%), navbar-dropdown-item-hover-color: hsl($custom_theme_primary_color, 100%, 35%),
sidebar-title-color: hsl($primary_color, 70%, 25%), sidebar-title-color: hsl($custom_theme_primary_color, 70%, 25%),
sidebar-li-color: hsl($primary_color, 85%, 30%), sidebar-li-color: hsl($custom_theme_primary_color, 85%, 30%),
taxo-title-color: hsl($primary_color, 70%, 35%), taxo-title-color: hsl($custom_theme_primary_color, 70%, 35%),
taxo-num-color: hsl($primary_color, 100%, 10%), taxo-num-color: hsl($custom_theme_primary_color, 100%, 10%),
taxo-num-background-color: hsl($primary_color, 60%, 88%), taxo-num-background-color: hsl($custom_theme_primary_color, 60%, 88%),
taxo-tags-background-color: hsl($primary_color, 100%, 96%), taxo-tags-background-color: hsl($custom_theme_primary_color, 100%, 96%),
taxo-tags-color: hsl($primary_color, 100%, 10%), taxo-tags-color: hsl($custom_theme_primary_color, 100%, 10%),
taxo-series-background-color: hsl($primary_color, 100%, 96%), taxo-series-background-color: hsl($custom_theme_primary_color, 100%, 96%),
taxo-series-color: hsl($primary_color, 100%, 10%), taxo-series-color: hsl($custom_theme_primary_color, 100%, 10%),
taxo-categories-background-color: hsl($primary_color, 100%, 96%), taxo-categories-background-color: hsl($custom_theme_primary_color, 100%, 96%),
taxo-categories-color: hsl($primary_color, 100%, 10%), taxo-categories-color: hsl($custom_theme_primary_color, 100%, 10%),
breadcrumb-item-color: hsl($primary_color, 85%, 30%), breadcrumb-item-color: hsl($custom_theme_primary_color, 85%, 30%),
breadcrumb-background-color: hsl($primary_color, 100%, 96%), breadcrumb-background-color: hsl($custom_theme_primary_color, 100%, 96%),
breadcrumb-item-active-color: hsl($primary_color, 15%, 25%), breadcrumb-item-active-color: hsl($custom_theme_primary_color, 15%, 25%),
list-header-title-color: hsl($primary_color, 100%, 10%), list-header-title-color: hsl($custom_theme_primary_color, 100%, 10%),
figcaption-color: hsl($primary_color, 100%, 40%), figcaption-color: hsl($custom_theme_primary_color, 100%, 40%),
figcaption-strong-color: hsl($primary_color, 100%, 25%), figcaption-strong-color: hsl($custom_theme_primary_color, 100%, 25%),
single-hr-background-color: hsl($primary_color, 100%, 40%), single-hr-background-color: hsl($custom_theme_primary_color, 100%, 40%),
single-blockquote-border-color: hsl($primary_color, 100%, 25%), single-blockquote-border-color: hsl($custom_theme_primary_color, 100%, 25%),
single-header-title-color: hsl($primary_color, 100%, 10%), single-header-title-color: hsl($custom_theme_primary_color, 100%, 10%),
single-contents-title-color: hsl($primary_color, 70%, 22%), single-contents-title-color: hsl($custom_theme_primary_color, 70%, 22%),
related-header-title-color: hsl($primary_color, 100%, 10%), related-header-title-color: hsl($custom_theme_primary_color, 100%, 10%),
related-link-color: hsl($primary_color, 65%, 32%), related-link-color: hsl($custom_theme_primary_color, 65%, 32%),
content-pre-main-color: hsl($primary_color, 65%, 32%), content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
content-pre-color: hsl($primary_color, 100%, 10%), content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
content-pre-number-color: hsl($primary_color, 0%, 67%), content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
content-pre-background-color: hsl($primary_color, 100%, 97%), content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
content-pre-header-color: hsl($primary_color, 100%, 10%), content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
content-pre-header-background-color: hsl($primary_color, 100%, 92%), content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
content-pre-border-background-color: hsl($primary_color, 100%, 86%), content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
burger-menu-color: hsl($primary_color, 100%, 10%), burger-menu-color: hsl($custom_theme_primary_color, 100%, 10%),
social-icon-color: hsl($primary_color, 25%, 50%), social-icon-color: hsl($custom_theme_primary_color, 25%, 50%),
social-icon-hover-color: hsl($primary_color, 25%, 60%), social-icon-hover-color: hsl($custom_theme_primary_color, 25%, 60%),
pagination-link-color: hsl($primary_color, 65%, 32%), pagination-link-color: hsl($custom_theme_primary_color, 65%, 32%),
pagination-background-color: hsl($primary_color, 60%, 90%), pagination-background-color: hsl($custom_theme_primary_color, 60%, 90%),
pagination-disabled-color: hsl($primary_color, 25%, 75%), pagination-disabled-color: hsl($custom_theme_primary_color, 25%, 75%),
pagination-number-color: hsl($primary_color, 100%, 40%), pagination-number-color: hsl($custom_theme_primary_color, 100%, 40%),
terms-title-color: hsl($primary_color, 25%, 60%), terms-title-color: hsl($custom_theme_primary_color, 25%, 60%),
terms-tags-color: hsl($primary_color, 100%, 30%), terms-tags-color: hsl($custom_theme_primary_color, 100%, 30%),
terms-categories-color: hsl($primary_color, 100%, 30%), terms-categories-color: hsl($custom_theme_primary_color, 100%, 30%),
terms-series-color: hsl($primary_color, 100%, 30%), terms-series-color: hsl($custom_theme_primary_color, 100%, 30%),
terms-len-color: hsl($primary_color, 100%, 12%), terms-len-color: hsl($custom_theme_primary_color, 100%, 12%),
toc-label-color: hsl($primary_color, 100%, 10%), toc-label-color: hsl($custom_theme_primary_color, 100%, 10%),
toc-title-color: hsl($primary_color, 10%, 60%), toc-title-color: hsl($custom_theme_primary_color, 10%, 60%),
toc-vertical-line: hsl($primary_color, 65%, 85%), toc-vertical-line: hsl($custom_theme_primary_color, 65%, 85%),
toc-vertical-line-active: hsl($primary_color, 65%, 35%), toc-vertical-line-active: hsl($custom_theme_primary_color, 65%, 35%),
search-placeholder-color: hsl($primary_color, 65%, 65%), search-placeholder-color: hsl($custom_theme_primary_color, 65%, 65%),
search-color: hsl($primary_color, 100%, 10%), search-color: hsl($custom_theme_primary_color, 100%, 10%),
search-icon-color: hsl($primary_color, 65%, 80%), search-icon-color: hsl($custom_theme_primary_color, 65%, 80%),
search-border-color: hsl($primary_color, 65%, 65%), search-border-color: hsl($custom_theme_primary_color, 65%, 65%),
search-content-color: hsl($primary_color, 100%, 10%), search-content-color: hsl($custom_theme_primary_color, 100%, 10%),
search-background-color: hsl($primary_color, 100%, 96%), search-background-color: hsl($custom_theme_primary_color, 100%, 96%),
search-content-background-color: hsl($primary_color, 100%, 99%), search-content-background-color: hsl($custom_theme_primary_color, 100%, 99%),
search-hover-background-color: hsl($primary_color, 100%, 95%), search-hover-background-color: hsl($custom_theme_primary_color, 100%, 95%),
selection-color: hsl($primary_color, 65%, 95%), selection-color: hsl($custom_theme_primary_color, 65%, 95%),
selection-background-color: hsl($primary_color, 65%, 32%), selection-background-color: hsl($custom_theme_primary_color, 65%, 32%),
archive-key-color: hsl($primary_color, 100%, 92%), archive-key-color: hsl($custom_theme_primary_color, 100%, 92%),
archive-type-color: hsl($primary_color, 60%, 20%), archive-type-color: hsl($custom_theme_primary_color, 60%, 20%),
archive-meta-color: hsl($primary_color, 80%, 40%), archive-meta-color: hsl($custom_theme_primary_color, 80%, 40%),
archive-key-background-color: hsl($primary_color, 100%, 12%), archive-key-background-color: hsl($custom_theme_primary_color, 100%, 12%),
archive-type-background-color: hsl($primary_color, 100%, 95%), archive-type-background-color: hsl($custom_theme_primary_color, 100%, 95%),
archive-hover-line-color: hsl($primary_color, 65%, 32%), archive-hover-line-color: hsl($custom_theme_primary_color, 65%, 32%),
gtt-color: hsl($primary_color, 60%, 25%), gtt-color: hsl($custom_theme_primary_color, 60%, 25%),
gtt-background-color: hsl($primary_color, 60%, 95%), gtt-background-color: hsl($custom_theme_primary_color, 60%, 95%),
gtt-hover-color: hsl($primary_color, 60%, 60%), gtt-hover-color: hsl($custom_theme_primary_color, 60%, 60%),
gtt-hover-background-color: hsl($primary_color, 60%, 95%), gtt-hover-background-color: hsl($custom_theme_primary_color, 60%, 95%),
switch-background-color: hsl($primary_color, 80%, 80%), switch-background-color: hsl($custom_theme_primary_color, 80%, 80%),
switch-button-color: hsl($primary_color, 100%, 95%), switch-button-color: hsl($custom_theme_primary_color, 100%, 95%),
switch-active-color: hsl($primary_color, 80%, 60%), switch-active-color: hsl($custom_theme_primary_color, 80%, 60%),
gallery-mask-color: hsl($primary_color, 100%, 10%), gallery-mask-color: hsl($custom_theme_primary_color, 100%, 10%),
gallery-mask-background-color: hsla($primary_color, 100%, 90%, 0.7), gallery-mask-background-color: hsla($custom_theme_primary_color, 100%, 90%, 0.7),
) !default; ) !default;

6
assets/sass/themes/_dark.scss
View File

@ -47,12 +47,12 @@ $dark: (
related-header-title-color: #FCFCFA, related-header-title-color: #FCFCFA,
related-link-color: #A9DC76, related-link-color: #A9DC76,
content-pre-main-color: #FFA7C4, content-pre-main-color: #FFA7C4,
content-pre-color: #d1d1d1, content-pre-color: #eee,
content-pre-number-color: #666, content-pre-number-color: #666,
content-pre-background-color: #011627, content-pre-background-color: #1d232f,
content-pre-header-background-color: darken(#011627, 1.5%), content-pre-header-background-color: darken(#011627, 1.5%),
content-pre-border-background-color: #3a3a3a, content-pre-border-background-color: #3a3a3a,
content-pre-header-color: #d1d1d1, content-pre-header-color: #FCFCFA,
burger-menu-color: #FCFCFA, burger-menu-color: #FCFCFA,
social-icon-color: #bdbdbd, social-icon-color: #bdbdbd,
social-icon-hover-color: lighten(#bdbdbd, 20%), social-icon-hover-color: lighten(#bdbdbd, 20%),

16
data/font.toml
View File

@ -1,16 +0,0 @@
search_placeholder = "'Montserrat', sans-serif"
summary_title = "'Montserrat', sans-serif"
summary_subtitle = "'Merriweather', serif"
summary_text = "'Merriweather', serif"
taxo_titie = "'Montserrat', sans-serif"
footer_content = "'Montserrat', sans-serif"
header_title = "'Montserrat', sans-serif"
navbar_item = "'Montserrat', sans-serif"
sidebar_title = "'Montserrat', sans-serif"
sidebar_list = "inherit"
page_not_found = "'Montserrat', sans-serif"
gallery_contents = "'Merriweather', serif"
list_title = "'Montserrat', sans-serif"
list_desc = "'Merriweather', serif"
single_title = "'Montserrat', sans-serif"
single_contents = "'Merriweather', serif"

4
data/skin.toml
View File

@ -1 +1,3 @@
primary_color = "195" # 0 ~ 359, Colors HSL, restart hugo after change this value custom_theme_primary_color = "195" # 0 ~ 359, Colors HSL, restart hugo after change this value
prism_theme = "default" # default, dark, light, solarized, hacker, dracula

2
exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.content
View File

File diff suppressed because one or more lines are too long

19
layouts/partials/functions/parse_fonts.html
View File

@ -1,19 +0,0 @@
{{- $scr := .Scratch -}}
{{ $font := .Site.Data.font }}
{{- $scr.Set "search_placeholder" $font.search_placeholder -}}
{{- $scr.Set "summary_title" $font.summary_title -}}
{{- $scr.Set "summary_subtitle" $font.summary_subtitle -}}
{{- $scr.Set "summary_text" $font.summary_text -}}
{{- $scr.Set "taxo_titie" $font.taxo_titie -}}
{{- $scr.Set "footer_content" $font.footer_content -}}
{{- $scr.Set "header_title" $font.header_title -}}
{{- $scr.Set "navbar_item" $font.navbar_item -}}
{{- $scr.Set "sidebar_title" $font.sidebar_title -}}
{{- $scr.Set "sidebar_list" $font.sidebar_list -}}
{{- $scr.Set "page_not_found" $font.page_not_found -}}
{{- $scr.Set "gallery_contents" $font.gallery_contents -}}
{{- $scr.Set "list_title" $font.list_title -}}
{{- $scr.Set "list_desc" $font.list_desc -}}
{{- $scr.Set "single_title" $font.single_title -}}
{{- $scr.Set "single_contents" $font.single_contents -}}

3
layouts/partials/functions/parse_theme.html
View File

@ -1,4 +1,5 @@
{{- $scr := .Scratch -}} {{- $scr := .Scratch -}}
{{ $skin := .Site.Data.skin }} {{ $skin := .Site.Data.skin }}
{{- $scr.Set "primary_color" $skin.primary_color -}} {{- $scr.Set "custom_theme_primary_color" $skin.custom_theme_primary_color -}}
{{- $scr.Set "prism_theme" $skin.prism_theme -}}

4
layouts/partials/script/single-script.html
View File

@ -333,6 +333,10 @@
$(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s'); $(e.trigger).attr('aria-label', 'Link copied to clipboard!').addClass('tooltipped tooltipped-s');
}); });
$('pre.chroma').not(':has(code)').each(function() {
$(this).not(':has(span)').wrap('<code style="font-size: 1rem;"></code>');
});
// clipboard // clipboard
var clipInit = false; var clipInit = false;
$('code').each(function () { $('code').each(function () {