layout bug fix

#96
#99

README.ko.md

@@ -564,9 +564,9 @@ enableBio: true
 ---
 ```
 
-3. 마지막으로, 프로젝트당 한개의 md파일을 만드시면 됩니다.  
+3. 프로젝트당 한개의 md파일을 만들어 주세요.
 
-`root/content/showcase/hugo/my-awesome-project.md`.
+`root/content/showcase/hugo/my-awesome-project.md`
 
 ```yaml
 ---
@@ -581,6 +581,18 @@ thumb: feature3/css3.png # relative path in static/images
 ---
 ```
 
+4. 마지막으로, 메뉴를 등록해주세요.
+
+`root/config/_default/menus.en.toml`
+
+```toml
+[[main]]
+  identifier = "showcase"
+  name = "Showcase"
+  url = "showcase"
+  weight = 7
+```
+
 ## Multi Language
 
 Zzo theme의 기본 언어는 영어입니다. 한국어로 바꾸시려면 다음과 같이 해주세요.

assets/sass/components/_summary.scss

@@ -5,7 +5,7 @@
     a {
       font-family: $title-font;
       font-weight: 700;
-      word-break:break-all;
+      word-break: break-word;
 
       @include themify($themes) {
           color: themed('title-color');
@@ -86,7 +86,7 @@
     a {
       font-family: $title-font;
       font-weight: 700;
-      word-break:break-all;
+      word-break:break-word;
 
       @include themify($themes) {
           color: themed('title-color');
@@ -118,7 +118,6 @@
     @include flexbox();
     @include flex-direction(column);
     @include justify-content(flex-start);
-    padding-left: 1rem;
   }
 
   &__text {
@@ -131,6 +130,7 @@
     width: 100%;
     height: 100%;
     object-fit: contain;
+
     @include animation('slide-in-left .2s .6s 1 ease-in both');
         
     &-wrapper {
@@ -138,11 +138,17 @@
       min-width: 130px;
       overflow: hidden;
       border-radius: 0.25rem;
+      
+      @include transition(all, 0.25s, ease-in);
       @include align-self(center);
       @include on-event {
         @include box-shadow(1px, 1px, 3px, 0px, rgba(0, 0, 0, 0.25));
         background-color: rgba(125, 125, 125, 0.1);
       }
+      @media only screen and (max-width: 769px) {
+        max-width: 90px;
+        min-width: 90px;
+      }
     }
   }
 

assets/sass/components/_toc.scss

@@ -8,7 +8,7 @@
   z-index: z('toc');
 
   @include no-select;
-  @include animation('slide-in-down-little .2s .6s 1 ease-in both');
+  @include animation('slide-in-down-little .2s .3s 1 ease-in both');
   
   #TableOfContents {
     position: relative;

assets/sass/pages/_list.scss

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

layouts/_default/list.html

@@ -49,11 +49,13 @@
             listMainElem.classList.remove(gridBig);
             listMainElem.classList.add(gridFull);
             listSideElem.classList.remove(gridSmall);
+            listSideElem.classList.add('hide');
         },
         unmatch: function () {
             listMainElem.classList.remove(gridFull);
             listMainElem.classList.add(gridBig);
             listSideElem.classList.add(gridSmall);
+            listSideElem.classList.remove('hide');
 
             document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
             document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');

layouts/_default/single.html

@@ -3,7 +3,7 @@
 {{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
 <script src="{{ $enquire.RelPermalink }}"></script>
 
-<main class="{{ if or ($.Param "enableToc") ($.Param "toc") }}{{ if $.Param "hideToc" }}main{{ else }}main-main{{ end }}{{ else }}main{{ end }}">
+<main class="single__main {{ if or ($.Param "enableToc") ($.Param "toc") }}{{ if $.Param "hideToc" }}main{{ else }}main-main{{ end }}{{ else }}main{{ end }}">
   {{ if eq .Site.Params.enableBreadcrumb true }}
   {{ partial "body/breadcrumb" . }}
   {{ end }}
@@ -25,33 +25,42 @@
     {{ partial "body/photoswipe" . }}
 
     <div class="hide">
-    {{ partial "search/site-search" . }}
+      {{ partial "search/site-search" . }}
     </div>
   </div>
 </main>
 
-{{ if $.Param "enableSidebar" }}
+{{ if or ($.Param "enableToc") ($.Param "toc") }}
-<aside class="{{ if or ($.Param "enableToc") ($.Param "toc") }}main-side{{ end }}">
+<aside class="single__side {{ if or ($.Param "enableToc") ($.Param "toc") }}main-side{{ end }}">
   {{ partial "sidebar/sidebar-single" . }}
 </aside>
 {{ end }}
 <script>
+  {{ $enableToc:= $.Param "enableToc" }}
+  {{ $toc:= $.Param "toc" }}
+  var enableToc = JSON.parse({{ $enableToc | jsonify }});
+  var toc = JSON.parse({{ $toc | jsonify }});
+  
+  var singleMainElem = document.querySelector('.single__main');
+  var singleSideElem = document.querySelector('.single__side');
+
   enquire.register("screen and (max-width: 769px)", {
     match: function () {
-      if (document.getElementsByTagName('main')[0]) {
+      if (enableToc || toc) {
-        document.getElementsByTagName('main')[0].className = "main";
+        singleMainElem.classList.remove('main-main');
-      }
+        singleMainElem.classList.add('main');
-      if (document.getElementsByTagName('aside')[0]) {
+        singleSideElem.classList.remove('main-side');
-        document.getElementsByTagName('aside')[0].className = "hide";
+        singleSideElem.classList.add('hide');
       }
     },
     unmatch: function () {
-      if (document.getElementsByTagName('main')[0]) {
+      if (enableToc || toc) {
-        document.getElementsByTagName('main')[0].className = "main-main";
+        singleMainElem.classList.remove('main');
-      }
+        singleMainElem.classList.add('main-main');
-      if (document.getElementsByTagName('aside')[0]) {
+        singleSideElem.classList.remove('hide');
-        document.getElementsByTagName('aside')[0].className = "main-side";
+        singleSideElem.classList.add('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

@@ -49,11 +49,13 @@
       listMainElem.classList.remove(gridBig);
       listMainElem.classList.add(gridFull);
       listSideElem.classList.remove(gridSmall);
+      listSideElem.classList.add('hide');
     },
     unmatch: function () {
       listMainElem.classList.remove(gridFull);
       listMainElem.classList.add(gridBig);
       listSideElem.classList.add(gridSmall);
+      listSideElem.classList.remove('hide');
       
       document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
       document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');

layouts/index.html

@@ -47,11 +47,13 @@
             listMainElem.classList.remove(gridBig);
             listMainElem.classList.add(gridFull);
             listSideElem.classList.remove(gridSmall);
+            listSideElem.classList.add('hide');
         },
         unmatch: function () {
             listMainElem.classList.remove(gridFull);
             listMainElem.classList.add(gridBig);
             listSideElem.classList.add(gridSmall);
+            listSideElem.classList.remove('hide');
 
             if (document.getElementsByClassName('navbar__burger')[0]) {
                 document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');

layouts/showcase/list.html

@@ -21,6 +21,12 @@
       {{ partial "showcase/show-section" . }}
     {{ end }}
   </section>
+  
   {{ partial "script/showcase-script" . }}
+  {{ if not .Params.enableBio }}
+    <div class="hide">
+      {{ partial "search/site-search" . }}
+    </div>
+  {{ end }}
 </main>
 {{ end }}