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

Bio component position param(sidebarPosition), 

#92
Bio component position param(sidebarPosition).
Some bug fixed.
This commit is contained in:
zzossig 2020-01-21 01:20:43 +09:00
parent 0ef035b890
commit edcb6808fe
25 changed files with 212 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
README.ko.md
View File

@ -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
---

61
README.md
View File

@ -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.
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
---
```

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

@ -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;

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

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

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

@ -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 {

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

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

9
assets/sass/layout/_grid.scss
View File

@ -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

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

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

2
assets/sass/main.scss
View File

@ -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 }};

1
assets/sass/pages/_about.scss
View File

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

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

@ -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 {

27
assets/sass/pages/_showcase.scss
View File

@ -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%;
}
}
}

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

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

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

@ -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-active-color: #2f2f2f,
search-border-outline-color: rgba(66, 66, 66, 0.45),
search-border-active-color: #424242,
search-content-color: inherit,
search-background-color: #212121,
search-content-background-color: lighten(#403E41, 5%),

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

@ -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-outline-color: rgba(240, 100, 49, 0.25),
search-border-color: #423523,
search-border-outline-color: rgba(110, 88, 59, 0.45),
search-border-active-color: #5e452b,
search-content-color: #d3af86,
search-background-color: #362712,

1
exampleSite/config/_default/params.toml
View File

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

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

File diff suppressed because one or more lines are too long

52
layouts/_default/list.html
View File

@ -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 }}">
{{ partial "body/breadcrumb" . }}
<article class="list">
<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" . }}
<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" . }}
</div>
{{ partial "pagination/pagination" . }}
{{ if $.Param "enableSidebar" }}
<aside class="list__sidebar {{ if eq .Site.Params.sidebarPosition "left" }}l{{ else }}r{{ end }}">
{{ partial "sidebar/sidebar-list" . }}
</aside>
{{ end }}
</main>
{{ if $.Param "enableSidebar" }}
<aside class="main-side">
{{ partial "sidebar/sidebar-list" . }}
</aside>
{{ end }}
<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]) {
document.getElementsByTagName('main')[0].className = "main";
}
if (document.getElementsByTagName('aside')[0]) {
document.getElementsByTagName('aside')[0].className = "hide";
}
listMainElem.classList.remove(gridBig);
listMainElem.classList.add(gridFull);
listSideElem.classList.remove(gridSmall);
},
unmatch: function () {
if (document.getElementsByTagName('main')[0]) {
document.getElementsByTagName('main')[0].className = "main-main";
}
if (document.getElementsByTagName('aside')[0]) {
document.getElementsByTagName('aside')[0].className = "main-side";
}
listMainElem.classList.remove(gridFull);
listMainElem.classList.add(gridBig);
listSideElem.classList.add(gridSmall);
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');

56
layouts/_default/taxonomy.html
View File

@ -3,11 +3,11 @@
{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
<script src="{{ $enquire.RelPermalink }}"></script>
<main class="main-main">
{{ partial "body/breadcrumb" . }}
<article class="list">
<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" . }}
<header class="list__header">
<h5 class="list__header--title capitalize h5">{{.Title}}</h5>
<h5 class="list__header--title capitalize h5">{{ .Title }}</h5>
</header>
<div class="list__header--desc p2">
@ -16,33 +16,45 @@
<div class="summary__container">
{{ range .Paginator.Pages }}
{{ .Render "summary" }}
{{ .Render "summary" }}
{{ end }}
</div>
</article>
{{ partial "pagination/pagination" . }}
</div>
{{ partial "pagination/pagination" . }}
{{ if $.Param "enableSidebar" }}
<aside class="list__sidebar {{ if eq .Site.Params.sidebarPosition "left" }}l{{ else }}r{{ end }}">
{{ partial "sidebar/sidebar-list" . }}
</aside>
{{ end }}
</main>
<aside class="main-side">
{{ partial "sidebar/sidebar-list" . }}
</aside>
<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]) {
document.getElementsByTagName('main')[0].className = "main";
}
if (document.getElementsByTagName('aside')[0]) {
document.getElementsByTagName('aside')[0].className = "hide";
}
listMainElem.classList.remove(gridBig);
listMainElem.classList.add(gridFull);
listSideElem.classList.remove(gridSmall);
},
unmatch: function () {
if (document.getElementsByTagName('main')[0]) {
document.getElementsByTagName('main')[0].className = "main-main";
}
if (document.getElementsByTagName('aside')[0]) {
document.getElementsByTagName('aside')[0].className = "main-side";
}
listMainElem.classList.remove(gridFull);
listMainElem.classList.add(gridBig);
listSideElem.classList.add(gridSmall);
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');

75
layouts/index.html
View File

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

35
layouts/partials/script/showcase-script.html
View File

@ -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.add('lmr');
sectionElem.classList.remove(gridBig);
sectionElem.classList.add(gridFull);
}
if (bioMobileElem) {
bioMobileElem.classList.remove('hide');
}
} else {
if (sectionElem) {
sectionElem.classList.remove('mr');
sectionElem.classList.remove('lmr');
sectionElem.classList.add('lmr');
sectionElem.classList.remove(gridBig);
sectionElem.classList.remove(gridFull);
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.add('mr');
sectionElem.classList.remove(gridFull);
sectionElem.classList.add(gridBig);
}
if (bioMobileElem) {
bioMobileElem.classList.add('hide');
}
} else {
sectionElem.classList.remove('mr');
sectionElem.classList.remove('lmr');
sectionElem.classList.add('lmr');
sectionElem.classList.remove(gridBig);
sectionElem.classList.remove(gridFull);
sectionElem.classList.add(gridFull);
}
},
setup: function () { },

5
layouts/partials/showcase/show-pinned.html
View File

@ -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>

1
layouts/partials/showcase/show-section.html
View File

@ -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>

15
layouts/partials/summary/classic.html
View File

@ -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>

8
layouts/showcase/list.html
View File

@ -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 }}