{{title}}
--
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}} -
+ Author +
+{{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} -
{{bio}}
+ {{/if}} +{{bio}}
- {{/if}} --
Comments are disabled for post previews
+ {{else}} + {{!-- Comments --}} + + {{/is}} +