mirror of
https://github.com/Damillora/Yuika
synced 2024-11-24 10:07:32 +00:00
feat: upgrade shian
This commit is contained in:
parent
ec32715972
commit
1436d6a577
25
author.hbs
25
author.hbs
@ -4,10 +4,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="page-header__contents">
|
<div class="page-header__contents">
|
||||||
<div class="post-header container mx-auto main">
|
<div class="post-header container mx-auto main">
|
||||||
<p>
|
<p class="page-header__text">
|
||||||
<span class="post-header__tag-name">Author</span>
|
<span class="post-header__tag-name">Author</span>
|
||||||
</p>
|
</p>
|
||||||
<div class="post-header__tag-heading">
|
<div class="post-header__heading post-header__heading--tag">
|
||||||
{{#if profile_image}}
|
{{#if profile_image}}
|
||||||
<style>
|
<style>
|
||||||
.author-image {
|
.author-image {
|
||||||
@ -16,30 +16,33 @@
|
|||||||
background-position: center;
|
background-position: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<span class="post-header__tag-heading-color author-image"></span>
|
<span class="post-header__heading--tag-color author-image"></span>
|
||||||
{{else}}
|
{{else}}
|
||||||
<span class="post-header__tag-heading-color"></span>
|
<span class="post-header__heading--tag-color"></span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<h1>
|
<h1 class="post-header__heading--tag-text">
|
||||||
{{name}}
|
{{name}}
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<p class="page-header__text">
|
||||||
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
|
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p class="page-header__text">
|
||||||
{{#if website}}
|
{{#if website}}
|
||||||
<span class=""><a href="{{website}}" target="_blank" rel="noopener">Website</a></span>
|
<span class=""><a class="post-header__social" href="{{website}}" target="_blank"
|
||||||
|
rel="noopener">Website</a></span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{#if twitter}}
|
{{#if twitter}}
|
||||||
<span class=""><a href="{{twitter_url}}" target="_blank" rel="noopener">Twitter</a></span>
|
<span class=""><a class="post-header__social" href="{{twitter_url}}" target="_blank"
|
||||||
|
rel="noopener">Twitter</a></span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{#if facebook}}
|
{{#if facebook}}
|
||||||
<span class=""><a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a></span>
|
<span class=""><a class="post-header__social" href="{{facebook_url}}" target="_blank"
|
||||||
|
rel="noopener">Facebook</a></span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</p>
|
</p>
|
||||||
{{#if bio}}
|
{{#if bio}}
|
||||||
<p>{{bio}}</p>
|
<p class="page-header__text">{{bio}}</p>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -9,8 +9,8 @@
|
|||||||
{{#if @site.logo}}
|
{{#if @site.logo}}
|
||||||
<img src="{{img_url @site.logo size=" l"}}" alt="{{@site.title}}" class="page-header__icon">
|
<img src="{{img_url @site.logo size=" l"}}" alt="{{@site.title}}" class="page-header__icon">
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<h1>{{@site.title}}</h1>
|
<h1 class="page-header__heading">{{@site.title}}</h1>
|
||||||
<p>{{@site.description}}</p>
|
<p class="page-header__text">{{@site.description}}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -46,7 +46,7 @@
|
|||||||
"yuika"
|
"yuika"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@damillora/shian": "^1.1.0",
|
"@damillora/shian": "^2.0.0",
|
||||||
"autoprefixer": "^10.2.1",
|
"autoprefixer": "^10.2.1",
|
||||||
"gulp": "^4.0.2",
|
"gulp": "^4.0.2",
|
||||||
"gulp-clean-css": "^4.2.0",
|
"gulp-clean-css": "^4.2.0",
|
||||||
|
2
page.hbs
2
page.hbs
@ -7,7 +7,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="page-header__contents">
|
<div class="page-header__contents">
|
||||||
<div class="post-header container mx-auto main">
|
<div class="post-header container mx-auto main">
|
||||||
<h1>{{title}}</h1>
|
<h1 class="page-header__heading">{{title}}</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
|
|
||||||
<div class="menu__item" id="darkMode">
|
<div class="menu__item" id="darkMode">
|
||||||
<i class="material-icons md-24">brightness_low</i>
|
<i class="menu__icon material-icons md-24">brightness_low</i>
|
||||||
<p class="menu__text">Dark Mode</p>
|
<p class="menu__text">Dark Mode</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
@ -13,13 +13,13 @@ for it, and apply those styles to the <header> tag. Else, we just output a <head
|
|||||||
<div>
|
<div>
|
||||||
<div class="post-card__image">
|
<div class="post-card__image">
|
||||||
{{#if feature_image}}
|
{{#if feature_image}}
|
||||||
<img srcset="{{img_url feature_image size="s"}} 300w, {{img_url feature_image size="m"}} 600w"
|
<img class="post-card__image-inner" srcset="{{img_url feature_image size="s"}} 300w, {{img_url
|
||||||
sizes="(max-width: 768px) 100vw, 35vw"
|
feature_image size="m" }} 600w" sizes="(max-width: 768px) 100vw, 35vw"
|
||||||
src="{{img_url feature_image size="m"}}" alt="{{title}}" loading="lazy">
|
src="{{img_url feature_image size="m"}}" alt="{{title}}" loading="lazy">
|
||||||
{{else}}
|
{{else}}
|
||||||
<img srcset="{{img_url @site.cover_image size="s"}} 300w, {{img_url @site.cover_image size="m"}} 600w"
|
<img class="post-card__image-inner" srcset="{{img_url @site.cover_image size="s"}} 300w, {{img_url
|
||||||
sizes="(max-width: 768px) 100vw, 35vw"
|
@site.cover_image size="m" }} 600w" sizes="(max-width: 768px) 100vw, 35vw"
|
||||||
src="{{img_url @site.cover_image size="m"}}" alt="{{title}}" loading="lazy">
|
src="{{img_url @site.cover_image size="m"}}" alt="{{title}}" loading="lazy">
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
@ -6,7 +6,7 @@
|
|||||||
<div class="post-card__tag-row">
|
<div class="post-card__tag-row">
|
||||||
{{#if primary_tag}}
|
{{#if primary_tag}}
|
||||||
{{#primary_tag}}
|
{{#primary_tag}}
|
||||||
<a href="{{url}}">
|
<a class="post-card__tag-info" href="{{url}}">
|
||||||
{{#if accent_color}}
|
{{#if accent_color}}
|
||||||
<span class="post-card__tag-color" style="background-color: {{accent_color}};"></span>
|
<span class="post-card__tag-color" style="background-color: {{accent_color}};"></span>
|
||||||
{{else}}
|
{{else}}
|
||||||
@ -17,12 +17,12 @@
|
|||||||
{{/primary_tag}}
|
{{/primary_tag}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{#has visibility="paid"}}
|
{{#has visibility="paid"}}
|
||||||
<a href="/subscribe">
|
<a class="post-card__tag-info" href="/subscribe">
|
||||||
<span class="post-card__paywall">Paid content</span>
|
<span class="post-card__paywall">Paid content</span>
|
||||||
</a>
|
</a>
|
||||||
{{/has}}
|
{{/has}}
|
||||||
{{#has visibility="members"}}
|
{{#has visibility="members"}}
|
||||||
<a href="/subscribe">
|
<a class="post-card__tag-info" href="/subscribe">
|
||||||
<span class="post-card__paywall">Member-exclusive</span>
|
<span class="post-card__paywall">Member-exclusive</span>
|
||||||
</a>
|
</a>
|
||||||
{{/has}}
|
{{/has}}
|
||||||
@ -44,16 +44,14 @@
|
|||||||
<div class="post-card__author-images">
|
<div class="post-card__author-images">
|
||||||
{{#foreach authors}}
|
{{#foreach authors}}
|
||||||
{{#if profile_image}}
|
{{#if profile_image}}
|
||||||
<div class="post-card__author-image">
|
<a href="{{url}}">
|
||||||
<a href="{{url}}">
|
<img class="post-card__author-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
||||||
<img src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
</a>
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
</div>
|
</div>
|
||||||
<div class="post-card__author-names">
|
<div class="post-card__author-names">
|
||||||
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
|
{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
@ -61,4 +59,4 @@
|
|||||||
<p>{{excerpt words="30"}}</p>
|
<p>{{excerpt words="30"}}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
@ -1,24 +1,24 @@
|
|||||||
<div class="post-header__tag-row">
|
<div class="tag__row">
|
||||||
{{#if primary_tag}}
|
{{#if primary_tag}}
|
||||||
{{#primary_tag}}
|
{{#primary_tag}}
|
||||||
<a href="{{url}}">
|
<a href="{{url}}">
|
||||||
{{#if accent_color}}
|
{{#if accent_color}}
|
||||||
<span class="post-header__tag-color" style="background-color: {{accent_color}};"></span>
|
<span class="tag__color" style="background-color: {{accent_color}};"></span>
|
||||||
{{else}}
|
{{else}}
|
||||||
<span class="post-header__tag-color"></span>
|
<span class="tag__color"></span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<span class="post-header__tag-name">{{name}}</span>
|
<span class="tag__name--post-header">{{name}}</span>
|
||||||
</a>
|
</a>
|
||||||
{{/primary_tag}}
|
{{/primary_tag}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{#has visibility="paid"}}
|
{{#has visibility="paid"}}
|
||||||
<a href="/subscribe">
|
<a href="/subscribe">
|
||||||
<span class="post-header__paywall">Paid content</span>
|
<span class="tag__paywall">Paid content</span>
|
||||||
</a>
|
</a>
|
||||||
{{/has}}
|
{{/has}}
|
||||||
{{#has visibility="members"}}
|
{{#has visibility="members"}}
|
||||||
<a href="/subscribe">
|
<a href="/subscribe">
|
||||||
<span class="post-header__paywall">Member-exclusive</span>
|
<span class="tag__paywall">Member-exclusive</span>
|
||||||
</a>
|
</a>
|
||||||
{{/has}}
|
{{/has}}
|
||||||
</div>
|
</div>
|
@ -5,14 +5,12 @@
|
|||||||
<div class="site-header__inner">
|
<div class="site-header__inner">
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="header__top">
|
<div class="header__top">
|
||||||
<div class="header__title">
|
<a class="header__title" href="/">
|
||||||
<a href="/">
|
{{@site.title}}
|
||||||
<h1>{{@site.title}}</h1>
|
</a>
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="header__nav-button" id="menushow">
|
<div class="header__nav-button" id="menushow">
|
||||||
<span class="header__icon material-icons" alt="menu">menu</span>
|
<span class="header__icon material-icons" alt="menu">menu</span>
|
||||||
<p>Menu</p>
|
<p class="header__nav-button-text">Menu</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{navigation}}
|
{{navigation}}
|
||||||
|
53
post.hbs
53
post.hbs
@ -8,7 +8,7 @@
|
|||||||
<div class="page-header__contents">
|
<div class="page-header__contents">
|
||||||
<div class="post-header container mx-auto main">
|
<div class="post-header container mx-auto main">
|
||||||
{{> primary-tag}}
|
{{> primary-tag}}
|
||||||
<h1>{{title}}</h1>
|
<h1 class="page-header__heading">{{title}}</h1>
|
||||||
<p class="post-header__time">
|
<p class="post-header__time">
|
||||||
<span>
|
<span>
|
||||||
<time datetime="{{date format=" YYYY-MM-DD"}}">
|
<time datetime="{{date format=" YYYY-MM-DD"}}">
|
||||||
@ -23,16 +23,20 @@
|
|||||||
<div class="post-header__author-images">
|
<div class="post-header__author-images">
|
||||||
{{#foreach authors}}
|
{{#foreach authors}}
|
||||||
{{#if profile_image}}
|
{{#if profile_image}}
|
||||||
<div class="post-header__author-image">
|
<a href="{{url}}">
|
||||||
<a href="{{url}}">
|
<img class="post-header__author-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
||||||
<img src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
|
</a>
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
</div>
|
</div>
|
||||||
<div class="post-header__author-names">
|
<div class="post-header__author-names">
|
||||||
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
|
{{#has author="count:>2"}}
|
||||||
|
Multiple authors
|
||||||
|
{{else}}
|
||||||
|
{{#foreach authors}}
|
||||||
|
<a href="{{url}}" title="{{name}}" class="post-header__author-name">{{name}}</a>
|
||||||
|
{{/foreach}}
|
||||||
|
{{/has}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
@ -50,8 +54,8 @@
|
|||||||
<a href="{{url}}" class="post-navigator__nav post-navigator__nav--previous-post">
|
<a href="{{url}}" class="post-navigator__nav post-navigator__nav--previous-post">
|
||||||
<span class="material-icons post-navigator__icon">arrow_back</span>
|
<span class="material-icons post-navigator__icon">arrow_back</span>
|
||||||
<div class="post-navigator__nav-content post-navigator__nav-content--previous-post">
|
<div class="post-navigator__nav-content post-navigator__nav-content--previous-post">
|
||||||
<p class="post-navigator__nav-title">Previous post</p>
|
<p class="post-navigator__nav-indicator">Previous post</p>
|
||||||
<p>{{title}}</p>
|
<p class="post-navigator__nav-title">{{title}}</p>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{{/prev_post}}
|
{{/prev_post}}
|
||||||
@ -59,14 +63,16 @@
|
|||||||
{{#next_post}}
|
{{#next_post}}
|
||||||
<a href="{{url}}" class="post-navigator__nav post-navigator__nav--next-post">
|
<a href="{{url}}" class="post-navigator__nav post-navigator__nav--next-post">
|
||||||
<div class="post-navigator__nav-content post-navigator__nav-content--next-post">
|
<div class="post-navigator__nav-content post-navigator__nav-content--next-post">
|
||||||
<p class="post-navigator__nav-title">Next post</p>
|
<p class="post-navigator__nav-indicator">Next post</p>
|
||||||
<p>{{title}}</p>
|
<p class="post-navigator__nav-title">{{title}}</p>
|
||||||
</div>
|
</div>
|
||||||
<span class="material-icons post-navigator__icon">arrow_forward</span>
|
<span class="material-icons post-navigator__icon">arrow_forward</span>
|
||||||
</a>
|
</a>
|
||||||
{{/next_post}}
|
{{/next_post}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div id="comments" class="container mx-auto main">
|
<div id="comments" class="container mx-auto main">
|
||||||
{{#is "preview"}}
|
{{#is "preview"}}
|
||||||
<p>Comments are disabled for post previews</p>
|
<p>Comments are disabled for post previews</p>
|
||||||
@ -77,24 +83,22 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto">
|
||||||
{{#if primary_tag}}
|
{{#if primary_tag}}
|
||||||
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
|
{{#get "posts" include="tags" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
|
||||||
{{#if related_posts}}
|
{{#if related_posts}}
|
||||||
{{#../primary_tag}}
|
<div class="post-list">
|
||||||
<div class="px-3 w-full">
|
<div>
|
||||||
<p class="text-2xl">
|
|
||||||
More in
|
More in
|
||||||
|
{{#../primary_tag}}
|
||||||
<a href="{{url}}">
|
<a href="{{url}}">
|
||||||
{{#if accent_color}}
|
{{#if accent_color}}
|
||||||
<span class="tag-accent-color medium" style="background-color: {{accent_color}};"></span>
|
<span class="tag__color" style="background-color: {{accent_color}};"></span>
|
||||||
{{else}}
|
{{else}}
|
||||||
<span class="tag-accent-color medium"></span>{{name}}
|
<span class="tag__color"></span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<span class="hover:underline">{{name}}</span>
|
<span class="tag__name">{{name}}</span>
|
||||||
</a>
|
</a>
|
||||||
</p>
|
{{/../primary_tag}}
|
||||||
</div>
|
</div>
|
||||||
{{/../primary_tag}}
|
|
||||||
<div class="post-list">
|
|
||||||
{{#foreach related_posts}}
|
{{#foreach related_posts}}
|
||||||
{{> post-card}}
|
{{> post-card}}
|
||||||
{{/foreach}}
|
{{/foreach}}
|
||||||
@ -103,10 +107,9 @@
|
|||||||
{{/get}}
|
{{/get}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{{/post}}
|
{{/post}}
|
||||||
|
|
||||||
{{#contentFor "scripts"}}
|
{{#contentFor "scripts"}}
|
||||||
<script>
|
<script>
|
||||||
</script>
|
</script>
|
||||||
{{/contentFor}}
|
{{/contentFor}}
|
10
tag.hbs
10
tag.hbs
@ -8,17 +8,17 @@
|
|||||||
<p>
|
<p>
|
||||||
<span class="post-header__tag-name">Tag</span>
|
<span class="post-header__tag-name">Tag</span>
|
||||||
</p>
|
</p>
|
||||||
<div class="post-header__tag-heading">
|
<div class="post-header__heading post-header__heading--tag">
|
||||||
{{#if accent_color}}
|
{{#if accent_color}}
|
||||||
<span class="post-header__tag-heading-color" style="background-color: {{accent_color}};"></span>
|
<span class="post-header__heading--tag-color" style="background-color: {{accent_color}};"></span>
|
||||||
{{else}}
|
{{else}}
|
||||||
<span class="post-header__tag-heading-color"></span>
|
<span class="post-header__heading--tag-color"></span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
<h1>
|
<h1 class="post-header__heading--tag-text">
|
||||||
{{name}}
|
{{name}}
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<p>{{description}}</p>
|
<p class="page-header__text">{{description}}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -830,10 +830,10 @@
|
|||||||
"@babel/helper-validator-identifier" "^7.12.11"
|
"@babel/helper-validator-identifier" "^7.12.11"
|
||||||
to-fast-properties "^2.0.0"
|
to-fast-properties "^2.0.0"
|
||||||
|
|
||||||
"@damillora/shian@^1.1.0":
|
"@damillora/shian@^2.0.0":
|
||||||
version "1.2.0"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/@damillora/shian/-/shian-1.2.0.tgz#762db594d0d3fbfdfa56e3a89cdac67aaec1a642"
|
resolved "https://registry.yarnpkg.com/@damillora/shian/-/shian-2.0.0.tgz#f64d3dedf2a6bbfa06c9477f242bea8375261621"
|
||||||
integrity sha512-+5/jcSbVonxdtc4oKGVEtnMm6VLxkv00UnU0+UoB2W4NSG62140QbWdqerrbeOjzeI3WAJAEbI74b6XCbZ1V2A==
|
integrity sha512-grK0nfoXmE8PGDuM6E1TbQxzW1sGuen08Ux3GPTMkJOjNKPoNHlTQ+HvmGyJQo9qaf3prNkK1RsoopFsn2FEbQ==
|
||||||
|
|
||||||
"@discoveryjs/json-ext@^0.5.0":
|
"@discoveryjs/json-ext@^0.5.0":
|
||||||
version "0.5.2"
|
version "0.5.2"
|
||||||
|
Loading…
Reference in New Issue
Block a user