Damillora/Yuika
1
0
Fork 0
mirror of https://github.com/Damillora/Yuika synced 2024-11-24 01:57:32 +00:00
Code Issues Releases Wiki Activity

Use Shian for styling

Browse Source
This commit is contained in:
Damillora 2021-04-14 15:24:27 +07:00
parent b5b6fafd95
commit 745c26d6d5
19 changed files with 425 additions and 821 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

337
assets/css/styles.css
View File

@ -3,329 +3,14 @@
@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import '../../node_modules/@damillora/shian/dist/app.css';
/*
@tailwind base; @tailwind base;
/* 1. Base Styling */
html { html {
@apply font-sans; @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 { .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; @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; @apply underline;
} }
/* 6. Post feed */
.post-feed { .post-feed {
@apply grid grid-cols-1 gap-y-4 my-8; @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 components;
@tailwind utilities; @tailwind utilities;
*/

12
assets/js/nav-collapse.js
View File

@ -1,15 +1,19 @@
$("#menushow").click(function(){ $("#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(){ $(".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 () { $(document).ready(function () {
var nav = document.querySelector('.index-navbar'); var nav = document.querySelector('.site-header');
var feed = document.querySelector('.content'); var feed = document.querySelector('main');
var lastScrollY = window.scrollY; var lastScrollY = window.scrollY;
var lastWindowHeight = window.innerHeight; var lastWindowHeight = window.innerHeight;

73
author.hbs
View File

@ -1,27 +1,33 @@
{{!< default}} {{!< default}} {{#author}} {{> header-background background=cover_image}} <div class="page-header">
{{#author}} <div class="page-header__background responsive-header-img">
<div class="relative group index-header"> <div class="page-header__overlay"></div>
{{> 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">
</div> </div>
</div> <div class="page-header__contents">
<div class="absolute bottom-0 py-6 h-full left-0 right-0"> <div class="post-header container mx-auto main">
<div class="container mx-auto content-full h-full flex flex-col justify-end items-begin"> <p>
<div> <span class="post-header__tag-name">Author</span>
<span class="text-white text-sm">Author</span> </p>
</div> <div class="post-header__tag-heading">
<div class="flex flex-row"> {{#if profile_image}}
<div class="flex flex-col items-begin my-2"> <style>
<div class="flex flex-row items-center mb-2"> .author-image {
{{#if profile_image}} background-image: url('{{profile_image}}');
<img class="author-image" src="{{profile_image}}" alt="{{name}}" /> 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}} {{/if}}
<h1 class="text-white text-2xl md:text-4xl ml-4">{{name}}</h1> <h1>
{{name}}
</h1>
</div> </div>
<div class="text-white"> <p>
{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
</div> </p>
<div class="text-white"> <p>
{{#if website}} {{#if website}}
<span class=""><a href="{{website}}" target="_blank" rel="noopener">Website</a></span> <span class=""><a href="{{website}}" target="_blank" rel="noopener">Website</a></span>
{{/if}} {{/if}}
@ -31,21 +37,18 @@
{{#if facebook}} {{#if facebook}}
<span class=""><a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a></span> <span class=""><a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a></span>
{{/if}} {{/if}}
</div> </p>
</div> {{#if bio}}
<p>{{bio}}</p>
{{/if}}
</div>
</div> </div>
<div class="text-white">
{{#if bio}}
<p>{{bio}}</p>
{{/if}}
</div>
</div>
</div> </div>
</div> {{/author}}
{{/author}} <main class="post-list container mx-auto">
{{#foreach posts}}
<div class="post-feed content w-full px-2">
{{#foreach posts}}
{{> "post-card"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}
</div> </main>
{{#contentFor "scripts"}}
{{/contentFor}}

3
default.hbs
View File

@ -21,9 +21,8 @@
</head> </head>
<body class="{{body_class}}"> <body class="{{body_class}}">
{{> "site-header"}} {{> "site-header"}}
<div class="main-container"> <div>
{{{body}}} {{{body}}}
{{> footer}}
</div> </div>
<script <script
src="https://code.jquery.com/jquery-3.4.1.min.js" src="https://code.jquery.com/jquery-3.4.1.min.js"

24
error-404.hbs
View File

@ -1,13 +1,13 @@
{{!< default}} {{!< default}} {{> header-background background=@site.cover_image}}
<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>
<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
View File

@ -1,50 +1,38 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>{{statusCode}} - {{message}}</title> <head>
<meta name="HandheldFriendly" content="True" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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="preconnect" href="https://fonts.googleapis.com" crossorigin />
<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="preload" as="style" 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="preload" as="style" href="{{asset " built/styles.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "built/styles.css"}}" />
<link rel="stylesheet" type="text/css"
</head> href="https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap" />
<body> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<div class="w-full h-full"> <link rel="stylesheet" type="text/css" href="{{asset " built/styles.css"}}" />
<div class="h-screen relative">
<div class="h-full no-image"></div> </head>
<div class="h-full opacity-50 bg-black">
</div> <body>
</div> <div class="page-header">
<div class="h-full flex flex-col justify-center items-begin absolute top-0 mx-12"> <div class="page-header__background responsive-header-img">
<h1 class="text-white text-6xl">{{statusCode}}</h1> <div class="page-header__overlay"></div>
<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>
</div> </div>
</body> <div class="page-header__contents">
</html> <div class="container mx-auto main">
<h1>{{statusCode}}</h1>
<p>{{message}}</p>
</div>
</div>
</div>
</body>
</html>

52
index.hbs
View File

@ -1,32 +1,24 @@
{{!< default}} {{!< default}} {{> header-background background=@site.cover_image}}
<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>
<div class="post-feed content w-full px-2"> <div class="page-header">
{{#foreach posts}} <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"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}
</div> </main>
{{#contentFor "scripts"}} {{#contentFor "scripts"}}
{{/contentFor}} {{/contentFor}}

8
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "yuika", "name": "yuika",
"description": "nanao.moe's blog theme", "description": "nanao.moe's blog theme",
"version": "2.9.2", "version": "3.0.0",
"engines": { "engines": {
"ghost-api": "v3" "ghost-api": "v3"
}, },
@ -44,7 +44,7 @@
"yuika" "yuika"
], ],
"dependencies": { "dependencies": {
"@damillora/shian": "^0.1.2", "@damillora/shian": "^0.3.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",
@ -54,10 +54,6 @@
"gulp-uglify": "^3.0.2", "gulp-uglify": "^3.0.2",
"gulp-zip": "^5.0.1", "gulp-zip": "^5.0.1",
"postcss": "^8.2.3", "postcss": "^8.2.3",
"tailwindcss": "^2.0.2",
"typeface-exo-2": "^0.0.72" "typeface-exo-2": "^0.0.72"
},
"devDependencies": {
"@fullhuman/postcss-purgecss": "^1.3.0"
} }
} }

53
page.hbs
View File

@ -1,36 +1,29 @@
{{!< default}} {{!< default}} {{#post}} <div class="relative group index-header">
{{#post}} {{> header-background background=feature_image}}
<div class="relative group index-header"> <div class="page-header">
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}} <div class="page-header__background responsive-header-img">
<div class="w-full h-full opacity-50 bg-black"> <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> </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 id="post" class="container mx-auto main">
<main class="content container" id="post">
<div class="content-full">
{{content}} {{content}}
</div> </main>
</main>
{{/post}}
</article>
{{#contentFor "scripts"}} {{/post}}
<script> {{#contentFor "scripts"}}
$(document).ready(function () { <script>
// FitVids - start $(document).ready(function () {
var $postContent = $("#post"); // FitVids - start
$postContent.fitVids(); var $postContent = $("#post");
// FitVids - end $postContent.fitVids();
}); // FitVids - end
</script> });
{{/contentFor}} </script>
{{/contentFor}}

60
partials/header-background.hbs
View File

@ -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 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 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"> <style type="text/css">
.responsive-header-img { .responsive-header-img {
background-image: url({{img_url background size='xl'}}); background-image: url({{img_url background size='xl'}});
} background-size: cover;
background-position: center;
}
@media(max-width: 1000px) { @media(max-width: 1000px) {
.responsive-header-img { .responsive-header-img {
background-image: url({{img_url background size='l'}}); background-image: url({{img_url background size='l'}});
background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x, background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x,
url({{img_url background size='xl'}}) 2x); url({{img_url background size='xl'}}) 2x);
background-image: image-set(url({{img_url background size='l'}}) 1x, background-image: image-set(url({{img_url background size='l'}}) 1x,
url({{img_url background size='xl'}}) 2x); url({{img_url background size='xl'}}) 2x);
} }
} }
@media(max-width: 600px) { @media(max-width: 600px) {
.responsive-header-img { .responsive-header-img {
background-image: url({{img_url background size='m'}}); background-image: url({{img_url background size='m'}});
background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x, background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x,
url({{img_url background size='l'}}) 2x); url({{img_url background size='l'}}) 2x);
background-image: image-set(url({{img_url background size='m'}}) 1x, background-image: image-set(url({{img_url background size='m'}}) 1x,
url({{img_url background size='l'}}) 2x); url({{img_url background size='l'}}) 2x);
} }
} }
</style> </style>
<div class="h-full responsive-header-img bg-cover bg-center bg-yuika-blue-500">
{{else}} {{else}}
<div class="h-full no-image">
{{/if}} {{/if}}

9
partials/navigation.hbs Normal file
View 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>

6
partials/post-background.hbs
View File

@ -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. with a `no-image` class so we can style it accordingly.
--}} --}}
<div> <div>
<div class="post-image-box"> <div class="post-card__image">
{{#if feature_image}} {{#if feature_image}}
<img class="post-image" src="{{img_url feature_image size='m'}}"> <img src="{{img_url feature_image size='m'}}">
{{else}} {{else}}
<img class="post-image" src="{{img_url @site.cover_image size='m'}}"> <img src="{{img_url @site.cover_image size='m'}}">
{{/if}} {{/if}}
</div> </div>
</div> </div>

108
partials/post-card.hbs
View File

@ -1,68 +1,64 @@
<div class="post-card"> <article 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}}">
<a href="{{url}}"> {{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}}
{{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}} </a>
</a> <div class="post-card__info">
<div class="md:pl-4"> <div class="post-card__tag-row">
<div class="pt-4 md:pt-0 flex flex-row">
{{#if primary_tag}} {{#if primary_tag}}
{{#primary_tag}} {{#primary_tag}}
<div class="pr-2"> <a href="{{url}}">
<a href="{{url}}"> {{#if accent_color}}
{{#if accent_color}} <span class="post-card__tag-color" style="background-color: {{accent_color}};"></span>
<span class="tag-accent-color small" style="background-color: {{accent_color}};"></span> {{else}}
{{else}} <span class="post-card__tag-color"></span>
<span class="tag-accent-color small"></span> {{/if}}
{{/if}} <span class="post-card__tag-name">{{name}}</span>
<span class="text-sm hover:underline">{{name}}</span> </a>
</a>
</div>
{{/primary_tag}} {{/primary_tag}}
{{/if}} {{/if}}
{{#has visibility="paid"}} {{#has visibility="paid"}}
<div class="pr-2"> <a href="/subscribe">
<a href="/subscribe"> <span class="post-card__paywall">Paid content</span>
<span class="text-sm text-red-700 hover:underline">Paid content</span> </a>
</a>
</div>
{{/has}} {{/has}}
{{#has visibility="members"}} {{#has visibility="members"}}
<div class="pr-2"> <a href="/subscribe">
<a href="/subscribe"> <span class="post-card__paywall">Member-exclusive</span>
<span class="text-sm text-yuika-blue-700 hover:underline">Member-exclusive</span> </a>
</a>
</div>
{{/has}} {{/has}}
</div> </div>
<div class="mt-0 text-yuika-blue-700 hover:underline transition duration-500 ease-in-out"> <a href="{{url}}">
<a href="{{url}}"><h1 class="text-xl md:text-2xl font-light">{{title}}</h1></a> <h1 class="post-card__title">{{title}}</h1>
</div> </a>
<div class="mt-0 text-xs"> <p class="post-card__time">
<p><span class="post-card-byline-date"><time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span></p> <span>
</div> <time datetime="{{date format=" YYYY-MM-DD"}}">
{{#if authors}} {{date format="D MMM YYYY"}}
<div class="author-list text-xs "> </time>
<div class="author-images"> <span class="bull">&bull;</span>
{{#foreach authors}} {{reading_time}}
{{#if profile_image}} </span>
<div class="h-8 ml-1 mr-3"> </p>
<a href="{{url}}"> {{#if authors}}
<img class="h-full rounded-full" src="{{img_url profile_image size="xs"}}" alt="{{name}}"/> <div class="post-card__author-list">
</a> <div class="post-card__author-images">
</div> {{#foreach authors}}
{{/if}} {{#if profile_image}}
{{/foreach}} <div class="post-card__author-image">
<a href="{{url}}">
<img src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
</a>
</div> </div>
<div class="author-names"> {{/if}}
<div> {{/foreach}}
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
</div>
</div>
</div> </div>
{{/if}} <div class="post-card__author-names">
<div class="block mt-2 mb-4 text-sm excerpt overflow-hidden"> <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
<p>{{excerpt words="30"}}</p>
</div> </div>
</div> </div>
</article> {{/if}}
</div> <div class="post-card__excerpt">
<p>{{excerpt words="30"}}</p>
</div>
</div>
</article>

34
partials/primary-tag.hbs
View File

@ -1,28 +1,24 @@
{{#if primary_tag}} <div class="post-header__tag-row">
{{#primary_tag}} {{#if primary_tag}}
<div class="pr-2"> {{#primary_tag}}
<a href="{{url}}"> <a href="{{url}}">
{{#if accent_color}} {{#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}} {{else}}
<span class="tag-accent-color small"></span>{{name}} <span class="post-header__tag-color"></span>
{{/if}} {{/if}}
<span class="text-base text-white hover:underline">{{name}}</span> <span class="post-header__tag-name">{{name}}</span>
</a> </a>
</div> {{/primary_tag}}
{{/primary_tag}} {{/if}}
{{/if}} {{#has visibility="paid"}}
{{#has visibility="paid"}}
<div class="pr-2">
<a href="/subscribe"> <a href="/subscribe">
<span class="text-sm text-red-200 hover:underline">Paid content</span> <span class="post-header__paywall">Paid content</span>
</a> </a>
</div> {{/has}}
{{/has}} {{#has visibility="members"}}
{{#has visibility="members"}}
<div class="pr-2">
<a href="/subscribe"> <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> </a>
</div> {{/has}}
{{/has}} </div>

64
partials/site-background.hbs
View File

@ -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 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 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"> <style type="text/css">
.responsive-site-header-img { .responsive-site-header-img {
background-image: url({{img_url @site.cover_image size='xl'}}); background-image: url({{img_url @site.cover_image size='xl'}});
} background-size: cover;
}
@media(max-width: 1000px) { @media(max-width: 1000px) {
.responsive-site-header-img { .responsive-site-header-img {
background-image: url({{img_url @site.cover_image size='l'}}); background-image: url({{img_url @site.cover_image size='l'}});
background-image: -webkit-image-set(url({{img_url @site.cover_image size='l'}}) 1x, background-image: -webkit-image-set(url({{img_url @site.cover_image size='l'}}) 1x,
url({{img_url @site.cover_image size='xl'}}) 2x); url({{img_url @site.cover_image size='xl'}}) 2x);
background-image: image-set(url({{img_url @site.cover_image size='l'}}) 1x, background-image: image-set(url({{img_url @site.cover_image size='l'}}) 1x,
url({{img_url @site.cover_image size='xl'}}) 2x); url({{img_url @site.cover_image size='xl'}}) 2x);
background-position: right 25% top 20%; background-position: right 25% top 20%;
} }
} }
@media(max-width: 600px) { @media(max-width: 600px) {
.responsive-site-header-img { .responsive-site-header-img {
background-image: url({{img_url @site.cover_image size='m'}}); background-image: url({{img_url @site.cover_image size='m'}});
background-image: -webkit-image-set(url({{img_url @site.cover_image size='m'}}) 1x, background-image: -webkit-image-set(url({{img_url @site.cover_image size='m'}}) 1x,
url({{img_url @site.cover_image size='l'}}) 2x); url({{img_url @site.cover_image size='l'}}) 2x);
background-image: image-set(url({{img_url @site.cover_image size='m'}}) 1x, background-image: image-set(url({{img_url @site.cover_image size='m'}}) 1x,
url({{img_url @site.cover_image size='l'}}) 2x); url({{img_url @site.cover_image size='l'}}) 2x);
background-position: right 25% top 20%; background-position: right 25% top 20%;
} }
} }
</style> </style>
<div class="h-full w-full responsive-site-header-img bg-cover bg-yuika-blue-500">
{{else}} {{else}}
<div class="h-full w-full no-image"> {{/if}}
{{/if}}

30
partials/site-header.hbs
View File

@ -1,22 +1,20 @@
<div class="index-navbar"> {{> "site-background"}}
<div class="site-background"> <div class="site-header">
{{> site-background }} <div class="site-header__background responsive-site-header-img">
</div> </div>
</div> <div class="site-header__inner">
<header class="flex flex-col w-full relative py-0"> <header class="header">
<div class="site-title"> <div class="header__top">
<div id="menushow" class="py-2"> <div class="header__nav-button">
<span class="h-12 w-12 px-2 py-3 text-white material-icons" alt="menu">menu</span> <span class="header__icon material-icons" alt="menu" id="menushow">menu</span>
</div> </div>
<div class="site-head"> <div class="header__title">
<a href="{{@site.url}}" class="block flex flex-col flex-grow site-title"> <a href="/">
<h1 class="text-lg text-white">{{@site.title}}</h1> <h1>Damillora</h1>
</a> </a>
</div> </div>
</div> </div>
<div class="nav-group"> {{navigation}}
{{navigation}}
</div>
</header> </header>
</div> </div>
</div> </div>

224
post.hbs
View File

@ -1,141 +1,111 @@
{{!< default}} {{#post}} <div class="relative group index-header"> {{!< default}} {{#post}} <div class="relative group index-header">
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background
image--}} {{> header-background background=feature_image}}
<div class="h-full opacity-50 bg-black"> <div class="page-header">
</div> <div class="page-header__background responsive-header-img">
</div> <div class="page-header__overlay"></div>
<div class="absolute bottom-0 py-4 left-0 right-0"> </div>
<div class="container mx-auto content-full"> <div class="page-header__contents">
<div class="flex"> <div class="post-header container mx-auto main">
{{> primary-tag}} {{> primary-tag}}
</div> <h1>{{title}}</h1>
<div> <p class="post-header__time">
<h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1> <span>
</div> <time datetime="{{date format=" YYYY-MM-DD"}}">
<div class="mb-4"> {{date format="D MMM YYYY"}}
<p><span class="text-white text-sm"><time datetime="{{date format=" YYYY-MM-DD"}}">{{date format="D MMM </time>
YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span></p> <span class="bull">&bull;</span>
</div> {{reading_time}}
<div class="author-list text-base text-white"> </span>
<div class="author-images"> </p>
{{#foreach authors}} {{#if authors}}
{{#if profile_image}} <div class="post-header__author-list">
<div class="h-8 ml-1 mr-3"> <div class="post-header__author-images">
<a href="{{url}}"> {{#foreach authors}}
<img class="h-full rounded-full" src="{{img_url profile_image size=" xs"}}" alt="{{name}}" /> {{#if profile_image}}
</a> <div class="post-header__author-image">
<a href="{{url}}">
<img src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
</a>
</div>
{{/if}}
{{/foreach}}
</div> </div>
{{/if}} <div class="post-header__author-names">
{{/foreach}}
</div>
<div class="author-names">
<div>
<p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p> <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
</div> </div>
</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}} {{/if}}
</div> </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>
<div class="my-4 w-full content-full"> </div>
<div class="my-4" id="comments">
{{#is "preview"}}
<p>Comments are disabled for post previews</p>
{{else}}
{{!-- Comments --}}
{{/is}} <main id="post" class="container mx-auto main">
</div> {{content}}
</div> </main>
<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>
<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"}} {{#contentFor "scripts"}}
<script> <script>
$(document).ready(function () { $(document).ready(function () {

67
tag.hbs
View File

@ -1,41 +1,34 @@
{{!< default}} {{!< default}} {{#tag}} {{> header-background background=feature_image}}
<div class="page-header">
{{#tag}} <div class="page-header__background responsive-header-img">
<div class="relative group index-header"> <div class="page-header__overlay"></div>
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}} </div>
<div class="w-full h-full opacity-50 bg-black"> <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> </div>
<div class="absolute bottom-0 py-6 h-full left-0 right-0"> {{/tag}}
<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}}
<div class="post-feed content w-full px-2"> <main class="post-list container mx-auto">
{{#foreach posts}} {{#foreach posts}}
{{> "post-card"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}
</div> </main>
{{#contentFor "scripts"}}
{{/contentFor}}

8
yarn.lock
View File

@ -2,10 +2,10 @@
# yarn lockfile v1 # yarn lockfile v1
"@damillora/shian@^0.1.2": "@damillora/shian@^0.3.0":
version "0.1.2" version "0.3.0"
resolved "https://registry.yarnpkg.com/@damillora/shian/-/shian-0.1.2.tgz#bd0cfe32ba52601b9845336cf8659c52595abeb1" resolved "https://registry.yarnpkg.com/@damillora/shian/-/shian-0.3.0.tgz#b3c022eaf58e50551465c3c46ab57aa9d38194bd"
integrity sha512-dVZ0mTH7csD6OxbFMPrWbcaDV2lI1l3wzCDLz0J/YFEH4m8zF5m/8V1Z7xN1HhwC3z6pVvC+tCC+yQ7iP7HlnA== integrity sha512-5++0V9WkucMbY+wbPo+IGpujdw0XgN+TIjMgfvAx2Zaeu/57NretavbLN7ZLoyeKsc42/7PNk9w5twg2mb6MKA==
"@fullhuman/postcss-purgecss@^1.3.0": "@fullhuman/postcss-purgecss@^1.3.0":
version "1.3.0" version "1.3.0"