gallery size bug fixed, new theme(kimbie) added, some style bug fixed

README.ko.md

@@ -696,14 +696,6 @@ custom_js = ["js/custom.js", ...]
 assets/js/custom.js
 ```
 
-### custom skin(sub theme)
-
-1. data폴더에 skin.toml 파일을 만들어주세요. (data/skin.toml)
-
-2. custom_theme_primary_color항목의 값을 변경해주세요. 값의 범위는 "0" 부터 "359" 까지 입니다.
-
-3. 변경 후, 휴고를 다시 시작해주세요. 안그러면 변경사항이 적용 안될 수도 있습니다.
-
 ### custom syntax highlighting
 
 1. root/data 폴더에 skin.toml파일을 만들어주세요. theme_dark_chroma, theme_light_chroma, ... 파라미터의 항목의 값을 원하시는 코드 하이라이트 테마값으로 변경해주세요. [이 링크](https://xyproto.github.io/splash/docs/all.html)를 참조해서 값을 변경하시면 됩니다. 만약 theme_[xxxx]_chroma 값에 - 나 _ 같은 특수문자가 있다면 지워주세요.
@@ -997,3 +989,11 @@ A notice disclaimer
 ```bash
 {{< color "#0000ff" >}}*text*{{< /color >}}
 ```
+
+### box
+
+```bash
+{{< box >}}
+Some markdown contents
+{{< /box >}}
+```

README.md

@@ -688,16 +688,6 @@ custom_js = ["js/custom.js", ...]
 assets/js/custom.js
 ```
 
-### custom skin(sub theme)
-
-1. Make a skin.toml file in data folder. (data/skin.toml)
-
-2. Set custom_theme_primary_color variable. The range of value that can be set is from "0" to "359".
-
-3. Restart hugo.
-
-5. Once you change the skin.toml file, restart hugo.
-
 ### custom syntax highlighting
 
 1. Make a skin.toml file at root/data folder. Set the theme_dark_chroma, theme_light_chroma, ... params value as you want. Refer this [link](https://xyproto.github.io/splash/docs/all.html). If theme_[xxxx]_chroma value include - or _ like special character, just delete it.
@@ -998,3 +988,11 @@ A notice disclaimer
 ```bash
 {{< color "#0000ff" >}}*text*{{< /color >}}
 ```
+
+### box
+
+```bash
+{{< box >}}
+Some markdown contents
+{{< /box >}}
+```

archetypes/default.md

@@ -2,6 +2,8 @@
 title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
 description:
+draft: false
+enableTocContent: false
 tags:
 -
 series:

assets/sass/main.scss

@@ -9,18 +9,17 @@ $grid_column_gap_unit: {{ .Site.Data.grid.grid_column_gap_unit }};
 $grid_navbar_height: {{ .Site.Data.grid.grid_navbar_height }};
 $grid_row_gap: {{ .Site.Data.grid.grid_row_gap }};
 
-$custom_theme_primary_color: {{ .Site.Data.skin.custom_theme_primary_color }};
 $theme_light_chroma: {{ .Site.Data.skin.theme_light_chroma }};
 $theme_dark_chroma: {{ .Site.Data.skin.theme_dark_chroma }};
 $theme_hacker_chroma: {{ .Site.Data.skin.theme_hacker_chroma }};
 $theme_solarized_chroma: {{ .Site.Data.skin.theme_solarized_chroma }};
-$theme_custom_chroma: {{ .Site.Data.skin.theme_custom_chroma }};
+$theme_kimbie_chroma: {{ .Site.Data.skin.theme_kimbie_chroma }};
 
 $theme_light_chroma_background: {{ .Site.Data.skin.theme_light_chroma_background }};
 $theme_dark_chroma_background: {{ .Site.Data.skin.theme_dark_chroma_background }};
 $theme_hacker_chroma_background: {{ .Site.Data.skin.theme_hacker_chroma_background }};
 $theme_solarized_chroma_background: {{ .Site.Data.skin.theme_solarized_chroma_background }};
-$theme_custom_chroma_background: {{ .Site.Data.skin.theme_custom_chroma_background }};
+$theme_kimbie_chroma_background: {{ .Site.Data.skin.theme_kimbie_chroma_background }};
 
 $title-font: {{ .Site.Data.font.title_font }};
 $content-font: {{ .Site.Data.font.content_font }};

assets/sass/pages/_single.scss

@@ -165,7 +165,7 @@
       }
     }
 
-    p > code {
+    p > code:not([class^=language]) {
       padding: 0.25rem 0.5rem;
       @include themify($codeblock) {
         color: themed('content-code-color');
@@ -241,6 +241,9 @@
       code:not([class^=language]) {
         padding: 3px 5px;
         margin: 0 0.25rem;
+        @include themify($codeblock) {
+          color: themed('content-code-color');
+        }
       }
     }
 
@@ -257,6 +260,9 @@
       code:not([class^=language]) {
         padding: 3px 5px;
         margin: 0 0.25rem;
+        @include themify($codeblock) {
+          color: themed('content-code-color');
+        }
       }
     }
 
@@ -274,6 +280,9 @@
       code:not([class^=language]) {
         padding: 3px 5px;
         margin: 0 0.25rem;
+        @include themify($codeblock) {
+          color: themed('content-code-color');
+        }
       }
     }
 
@@ -344,6 +353,9 @@
       code:not([class^=language]) {
         padding: 3px 5px;
         margin: 0 0.25rem;
+        @include themify($codeblock) {
+          color: themed('content-code-color');
+        }
       }
     }
   }
@@ -387,6 +399,9 @@ code, pre {
 code:not([class^=language]) {  
   padding: 3px 5px;  
   border-radius: 4px;
+  @include themify($codeblock) {
+    color: themed('content-code-color');
+  }
 }
 
 pre:not(.chroma) {

assets/sass/syntax/_fruity.scss

@@ -38,13 +38,13 @@
   /* LiteralNumberInteger */ .chroma .mi { color: #0086f7; font-weight: bold }
   /* LiteralNumberIntegerLong */ .chroma .il { color: #0086f7; font-weight: bold }
   /* LiteralNumberOct */ .chroma .mo { color: #0086f7; font-weight: bold }
-  /* Comment */ .chroma .c { color: #008800; background-color: #0f140f; font-style: italic }
+  /* Comment */ .chroma .c { color: #008800; font-style: italic }
-  /* CommentHashbang */ .chroma .ch { color: #008800; background-color: #0f140f; font-style: italic }
+  /* CommentHashbang */ .chroma .ch { color: #008800; font-style: italic }
-  /* CommentMultiline */ .chroma .cm { color: #008800; background-color: #0f140f; font-style: italic }
+  /* CommentMultiline */ .chroma .cm { color: #008800; font-style: italic }
-  /* CommentSingle */ .chroma .c1 { color: #008800; background-color: #0f140f; font-style: italic }
+  /* CommentSingle */ .chroma .c1 { color: #008800; font-style: italic }
-  /* CommentSpecial */ .chroma .cs { color: #008800; background-color: #0f140f; font-style: italic }
+  /* CommentSpecial */ .chroma .cs { color: #008800; font-style: italic }
-  /* CommentPreproc */ .chroma .cp { color: #ff0007; background-color: #0f140f; font-weight: bold; font-style: italic }
+  /* CommentPreproc */ .chroma .cp { color: #ff0007; font-weight: bold; font-style: italic }
-  /* CommentPreprocFile */ .chroma .cpf { color: #ff0007; background-color: #0f140f; font-weight: bold; font-style: italic }
+  /* CommentPreprocFile */ .chroma .cpf { color: #ff0007; font-weight: bold; font-style: italic }
   /* GenericHeading */ .chroma .gh { font-weight: bold }
   /* GenericOutput */ .chroma .go { color: #444444; background-color: #222222 }
   /* GenericSubheading */ .chroma .gu { font-weight: bold }

assets/sass/syntax/_monokailight.scss

@@ -13,27 +13,27 @@
   /* KeywordPseudo */ .chroma .kp { color: #00a8c8 }
   /* KeywordReserved */ .chroma .kr { color: #00a8c8 }
   /* KeywordType */ .chroma .kt { color: #00a8c8 }
-  /* Name */ .chroma .n { color: #111111 }
+  /* Name */ .chroma .n { color: #8ab1b0 }
   /* NameAttribute */ .chroma .na { color: #75af00 }
-  /* NameBuiltin */ .chroma .nb { color: #111111 }
+  /* NameBuiltin */ .chroma .nb { color: #8ab1b0 }
-  /* NameBuiltinPseudo */ .chroma .bp { color: #111111 }
+  /* NameBuiltinPseudo */ .chroma .bp { color: #8ab1b0 }
   /* NameClass */ .chroma .nc { color: #75af00 }
   /* NameConstant */ .chroma .no { color: #00a8c8 }
   /* NameDecorator */ .chroma .nd { color: #75af00 }
-  /* NameEntity */ .chroma .ni { color: #111111 }
+  /* NameEntity */ .chroma .ni { color: #8ab1b0 }
   /* NameException */ .chroma .ne { color: #75af00 }
   /* NameFunction */ .chroma .nf { color: #75af00 }
-  /* NameFunctionMagic */ .chroma .fm { color: #111111 }
+  /* NameFunctionMagic */ .chroma .fm { color: #8ab1b0 }
-  /* NameLabel */ .chroma .nl { color: #111111 }
+  /* NameLabel */ .chroma .nl { color: #8ab1b0 }
-  /* NameNamespace */ .chroma .nn { color: #111111 }
+  /* NameNamespace */ .chroma .nn { color: #8ab1b0 }
   /* NameOther */ .chroma .nx { color: #75af00 }
-  /* NameProperty */ .chroma .py { color: #111111 }
+  /* NameProperty */ .chroma .py { color: #8ab1b0 }
   /* NameTag */ .chroma .nt { color: #f92672 }
-  /* NameVariable */ .chroma .nv { color: #111111 }
+  /* NameVariable */ .chroma .nv { color: #8ab1b0 }
-  /* NameVariableClass */ .chroma .vc { color: #111111 }
+  /* NameVariableClass */ .chroma .vc { color: #8ab1b0 }
-  /* NameVariableGlobal */ .chroma .vg { color: #111111 }
+  /* NameVariableGlobal */ .chroma .vg { color: #8ab1b0 }
-  /* NameVariableInstance */ .chroma .vi { color: #111111 }
+  /* NameVariableInstance */ .chroma .vi { color: #8ab1b0 }
-  /* NameVariableMagic */ .chroma .vm { color: #111111 }
+  /* NameVariableMagic */ .chroma .vm { color: #8ab1b0 }
   /* Literal */ .chroma .l { color: #ae81ff }
   /* LiteralDate */ .chroma .ld { color: #d88200 }
   /* LiteralString */ .chroma .s { color: #d88200 }
@@ -59,7 +59,7 @@
   /* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
   /* Operator */ .chroma .o { color: #f92672 }
   /* OperatorWord */ .chroma .ow { color: #f92672 }
-  /* Punctuation */ .chroma .p { color: #111111 }
+  /* Punctuation */ .chroma .p { color: #8ab1b0 }
   /* Comment */ .chroma .c { color: #75715e }
   /* CommentHashbang */ .chroma .ch { color: #75715e }
   /* CommentMultiline */ .chroma .cm { color: #75715e }

assets/sass/syntax/_syntax.scss

@@ -366,84 +366,84 @@
   }
 }
 
-.theme__custom {
+.theme__kimbie {
-  @if $theme_custom_chroma == default {
+  @if $theme_kimbie_chroma == default {
-    @include chroma-autumn;
-  } @else if $theme_custom_chroma == abap {
-    @include chroma-abap;
-  } @else if $theme_custom_chroma == algol {
-    @include chroma-algol;
-  } @else if $theme_custom_chroma == algolnu {
-    @include chroma-algolnu;
-  } @else if $theme_custom_chroma == api {
-    @include chroma-api;
-  } @else if $theme_custom_chroma == arduino {
-    @include chroma-arduino;
-  } @else if $theme_custom_chroma == autumn {
-    @include chroma-autumn;
-  } @else if $theme_custom_chroma == borland {
-    @include chroma-borland;
-  } @else if $theme_custom_chroma == bw {
-    @include chroma-bw;
-  } @else if $theme_custom_chroma == colorful {
-    @include chroma-colorful;
-  } @else if $theme_custom_chroma == dracula {
-    @include chroma-dracula;
-  } @else if $theme_custom_chroma == emacs {
-    @include chroma-emacs;
-  } @else if $theme_custom_chroma == friendly {
-    @include chroma-friendly;
-  } @else if $theme_custom_chroma == fruity {
-    @include chroma-fruity;
-  } @else if $theme_custom_chroma == github {
-    @include chroma-github;
-  } @else if $theme_custom_chroma == igor {
-    @include chroma-igor;
-  } @else if $theme_custom_chroma == lovelace {
-    @include chroma-lovelace;
-  } @else if $theme_custom_chroma == manni {
-    @include chroma-manni;
-  } @else if $theme_custom_chroma == monokai {
-    @include chroma-monokai;
-  } @else if $theme_custom_chroma == monokailight {
     @include chroma-monokailight;
-  } @else if $theme_custom_chroma == murphy {
+  } @else if $theme_kimbie_chroma == abap {
+    @include chroma-abap;
+  } @else if $theme_kimbie_chroma == algol {
+    @include chroma-algol;
+  } @else if $theme_kimbie_chroma == algolnu {
+    @include chroma-algolnu;
+  } @else if $theme_kimbie_chroma == api {
+    @include chroma-api;
+  } @else if $theme_kimbie_chroma == arduino {
+    @include chroma-arduino;
+  } @else if $theme_kimbie_chroma == autumn {
+    @include chroma-autumn;
+  } @else if $theme_kimbie_chroma == borland {
+    @include chroma-borland;
+  } @else if $theme_kimbie_chroma == bw {
+    @include chroma-bw;
+  } @else if $theme_kimbie_chroma == colorful {
+    @include chroma-colorful;
+  } @else if $theme_kimbie_chroma == dracula {
+    @include chroma-dracula;
+  } @else if $theme_kimbie_chroma == emacs {
+    @include chroma-emacs;
+  } @else if $theme_kimbie_chroma == friendly {
+    @include chroma-friendly;
+  } @else if $theme_kimbie_chroma == fruity {
+    @include chroma-fruity;
+  } @else if $theme_kimbie_chroma == github {
+    @include chroma-github;
+  } @else if $theme_kimbie_chroma == igor {
+    @include chroma-igor;
+  } @else if $theme_kimbie_chroma == lovelace {
+    @include chroma-lovelace;
+  } @else if $theme_kimbie_chroma == manni {
+    @include chroma-manni;
+  } @else if $theme_kimbie_chroma == monokai {
+    @include chroma-monokai;
+  } @else if $theme_kimbie_chroma == monokailight {
+    @include chroma-monokailight;
+  } @else if $theme_kimbie_chroma == murphy {
     @include chroma-murphy;
-  } @else if $theme_custom_chroma == native {
+  } @else if $theme_kimbie_chroma == native {
     @include chroma-native;
-  } @else if $theme_custom_chroma == paraisodark {
+  } @else if $theme_kimbie_chroma == paraisodark {
     @include chroma-paraisodark;
-  } @else if $theme_custom_chroma == paraisolight {
+  } @else if $theme_kimbie_chroma == paraisolight {
     @include chroma-paraisolight;
-  } @else if $theme_custom_chroma == pastie {
+  } @else if $theme_kimbie_chroma == pastie {
     @include chroma-pastie;
-  } @else if $theme_custom_chroma == perldoc {
+  } @else if $theme_kimbie_chroma == perldoc {
     @include chroma-perldoc;
-  } @else if $theme_custom_chroma == pygments {
+  } @else if $theme_kimbie_chroma == pygments {
     @include chroma-pygments;
-  } @else if $theme_custom_chroma == rainbowdash {
+  } @else if $theme_kimbie_chroma == rainbowdash {
     @include chroma-rainbowdash;
-  } @else if $theme_custom_chroma == rrt {
+  } @else if $theme_kimbie_chroma == rrt {
     @include chroma-rrt;
-  } @else if $theme_custom_chroma == solarizeddark {
+  } @else if $theme_kimbie_chroma == solarizeddark {
     @include chroma-solarizeddark;
-  } @else if $theme_custom_chroma == solarizeddark256 {
+  } @else if $theme_kimbie_chroma == solarizeddark256 {
     @include chroma-solarizeddark256;
-  } @else if $theme_custom_chroma == solarizedlight {
+  } @else if $theme_kimbie_chroma == solarizedlight {
     @include chroma-solarizedlight;
-  } @else if $theme_custom_chroma == swapoff {
+  } @else if $theme_kimbie_chroma == swapoff {
     @include chroma-swapoff;
-  } @else if $theme_custom_chroma == tango {
+  } @else if $theme_kimbie_chroma == tango {
     @include chroma-tango;
-  } @else if $theme_custom_chroma == trac {
+  } @else if $theme_kimbie_chroma == trac {
     @include chroma-trac;
-  } @else if $theme_custom_chroma == vim {
+  } @else if $theme_kimbie_chroma == vim {
     @include chroma-vim;
-  } @else if $theme_custom_chroma == vs {
+  } @else if $theme_kimbie_chroma == vs {
     @include chroma-vs;
-  } @else if $theme_custom_chroma == xcode {
+  } @else if $theme_kimbie_chroma == xcode {
     @include chroma-xcode;
   } @else {
-    @include chroma-autumn;
+    @include chroma-monokailight;
   }
 }

assets/sass/themes/_custom.scss

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

assets/sass/themes/_customcode.scss

@@ -1,69 +0,0 @@
-$customcode: '';
-
-@if $theme_custom_chroma_background == dark {
-  $customcode: (
-    content-code-color: #fcfcfa,
-    content-pre-main-color: #FFA7C4,
-    content-pre-color: #eee,
-    content-pre-number-color: #666,
-    content-pre-background-color: #171f2e,
-    content-pre-header-background-color: darken(#011627, 1.5%),
-    content-pre-border-background-color: #3a3a3a,
-    content-pre-header-color: #FCFCFA,
-  );
-} @else if $theme_custom_chroma_background == light {
-  $customcode: (
-    content-code-color: #827d70,
-    content-pre-main-color: #607d8b,
-    content-pre-color: #344952,
-    content-pre-number-color: #aaa,
-    content-pre-background-color: #F5F2F0,
-    content-pre-border-background-color: darken(#F5F2F0, 7%),
-    content-pre-header-background-color: darken(#F5F2F0, 3%),
-    content-pre-header-color: #344952,
-  );
-} @else if $theme_custom_chroma_background == hacker {
-  $customcode: (
-    content-code-color: #1fff2a,
-    content-pre-main-color: #1FFF2A,
-    content-pre-color: #d1d1d1,
-    content-pre-number-color: #666,
-    content-pre-background-color: #282a36,
-    content-pre-border-background-color: #f3ff6e,
-    content-pre-header-background-color: darken(#202420, 1.5%),
-    content-pre-header-color: #f3ff6e,
-  );
-} @else if $theme_custom_chroma_background == solarized {
-  $customcode: (
-    content-code-color: #424242,
-    content-pre-main-color: #B58900,
-    content-pre-color: #344952,
-    content-pre-number-color: #aaa,
-    content-pre-background-color: #faf1cd,
-    content-pre-border-background-color: darken(#FBF1D1, 12%),
-    content-pre-header-background-color: darken(#FBF1D1, 6%),
-    content-pre-header-color: #344952,
-  );
-} @else if $theme_custom_chroma_background == custom {
-  $customcode: (
-    content-code-color: #002633,
-    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
-    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
-    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
-    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
-    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
-    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
-    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
-  );
-} @else {
-  $customcode: (
-    content-code-color: #002633,
-    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
-    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
-    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
-    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
-    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
-    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
-    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
-  );
-}

assets/sass/themes/_darkcode.scss

@@ -13,7 +13,7 @@ $darkcode: '';
   );
 } @else if $theme_dark_chroma_background == light {
   $darkcode: (
-    content-code-color: #827d70,
+    content-code-color: #26a69a,
     content-pre-main-color: #607d8b,
     content-pre-color: #344952,
     content-pre-number-color: #aaa,
@@ -24,7 +24,7 @@ $darkcode: '';
   );
 } @else if $theme_dark_chroma_background == hacker {
   $darkcode: (
-    content-code-color: #1fff2a,
+    content-code-color: #E3CD26,
     content-pre-main-color: #1FFF2A,
     content-pre-color: #d1d1d1,
     content-pre-number-color: #666,
@@ -35,7 +35,7 @@ $darkcode: '';
   );
 } @else if $theme_dark_chroma_background == solarized {
   $darkcode: (
-    content-code-color: #424242,
+    content-code-color: #268bd2,
     content-pre-main-color: #B58900,
     content-pre-color: #344952,
     content-pre-number-color: #aaa,
@@ -44,16 +44,16 @@ $darkcode: '';
     content-pre-header-background-color: darken(#FBF1D1, 6%),
     content-pre-header-color: #344952,
   );
-} @else if $theme_dark_chroma_background == custom {
+} @else if $theme_dark_chroma_background == kimbie {
   $darkcode: (
-    content-code-color: #002633,
+    content-code-color: #f06431,
-    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
+    content-pre-main-color: #dc3958,
-    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-color: #d3af86,
-    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
+    content-pre-number-color: #666,
-    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
+    content-pre-background-color: #423523,
-    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-header-color: #8ab1b0,
-    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
+    content-pre-header-background-color: #362712,
-    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
+    content-pre-border-background-color: #e3b583,
   );
 } @else {
   $darkcode: (

assets/sass/themes/_hacker.scss

@@ -57,9 +57,9 @@ $hacker: (
     pagination-disabled-color: #424242,
     pagination-number-color: #FCFCFA,
     terms-title-color: #C7BA00,
-    terms-tags-color: #1FFF2A,
+    terms-tags-color: #78DCE8,
-    terms-categories-color: #1FFF2A,
+    terms-categories-color: #AB9DF2,
-    terms-series-color: #1FFF2A,
+    terms-series-color: #EA9C77,
     terms-len-color: #E08C48,
     toc-label-color: #727072,
     toc-title-color: #727072,

assets/sass/themes/_hackercode.scss

@@ -13,7 +13,7 @@ $hackercode: '';
   );
 } @else if $theme_hacker_chroma_background == light {
   $hackercode: (
-    content-code-color: #827d70,
+    content-code-color: #26a69a,
     content-pre-main-color: #607d8b,
     content-pre-color: #344952,
     content-pre-number-color: #aaa,
@@ -24,7 +24,7 @@ $hackercode: '';
   );
 } @else if $theme_hacker_chroma_background == hacker {
   $hackercode: (
-    content-code-color: #1fff2a,
+    content-code-color: #E3CD26,
     content-pre-main-color: #1FFF2A,
     content-pre-color: #d1d1d1,
     content-pre-number-color: #666,
@@ -35,7 +35,7 @@ $hackercode: '';
   );
 } @else if $theme_hacker_chroma_background == solarized {
   $hackercode: (
-    content-code-color: #424242,
+    content-code-color: #268bd2,
     content-pre-main-color: #B58900,
     content-pre-color: #344952,
     content-pre-number-color: #aaa,
@@ -44,20 +44,20 @@ $hackercode: '';
     content-pre-header-background-color: darken(#FBF1D1, 6%),
     content-pre-header-color: #344952,
   );
-} @else if $theme_hacker_chroma_background == custom {
+} @else if $theme_hacker_chroma_background == kimbie {
   $hackercode: (
-    content-code-color: #002633,
+    content-code-color: #f06431,
-    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
+    content-pre-main-color: #dc3958,
-    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-color: #d3af86,
-    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
+    content-pre-number-color: #666,
-    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
+    content-pre-background-color: #423523,
-    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-header-color: #8ab1b0,
-    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
+    content-pre-header-background-color: #362712,
-    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
+    content-pre-border-background-color: #e3b583,
   );
 } @else {
   $hackercode: (
-    content-code-color: #1fff2a,
+    content-code-color: #E3CD26,
     content-pre-main-color: #1FFF2A,
     content-pre-color: #d1d1d1,
     content-pre-number-color: #666,

assets/sass/themes/_kimbie.scss

@@ -0,0 +1,96 @@
+$kimbie: (
+  footer-background-color: #423523,
+  footer-color: #d3af86,
+  link: #DC322F,
+  link-hover: #DC322F,
+  title-color: #7c5021,
+  meta-color: #98676a,
+  body-color: #e3b583,
+  hr-color: #7f5d38,
+  body-background-color: #221a0f,
+  backdrop-background-color: #362712,
+  dropdown-border-top-color: #d3af86,
+  dropdown-item-active-background-color: #5e452b,
+  dropdown-content-background-color: #6e583b,
+  dropdown-item-hover-background-color: #5e452b,
+  dropdown-item-hover-color: #f06431,
+  dropdown-item-color: lighten(#d3af86, 20%),
+  navbar-border-bottom-color: #6e583b,
+  navbar-background-color: #51412c,
+  navbar-mobile-background-color: #423523,
+  navbar-title-color: #d3af86,
+  navbar-title-hover-color: #f06431,
+  navbar-title-active-color: #889b4a,
+  navbar-menu-hover-background-color: #6e583b,
+  navbar-dropdown-item-hover-color: #f06431,
+  sidebar-title-color: #dc3958,
+  sidebar-li-color: #a57a4c,
+  taxo-title-color: #98676a,
+  taxo-num-color: #d3af86,
+  taxo-num-background-color: #6e583b,
+  taxo-tags-background-color: #423523,
+  taxo-tags-color: #f06431,
+  taxo-series-background-color: #423523,
+  taxo-series-color: #dc3958 ,
+  taxo-categories-background-color: #423523,
+  taxo-categories-color: #8ab1b0,
+  breadcrumb-item-color: #DC322F,
+  breadcrumb-background-color: #362712,
+  breadcrumb-item-active-color: #bdbdbd,
+  list-header-title-color: #98676a,
+  figcaption-color: #e3b583,
+  figcaption-strong-color: #7e602c,
+  single-hr-background-color: #7f5d38,
+  single-blockquote-border-color: #84613d,
+  single-header-title-color: #e3b583,
+  single-contents-title-color: #889b4a,
+  related-header-title-color: #889b4a,
+  related-link-color: #f06431,
+  content-box-border-color: #6e583b,
+  content-box-background-color: #7c502166,
+  burger-menu-color: #a57a4c,
+  social-icon-color: #ccc,
+  social-icon-hover-color: #fff,
+  pagination-link-color: #DC322F,
+  pagination-background-color: #362712,
+  pagination-disabled-color: #bdbdbd,
+  pagination-number-color: #fff,
+  terms-title-color: #889b4a,
+  terms-tags-color: #f06431,
+  terms-categories-color: #8ab1b0,
+  terms-series-color: #dc3958,
+  terms-len-color: #d3af86,
+  toc-label-color: #7f5d38,
+  toc-title-color: #a57a4c,
+  toc-vertical-line: #a57a4c,
+  toc-vertical-line-active: #889b4a,
+  search-placeholder-color: #6e583b,
+  search-color: #d3af86,
+  search-icon-color: #6e583b,
+  search-border-color: #5e452b,
+  search-content-color: #d3af86,
+  search-background-color: #362712,
+  search-content-background-color: #362712,
+  search-hover-background-color: #5e452b,
+  search-highlight-color: #f06431,
+  selection-color: #FCFCFA,
+  selection-background-color: #FF6188,
+  archive-key-color: #8ab1b0,
+  archive-type-color: #f06431,
+  archive-meta-color: #d3af86,
+  archive-key-background-color: #423523,
+  archive-type-background-color: #5e452b,
+  archive-hover-line-color: #dc3958,
+  gtt-color: #d3af86,
+  gtt-background-color: #423523,
+  gtt-hover-color: #f06431,
+  gtt-hover-background-color: #5e452b,
+  switch-background-color: #6e583b,
+  switch-button-color: #FCFCFA,
+  switch-active-color: #dc3958,
+  gallery-mask-color: #fff,
+  gallery-mask-background-color: rgba(110, 88, 59, 0.6),
+  contact-input-color: #e3b583,
+  contact-input-background-color: #362712,
+  contact-button-background-color: #362712,
+) !default;

assets/sass/themes/_kimbiecode.scss

@@ -0,0 +1,69 @@
+$kimbiecode: '';
+
+@if $theme_kimbie_chroma_background == dark {
+  $kimbiecode: (
+    content-code-color: #fcfcfa,
+    content-pre-main-color: #FFA7C4,
+    content-pre-color: #eee,
+    content-pre-number-color: #666,
+    content-pre-background-color: #171f2e,
+    content-pre-header-background-color: darken(#011627, 1.5%),
+    content-pre-border-background-color: #3a3a3a,
+    content-pre-header-color: #FCFCFA,
+  );
+} @else if $theme_kimbie_chroma_background == light {
+  $kimbiecode: (
+    content-code-color: #26a69a,
+    content-pre-main-color: #607d8b,
+    content-pre-color: #344952,
+    content-pre-number-color: #aaa,
+    content-pre-background-color: #F5F2F0,
+    content-pre-border-background-color: darken(#F5F2F0, 7%),
+    content-pre-header-background-color: darken(#F5F2F0, 3%),
+    content-pre-header-color: #344952,
+  );
+} @else if $theme_kimbie_chroma_background == hacker {
+  $kimbiecode: (
+    content-code-color: #E3CD26,
+    content-pre-main-color: #1FFF2A,
+    content-pre-color: #d1d1d1,
+    content-pre-number-color: #666,
+    content-pre-background-color: #282a36,
+    content-pre-border-background-color: #f3ff6e,
+    content-pre-header-background-color: darken(#202420, 1.5%),
+    content-pre-header-color: #f3ff6e,
+  );
+} @else if $theme_kimbie_chroma_background == solarized {
+  $kimbiecode: (
+    content-code-color: #268bd2,
+    content-pre-main-color: #B58900,
+    content-pre-color: #344952,
+    content-pre-number-color: #aaa,
+    content-pre-background-color: #faf1cd,
+    content-pre-border-background-color: darken(#FBF1D1, 12%),
+    content-pre-header-background-color: darken(#FBF1D1, 6%),
+    content-pre-header-color: #344952,
+  );
+} @else if $theme_kimbie_chroma_background == kimbie {
+  $kimbiecode: (
+    content-code-color: #f06431,
+    content-pre-main-color: #dc3958,
+    content-pre-color: #d3af86,
+    content-pre-number-color: #666,
+    content-pre-background-color: #423523,
+    content-pre-header-color: #8ab1b0,
+    content-pre-header-background-color: #362712,
+    content-pre-border-background-color: #e3b583,
+  );
+} @else {
+  $kimbiecode: (
+    content-code-color: #f06431,
+    content-pre-main-color: #dc3958,
+    content-pre-color: #d3af86,
+    content-pre-number-color: #666,
+    content-pre-background-color: #423523,
+    content-pre-header-color: #8ab1b0,
+    content-pre-header-background-color: #362712,
+    content-pre-border-background-color: #e3b583,
+  );
+}

assets/sass/themes/_light.scss

@@ -34,7 +34,7 @@ $light: (
     taxo-series-color: #424242,
     taxo-categories-background-color: darken(#eee, 2%),
     taxo-categories-color: #424242,
-    breadcrumb-item-color: #424242,
+    breadcrumb-item-color: #728fcb,
     breadcrumb-background-color: #eee,
     breadcrumb-item-active-color: #bdbdbd,
     list-header-title-color: #424242,

assets/sass/themes/_lightcode.scss

@@ -13,7 +13,7 @@ $lightcode: '';
   );
 } @else if $theme_light_chroma_background == light {
   $lightcode: (
-    content-code-color: #827d70,
+    content-code-color: #26a69a,
     content-pre-main-color: #607d8b,
     content-pre-color: #344952,
     content-pre-number-color: #aaa,
@@ -24,7 +24,7 @@ $lightcode: '';
   );
 } @else if $theme_light_chroma_background == hacker {
   $lightcode: (
-    content-code-color: #1fff2a,
+    content-code-color: #E3CD26,
     content-pre-main-color: #1FFF2A,
     content-pre-color: #d1d1d1,
     content-pre-number-color: #666,
@@ -35,7 +35,7 @@ $lightcode: '';
   );
 } @else if $theme_light_chroma_background == solarized {
   $lightcode: (
-    content-code-color: #424242,
+    content-code-color: #268bd2,
     content-pre-main-color: #B58900,
     content-pre-color: #344952,
     content-pre-number-color: #aaa,
@@ -44,20 +44,20 @@ $lightcode: '';
     content-pre-header-background-color: darken(#FBF1D1, 6%),
     content-pre-header-color: #344952,
   );
-} @else if $theme_light_chroma_background == custom {
+} @else if $theme_light_chroma_background == kimbie {
   $lightcode: (
-    content-code-color: #002633,
+    content-code-color: #f06431,
-    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
+    content-pre-main-color: #dc3958,
-    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-color: #d3af86,
-    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
+    content-pre-number-color: #666,
-    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
+    content-pre-background-color: #423523,
-    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-header-color: #8ab1b0,
-    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
+    content-pre-header-background-color: #362712,
-    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
+    content-pre-border-background-color: #e3b583,
   );
 } @else {
   $lightcode: (
-    content-code-color: #827d70,
+    content-code-color: #26a69a,
     content-pre-main-color: #607d8b,
     content-pre-color: #344952,
     content-pre-number-color: #aaa,

assets/sass/themes/_solarized.scss

@@ -56,9 +56,9 @@ $solarized: (
     pagination-disabled-color: #bdbdbd,
     pagination-number-color: #455a64,
     terms-title-color: lighten(#B58900, 7%),
-    terms-tags-color: #ffb300,
+    terms-tags-color: lighten(#B58900, 5%),
-    terms-categories-color: #B58900,
+    terms-categories-color: #cb4b16,
-    terms-series-color: #B58900,
+    terms-series-color: #859900,
     terms-len-color: #727072,
     toc-label-color: #727072,
     toc-title-color: #727072,

assets/sass/themes/_solarizedcode.scss

@@ -13,7 +13,7 @@ $solarizedcode: '';
   );
 } @else if $theme_solarized_chroma_background == light {
   $solarizedcode: (
-    content-code-color: #827d70,
+    content-code-color: #26a69a,
     content-pre-main-color: #607d8b,
     content-pre-color: #344952,
     content-pre-number-color: #aaa,
@@ -24,7 +24,7 @@ $solarizedcode: '';
   );
 } @else if $theme_solarized_chroma_background == hacker {
   $solarizedcode: (
-    content-code-color: #1fff2a,
+    content-code-color: #E3CD26,
     content-pre-main-color: #1FFF2A,
     content-pre-color: #d1d1d1,
     content-pre-number-color: #666,
@@ -35,7 +35,7 @@ $solarizedcode: '';
   );
 } @else if $theme_solarized_chroma_background == solarized {
   $solarizedcode: (
-    content-code-color: #424242,
+    content-code-color: #268bd2,
     content-pre-main-color: #B58900,
     content-pre-color: #344952,
     content-pre-number-color: #aaa,
@@ -44,20 +44,20 @@ $solarizedcode: '';
     content-pre-header-background-color: darken(#FBF1D1, 6%),
     content-pre-header-color: #344952,
   );
-} @else if $theme_solarized_chroma_background == custom {
+} @else if $theme_solarized_chroma_background == kimbie {
   $solarizedcode: (
-    content-code-color: #002633,
+    content-code-color: #f06431,
-    content-pre-main-color: hsl($custom_theme_primary_color, 65%, 32%),
+    content-pre-main-color: #dc3958,
-    content-pre-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-color: #d3af86,
-    content-pre-number-color: hsl($custom_theme_primary_color, 0%, 67%),
+    content-pre-number-color: #666,
-    content-pre-background-color: hsl($custom_theme_primary_color, 100%, 97%),
+    content-pre-background-color: #423523,
-    content-pre-header-color: hsl($custom_theme_primary_color, 100%, 10%),
+    content-pre-header-color: #8ab1b0,
-    content-pre-header-background-color: hsl($custom_theme_primary_color, 100%, 92%),
+    content-pre-header-background-color: #362712,
-    content-pre-border-background-color: hsl($custom_theme_primary_color, 100%, 86%),
+    content-pre-border-background-color: #e3b583,
   );
 } @else {
   $solarizedcode: (
-    content-code-color: #424242,
+    content-code-color: #268bd2,
     content-pre-main-color: #B58900,
     content-pre-color: #344952,
     content-pre-number-color: #aaa,

assets/sass/themes/_theme.scss

@@ -2,20 +2,20 @@
 @import 'light';
 @import 'hacker';
 @import 'solarized';
-@import 'custom';
+@import 'kimbie';
 
 @import 'darkcode';
 @import 'lightcode';
 @import 'hackercode';
 @import 'solarizedcode';
-@import 'customcode';
+@import 'kimbiecode';
 
 $themes: (
   dark: $dark,
   light: $light,
   hacker: $hacker,  
   solarized: $solarized,
-  custom: $custom,
+  kimbie: $kimbie,
 );
 
 $codeblock: (
@@ -23,5 +23,5 @@ $codeblock: (
   light: $lightcode,
   hacker: $hackercode,  
   solarized: $solarizedcode,
-  custom: $customcode,
+  kimbie: $kimbiecode,
 );

data/skin.toml

@@ -1,17 +1,15 @@
-custom_theme_primary_color = "195" # 0 ~ 359, Colors HSL, restart hugo after change this value
-
 # https://xyproto.github.io/splash/docs/longer/all.html
 # restart hugo after change this value
 theme_light_chroma = "default"
 theme_dark_chroma = "default"
 theme_hacker_chroma = "default"
 theme_solarized_chroma = "default"
-theme_custom_chroma = "default"
+theme_kimbie_chroma = "default"
 
-# possible value: default, dark, light, hacker, solarized, custom
+# possible value: default, dark, light, hacker, solarized, kimbie
 # restart hugo after change this value
 theme_light_chroma_background = "default"
 theme_dark_chroma_background = "default"
 theme_hacker_chroma_background = "default"
 theme_solarized_chroma_background = "default"
-theme_custom_chroma_background = "default"
+theme_kimbie_chroma_background = "default"

exampleSite/config/_default/params.toml

@@ -3,7 +3,7 @@ description = "The Zzo theme for Hugo example site."
 custom_css = []
 custom_js = []
 
-themeOptions = ["dark", "light", "hacker", "solarized", "custom"]
+themeOptions = ["dark", "light", "hacker", "solarized", "kimbie"]
 notAllowedTypesInHome = ["contact", "talks", "about"]
 
 # header

layouts/partials/body/photoswipe.html

@@ -125,11 +125,23 @@ document.addEventListener('DOMContentLoaded', function () {
     debugMode: false,
   });
 
+  var imageLoad = function(src) {
+    return new Promise(function(resolve, reject) {
+      var newImg = new Image;
+      newImg.onload = function() {
+        resolve(newImg);
+      }
+      newImg.onerror = reject;
+      newImg.src = src;
+    });
+  }
+
   singleContentsElem.querySelectorAll('img').forEach(function (elem, idx) {
     elem.style.cursor = 'pointer';
 
     var clonedElem = elem.cloneNode(true);
-    clonedElem.style.maxHeight = '100vh';
+    clonedElem.style.maxHeight = '100%';
+    clonedElem.style.maxWidth = '100%';
     clonedElem.onclick = function (e) {
       e.stopPropagation();
     }
@@ -151,18 +163,23 @@ document.addEventListener('DOMContentLoaded', function () {
     wrapper.onmouseleave = function () {
       myFadeTimeout = setTimeout(function () {
         fadeOut(itemsElem, 200);
-      }, 1000);
+      }, 2500);
     }
     wrapper.append(clonedElem);
     swipeWrapElem.append(wrapper);
 
-    elem.addEventListener('click', function (e) {
+    elem.addEventListener('click', async function (e) {
       MicroModal.show('modal');
       if (mySwipe) {
         mySwipe.kill();
         mySwipe = null;
       }
 
+      var imgSrc = e.target.getAttribute('data-src') || e.target.getAttribute('src');
+      var img = await imageLoad(imgSrc);
+      clonedElem.style.width = img.width + 'px';
+      clonedElem.style.height = img.height + 'px';
+      
       // swipe initialize
       mySwipe = new Swipe(mySwipeElem, {
         startSlide: idx,
@@ -171,9 +188,15 @@ document.addEventListener('DOMContentLoaded', function () {
         continuous: false,
         disableScroll: true,
         stopPropagation: true,
-        callback: function (index, element) {
+        callback: async function (index, element) {
-          // caption
+          // original image size
           var imgElem = element.querySelector('img');
+          var imgSrc = imgElem.getAttribute('data-src') || imgElem.getAttribute('src');
+          var img = await imageLoad(imgSrc);
+          imgElem.style.width = img.width + 'px';
+          imgElem.style.height = img.height + 'px';
+
+          // caption
           if (captionElem && imgElem) {
             var caption = null;
             if (imgElem.getAttribute('data-caption')) {
@@ -188,6 +211,9 @@ document.addEventListener('DOMContentLoaded', function () {
 
             captionElem.querySelector('.modal__caption--text').innerText = caption;
             pagingElem.innerText = (index + 1) + ' / ' + imgTotalNum;
+
+            clearTimeout(myFadeTimeout);
+            fadeIn(itemsElem, 200);
           }
         },
       });
@@ -223,13 +249,13 @@ document.addEventListener('DOMContentLoaded', function () {
   });
 
   arrowLeftElem ?
-    arrowLeftElem.addEventListener('click', function () {
+    arrowLeftElem.addEventListener('click', function (e) {
       if (mySwipe) {
         mySwipe.prev();
       }
     }) : null;
   arrowRightElem ?
-    arrowRightElem.addEventListener('click', function () {
+    arrowRightElem.addEventListener('click', function (e) {
       if (mySwipe) {
         mySwipe.next();
       }