mirror of
https://github.com/Damillora/Yuika
synced 2024-11-21 08:57:31 +00:00
Use Shian for styling
This commit is contained in:
parent
b5b6fafd95
commit
745c26d6d5
@ -3,329 +3,14 @@
|
||||
|
||||
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
|
||||
|
||||
@import '../../node_modules/@damillora/shian/dist/app.css';
|
||||
/*
|
||||
@tailwind base;
|
||||
|
||||
/* 1. Base Styling */
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
header {
|
||||
@apply py-4;
|
||||
}
|
||||
header a:hover {
|
||||
@apply no-underline;
|
||||
}
|
||||
a:hover {
|
||||
@apply underline;
|
||||
}
|
||||
/* 2. Site Header */
|
||||
.index-navbar {
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
width: 100vw;
|
||||
height: 4rem;
|
||||
overflow: hidden;
|
||||
@apply fixed transition-all duration-300 ease-in-out;
|
||||
}
|
||||
.index-navbar.enabled {
|
||||
height: 100vh;
|
||||
}
|
||||
.index-navbar header {
|
||||
z-index: 12;
|
||||
@apply transition duration-300 ease-in-out h-full;
|
||||
}
|
||||
.index-navbar.enabled header {
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
.index-navbar.detached header {
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
.index-header {
|
||||
min-height: 200px;
|
||||
height: 70vh;
|
||||
}
|
||||
@screen md {
|
||||
.index-header {
|
||||
min-height: 300px;
|
||||
height: 70vh;
|
||||
}
|
||||
}
|
||||
.index-header.large {
|
||||
height: 90vh;
|
||||
}
|
||||
.no-image {
|
||||
@apply bg-yuika-blue-500
|
||||
}
|
||||
|
||||
.site-title {
|
||||
@apply flex flex-row transition duration-300 ease-in-out;
|
||||
}
|
||||
.site-head {
|
||||
@apply flex flex-row flex-grow transition duration-300 ease-in-out;
|
||||
}
|
||||
.site-head a {
|
||||
@apply flex flex-row py-2 items-center transition duration-300 ease-in-out h-16 inline-block px-4;
|
||||
}
|
||||
.site-head a:hover {
|
||||
@apply bg-yuika-blue-500;
|
||||
}
|
||||
.site-background {
|
||||
position: absolute;
|
||||
opacity: 0%;
|
||||
top: -23vh;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
@apply transition-all duration-300 ease-in-out;
|
||||
}
|
||||
.index-navbar.enabled .site-background {
|
||||
opacity: 100%;
|
||||
top: 0;
|
||||
}
|
||||
.main-container {
|
||||
@apply relative;
|
||||
}
|
||||
/* 3. Content Styling */
|
||||
#post p {
|
||||
@apply my-4;
|
||||
}
|
||||
#post h1 {
|
||||
@apply my-4 text-4xl font-light;
|
||||
}
|
||||
#post h2 {
|
||||
@apply my-4 text-3xl font-light;
|
||||
}
|
||||
#post h3 {
|
||||
@apply my-4 text-2xl font-light;
|
||||
}
|
||||
#post h4 {
|
||||
@apply my-4 text-xl font-light;
|
||||
}
|
||||
#post h5 {
|
||||
@apply my-4 text-lg font-light;
|
||||
}
|
||||
#post h6 {
|
||||
@apply my-4 text-base font-light;
|
||||
}
|
||||
#post a {
|
||||
@apply text-yuika-blue-700;
|
||||
}
|
||||
#post a:hover {
|
||||
@apply underline;
|
||||
}
|
||||
#post ul {
|
||||
@apply list-disc;
|
||||
}
|
||||
#post ol {
|
||||
@apply list-decimal;
|
||||
}
|
||||
#post code {
|
||||
@apply bg-gray-200 text-yuika-blue-700 whitespace-pre-wrap;
|
||||
}
|
||||
#post blockquote {
|
||||
@apply border-l-4 border-yuika-blue-700 pl-8 py-2 my-8;
|
||||
}
|
||||
#post pre {
|
||||
@apply bg-gray-200 text-yuika-blue-700 px-2 py-2 px-2 border border-yuika-blue-500 my-8;
|
||||
}
|
||||
#post .kg-card {
|
||||
@apply py-4 flex flex-col items-center object-contain my-8 mx-0;
|
||||
}
|
||||
#post .kg-card .kg-image {
|
||||
@apply w-full;
|
||||
}
|
||||
#post .kg-width-wide .kg-image {
|
||||
min-width: 100vw;
|
||||
}
|
||||
@screen md {
|
||||
#post .kg-width-wide .kg-image {
|
||||
min-width: 115%;
|
||||
}
|
||||
}
|
||||
@screen lg {
|
||||
#post .kg-width-wide .kg-image {
|
||||
min-width: 125%;
|
||||
}
|
||||
}
|
||||
@screen xl {
|
||||
#post .kg-width-wide .kg-image {
|
||||
min-width: 140%;
|
||||
}
|
||||
}
|
||||
|
||||
#post .kg-width-full .kg-image {
|
||||
min-width: 100vw;
|
||||
}
|
||||
#post .kg-card figcaption {
|
||||
@apply text-sm text-gray-800 mt-2;
|
||||
}
|
||||
|
||||
#post .kg-gallery-container {
|
||||
min-width: 100vw;
|
||||
}
|
||||
@screen md {
|
||||
#post .kg-gallery-container {
|
||||
min-width: 115%;
|
||||
}
|
||||
}
|
||||
@screen lg {
|
||||
#post .kg-gallery-container {
|
||||
min-width: 125%;
|
||||
}
|
||||
}
|
||||
@screen xl {
|
||||
#post .kg-gallery-container {
|
||||
min-width: 140%;
|
||||
}
|
||||
}
|
||||
|
||||
#post .kg-gallery-row {
|
||||
@apply flex flex-row;
|
||||
}
|
||||
#post .kg-gallery-image {
|
||||
@apply mx-1;
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
#post .kg-bookmark-card {
|
||||
@apply text-black;
|
||||
}
|
||||
|
||||
#post .kg-bookmark-container {
|
||||
@apply flex flex-row justify-between text-black border-l-4 border-yuika-blue-700 bg-white transition duration-300 ease-in-out;
|
||||
}
|
||||
#post .kg-bookmark-container:hover {
|
||||
@apply bg-gray-400 transition duration-300 ease-in-out;
|
||||
}
|
||||
#post .kg-bookmark-content {
|
||||
@apply w-2/3 py-4 px-4;
|
||||
}
|
||||
#post .kg-bookmark-thumbnail {
|
||||
min-width: 33.3333%;
|
||||
@apply max-h-full relative;
|
||||
}
|
||||
#post .kg-bookmark-thumbnail img {
|
||||
@apply absolute top-0 left-0 h-full w-full object-cover;
|
||||
}
|
||||
#post .kg-bookmark-title {
|
||||
@apply font-medium text-xl no-underline mb-1;
|
||||
}
|
||||
#post .kg-bookmark-description {
|
||||
@apply font-light text-sm my-2;
|
||||
}
|
||||
#post .kg-bookmark-metadata {
|
||||
@apply flex flex-row items-start justify-end h-6 my-4;
|
||||
}
|
||||
#post .kg-bookmark-icon {
|
||||
@apply h-full mx-2;
|
||||
}
|
||||
#post .kg-bookmark-author {
|
||||
@apply text-sm text-blue-700 truncate;
|
||||
}
|
||||
#post .kg-bookmark-publisher {
|
||||
@apply text-sm text-blue-700 truncate;
|
||||
}
|
||||
footer {
|
||||
@apply py-4 px-4 bg-yuika-blue-700;
|
||||
}
|
||||
|
||||
|
||||
/* 4. Navbar */
|
||||
|
||||
.nav-group {
|
||||
@apply flex flex-col h-full;
|
||||
}
|
||||
#menushow {
|
||||
@apply cursor-pointer w-16 h-16 relative px-2 py-2 transition duration-300 ease-in-out text-center whitespace-nowrap;
|
||||
}
|
||||
#menushow:hover {
|
||||
@apply bg-yuika-blue-500
|
||||
}
|
||||
.nav {
|
||||
background: transparent;
|
||||
@apply flex-col w-full pl-0 my-0;
|
||||
top: 100%;
|
||||
}
|
||||
.nav li {
|
||||
@apply w-full flex flex-row justify-start items-center my-0 text-white text-base h-12 transition duration-300 ease-in-out;
|
||||
}
|
||||
.nav li.separator {
|
||||
height: 0;
|
||||
@apply border border-white border-t opacity-75;
|
||||
}
|
||||
.nav li a {
|
||||
@apply align-middle w-full h-full flex items-center justify-start px-4 py-2;
|
||||
}
|
||||
.nav li a:hover {
|
||||
@apply no-underline;
|
||||
}
|
||||
.nav li:hover {
|
||||
@apply bg-yuika-blue-500 transition duration-300 ease-in-out;
|
||||
}
|
||||
@screen md {
|
||||
.nav {
|
||||
@apply pl-16;
|
||||
}
|
||||
}
|
||||
|
||||
.post-article {
|
||||
@apply pb-32 pt-4;
|
||||
}
|
||||
|
||||
.content {
|
||||
@apply mx-auto;
|
||||
}
|
||||
.content-full {
|
||||
@apply px-4;
|
||||
}
|
||||
@screen sm {
|
||||
.content-full {
|
||||
@apply px-8;
|
||||
}
|
||||
}
|
||||
@screen md {
|
||||
.content-full {
|
||||
@apply px-16;
|
||||
}
|
||||
}
|
||||
@screen lg {
|
||||
.content-full {
|
||||
@apply px-32;
|
||||
}
|
||||
}
|
||||
@screen xl {
|
||||
.content-full {
|
||||
@apply px-64;
|
||||
}
|
||||
}
|
||||
|
||||
/* 5. Post Card */
|
||||
.post-card {
|
||||
|
||||
}
|
||||
.post-image-box {
|
||||
@apply relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
@screen md {
|
||||
.post-image-box {
|
||||
width: 35vw;
|
||||
min-width: 300px;
|
||||
max-width: 450px;
|
||||
}
|
||||
}
|
||||
.post-image-box::after {
|
||||
@apply block;
|
||||
content: '';
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
.post-image {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.primary-tag-header {
|
||||
@apply bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm transition duration-300 ease-in-out;
|
||||
}
|
||||
@ -366,27 +51,11 @@ footer {
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
/* 6. Post feed */
|
||||
.post-feed {
|
||||
@apply grid grid-cols-1 gap-y-4 my-8;
|
||||
}
|
||||
|
||||
/* 7. Subscribe form */
|
||||
#subscribe-form .message-success {
|
||||
@apply hidden;
|
||||
}
|
||||
#subscribe-form.success .message-success {
|
||||
@apply block;
|
||||
}
|
||||
#subscribe-form .message-error {
|
||||
@apply hidden;
|
||||
}
|
||||
#subscribe-form.error .message-error {
|
||||
@apply block;
|
||||
}
|
||||
|
||||
/* 8. Default transitions */
|
||||
@tailwind components;
|
||||
|
||||
@tailwind utilities;
|
||||
|
||||
*/
|
||||
|
||||
@ -1,15 +1,19 @@
|
||||
$("#menushow").click(function(){
|
||||
$(".index-navbar").toggleClass('enabled');
|
||||
$(".site-header").toggleClass('enabled');
|
||||
$(".site-header__background").toggleClass('site-header__background--enabled');
|
||||
$(".menu").toggleClass('enabled');
|
||||
})
|
||||
$(".nav li").click(function(){
|
||||
$(".index-navbar").toggleClass('enabled');
|
||||
$(".site-header").toggleClass('enabled');
|
||||
$(".site-header__background").toggleClass('site-header__background--enabled');
|
||||
$(".menu").toggleClass('enabled');
|
||||
})
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
var nav = document.querySelector('.index-navbar');
|
||||
var feed = document.querySelector('.content');
|
||||
var nav = document.querySelector('.site-header');
|
||||
var feed = document.querySelector('main');
|
||||
|
||||
var lastScrollY = window.scrollY;
|
||||
var lastWindowHeight = window.innerHeight;
|
||||
|
||||
73
author.hbs
73
author.hbs
@ -1,27 +1,33 @@
|
||||
{{!< default}}
|
||||
{{#author}}
|
||||
<div class="relative group index-header">
|
||||
{{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
<div class="w-full h-full opacity-50 bg-black">
|
||||
{{!< default}} {{#author}} {{> header-background background=cover_image}} <div class="page-header">
|
||||
<div class="page-header__background responsive-header-img">
|
||||
<div class="page-header__overlay"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 py-6 h-full left-0 right-0">
|
||||
<div class="container mx-auto content-full h-full flex flex-col justify-end items-begin">
|
||||
<div>
|
||||
<span class="text-white text-sm">Author</span>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<div class="flex flex-col items-begin my-2">
|
||||
<div class="flex flex-row items-center mb-2">
|
||||
{{#if profile_image}}
|
||||
<img class="author-image" src="{{profile_image}}" alt="{{name}}" />
|
||||
<div class="page-header__contents">
|
||||
<div class="post-header container mx-auto main">
|
||||
<p>
|
||||
<span class="post-header__tag-name">Author</span>
|
||||
</p>
|
||||
<div class="post-header__tag-heading">
|
||||
{{#if profile_image}}
|
||||
<style>
|
||||
.author-image {
|
||||
background-image: url('{{profile_image}}');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
</style>
|
||||
<span class="post-header__tag-heading-color author-image"></span>
|
||||
{{else}}
|
||||
<span class="post-header__tag-heading-color"></span>
|
||||
{{/if}}
|
||||
<h1 class="text-white text-2xl md:text-4xl ml-4">{{name}}</h1>
|
||||
<h1>
|
||||
{{name}}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="text-white">
|
||||
<p>
|
||||
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
|
||||
</div>
|
||||
<div class="text-white">
|
||||
</p>
|
||||
<p>
|
||||
{{#if website}}
|
||||
<span class=""><a href="{{website}}" target="_blank" rel="noopener">Website</a></span>
|
||||
{{/if}}
|
||||
@ -31,21 +37,18 @@
|
||||
{{#if facebook}}
|
||||
<span class=""><a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a></span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
{{#if bio}}
|
||||
<p>{{bio}}</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-white">
|
||||
{{#if bio}}
|
||||
<p>{{bio}}</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/author}}
|
||||
|
||||
<div class="post-feed content w-full px-2">
|
||||
{{#foreach posts}}
|
||||
{{/author}}
|
||||
<main class="post-list container mx-auto">
|
||||
{{#foreach posts}}
|
||||
{{> "post-card"}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
{{/foreach}}
|
||||
</main>
|
||||
{{#contentFor "scripts"}}
|
||||
{{/contentFor}}
|
||||
@ -21,9 +21,8 @@
|
||||
</head>
|
||||
<body class="{{body_class}}">
|
||||
{{> "site-header"}}
|
||||
<div class="main-container">
|
||||
<div>
|
||||
{{{body}}}
|
||||
{{> footer}}
|
||||
</div>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.4.1.min.js"
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
{{!< default}}
|
||||
<div class="h-screen relative">
|
||||
{{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
<div class="h-full opacity-50 bg-black">
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-full flex flex-col justify-center items-begin absolute top-0 mx-12">
|
||||
<h1 class="text-white text-6xl">{{statusCode}}</h1>
|
||||
<p class="text-white text-xl">{{message}}</p>
|
||||
<a class="text-white text-base" href="{{@site.url}}">Go to the front page →</a>
|
||||
</div>
|
||||
</div>
|
||||
{{!< default}} {{> header-background background=@site.cover_image}}
|
||||
|
||||
<div class="page-header">
|
||||
<div class="page-header__background responsive-header-img">
|
||||
<div class="page-header__overlay"></div>
|
||||
</div>
|
||||
<div class="page-header__contents">
|
||||
<div class="container mx-auto main">
|
||||
<h1>{{statusCode}}</h1>
|
||||
<p>{{message}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
74
error.hbs
74
error.hbs
@ -1,50 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<title>{{statusCode}} - {{message}}</title>
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
|
||||
<title>{{statusCode}} - {{message}}</title>
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap" />
|
||||
<link rel="preload" as="style" href="{{asset "built/styles.css"}}" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap" />
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset "built/styles.css"}}" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="w-full h-full">
|
||||
<div class="h-screen relative">
|
||||
<div class="h-full no-image"></div>
|
||||
<div class="h-full opacity-50 bg-black">
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-full flex flex-col justify-center items-begin absolute top-0 mx-12">
|
||||
<h1 class="text-white text-6xl">{{statusCode}}</h1>
|
||||
<p class="text-white text-xl">{{message}}</p>
|
||||
<div>
|
||||
{{#if errorDetails}}
|
||||
<ul class="error-stack-list">
|
||||
{{#foreach errorDetails}}
|
||||
<li>
|
||||
<em class="error-stack-function">{{{rule}}}</em>
|
||||
{{#foreach failures}}
|
||||
<p><span class="error-stack-file">Ref: {{ref}}</span></p>
|
||||
<p><span class="error-stack-file">Message: {{message}}</span></p>
|
||||
{{/foreach}}
|
||||
</li>
|
||||
{{/foreach}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap" />
|
||||
<link rel="preload" as="style" href="{{asset " built/styles.css"}}" />
|
||||
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap" />
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
|
||||
<link rel="stylesheet" type="text/css" href="{{asset " built/styles.css"}}" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page-header">
|
||||
<div class="page-header__background responsive-header-img">
|
||||
<div class="page-header__overlay"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<div class="page-header__contents">
|
||||
<div class="container mx-auto main">
|
||||
<h1>{{statusCode}}</h1>
|
||||
<p>{{message}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
52
index.hbs
52
index.hbs
@ -1,32 +1,24 @@
|
||||
{{!< default}}
|
||||
<div class="relative group index-header">
|
||||
{{> header-background background=@site.cover_image}}
|
||||
<div class="w-full h-full opacity-50 bg-black">
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 py-4 left-0 right-0">
|
||||
<div class="container mx-auto content-full flex flex-col py-4">
|
||||
{{#if @site.logo}}
|
||||
<div class="w-24 h-24 py-4">
|
||||
<img src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" class="w-full h-full object-contain">
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="block flex flex-col pl-4 flex-grow">
|
||||
<div class="">
|
||||
<h1 class="text-2xl md:text-4xl font-light text-white">{{@site.title}}</h1>
|
||||
</div>
|
||||
<div class="">
|
||||
<p class="text-lg md:text-xl font-light text-white">{{@site.description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{!< default}} {{> header-background background=@site.cover_image}}
|
||||
|
||||
<div class="post-feed content w-full px-2">
|
||||
{{#foreach posts}}
|
||||
<div class="page-header">
|
||||
<div class="page-header__background responsive-header-img">
|
||||
<div class="page-header__overlay"></div>
|
||||
</div>
|
||||
<div class="page-header__contents">
|
||||
<div class="container mx-auto main">
|
||||
{{#if @site.logo}}
|
||||
<img src="{{img_url @site.logo size=" l"}}" alt="{{@site.title}}" class="page-header__icon">
|
||||
{{/if}}
|
||||
<h1>{{@site.title}}</h1>
|
||||
<p>{{@site.description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="post-list container mx-auto">
|
||||
{{#foreach posts}}
|
||||
{{> "post-card"}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
{{#contentFor "scripts"}}
|
||||
{{/contentFor}}
|
||||
{{/foreach}}
|
||||
</main>
|
||||
{{#contentFor "scripts"}}
|
||||
{{/contentFor}}
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "yuika",
|
||||
"description": "nanao.moe's blog theme",
|
||||
"version": "2.9.2",
|
||||
"version": "3.0.0",
|
||||
"engines": {
|
||||
"ghost-api": "v3"
|
||||
},
|
||||
@ -44,7 +44,7 @@
|
||||
"yuika"
|
||||
],
|
||||
"dependencies": {
|
||||
"@damillora/shian": "^0.1.2",
|
||||
"@damillora/shian": "^0.3.0",
|
||||
"autoprefixer": "^10.2.1",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-clean-css": "^4.2.0",
|
||||
@ -54,10 +54,6 @@
|
||||
"gulp-uglify": "^3.0.2",
|
||||
"gulp-zip": "^5.0.1",
|
||||
"postcss": "^8.2.3",
|
||||
"tailwindcss": "^2.0.2",
|
||||
"typeface-exo-2": "^0.0.72"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@fullhuman/postcss-purgecss": "^1.3.0"
|
||||
}
|
||||
}
|
||||
|
||||
53
page.hbs
53
page.hbs
@ -1,36 +1,29 @@
|
||||
{{!< default}}
|
||||
{{!< default}} {{#post}} <div class="relative group index-header">
|
||||
|
||||
{{#post}}
|
||||
<div class="relative group index-header">
|
||||
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
<div class="w-full h-full opacity-50 bg-black">
|
||||
{{> header-background background=feature_image}}
|
||||
<div class="page-header">
|
||||
<div class="page-header__background responsive-header-img">
|
||||
<div class="page-header__overlay"></div>
|
||||
</div>
|
||||
<div class="page-header__contents">
|
||||
<div class="post-header container mx-auto main">
|
||||
<h1>{{title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 py-6 left-0 right-0">
|
||||
<div class="container mx-auto content-full">
|
||||
<div>
|
||||
<h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="post-article">
|
||||
<main class="content container" id="post">
|
||||
<div class="content-full">
|
||||
<main id="post" class="container mx-auto main">
|
||||
{{content}}
|
||||
</div>
|
||||
</main>
|
||||
{{/post}}
|
||||
</article>
|
||||
</main>
|
||||
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// FitVids - start
|
||||
var $postContent = $("#post");
|
||||
$postContent.fitVids();
|
||||
// FitVids - end
|
||||
});
|
||||
</script>
|
||||
{{/contentFor}}
|
||||
{{/post}}
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// FitVids - start
|
||||
var $postContent = $("#post");
|
||||
$postContent.fitVids();
|
||||
// FitVids - end
|
||||
});
|
||||
</script>
|
||||
{{/contentFor}}
|
||||
@ -8,40 +8,40 @@ be a background image using CSS, we end up with a handful of inline styles.
|
||||
|
||||
If the template in question has a background image, then we render responsive image styles
|
||||
for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
|
||||
with a `no-image` class so we can style it accordingly.
|
||||
--}}
|
||||
with a `no-image` class so we can style it accordingly.
|
||||
--}}
|
||||
|
||||
{{#if background}}
|
||||
{{#if background}}
|
||||
|
||||
<style type="text/css">
|
||||
.responsive-header-img {
|
||||
background-image: url({{img_url background size='xl'}});
|
||||
}
|
||||
<style type="text/css">
|
||||
.responsive-header-img {
|
||||
background-image: url({{img_url background size='xl'}});
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
@media(max-width: 1000px) {
|
||||
.responsive-header-img {
|
||||
background-image: url({{img_url background size='l'}});
|
||||
background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x,
|
||||
url({{img_url background size='xl'}}) 2x);
|
||||
background-image: image-set(url({{img_url background size='l'}}) 1x,
|
||||
url({{img_url background size='xl'}}) 2x);
|
||||
}
|
||||
}
|
||||
@media(max-width: 1000px) {
|
||||
.responsive-header-img {
|
||||
background-image: url({{img_url background size='l'}});
|
||||
background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x,
|
||||
url({{img_url background size='xl'}}) 2x);
|
||||
background-image: image-set(url({{img_url background size='l'}}) 1x,
|
||||
url({{img_url background size='xl'}}) 2x);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
.responsive-header-img {
|
||||
background-image: url({{img_url background size='m'}});
|
||||
background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x,
|
||||
url({{img_url background size='l'}}) 2x);
|
||||
background-image: image-set(url({{img_url background size='m'}}) 1x,
|
||||
url({{img_url background size='l'}}) 2x);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="h-full responsive-header-img bg-cover bg-center bg-yuika-blue-500">
|
||||
@media(max-width: 600px) {
|
||||
.responsive-header-img {
|
||||
background-image: url({{img_url background size='m'}});
|
||||
background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x,
|
||||
url({{img_url background size='l'}}) 2x);
|
||||
background-image: image-set(url({{img_url background size='m'}}) 1x,
|
||||
url({{img_url background size='l'}}) 2x);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{{else}}
|
||||
{{else}}
|
||||
|
||||
<div class="h-full no-image">
|
||||
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
9
partials/navigation.hbs
Normal file
9
partials/navigation.hbs
Normal file
@ -0,0 +1,9 @@
|
||||
<div class="menu">
|
||||
{{#foreach navigation}}
|
||||
<div class="menu__item">
|
||||
<a href={{url absolute="true" }}>
|
||||
<p class="menu__text">{{label}}</p>
|
||||
</a>
|
||||
</div>
|
||||
{{/foreach}}
|
||||
</div>
|
||||
@ -11,11 +11,11 @@ for it, and apply those styles to the <header> tag. Else, we just output a <head
|
||||
with a `no-image` class so we can style it accordingly.
|
||||
--}}
|
||||
<div>
|
||||
<div class="post-image-box">
|
||||
<div class="post-card__image">
|
||||
{{#if feature_image}}
|
||||
<img class="post-image" src="{{img_url feature_image size='m'}}">
|
||||
<img src="{{img_url feature_image size='m'}}">
|
||||
{{else}}
|
||||
<img class="post-image" src="{{img_url @site.cover_image size='m'}}">
|
||||
<img src="{{img_url @site.cover_image size='m'}}">
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
@ -1,68 +1,64 @@
|
||||
<div class="post-card">
|
||||
<article class="relative md:flex md:flex-row w-full h-full transition duration-500 ease-in-out py-4 px-4">
|
||||
<a href="{{url}}">
|
||||
{{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
</a>
|
||||
<div class="md:pl-4">
|
||||
<div class="pt-4 md:pt-0 flex flex-row">
|
||||
<article class="post-card">
|
||||
<a href="{{url}}">
|
||||
{{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
</a>
|
||||
<div class="post-card__info">
|
||||
<div class="post-card__tag-row">
|
||||
{{#if primary_tag}}
|
||||
{{#primary_tag}}
|
||||
<div class="pr-2">
|
||||
<a href="{{url}}">
|
||||
{{#if accent_color}}
|
||||
<span class="tag-accent-color small" style="background-color: {{accent_color}};"></span>
|
||||
{{else}}
|
||||
<span class="tag-accent-color small"></span>
|
||||
{{/if}}
|
||||
<span class="text-sm hover:underline">{{name}}</span>
|
||||
</a>
|
||||
</div>
|
||||
<a href="{{url}}">
|
||||
{{#if accent_color}}
|
||||
<span class="post-card__tag-color" style="background-color: {{accent_color}};"></span>
|
||||
{{else}}
|
||||
<span class="post-card__tag-color"></span>
|
||||
{{/if}}
|
||||
<span class="post-card__tag-name">{{name}}</span>
|
||||
</a>
|
||||
{{/primary_tag}}
|
||||
{{/if}}
|
||||
{{#has visibility="paid"}}
|
||||
<div class="pr-2">
|
||||
<a href="/subscribe">
|
||||
<span class="text-sm text-red-700 hover:underline">Paid content</span>
|
||||
</a>
|
||||
</div>
|
||||
<a href="/subscribe">
|
||||
<span class="post-card__paywall">Paid content</span>
|
||||
</a>
|
||||
{{/has}}
|
||||
{{#has visibility="members"}}
|
||||
<div class="pr-2">
|
||||
<a href="/subscribe">
|
||||
<span class="text-sm text-yuika-blue-700 hover:underline">Member-exclusive</span>
|
||||
</a>
|
||||
</div>
|
||||
<a href="/subscribe">
|
||||
<span class="post-card__paywall">Member-exclusive</span>
|
||||
</a>
|
||||
{{/has}}
|
||||
</div>
|
||||
<div class="mt-0 text-yuika-blue-700 hover:underline transition duration-500 ease-in-out">
|
||||
<a href="{{url}}"><h1 class="text-xl md:text-2xl font-light">{{title}}</h1></a>
|
||||
</div>
|
||||
<div class="mt-0 text-xs">
|
||||
<p><span class="post-card-byline-date"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">•</span> {{reading_time}}</span></p>
|
||||
</div>
|
||||
{{#if authors}}
|
||||
<div class="author-list text-xs ">
|
||||
<div class="author-images">
|
||||
{{#foreach authors}}
|
||||
{{#if profile_image}}
|
||||
<div class="h-8 ml-1 mr-3">
|
||||
<a href="{{url}}">
|
||||
<img class="h-full rounded-full" src="{{img_url profile_image size="xs"}}" alt="{{name}}"/>
|
||||
</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
<a href="{{url}}">
|
||||
<h1 class="post-card__title">{{title}}</h1>
|
||||
</a>
|
||||
<p class="post-card__time">
|
||||
<span>
|
||||
<time datetime="{{date format=" YYYY-MM-DD"}}">
|
||||
{{date format="D MMM YYYY"}}
|
||||
</time>
|
||||
<span class="bull">•</span>
|
||||
{{reading_time}}
|
||||
</span>
|
||||
</p>
|
||||
{{#if authors}}
|
||||
<div class="post-card__author-list">
|
||||
<div class="post-card__author-images">
|
||||
{{#foreach authors}}
|
||||
{{#if profile_image}}
|
||||
<div class="post-card__author-image">
|
||||
<a href="{{url}}">
|
||||
<img src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="author-names">
|
||||
<div>
|
||||
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="block mt-2 mb-4 text-sm excerpt overflow-hidden">
|
||||
<p>{{excerpt words="30"}}</p>
|
||||
<div class="post-card__author-names">
|
||||
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="post-card__excerpt">
|
||||
<p>{{excerpt words="30"}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@ -1,28 +1,24 @@
|
||||
{{#if primary_tag}}
|
||||
{{#primary_tag}}
|
||||
<div class="pr-2">
|
||||
<div class="post-header__tag-row">
|
||||
{{#if primary_tag}}
|
||||
{{#primary_tag}}
|
||||
<a href="{{url}}">
|
||||
{{#if accent_color}}
|
||||
<span class="tag-accent-color small" style="background-color: {{accent_color}};"></span>
|
||||
<span class="post-header__tag-color" style="background-color: {{accent_color}};"></span>
|
||||
{{else}}
|
||||
<span class="tag-accent-color small"></span>{{name}}
|
||||
<span class="post-header__tag-color"></span>
|
||||
{{/if}}
|
||||
<span class="text-base text-white hover:underline">{{name}}</span>
|
||||
<span class="post-header__tag-name">{{name}}</span>
|
||||
</a>
|
||||
</div>
|
||||
{{/primary_tag}}
|
||||
{{/if}}
|
||||
{{#has visibility="paid"}}
|
||||
<div class="pr-2">
|
||||
{{/primary_tag}}
|
||||
{{/if}}
|
||||
{{#has visibility="paid"}}
|
||||
<a href="/subscribe">
|
||||
<span class="text-sm text-red-200 hover:underline">Paid content</span>
|
||||
<span class="post-header__paywall">Paid content</span>
|
||||
</a>
|
||||
</div>
|
||||
{{/has}}
|
||||
{{#has visibility="members"}}
|
||||
<div class="pr-2">
|
||||
{{/has}}
|
||||
{{#has visibility="members"}}
|
||||
<a href="/subscribe">
|
||||
<span class="text-sm text-yuika-blue-200 hover:underline">Member-exclusive</span>
|
||||
<span class="post-header__paywall">Member-exclusive</span>
|
||||
</a>
|
||||
</div>
|
||||
{{/has}}
|
||||
{{/has}}
|
||||
</div>
|
||||
@ -8,42 +8,40 @@ be a background image using CSS, we end up with a handful of inline styles.
|
||||
|
||||
If the template in question has a background image, then we render responsive image styles
|
||||
for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
|
||||
with a `no-image` class so we can style it accordingly.
|
||||
--}}
|
||||
with a `no-image` class so we can style it accordingly.
|
||||
--}}
|
||||
|
||||
{{#if @site.cover_image}}
|
||||
{{#if @site.cover_image}}
|
||||
|
||||
<style type="text/css">
|
||||
.responsive-site-header-img {
|
||||
background-image: url({{img_url @site.cover_image size='xl'}});
|
||||
}
|
||||
<style type="text/css">
|
||||
.responsive-site-header-img {
|
||||
background-image: url({{img_url @site.cover_image size='xl'}});
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@media(max-width: 1000px) {
|
||||
.responsive-site-header-img {
|
||||
background-image: url({{img_url @site.cover_image size='l'}});
|
||||
background-image: -webkit-image-set(url({{img_url @site.cover_image size='l'}}) 1x,
|
||||
url({{img_url @site.cover_image size='xl'}}) 2x);
|
||||
background-image: image-set(url({{img_url @site.cover_image size='l'}}) 1x,
|
||||
url({{img_url @site.cover_image size='xl'}}) 2x);
|
||||
background-position: right 25% top 20%;
|
||||
}
|
||||
}
|
||||
@media(max-width: 1000px) {
|
||||
.responsive-site-header-img {
|
||||
background-image: url({{img_url @site.cover_image size='l'}});
|
||||
background-image: -webkit-image-set(url({{img_url @site.cover_image size='l'}}) 1x,
|
||||
url({{img_url @site.cover_image size='xl'}}) 2x);
|
||||
background-image: image-set(url({{img_url @site.cover_image size='l'}}) 1x,
|
||||
url({{img_url @site.cover_image size='xl'}}) 2x);
|
||||
background-position: right 25% top 20%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
.responsive-site-header-img {
|
||||
background-image: url({{img_url @site.cover_image size='m'}});
|
||||
background-image: -webkit-image-set(url({{img_url @site.cover_image size='m'}}) 1x,
|
||||
url({{img_url @site.cover_image size='l'}}) 2x);
|
||||
background-image: image-set(url({{img_url @site.cover_image size='m'}}) 1x,
|
||||
url({{img_url @site.cover_image size='l'}}) 2x);
|
||||
background-position: right 25% top 20%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="h-full w-full responsive-site-header-img bg-cover bg-yuika-blue-500">
|
||||
@media(max-width: 600px) {
|
||||
.responsive-site-header-img {
|
||||
background-image: url({{img_url @site.cover_image size='m'}});
|
||||
background-image: -webkit-image-set(url({{img_url @site.cover_image size='m'}}) 1x,
|
||||
url({{img_url @site.cover_image size='l'}}) 2x);
|
||||
background-image: image-set(url({{img_url @site.cover_image size='m'}}) 1x,
|
||||
url({{img_url @site.cover_image size='l'}}) 2x);
|
||||
background-position: right 25% top 20%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{{else}}
|
||||
{{else}}
|
||||
|
||||
<div class="h-full w-full no-image">
|
||||
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
@ -1,22 +1,20 @@
|
||||
<div class="index-navbar">
|
||||
<div class="site-background">
|
||||
{{> site-background }}
|
||||
</div>
|
||||
</div>
|
||||
<header class="flex flex-col w-full relative py-0">
|
||||
<div class="site-title">
|
||||
<div id="menushow" class="py-2">
|
||||
<span class="h-12 w-12 px-2 py-3 text-white material-icons" alt="menu">menu</span>
|
||||
{{> "site-background"}}
|
||||
<div class="site-header">
|
||||
<div class="site-header__background responsive-site-header-img">
|
||||
</div>
|
||||
<div class="site-header__inner">
|
||||
<header class="header">
|
||||
<div class="header__top">
|
||||
<div class="header__nav-button">
|
||||
<span class="header__icon material-icons" alt="menu" id="menushow">menu</span>
|
||||
</div>
|
||||
<div class="site-head">
|
||||
<a href="{{@site.url}}" class="block flex flex-col flex-grow site-title">
|
||||
<h1 class="text-lg text-white">{{@site.title}}</h1>
|
||||
<div class="header__title">
|
||||
<a href="/">
|
||||
<h1>Damillora</h1>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-group">
|
||||
{{navigation}}
|
||||
</div>
|
||||
{{navigation}}
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
224
post.hbs
224
post.hbs
@ -1,141 +1,111 @@
|
||||
{{!< default}} {{#post}} <div class="relative group index-header">
|
||||
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background
|
||||
image--}}
|
||||
<div class="h-full opacity-50 bg-black">
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 py-4 left-0 right-0">
|
||||
<div class="container mx-auto content-full">
|
||||
<div class="flex">
|
||||
|
||||
{{> header-background background=feature_image}}
|
||||
<div class="page-header">
|
||||
<div class="page-header__background responsive-header-img">
|
||||
<div class="page-header__overlay"></div>
|
||||
</div>
|
||||
<div class="page-header__contents">
|
||||
<div class="post-header container mx-auto main">
|
||||
{{> primary-tag}}
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<p><span class="text-white text-sm"><time datetime="{{date format=" YYYY-MM-DD"}}">{{date format="D MMM
|
||||
YYYY"}}</time> <span class="bull">•</span> {{reading_time}}</span></p>
|
||||
</div>
|
||||
<div class="author-list text-base text-white">
|
||||
<div class="author-images">
|
||||
{{#foreach authors}}
|
||||
{{#if profile_image}}
|
||||
<div class="h-8 ml-1 mr-3">
|
||||
<a href="{{url}}">
|
||||
<img class="h-full rounded-full" src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
|
||||
</a>
|
||||
<h1>{{title}}</h1>
|
||||
<p class="post-header__time">
|
||||
<span>
|
||||
<time datetime="{{date format=" YYYY-MM-DD"}}">
|
||||
{{date format="D MMM YYYY"}}
|
||||
</time>
|
||||
<span class="bull">•</span>
|
||||
{{reading_time}}
|
||||
</span>
|
||||
</p>
|
||||
{{#if authors}}
|
||||
<div class="post-header__author-list">
|
||||
<div class="post-header__author-images">
|
||||
{{#foreach authors}}
|
||||
{{#if profile_image}}
|
||||
<div class="post-header__author-image">
|
||||
<a href="{{url}}">
|
||||
<img src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
|
||||
</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
<div class="author-names">
|
||||
<div>
|
||||
<div class="post-header__author-names">
|
||||
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="post-article">
|
||||
<main class="content container" id="post">
|
||||
<div class="content-full">
|
||||
{{#if access}}
|
||||
{{content}}
|
||||
{{else}}
|
||||
<div class="w-full py-8 text-center bg-yuika-blue-700 text-white md:px-8">
|
||||
<h1>Access level insufficient</h1>
|
||||
{{#has visibility="paid"}}
|
||||
<h2>Access level: Autonomous System</h2>
|
||||
<p>By subscribing as an Autonomous System, you can unlock access to the contents of this post, get additional benefits and support me at the same time!</p>
|
||||
<div class="flex justify-center">
|
||||
<a class="px-4 py-2 bg-white border-yuika-blue-500 border appearance-none focus:outline-none border-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out"
|
||||
href="/subscribe">
|
||||
Become a member now
|
||||
</a>
|
||||
</div>
|
||||
{{/has}}
|
||||
{{#has visibility="members"}}
|
||||
<h2>Access level: Subscriber</h2>
|
||||
<p>Subscribing gives you access to the contents of this post, and get notified on subsequent posts!</p>
|
||||
<div class="flex justify-center">
|
||||
<a class="px-4 py-2 bg-white border-yuika-blue-500 border appearance-none focus:outline-none border-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out"
|
||||
href="/subscribe">
|
||||
Subscribe now
|
||||
</a>
|
||||
</div>
|
||||
{{/has}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</main>
|
||||
<div class="my-4 w-full content-full">
|
||||
<div class="flex flex-col md:flex-row justify-between">
|
||||
{{#prev_post}}
|
||||
<a href="{{url}}"
|
||||
class="block w-full md:w-1/3 flex flex-row items-center justify-start md:justify-end hover:text-white hover:bg-yuika-blue-700 transition duration-500 ease-in-out group py-4 px-4 hover:no-underline">
|
||||
<span class="material-icons mr-4 text-yuika-blue-700 text-2xl group-hover:text-white">arrow_back</span>
|
||||
<div class="flex flex-col items-start md:items-end ">
|
||||
<p class="text-xl text-yuika-blue-700 group-hover:text-white">Previous post</p>
|
||||
<p>{{title}}</p>
|
||||
</div>
|
||||
</a>
|
||||
{{/prev_post}}
|
||||
<div class="flex flex-grow"></div>
|
||||
{{#next_post}}
|
||||
<a href="{{url}}"
|
||||
class="block w-full md:w-1/3 flex flex-row items-center justify-end md:justify-start hover:text-white hover:bg-yuika-blue-700 transition duration-500 ease-in-out group py-4 px-4 hover:no-underline">
|
||||
<div class="flex flex-col items-end md:items-start">
|
||||
<p class="text-xl text-yuika-blue-700 group-hover:text-white">Next post</p>
|
||||
<p>{{title}}</p>
|
||||
</div>
|
||||
<span class="material-icons ml-4 text-yuika-blue-700 text-2xl group-hover:text-white">arrow_forward</span>
|
||||
</a>
|
||||
{{/next_post}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-4 w-full content-full">
|
||||
<div class="my-4" id="comments">
|
||||
{{#is "preview"}}
|
||||
<p>Comments are disabled for post previews</p>
|
||||
{{else}}
|
||||
{{!-- Comments --}}
|
||||
</div>
|
||||
|
||||
{{/is}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-auto px-4 my-4 w-full">
|
||||
{{#if primary_tag}}
|
||||
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
|
||||
{{#if related_posts}}
|
||||
{{#../primary_tag}}
|
||||
<div class="px-3 w-full">
|
||||
<p class="text-2xl">
|
||||
More in
|
||||
<a href="{{url}}">
|
||||
{{#if accent_color}}
|
||||
<span class="tag-accent-color medium" style="background-color: {{accent_color}};"></span>
|
||||
{{else}}
|
||||
<span class="tag-accent-color medium"></span>{{name}}
|
||||
{{/if}}
|
||||
<span class="hover:underline">{{name}}</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{{/../primary_tag}}
|
||||
<div class="grid grid-rows-3 grid-cols-1 row-gap-4 my-4">
|
||||
{{#foreach related_posts}}
|
||||
{{> post-card}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/post}}
|
||||
</article>
|
||||
<main id="post" class="container mx-auto main">
|
||||
{{content}}
|
||||
</main>
|
||||
|
||||
<div class="container mx-auto main">
|
||||
<div class="post-navigator">
|
||||
{{#prev_post}}
|
||||
<a href="{{url}}" class="post-navigator__nav post-navigator__nav--previous-post">
|
||||
<span class="material-icons post-navigator__icon">arrow_back</span>
|
||||
<div class="post-navigator__nav-content post-navigator__nav-content--previous-post">
|
||||
<p class="post-navigator__nav-title">Previous post</p>
|
||||
<p>{{title}}</p>
|
||||
</div>
|
||||
</a>
|
||||
{{/prev_post}}
|
||||
<div class="flex flex-grow"></div>
|
||||
{{#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">
|
||||
<p class="post-navigator__nav-title">Next post</p>
|
||||
<p>{{title}}</p>
|
||||
</div>
|
||||
<span class="material-icons post-navigator__icon">arrow_forward</span>
|
||||
</a>
|
||||
{{/next_post}}
|
||||
</div>
|
||||
</div>
|
||||
<div id="comments" class="container mx-auto main">
|
||||
{{#is "preview"}}
|
||||
<p>Comments are disabled for post previews</p>
|
||||
{{else}}
|
||||
{{!-- Comments --}}
|
||||
|
||||
{{/is}}
|
||||
</div>
|
||||
<div class="container mx-auto">
|
||||
{{#if primary_tag}}
|
||||
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
|
||||
{{#if related_posts}}
|
||||
{{#../primary_tag}}
|
||||
<div class="px-3 w-full">
|
||||
<p class="text-2xl">
|
||||
More in
|
||||
<a href="{{url}}">
|
||||
{{#if accent_color}}
|
||||
<span class="tag-accent-color medium" style="background-color: {{accent_color}};"></span>
|
||||
{{else}}
|
||||
<span class="tag-accent-color medium"></span>{{name}}
|
||||
{{/if}}
|
||||
<span class="hover:underline">{{name}}</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
{{/../primary_tag}}
|
||||
<div class="post-list">
|
||||
{{#foreach related_posts}}
|
||||
{{> post-card}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/get}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
|
||||
{{/post}}
|
||||
{{#contentFor "scripts"}}
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
|
||||
67
tag.hbs
67
tag.hbs
@ -1,41 +1,34 @@
|
||||
{{!< default}}
|
||||
|
||||
{{#tag}}
|
||||
<div class="relative group index-header">
|
||||
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
|
||||
<div class="w-full h-full opacity-50 bg-black">
|
||||
{{!< default}} {{#tag}} {{> header-background background=feature_image}}
|
||||
<div class="page-header">
|
||||
<div class="page-header__background responsive-header-img">
|
||||
<div class="page-header__overlay"></div>
|
||||
</div>
|
||||
<div class="page-header__contents">
|
||||
<div class="post-header container mx-auto main">
|
||||
<p>
|
||||
<span class="post-header__tag-name">Tag</span>
|
||||
</p>
|
||||
<div class="post-header__tag-heading">
|
||||
{{#if accent_color}}
|
||||
<span class="post-header__tag-heading-color" style="background-color: {{accent_color}};"></span>
|
||||
{{else}}
|
||||
<span class="post-header__tag-heading-color"></span>
|
||||
{{/if}}
|
||||
<h1>
|
||||
{{name}}
|
||||
</h1>
|
||||
</div>
|
||||
<p>{{description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 py-6 h-full left-0 right-0">
|
||||
<div class="container mx-auto content-full h-full flex flex-col justify-end items-begin">
|
||||
<div>
|
||||
<span class="text-white text-sm">Tag</span>
|
||||
</div>
|
||||
<div class="flex flex-row items-center py-2">
|
||||
{{#if accent_color}}
|
||||
<span class="tag-accent-color" style="background-color: {{accent_color}};"></span>
|
||||
{{else}}
|
||||
<span class="tag-accent-color bg-blue-700"></span>
|
||||
{{/if}}
|
||||
<h1 class="text-white text-2xl md:text-4xl ml-4">
|
||||
{{name}}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="text-white text-sm">
|
||||
{{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
|
||||
</div>
|
||||
{{#if description}}
|
||||
<div class="text-white pt-4">
|
||||
<p>{{description}}</p>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/tag}}
|
||||
{{/tag}}
|
||||
|
||||
<div class="post-feed content w-full px-2">
|
||||
{{#foreach posts}}
|
||||
<main class="post-list container mx-auto">
|
||||
{{#foreach posts}}
|
||||
{{> "post-card"}}
|
||||
{{/foreach}}
|
||||
</div>
|
||||
{{/foreach}}
|
||||
</main>
|
||||
|
||||
{{#contentFor "scripts"}}
|
||||
{{/contentFor}}
|
||||
@ -2,10 +2,10 @@
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
"@damillora/shian@^0.1.2":
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@damillora/shian/-/shian-0.1.2.tgz#bd0cfe32ba52601b9845336cf8659c52595abeb1"
|
||||
integrity sha512-dVZ0mTH7csD6OxbFMPrWbcaDV2lI1l3wzCDLz0J/YFEH4m8zF5m/8V1Z7xN1HhwC3z6pVvC+tCC+yQ7iP7HlnA==
|
||||
"@damillora/shian@^0.3.0":
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@damillora/shian/-/shian-0.3.0.tgz#b3c022eaf58e50551465c3c46ab57aa9d38194bd"
|
||||
integrity sha512-5++0V9WkucMbY+wbPo+IGpujdw0XgN+TIjMgfvAx2Zaeu/57NretavbLN7ZLoyeKsc42/7PNk9w5twg2mb6MKA==
|
||||
|
||||
"@fullhuman/postcss-purgecss@^1.3.0":
|
||||
version "1.3.0"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user