From 745c26d6d59057e4550dc5cbd353d2d23e9ab602 Mon Sep 17 00:00:00 2001 From: Damillora Date: Wed, 14 Apr 2021 15:24:27 +0700 Subject: [PATCH] Use Shian for styling --- assets/css/styles.css | 337 +-------------------------------- assets/js/nav-collapse.js | 12 +- author.hbs | 73 +++---- default.hbs | 3 +- error-404.hbs | 24 +-- error.hbs | 74 +++----- index.hbs | 52 +++-- package.json | 8 +- page.hbs | 53 +++--- partials/header-background.hbs | 60 +++--- partials/navigation.hbs | 9 + partials/post-background.hbs | 6 +- partials/post-card.hbs | 108 +++++------ partials/primary-tag.hbs | 34 ++-- partials/site-background.hbs | 64 +++---- partials/site-header.hbs | 30 ++- post.hbs | 224 ++++++++++------------ tag.hbs | 67 +++---- yarn.lock | 8 +- 19 files changed, 425 insertions(+), 821 deletions(-) create mode 100644 partials/navigation.hbs diff --git a/assets/css/styles.css b/assets/css/styles.css index b796f3d..eca7e8d 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -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; - + */ diff --git a/assets/js/nav-collapse.js b/assets/js/nav-collapse.js index a1960e8..ba98024 100644 --- a/assets/js/nav-collapse.js +++ b/assets/js/nav-collapse.js @@ -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; diff --git a/author.hbs b/author.hbs index 0c72348..4e7db4a 100644 --- a/author.hbs +++ b/author.hbs @@ -1,27 +1,33 @@ -{{!< default}} -{{#author}} -
- {{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}} -
+{{!< default}} {{#author}} {{> header-background background=cover_image}}
+
+
-
-
-
-
- Author -
-
-
-
- {{#if profile_image}} - {{name}} +
+
+

+ Author +

+
+ {{#if profile_image}} + + + {{else}} + {{/if}} -

{{name}}

+

+ {{name}} +

-
+

{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} -

-
+

+

{{#if website}} Website {{/if}} @@ -31,21 +37,18 @@ {{#if facebook}} Facebook {{/if}} -

-
+

+ {{#if bio}} +

{{bio}}

+ {{/if}} +
-
- {{#if bio}} -

{{bio}}

- {{/if}} -
-
-
-{{/author}} - -
- {{#foreach posts}} + {{/author}} +
+ {{#foreach posts}} {{> "post-card"}} - {{/foreach}} -
+ {{/foreach}} + + {{#contentFor "scripts"}} + {{/contentFor}} \ No newline at end of file diff --git a/default.hbs b/default.hbs index 18f1190..d16e9f9 100644 --- a/default.hbs +++ b/default.hbs @@ -21,9 +21,8 @@ {{> "site-header"}} -
+
{{{body}}} - {{> footer}}
-{{/contentFor}} + {{/post}} + {{#contentFor "scripts"}} + + {{/contentFor}} \ No newline at end of file diff --git a/partials/header-background.hbs b/partials/header-background.hbs index e527487..0d404a2 100644 --- a/partials/header-background.hbs +++ b/partials/header-background.hbs @@ -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
tag. Else, we just output a
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}} - -
+ @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); + } + } + -{{else}} + {{else}} -
-{{/if}} + {{/if}} \ No newline at end of file diff --git a/partials/navigation.hbs b/partials/navigation.hbs new file mode 100644 index 0000000..916ee6a --- /dev/null +++ b/partials/navigation.hbs @@ -0,0 +1,9 @@ +
+ {{#foreach navigation}} +
+ +

{{label}}

+ +
+ {{/foreach}} +
\ No newline at end of file diff --git a/partials/post-background.hbs b/partials/post-background.hbs index fe1c926..c39c4f5 100644 --- a/partials/post-background.hbs +++ b/partials/post-background.hbs @@ -11,11 +11,11 @@ for it, and apply those styles to the
tag. Else, we just output a -
+
{{#if feature_image}} - + {{else}} - + {{/if}}
\ No newline at end of file diff --git a/partials/post-card.hbs b/partials/post-card.hbs index c216c93..3fb5d1c 100644 --- a/partials/post-card.hbs +++ b/partials/post-card.hbs @@ -1,68 +1,64 @@ -
-
- - {{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}} - -
-
+
+ + {{> post-background}} {{!--Special header-image.hbs partial to generate the background image--}} + +
+
{{#if primary_tag}} {{#primary_tag}} -
- - {{#if accent_color}} - - {{else}} - - {{/if}} - {{name}} - -
+ + {{#if accent_color}} + + {{else}} + + {{/if}} + {{name}} + {{/primary_tag}} {{/if}} {{#has visibility="paid"}} -
- - Paid content - -
+ + Paid content + {{/has}} {{#has visibility="members"}} -
- - Member-exclusive - -
+ + Member-exclusive + {{/has}} -
-
-

{{title}}

 -
-
-

• {{reading_time}}

-
- {{#if authors}} -
-
- {{#foreach authors}} - {{#if profile_image}} -
- - {{name}} - -
- {{/if}} - {{/foreach}} +
+ +

{{title}}

+ +

+ + + • + {{reading_time}} + +

+ {{#if authors}} +
+
+ {{#foreach authors}} + {{#if profile_image}} +
+ + {{name}} +
-
-
-

{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}

-
-
+ {{/if}} + {{/foreach}}
- {{/if}} -
-

{{excerpt words="30"}}

+
+

{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}

-
-
+ {{/if}} +
+

{{excerpt words="30"}}

+
+
+
\ No newline at end of file diff --git a/partials/primary-tag.hbs b/partials/primary-tag.hbs index d53cf34..f53584c 100644 --- a/partials/primary-tag.hbs +++ b/partials/primary-tag.hbs @@ -1,28 +1,24 @@ -{{#if primary_tag}} -{{#primary_tag}} -
+
+ {{#if primary_tag}} + {{#primary_tag}} {{#if accent_color}} - + {{else}} - {{name}} + {{/if}} - {{name}} + {{name}} -
-{{/primary_tag}} -{{/if}} -{{#has visibility="paid"}} -
+ {{/primary_tag}} + {{/if}} + {{#has visibility="paid"}} - Paid content + Paid content -
-{{/has}} -{{#has visibility="members"}} -
+ {{/has}} + {{#has visibility="members"}} - Member-exclusive + Member-exclusive -
-{{/has}} + {{/has}} +
\ No newline at end of file diff --git a/partials/site-background.hbs b/partials/site-background.hbs index 9f0dee8..020fe14 100644 --- a/partials/site-background.hbs +++ b/partials/site-background.hbs @@ -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
tag. Else, we just output a
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}} - -
+ @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%; + } + } + -{{else}} + {{else}} -
- -{{/if}} + {{/if}} \ No newline at end of file diff --git a/partials/site-header.hbs b/partials/site-header.hbs index ab21316..3cf952c 100644 --- a/partials/site-header.hbs +++ b/partials/site-header.hbs @@ -1,22 +1,20 @@ -
-
- {{> site-background }} -
-
-
-
- \ No newline at end of file diff --git a/post.hbs b/post.hbs index 39120f4..af1c4ba 100644 --- a/post.hbs +++ b/post.hbs @@ -1,141 +1,111 @@ {{!< default}} {{#post}}
- {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background - image--}} -
-
-
-
-
-
+ + {{> header-background background=feature_image}} +
+
+
+
+
+
{{> primary-tag}} -
-
-

{{title}}

-
-
-

• {{reading_time}}

-
-
-
- {{#foreach authors}} - {{#if profile_image}} -
- - {{name}} - +

{{title}}

+

+ + + • + {{reading_time}} + +

+ {{#if authors}} +
+
+ {{#foreach authors}} + {{#if profile_image}} +
+ + {{name}} + +
+ {{/if}} + {{/foreach}}
- {{/if}} - {{/foreach}} -
-
-
+

{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}

-
-
-
-
- -
-
-
- {{#if access}} - {{content}} - {{else}} -
-

Access level insufficient

- {{#has visibility="paid"}} -

Access level: Autonomous System

-

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!

-
- - Become a member now - -
- {{/has}} - {{#has visibility="members"}} -

Access level: Subscriber

-

Subscribing gives you access to the contents of this post, and get notified on subsequent posts!

-
- - Subscribe now - -
- {{/has}} -
{{/if}}
-
-
-
- {{#prev_post}} - - arrow_back -
-

Previous post

-

{{title}}

-
- - {{/prev_post}} -
- {{#next_post}} - -
-

Next post

-

{{title}}

-
- arrow_forward - - {{/next_post}} -
-
-
- {{#is "preview"}} -

Comments are disabled for post previews

- {{else}} - {{!-- Comments --}} +
- {{/is}} -
-
-
- {{#if primary_tag}} - {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}} - {{#if related_posts}} - {{#../primary_tag}} -
-

- More in - - {{#if accent_color}} - - {{else}} - {{name}} - {{/if}} - {{name}} - -

-
- {{/../primary_tag}} -
- {{#foreach related_posts}} - {{> post-card}} - {{/foreach}} -
- {{/if}} - {{/get}} - {{/if}} -
- {{/post}} - +
+ {{content}} +
+
+
+ {{#prev_post}} + + arrow_back +
+

Previous post

+

{{title}}

+
+ + {{/prev_post}} +
+ {{#next_post}} + +
+

Next post

+

{{title}}

+
+ arrow_forward + + {{/next_post}} +
+
+
+ {{#is "preview"}} +

Comments are disabled for post previews

+ {{else}} + {{!-- Comments --}} + + {{/is}} +
+
+ {{#if primary_tag}} + {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}} + {{#if related_posts}} + {{#../primary_tag}} +
+

+ More in + + {{#if accent_color}} + + {{else}} + {{name}} + {{/if}} + {{name}} + +

+
+ {{/../primary_tag}} +
+ {{#foreach related_posts}} + {{> post-card}} + {{/foreach}} +
+ {{/if}} + {{/get}} + {{/if}} +
+ + + {{/post}} {{#contentFor "scripts"}}