Bio component position param(sidebarPosition),

#92
Bio component position param(sidebarPosition).
Some bug fixed.

README.ko.md

@@ -16,7 +16,6 @@ Zzo theme을 이용할 시 가장 매력적인 포인트 한가지는, 한글로
 * [업데이트](#updating)
 * [예제 사이트 돌리기](#run-example-site)
 * [설정](#configuration)
-* [레이아웃](#layout)
 * [갤러리](#gallery)
 * [컨택 페이지](#contact-page)
 * [토크 페이지](#talks-page)
@@ -273,6 +272,7 @@ enableToc = true # single page table of contents, you can replace this param to
 hideToc = false # Hide or Show toc
 enableTocSwitch = true # single page table of contents visibility switch
 itemsPerCategory = 5 # maximum number of posts shown in the sidebar.
+sidebarPosition = "right" # bio, profile component layout position
 
 # footer
 showPoweredBy = true # show footer text: Powered by Hugo and Zzo theme
@@ -373,47 +373,6 @@ commento = false
   copyrightLinkText = ""
 ```
 
-## Layout
-
-### CSS grid for layout
-
-이 프로젝트의 레이아웃은 css의 grid란 걸 사용해서 잡았습니다. 혹시나 커스터마이징 하실 때 알아야 할 수도 있을 것 같아서 알려드립니다.
-
-### grid structure
-
-|  left 	|  right 	|
-|---	|---	|
-|  1	|  2	|
-|  3 	|  4	|
-|  5 	|  6	|
-|  7 	|  8	|
-
-* left, right column width ratio => 5 : 2
-* 1 => .navbar-main
-* 2 => .navbar-side
-* 1 + 2 => .navbar
-* 3 => .header-main
-* 4 => .header-side
-* 3 + 4 => .header
-* 5 => .main-main
-* 6 => .main-side
-* 5 + 6 => .main
-* 7 => .footer-main
-* 8 => .footer-side
-* 7 + 8 => .footer
-
-### grid structure example applied in home page
-
-```html
-<div class="navbar"></div>
-<div class="header"></div>
-<div>
-  <div class="main-main"></div>
-  <div class="main-side"></div>
-</div>
-<div class="footer></div>
-```
-
 ## Gallery
 
 갤러리는 두가지 모두가 존재해요. 하나씩 올리거나 한번에 올리거나.
@@ -593,21 +552,21 @@ enableBio: true # Set to false if you want to hide the bio component.
 ---
 ```
 
-2. 다음 경로에 폴더와 파일을 만듭니다. `root/content/showcase/javascript/_index.md` file. (javascript가 섹션 폴더가 되며 자바스크립트 쇼케이스를 모아두는 폴더가 됩니다.)
+2. 다음 경로에 카테고리 폴더와 파일을 만듭니다. `root/content/showcase/hugo/_index.md` file. (저의 경우, hugo가 카테고리 폴더입니다.)
 
 ```yaml
 ---
-title: "Javascript" # category name
+title: "Hugo" # section name
 date: 2020-01-19T21:04:11+09:00
 description: Hugo theme collection # For SEO
-category: theme # meta info appeared on a card bottom side.
+category: theme # meta info appeared on a card bottom side. category in category
 enableBio: true
 ---
 ```
 
 3. 마지막으로, 프로젝트당 한개의 md파일을 만드시면 됩니다.  
 
-`root/content/showcase/javascript/my-awesome-project.md`.
+`root/content/showcase/hugo/my-awesome-project.md`.
 
 ```yaml
 ---

README.md

@@ -15,7 +15,6 @@ Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(alw
 * [Updating](#updating)
 * [Run example site](#run-example-site)
 * [Configuration](#configuration)
-* [Layout](#layout)
 * [Gallery](#gallery)
 * [Contact Page](#contact-page)
 * [Talks Page](#talks-page)
@@ -266,6 +265,7 @@ enableToc = true # single page table of contents, you can replace this param to
 hideToc = false # Hide or Show toc
 enableTocSwitch = true # single page table of contents visibility switch
 itemsPerCategory = 5 # maximum number of posts shown in the sidebar.
+sidebarPosition = "right" # bio, profile component layout position
 
 # footer
 showPoweredBy = true # show footer text: Powered by Hugo and Zzo theme
@@ -366,49 +366,6 @@ commento = false
   copyrightLinkText = ""
 ```
 
-## Layout
-
-### CSS grid for layout
-
-Modern CSS grid is the easiest and cleanest way to layout your pages.
-
-The CSS grid layout are in `assets/sass/layout/_grid.scss`. A lot can be done by just reordering "grid-template-rows". 
-
-### grid structure
-
-|  left 	|  right 	|
-|---	|---	|
-|  1	|  2	|
-|  3 	|  4	|
-|  5 	|  6	|
-|  7 	|  8	|
-
-* left, right column width ratio => 5 : 2
-* 1 => .navbar-main
-* 2 => .navbar-side
-* 1 + 2 => .navbar
-* 3 => .header-main
-* 4 => .header-side
-* 3 + 4 => .header
-* 5 => .main-main
-* 6 => .main-side
-* 5 + 6 => .main
-* 7 => .footer-main
-* 8 => .footer-side
-* 7 + 8 => .footer
-
-### grid structure example applied in home page
-
-```html
-<div class="navbar"></div>
-<div class="header"></div>
-<div>
-  <div class="main-main"></div>
-  <div class="main-side"></div>
-</div>
-<div class="footer></div>
-```
-
 ## Gallery
 
 There are two ways to make gallery. You can specify **mode** at front-matter.
@@ -586,31 +543,31 @@ enableBio: true # Set to false if you want to hide the bio component.
 ---
 ```
 
-2. Make a file at `root/content/showcase/javascript/_index.md` file. (`javascript` will be a section folder that contains javascript showcases)
+2. Make a category folder and a file at `root/content/showcase/hugo/_index.md`. (In my case, hugo is a category)
 
 ```yaml
 ---
-title: "Javascript" # section name, appear on menu bar
+title: "Hugo" # category name
 date: 2020-01-19T21:04:11+09:00
 description: Hugo theme collection # For SEO
-category: theme # meta info appear on a card bottom side.
+category: theme # meta info appeared on a card bottom side. category in category
 enableBio: true
 ---
 ```
 
 3. Finally, Make a file per project.
 
-`root/content/showcase/javascript/my-awesome-project.md`.
+`root/content/showcase/hugo/my-awesome-project.md`.
 
 ```yaml
 ---
-title: "My Awesome Project" # apperar on a card component
+title: "My Awesome Project" # apperared on a card component
 date: 2020-01-19T21:13:42+09:00
-description: Hello world! This is my awesome project! # apperar on a card component
+description: Hello world! This is my awesome project! # apperared on a card component
 weight: 1 # card ordering
 link: https://github.com/zzossig/hugo-theme-zzo
 repo: https://github.com/zzossig/hugo-theme-zzo
-pinned: true # apprear on a overview page.
+pinned: true # appreared on a overview page.
 thumb: feature3/css3.png # relative path in static/images
 ---
 ```

assets/sass/abstracts/_variables.scss

@@ -3,7 +3,7 @@
 $text-font-stack: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
 $code-font-stack: Consolas, Monaco, Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", "Lucida Console", "Lucida Sans Typewriter", "Liberation Mono", "Nimbus Mono L", Monaco, Courier, monospace !default;
 
-$z-indexes: ("modal", "navbar", "dropdown", "header", "gtt", "clipboard", "grid", "search-btn", "search", "content", "footer", "taxo", "toc", "gallery-mask");
+$z-indexes: ("modal", "navbar", "dropdown", "header", "gtt", "clipboard", "grid", "search-btn", "search", "content", "footer", "taxo", "toc", "gallery-mask", "card-outter", "card-inner");
 
 $breakpoints: (
   'xs': 0,
@@ -12,3 +12,5 @@ $breakpoints: (
   'lg': 1280px,
   'xl': 1960px,
 );
+
+$sidebar-width: 250px;

assets/sass/components/_bio.scss

@@ -56,7 +56,7 @@
 
     a {
       padding-right: 1rem;
-      @include truncate(calcSideWidth());
+      @include truncate($sidebar-width);
     }
   }
 

assets/sass/components/_summary.scss

@@ -1,6 +1,4 @@
 .summary-card {
-  margin: 0 0.5rem;
-  padding: 0 0.5rem;
   @include animation('slide-in-down .2s .3s 1 ease-in both');
 
   .title {
@@ -80,7 +78,6 @@
 }
 
 .summary-classic {
-  padding: 0 1rem;
   @include animation('slide-in-down .2s .3s 1 ease-in both');
 
   .title {
@@ -108,8 +105,13 @@
 
   &__flex-box {
     @include flexbox();
+    
     margin-top: 1rem;
     margin-bottom: 1rem;
+
+    &[data-position="left"] {
+      @include justify-content(space-between);
+    }
   }
 
   &__content {

assets/sass/components/_toc.scss

@@ -1,6 +1,6 @@
 .toc {
   width: 100%;
-  max-width: calcSideWidth();
+  max-width: $sidebar-width;
   position: fixed;
   top: 7rem;
   font-size: 0.85rem;

assets/sass/layout/_grid.scss

@@ -8,7 +8,7 @@ $grid_column_gap: $grid_column_gap_width + $grid_column_gap_unit;
     width: 100%;
     min-height: 100vh;
     max-width: $grid_max;
-    grid-template-columns: minmax(350px, $grid_main_main) minmax(calcSideWidth(), $grid_main_side);
+    grid-template-columns: minmax(350px, $grid_main_main) minmax(250px, $grid_main_side);
     grid-template-rows: $grid_navbar_height auto 1fr auto;
     grid-column-gap: $grid_column_gap;
     grid-row-gap: $grid_row_gap;
@@ -46,6 +46,7 @@ $grid_column_gap: $grid_column_gap_width + $grid_column_gap_unit;
 }
 
 .main {
+    padding: 0 1rem;
     grid-area: 3 / 1 / 4 / 3;
 }
 
@@ -81,6 +82,12 @@ $grid_column_gap: $grid_column_gap_width + $grid_column_gap_unit;
     grid-template-rows: 1fr;
     grid-column-gap: 16px;
     grid-row-gap: 0px;
+
+    @if $sidebar_position == "left" {
+        grid-template-columns: 250px 1fr 1fr;
+    } @else {
+        grid-template-columns: 1fr 1fr 250px;
+    }
 }
 
 .l { grid-area: 1 / 1 / 2 / 2; } // left

assets/sass/layout/_sidebar.scss

@@ -1,6 +1,5 @@
 .sidebar {
   margin-top: 1rem;
-  margin-right: 1rem;
 
   &-recent {
     padding: 0.25rem;

assets/sass/main.scss

@@ -9,6 +9,8 @@ $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 }};
 
+$sidebar_position: {{ .Site.Params.sidebarPosition }};
+
 $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 }};

assets/sass/pages/_about.scss

@@ -1,4 +1,3 @@
 .about{
-  padding: 1rem;
   overflow-wrap: break-word;
 }

assets/sass/pages/_list.scss

@@ -3,7 +3,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin: 0.5rem;
+    margin-top: 1rem;
+    margin-bottom: 1.5rem;
     font-family: $title-font;
 
     &--title {

assets/sass/pages/_showcase.scss

@@ -6,19 +6,15 @@
     position: sticky;
     top: $grid_navbar_height * 1.25;
     display: block;
-    margin-top: 2rem;
+    margin-top: 1rem;
 
     @media only screen and (max-width: 600px) {
       display: none;
     }
   }
 
-  &__section {
-    
-  }
-
   &__nav {
-    margin: 1rem 0.5rem;
+    margin: 0 0.5rem;
     padding: 0.5rem 0;
     
     @include themify($themes) {
@@ -99,7 +95,6 @@
     }
 
     &--wrapper {
-      z-index: 2;
       @include flexbox();
       @include flex-wrap(wrap);
       @include animation('slide-in-left-little .2s .25s 1 ease-in both');
@@ -122,7 +117,13 @@
       word-break: break-word;
       font-family: $title-font;
       font-size: 1rem;
+      font-weight: bold;
       margin-bottom: 0.5rem;
+      cursor: pointer;
+
+      @include themify($themes) {
+        color: themed('title-color');
+      }
     }
 
     &--desc {
@@ -171,7 +172,10 @@
       }
 
       a.type {
+        z-index: z('card-outter');
         text-decoration: none;
+        cursor: pointer;
+
         @include themify($themes) {
           @include on-event {
             color: themed('link-hover');
@@ -179,5 +183,14 @@
         }
       }
     }
+
+    &--link {
+      z-index: z('card-inner');
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
   }
 }

assets/sass/pages/_single.scss

@@ -392,6 +392,7 @@ code, pre {
 *:not(.chroma) {
   code, pre {
     @include themify($codeblock) {
+      color: themed('content-pre-color');
       background: themed('content-pre-background-color');
     }
   }

assets/sass/themes/_dark.scss

@@ -73,8 +73,8 @@ $dark: (
     search-color: #FCFCFA,
     search-icon-color: #727072,
     search-border-color: #1d1d1d,
-    search-border-outline-color: rgba(33, 33, 33, 0.6),
+    search-border-outline-color: rgba(66, 66, 66, 0.45),
-    search-border-active-color: #2f2f2f,
+    search-border-active-color: #424242,
     search-content-color: inherit,
     search-background-color: #212121,
     search-content-background-color: lighten(#403E41, 5%),

assets/sass/themes/_kimbie.scss

@@ -3,7 +3,7 @@ $kimbie: (
   footer-color: #d3af86,
   link: #DC322F,
   link-hover: #DC322F,
-  title-color: #7c5021,
+  title-color: #996329,
   meta-color: #889b4a,
   body-color: #e3b583,
   hr-color: #7f5d38,
@@ -71,8 +71,8 @@ $kimbie: (
   search-placeholder-color: #6e583b,
   search-color: #d3af86,
   search-icon-color: #6e583b,
-  search-border-color: #6e583b,
+  search-border-color: #423523,
-  search-border-outline-color: rgba(240, 100, 49, 0.25),
+  search-border-outline-color: rgba(110, 88, 59, 0.45),
   search-border-active-color: #5e452b,
   search-content-color: #d3af86,
   search-background-color: #362712,

exampleSite/config/_default/params.toml

@@ -48,6 +48,7 @@ enableToc = true
 hideToc = false
 enableTocSwitch = true
 itemsPerCategory = 5
+sidebarPosition = "right"
 
 # footer
 showPoweredBy = true

layouts/_default/list.html

@@ -3,9 +3,9 @@
 {{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
 <script src="{{ $enquire.RelPermalink }}"></script>
 
-<main class="{{ if $.Param "enableSidebar" }}main-main{{ else }}main{{ end }}">
+<main class="main inner">
+    <div class="list__main {{ if $.Param "enableSidebar" }}{{ if eq .Site.Params.sidebarPosition "left" }}mr{{ else }}lm{{ end }}{{ else }}lmr{{ end }}">
         {{ partial "body/breadcrumb" . }}
-    <article class="list">
         <header class="list__header">
             <h5 class="list__header--title capitalize h5">{{.Title}}</h5>
         </header>
@@ -20,33 +20,41 @@
                 {{ .Render "summary" }}
             {{ end }}
         </div>
-    </article>    
-
         {{ partial "pagination/pagination" . }}
-</main>
+    </div>    
 
     {{ if $.Param "enableSidebar" }}
-    <aside class="main-side">
+        <aside class="list__sidebar {{ if eq .Site.Params.sidebarPosition "left" }}l{{ else }}r{{ end }}">
             {{ partial "sidebar/sidebar-list" . }}
         </aside>
     {{ end }}
+</main>
+
 <script>
+    {{ $sidebarPosition:= .Site.Params.sidebarPosition }}
+    var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
+    var listMainElem = document.querySelector('.list__main');
+    var listSideElem = document.querySelector('.list__sidebar');
+
+    var gridSmall = 'l';
+    var gridBig = 'mr';
+    var gridFull = 'lmr'
+
+    if (sidebarPosition === "right") {
+        gridSmall = 'r';
+        gridBig = 'lm'
+    }
     enquire.register("screen and (max-width: 769px)", {
         match: function () {
-            if (document.getElementsByTagName('main')[0]) {
+            listMainElem.classList.remove(gridBig);
-                document.getElementsByTagName('main')[0].className = "main";
+            listMainElem.classList.add(gridFull);
-            }
+            listSideElem.classList.remove(gridSmall);
-            if (document.getElementsByTagName('aside')[0]) {
-                document.getElementsByTagName('aside')[0].className = "hide";
-            }
         },
         unmatch: function () {
-            if (document.getElementsByTagName('main')[0]) {
+            listMainElem.classList.remove(gridFull);
-                document.getElementsByTagName('main')[0].className = "main-main";
+            listMainElem.classList.add(gridBig);
-            }
+            listSideElem.classList.add(gridSmall);
-            if (document.getElementsByTagName('aside')[0]) {
+
-                document.getElementsByTagName('aside')[0].className = "main-side";
-            }
             document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
             document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
             document.getElementsByClassName('mobile-search')[0].classList.add('hide');

layouts/_default/taxonomy.html

@@ -3,9 +3,9 @@
 {{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
 <script src="{{ $enquire.RelPermalink }}"></script>
 
-<main class="main-main">
+<main class="main inner">
+  <div class="list__main {{ if $.Param "enableSidebar" }}{{ if eq .Site.Params.sidebarPosition "left" }}mr{{ else }}lm{{ end }}{{ else }}lmr{{ end }}">
     {{ partial "body/breadcrumb" . }}
-  <article class="list">
     <header class="list__header">
       <h5 class="list__header--title capitalize h5">{{ .Title }}</h5>
     </header>
@@ -19,30 +19,42 @@
         {{ .Render "summary" }}
       {{ end }}
     </div>
-  </article>
-
     {{ partial "pagination/pagination" . }}
-</main>
+  </div>
-<aside class="main-side">
+
+  {{ if $.Param "enableSidebar" }}
+    <aside class="list__sidebar {{ if eq .Site.Params.sidebarPosition "left" }}l{{ else }}r{{ end }}">
       {{ partial "sidebar/sidebar-list" . }}
     </aside>
+  {{ end }}
+</main>
+
 <script>
+  {{ $sidebarPosition:= .Site.Params.sidebarPosition }}
+  var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
+  var listMainElem = document.querySelector('.list__main');
+  var listSideElem = document.querySelector('.list__sidebar');
+
+  var gridSmall = 'l';
+  var gridBig = 'mr';
+  var gridFull = 'lmr'
+
+  if (sidebarPosition === "right") {
+      gridSmall = 'r';
+      gridBig = 'lm'
+  }
+
   enquire.register("screen and (max-width: 769px)", {
     match: function () {
-      if (document.getElementsByTagName('main')[0]) {
+      listMainElem.classList.remove(gridBig);
-        document.getElementsByTagName('main')[0].className = "main";
+      listMainElem.classList.add(gridFull);
-      }
+      listSideElem.classList.remove(gridSmall);
-      if (document.getElementsByTagName('aside')[0]) {
-        document.getElementsByTagName('aside')[0].className = "hide";
-      }
     },
     unmatch: function () {
-      if (document.getElementsByTagName('main')[0]) {
+      listMainElem.classList.remove(gridFull);
-        document.getElementsByTagName('main')[0].className = "main-main";
+      listMainElem.classList.add(gridBig);
-      }
+      listSideElem.classList.add(gridSmall);
-      if (document.getElementsByTagName('aside')[0]) {
+      
-        document.getElementsByTagName('aside')[0].className = "main-side";
-      }
       document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
       document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
       document.getElementsByClassName('mobile-search')[0].classList.add('hide');

layouts/index.html

@@ -5,13 +5,8 @@
 {{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
 <script src="{{ $enquire.RelPermalink }}"></script>
 
-<main class="{{ if $.Param "enableSidebar" }}main-main{{ else }}main{{ end }}">
+<main class="main inner">
-    <article class="{{ with .Section }}section-{{ . | urlize }} {{ end }}single-view">
+    <div class="list__main {{ if $.Param "enableSidebar" }}{{ if eq .Site.Params.sidebarPosition "left" }}mr{{ else }}lm{{ end }}{{ else }}lmr{{ end }}">
-        <div class="content">
-            {{ .Content }}
-        </div>
-    </article>
-
         <div class="summary__container">
             {{ $filteredPages := .Site.RegularPages }}
             {{ range .Site.Params.notAllowedTypesInHome }}
@@ -21,31 +16,43 @@
             {{ range $paginator.Pages }}
                 {{ .Render "summary" }}
             {{ end }}
-    </div>    {{ partial "pagination/pagination" . }}
+        </div>
-</main>
+
+        {{ partial "pagination/pagination" . }}
+    </div>
 
     {{ if $.Param "enableSidebar" }}
-    <aside class="main-side">
+        <aside class="list__sidebar {{ if eq .Site.Params.sidebarPosition "left" }}l{{ else }}r{{ end }}">
             {{ partial "sidebar/sidebar-home" . }}
         </aside>
     {{ end }}
+</main>
 <script>
+    {{ $sidebarPosition:= .Site.Params.sidebarPosition }}
+    var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
+    var listMainElem = document.querySelector('.list__main');
+    var listSideElem = document.querySelector('.list__sidebar');
+
+    var gridSmall = 'l';
+    var gridBig = 'mr';
+    var gridFull = 'lmr'
+
+    if (sidebarPosition === "right") {
+        gridSmall = 'r';
+        gridBig = 'lm'
+    }
+
     enquire.register("screen and (max-width: 769px)", {
         match: function () {
-            if (document.getElementsByTagName('main')[0]) {
+            listMainElem.classList.remove(gridBig);
-                document.getElementsByTagName('main')[0].className = "main";
+            listMainElem.classList.add(gridFull);
-            }
+            listSideElem.classList.remove(gridSmall);
-            if (document.getElementsByTagName('aside')[0]) {
-                document.getElementsByTagName('aside')[0].className = "hide";
-            }
         },
         unmatch: function () {
-            if (document.getElementsByTagName('main')[0]) {
+            listMainElem.classList.remove(gridFull);
-                document.getElementsByTagName('main')[0].className = "main-main";
+            listMainElem.classList.add(gridBig);
-            }
+            listSideElem.classList.add(gridSmall);
-            if (document.getElementsByTagName('aside')[0]) {
+
-                document.getElementsByTagName('aside')[0].className = "main-side";
-            }
             if (document.getElementsByClassName('navbar__burger')[0]) {
                 document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
             }

layouts/partials/script/showcase-script.html

@@ -7,50 +7,61 @@
 
 <script>
   {{ $enableBio:= .Params.enableBio }}
+  {{ $sidebarPosition:= .Site.Params.sidebarPosition }}
   var enableBio = JSON.parse({{ $enableBio | jsonify }});
+  var sidebarPosition = JSON.parse({{ $sidebarPosition | jsonify }});
 
   document.addEventListener('DOMContentLoaded', function () {
     var bioElem = document.querySelector('.showcase__bio');
     var sectionElem = document.querySelector('.showcase__section');
     var bioMobileElem = document.querySelector('.showcase__bio--mobile');
 
+    var gridSmall = 'l';
+    var gridBig = 'mr';
+    var gridFull = 'lmr'
+
+    if (sidebarPosition === "right") {
+      gridSmall = 'r';
+      gridBig = 'lm'
+    }
+
     enquire.register("screen and (max-width: 600px)", {
       match: function () {
         if (enableBio) {
           if (bioElem) {
-            bioElem.classList.remove('l');
+            bioElem.classList.remove(gridSmall);
           }
           if (sectionElem) {
-            sectionElem.classList.remove('mr');
+            sectionElem.classList.remove(gridBig);
-            sectionElem.classList.add('lmr');
+            sectionElem.classList.add(gridFull);
           }
           if (bioMobileElem) {
             bioMobileElem.classList.remove('hide');
           }
         } else {
           if (sectionElem) {
-            sectionElem.classList.remove('mr');
+            sectionElem.classList.remove(gridBig);
-            sectionElem.classList.remove('lmr');
+            sectionElem.classList.remove(gridFull);
-            sectionElem.classList.add('lmr');
+            sectionElem.classList.add(gridFull);
           }
         }
       },
       unmatch: function () {
         if (enableBio) {
           if (bioElem) {
-            bioElem.classList.add('l');
+            bioElem.classList.add(gridSmall);
           }
           if (sectionElem) {
-            sectionElem.classList.remove('lmr');
+            sectionElem.classList.remove(gridFull);
-            sectionElem.classList.add('mr');
+            sectionElem.classList.add(gridBig);
           }
           if (bioMobileElem) {
             bioMobileElem.classList.add('hide');
           }
         } else {
-          sectionElem.classList.remove('mr');
+          sectionElem.classList.remove(gridBig);
-          sectionElem.classList.remove('lmr');
+          sectionElem.classList.remove(gridFull);
-          sectionElem.classList.add('lmr');
+          sectionElem.classList.add(gridFull);
         }
       },
       setup: function () { },

layouts/partials/showcase/show-pinned.html

@@ -19,9 +19,10 @@
         {{ $category := .Params.category }}
         {{ range where .Pages "Params.pinned" true }}
           <div class="showcase__box">
-            <a href="{{ .Params.Link }}" class="showcase__box--title" target="_blank" rel="noreferrer">
+            <a href="{{ .Params.Link }}" class="showcase__box--link" target="_blank" rel="noreferrer"></a>
+            <span class="showcase__box--title">
               {{ .Title }}
-            </a>
+            </span>
             <div class="showcase__box--desc">
               {{ .Description }}
             </div>

layouts/partials/showcase/show-section.html

@@ -11,6 +11,7 @@
       {{ $category := .Params.category }}
       {{ range .Pages }}
         <div class="showcase__box">
+          <a href="{{ .Params.Link }}" class="showcase__box--link" target="_blank" rel="noreferrer"></a>
           <a href="{{ .Params.Link }}" class="showcase__box--title" target="_blank" rel="noreferrer">
             {{ .Title }}
           </a>

layouts/partials/summary/classic.html

@@ -1,13 +1,15 @@
 <article class="summary-classic">
-  <div class="summary-classic__flex-box">
+  <div class="summary-classic__flex-box" {{ if eq .Site.Params.sidebarPosition "left" }}data-position="left"{{ end }}>
     {{ $params := .Params }}
-    {{ if $params.featured_image }}
+    
+    {{ if and $params.featured_image (eq .Site.Params.sidebarPosition "right") }}
     <div class="summary-classic__image-wrapper">
       <a href="{{ .Permalink }}">
         <img data-src="{{ (print "images/" $params.featured_image) | relURL }}" alt="{{ print $params.featured_image }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-classic__image" />
       </a>
     </div>
     {{ end }}
+
     <div class="summary-classic__content">
       <header>
         <h5 class="title h5"><a href='{{ .Permalink }}'> {{ .Title }}</a> </h5>
@@ -23,6 +25,15 @@
         </div>
       </div>
     </div>
+
+    {{ if and $params.featured_image (eq .Site.Params.sidebarPosition "left") }}
+    <div class="summary-classic__image-wrapper">
+      <a href="{{ .Permalink }}">
+        <img data-src="{{ (print "images/" $params.featured_image) | relURL }}" alt="{{ print $params.featured_image }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload summary-classic__image" />
+      </a>
+    </div>
+    {{ end }}
+    
   </div>
   <hr />
 </article>

layouts/showcase/list.html

@@ -1,13 +1,14 @@
 {{ define "main" }}
 <main class="main showcase inner">
   {{ if .Params.enableBio }}
-    <aside class="l">
+    <aside class="{{ if eq .Site.Params.sidebarPosition "left" }}l{{ else }}r{{ end }}">
       <div class="showcase__bio">
+        {{ partial "search/site-search" . }}
         {{ partial "sidebar/site-bio" . }}
       </div>
     </aside>
   {{ end }}
-  <section class="showcase__section {{ if .Params.enableBio }}mr{{ else }}lmr{{ end }}">
+  <section class="showcase__section {{ if .Params.enableBio }}{{ if eq .Site.Params.sidebarPosition "left" }}mr{{ else }}lm{{ end }}{{ else }}lmr{{ end }}">
     {{ if .Params.enableBio }}
       <div class="showcase__bio--mobile hide">
         {{ partial "body/whoami" . }}
@@ -20,9 +21,6 @@
       {{ partial "showcase/show-section" . }}
     {{ end }}
   </section>
-  <div class="hide">
-    {{ partial "search/site-search" . }}
-  </div>
   {{ partial "script/showcase-script" . }}
 </main>
 {{ end }}