talks page added, social icons wrap

README.ko.md

@@ -233,6 +233,7 @@ summaryShape = "classic" # card, classic, compact
 archiveGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
 archivePaginate = 13 # items per page
 paginateWindow = 1 # setting it to 1 gives 7 buttons, 2 gives 9, etc. If set 1: [1 ... 4 5 6 ... 356] [1 2 3 4 5 ... 356] etc
+talksGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
 
 # whoami: usage - home page sidebar, single page bottom of post. all values can be empty
 myname = "zzossig"
@@ -491,6 +492,61 @@ This is contact page.
   weight = 6
 ```
 
+## Talks Page
+
+Talks 페이지는 아카이브 페이지와 유사한 UI의 페이지입니다. 비디오, 피티 등등의 링크를 모아서 보여주는 용도로 씁니다. Talks 페이지를 추가하려면 아래의 순서대로 따라해주세요.
+
+1. 파일을 root/content/talks/_index.md. 경로에 다음과 같이 만듭니다.
+
+```yaml
+---
+title: "Talks"
+date: 2019-12-30T11:14:14+09:00
+description: Talks Page
+---
+```
+
+2. 또 다른 파일을 만들어 줍니다. 이곳에 링크 값을 넣을 겁니다. 
+
+root/content/talks/myLinks.md
+
+```yaml
+---
+title: "My Awesome links"
+date: 2019-12-31T00:04:50+09:00
+description:
+tags:
+-
+series:
+-
+categories:
+-
+links:
+  - link: "https://google.com"
+    title: "Video Link Title"
+    type: "video"
+  - link: "https://naver.com"
+    title: "PPT Link Title"
+    type: "ppt"
+  - link: "https://yahoo.com"
+    title: "Event Link Title"
+    type: "event"
+---
+
+3. 마지막으로 메뉴만 다음 과 같이 만들어 주면 됩니다. 
+
+root/config/_default/menus.en.toml file
+
+```toml
+[[main]]
+  identifier = "talks"
+  name = "talks"
+  url = "talks"
+  weight = 6
+```
+
+And we are good to go.
+
 ## Multi Language
 
 Zzo theme의 기본 언어는 영어입니다. 한국어로 바꾸시려면 다음과 같이 해주세요.

README.md

@@ -18,6 +18,7 @@ Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(alw
 * [Layout](#layout)
 * [Gallery](#gallery)
 * [Contact Page](#contact-page)
+* [Talks Page](#talks-page)
 * [Multi Language](#multi-language)
 * [Customizing](#customizing)
 * [External libraries](#external-library)
@@ -38,6 +39,7 @@ Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(alw
 * Search with Fuse
 * Gallery with Masonry, Photoswipe
 * Fast code highlighting
+* Talks page for external links
 
 ## Minimum Hugo version
 
@@ -225,6 +227,7 @@ summaryShape = "classic" # card, classic, compact
 archiveGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
 archivePaginate = 13 # items per page
 paginateWindow = 1 # setting it to 1 gives 7 buttons, 2 gives 9, etc. If set 1: [1 ... 4 5 6 ... 356] [1 2 3 4 5 ... 356] etc
+talksGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
 
 # whoami: usage - home page sidebar, single page bottom of post. all values can be empty
 myname = "zzossig"
@@ -483,6 +486,57 @@ This is contact page.
   weight = 6
 ```
 
+## Talks Page
+
+Talks page is a listing page of links(video, ppt, event, ...). UI is similar to the archive page. Follow the below steps to make it.
+
+1. Make a file at root/content/talks/_index.md.
+
+```yaml
+---
+title: "Talks"
+date: 2019-12-30T11:14:14+09:00
+description: Talks Page
+---
+```
+
+2. Next, make some files under the `talks` folder you have created in step 1.(root/content/talks/myLinks.md). If you want to make other links block, then make another file under the `talks` folder.
+
+```yaml
+---
+title: "My Awesome links"
+date: 2019-12-31T00:04:50+09:00
+description:
+tags:
+-
+series:
+-
+categories:
+-
+links:
+  - link: "https://google.com"
+    title: "Video Link Title"
+    type: "video"
+  - link: "https://naver.com"
+    title: "PPT Link Title"
+    type: "ppt"
+  - link: "https://yahoo.com"
+    title: "Event Link Title"
+    type: "event"
+---
+
+3. Finally, make a menu at your root/config/_default/menus.en.toml file
+
+```toml
+[[main]]
+  identifier = "talks"
+  name = "talks"
+  url = "talks"
+  weight = 6
+```
+
+And we are good to go.
+
 ## Multi Language
 
 The default language of this theme is English. If you want to use another language, follow these steps

archetypes/about.md

@@ -3,10 +3,4 @@ title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
 description: 
 type: about
-tags:
--
-series:
--
-categories:
--
 ---

archetypes/archive.md

@@ -1,12 +1,6 @@
 ---
 title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
-description: 
 type: archive
-tags:
+description: 
--
-series:
--
-categories:
--
 ---

archetypes/talk.md

@@ -0,0 +1,15 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+description:
+tags:
+-
+series:
+-
+categories:
+-
+links:
+  - link: ""
+    title: ""
+    type: ""
+---

assets/sass/abstracts/_mixins.scss

@@ -101,10 +101,10 @@
 }
 
 @mixin truncate($truncation-boundary) {
-  max-width: $truncation-boundary;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  width: $truncation-boundary;
 }
 
 @mixin box-shadow($top, $left, $blur, $size, $color, $inset: false) {

assets/sass/components/_bio.scss

@@ -65,15 +65,16 @@
     margin-top: 0.5rem;
     
     @include flexbox();
-    a {      
+    @include flex-wrap(wrap);
+    a {
       text-decoration: none !important;
-      width: 100%;
       padding: 0.5rem;
       border-radius: 0.125rem;
       
-      @include flexbox();    
+      @include flexbox();
+      @include flex-grow(1);
       @include align-items(center);
-      @include justify-content(space-around);
+      @include justify-content(flex-start);
       @include themify($themes) {
         color: themed('social-icon-color');
         @include on-event {

assets/sass/main.scss

@@ -75,4 +75,5 @@ $content-font: {{ .Site.Data.font.content_font }};
 @import 'pages/list';
 @import 'pages/single';
 @import 'pages/terms';
-@import 'pages/contact';
+@import 'pages/contact';
+@import 'pages/talk';

assets/sass/pages/_archive.scss

@@ -88,6 +88,7 @@
     font-size: 0.8rem;
     width: 50%;
     height: 20px;
+    line-height: 20px;
     text-align: center;
 
     @include truncate(50px);
@@ -107,6 +108,7 @@
     font-size: 0.8rem;
     width: 50%;
     height: 20px;
+    line-height: 20px;
     text-align: center;        
 
     @include truncate(50px);

assets/sass/pages/_talk.scss

@@ -0,0 +1,84 @@
+.talk {
+  &__li {
+    margin: 0.75rem 0 0.75rem 4rem;
+    z-index: 0;    
+
+    @include transition(margin-left, 0.1s, ease);
+    @include flexbox();
+    @include align-items(flex-start);
+
+    @media only screen and (max-width: 769px) {
+      margin-left: 0;
+      position: relative;
+    }
+  }
+
+  &__date {
+    border-radius: 0.25rem;
+    min-width: 100px;
+    max-width: 100px;
+    margin-top: 0.25rem;
+    font-size: 16px;
+    height: 26px;
+    line-height: 26px;
+    text-align: center;
+    
+    @include animation('slide-in-left .2s .5s 1 ease both');
+    @include themify($themes) {
+      color: themed('archive-meta-color');
+      background-color: themed('archive-type-background-color');
+    }
+  }
+
+  &__type {
+    border-radius: 0.25rem;
+    min-width: 100px;
+    max-width: 100px;
+    margin-top: 0.25rem;
+    font-size: 14px;
+    height: 20px;
+    line-height: 20px;
+    text-align: center;
+
+    @include flexbox();
+    @include align-items(center);
+    @include justify-content(center);
+    @include themify($themes) {
+      color: themed('archive-type-color');
+      background-color: themed('archive-type-background-color');
+    }
+  }
+
+  &__title {
+    @include truncate($grid-max-width);
+
+    &--margin {
+      margin-right: 0.5rem;  
+      margin-left: 0.75rem;
+    }
+  }
+
+  &__links {
+    @include flexbox();
+    @include flex-direction(column);
+
+    li {
+      padding-left: 0.5em;
+      margin: 0.25rem 0 0.25rem -3.75rem;
+
+      @include flexbox();
+      @include align-items(center);
+      @include truncate(650px);
+      @media only screen and (max-width: 769px) {
+        margin-left: -6.8rem;
+        @include truncate(350px);
+      }
+    }
+
+    &--item {
+      padding-left: 0.5rem;
+      margin: 0.25rem 0;
+      @include flexbox();
+    }
+  }
+}

i18n/en.toml

@@ -19,6 +19,9 @@ other = "Series"
 [archive-dateformat]
 other = "Jan 2"
 
+[talks-dateformat]
+other = "Jan 2"
+
 [single-dateformat]
 other = "Jan 2, 2006"
 

i18n/ko.toml

@@ -19,6 +19,9 @@ other = "시리즈"
 [archive-dateformat]
 other = "01-02"
 
+[talks-dateformat]
+other = "01월 02일"
+
 [single-dateformat]
 other = "2006년 01월 02일"
 

i18n/zh.toml

@@ -19,6 +19,9 @@ other = "系列"
 [archive-dateformat]
 other = "01-02"
 
+[talks-dateformat]
+other = "01月02日"
+
 [single-dateformat]
 other = "2006年01月02日"
 

layouts/archive/list.html

@@ -10,7 +10,8 @@
 </span>
 <main class="main archive">
   <div class="archive__container">
-    {{ $paginator := .Paginate (.Site.RegularPages.GroupByDate (.Site.Params.archiveGroupByDate | default "2006")) .Site.Params.archivePaginate }}
+    {{ $pages := (where .Site.RegularPages "Section" "!=" "talks") }}
+    {{ $paginator := .Paginate ($pages.GroupByDate (.Site.Params.talksGroupByDate | default "2006")) .Site.Params.archivePaginate }}
     
     {{ range ($paginator).PageGroups }}
     <span class="archive__key">{{ .Key }}</span>

layouts/index.html

@@ -13,7 +13,7 @@
     </article>
 
     <div class="summary__container">
-        {{ $paginator := .Paginate (where (where (where .Site.RegularPages "Type" "!=" "contact") "Type" "!=" "archive") "Type" "!=" "about") }}
+        {{ $paginator := .Paginate (where (where (where (where .Site.RegularPages "Type" "!=" "talks") "Type" "!=" "contact") "Type" "!=" "archive") "Type" "!=" "about") }}
         {{ range $paginator.Pages }}
         {{ .Render "summary" }}
         {{ end }}

layouts/talks/list.html

@@ -0,0 +1,51 @@
+{{ define "main" }}
+<header class="header">
+  <h3 class="h3 terms__title">
+    {{ .Title }}
+  </h3>
+  <div>
+    {{ .Content }}
+  </div>
+</header>
+</span>
+<main class="main archive">
+  <div class="archive__container">
+    {{ $pages := (where .Site.RegularPages "Section" "talks") }}
+    {{ $paginator := .Paginate ($pages.GroupByDate (.Site.Params.archiveGroupByDate | default "2006")) .Site.Params.archivePaginate }}
+
+    {{ range ($paginator).PageGroups }}
+    <span class="archive__key">{{ .Key }}</span>
+    <ul class="archive__ul">
+      {{ range .Pages }}
+      <li class="talk__li">
+        <span class="talk__date">
+          {{ .Date.Format (i18n "talks-dateformat") }}
+        </span>
+        <ul>
+          <li>
+            <a href="{{ .Permalink }}" class="talk__title talk__title--margin">{{ .Title }}</a>
+          </li>
+          <li class="talk__links">
+            <ul>
+              {{ range .Params.links }}
+                <li class="talk__links--li">           
+                  <span class="talk__type">{{ .type | default "talks" }}</span>
+                  <a href="{{ .link | safeURL }}" title="{{ .link }}" target="_blank" rel="noreferrer" class="talk__title talk__title--margin p2">{{ .title | default .link }}</a>
+                </li>
+              {{ end }}
+            </ul>
+          </li>
+        </ul>
+      </li>
+      {{ end }}
+    </ul>
+    {{ end }}
+  </div>
+  <div class="grow"></div>
+  {{ partial "pagination/pagination" . }}
+  <div class="hide">
+    {{ partial "search/site-search" . }}
+  </div>
+  {{ partial "script/archive-script" . }}
+</main>
+{{ end }}