Damillora/Yuika
1
0
Fork 0
mirror of https://github.com/Damillora/Yuika synced 2024-11-22 09:17:33 +00:00
Code Issues Releases Wiki Activity

Styling changes

Browse Source
This commit is contained in:
Damillora 2019-11-13 00:51:01 +07:00
parent 2834ff0eaf
commit 18a04f4a3c
7 changed files with 83 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
assets/css/styles.css
View File

@ -2,12 +2,15 @@
@import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap'); @import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap');
@tailwind base; @tailwind base;
/* 1. Base Styling */
html { html {
@apply font-sans; @apply font-sans;
} }
/* 2. Site Header */
header { header {
background-color: #085d93; @apply py-4 px-4 bg-yuika-blue-700;
@apply py-4 px-4;
} }
.index-navbar header { .index-navbar header {
background-color: transparent; background-color: transparent;
@ -17,6 +20,8 @@ header {
height: 50vh; height: 50vh;
} }
/* 3. Content Styling */
#post p { #post p {
@apply my-3; @apply my-3;
} }
@ -39,7 +44,7 @@ header {
@apply my-4 text-base font-light; @apply my-4 text-base font-light;
} }
#post a { #post a {
color: #085d93; @apply text-yuika-blue-700;
} }
#post .kg-card { #post .kg-card {
@ -121,14 +126,14 @@ header {
@apply text-sm text-blue-700 truncate; @apply text-sm text-blue-700 truncate;
} }
footer { footer {
background-color: #085d93; @apply py-4 px-4 bg-yuika-blue-700;
@apply py-4 px-4;
} }
/* 4. Navbar */
.nav { .nav {
@apply hidden flex-col w-full pl-0 my-0 absolute; @apply hidden flex-col w-full pl-0 my-0 absolute bg-yuika-blue-700;
background-color: #085d93;
} }
.nav li { .nav li {
@apply flex flex-row justify-start items-center my-0 py-2 text-white text-sm px-2 h-12 px-4; @apply flex flex-row justify-start items-center my-0 py-2 text-white text-sm px-2 h-12 px-4;
@ -150,20 +155,47 @@ footer {
@apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block h-full; @apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block h-full;
} }
#menushow:hover .nav { #menushow:hover .nav {
@apply pt-0; @apply pt-0 right-0;
right: 0;
width: initial; width: initial;
} }
} }
.nav-fixed { .nav-fixed {
background-color: #085d93;
z-index: 10; z-index: 10;
@apply bg-yuika-blue-700;
}
.post-article {
@apply pb-32 pt-8;
} }
.content { .content {
@apply pb-32; @apply mx-auto;
} }
.content-full {
@apply px-2;
}
@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;
}
}
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;

6
author.hbs
View File

@ -2,11 +2,11 @@
{{#author}} {{#author}}
<div class="relative group index-header"> <div class="relative group index-header">
{{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}} {{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
<div class="h-full opacity-50 bg-black"> <div class="h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity">
</div> </div>
</div> </div>
<div class="absolute bottom-0 py-6 h-full left-0 right-0"> <div class="absolute bottom-0 py-6 h-full left-0 right-0">
<div class="container mx-auto px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64 h-full flex flex-col justify-end items-begin"> <div class="container mx-auto content-full h-full flex flex-col justify-end items-begin">
<div class="my-2"> <div class="my-2">
<p class="bg-red-700 w-auto inline-block px-2 py-1 text-white text-sm">Author</p> <p class="bg-red-700 w-auto inline-block px-2 py-1 text-white text-sm">Author</p>
</div> </div>
@ -45,9 +45,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
{{> "site-header"}} {{> "site-header"}}
</div>
</div> </div>
{{/author}} {{/author}}

6
index.hbs
View File

@ -1,12 +1,10 @@
{{!< default}} {{!< default}}
<div class="h-64 relative index-header"> <div class="h-64 relative group index-header">
{{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}} {{> 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 class="w-full h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity">
</div> </div>
</div> </div>
<div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
{{> "site-header"}} {{> "site-header"}}
</div>
</div> </div>
<div class="flex flex-wrap justify-start post-feed content w-full px-4"> <div class="flex flex-wrap justify-start post-feed content w-full px-4">
{{#foreach posts}} {{#foreach posts}}

6
page.hbs
View File

@ -8,7 +8,7 @@
</div> </div>
</div> </div>
<div class="absolute bottom-0 py-6 left-0 right-0"> <div class="absolute bottom-0 py-6 left-0 right-0">
<div class="container mx-auto px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64"> <div class="container mx-auto content-full">
{{#if primary_tag}} {{#if primary_tag}}
{{#primary_tag}} {{#primary_tag}}
<div> <div>
@ -21,14 +21,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
{{> "site-header"}} {{> "site-header"}}
</div>
</div> </div>
<div class="px-4"> <div class="px-4">
<main class="container mx-auto content" id="post"> <main class="container mx-auto content" id="post">
<div class="px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64"> <div class="content-full">
{{content}} {{content}}
</div> </div>
</main> </main>

2
partials/site-header.hbs
View File

@ -1,3 +1,4 @@
<div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
<header class="flex flex-row py-2 flex-wrap w-full"> <header class="flex flex-row py-2 flex-wrap w-full">
{{#if @site.logo}} {{#if @site.logo}}
<div class="flex flex-col h-12"> <div class="flex flex-col h-12">
@ -19,3 +20,4 @@
{{navigation}} {{navigation}}
</div> </div>
</header> </header>
</div>

38
post.hbs
View File

@ -1,14 +1,13 @@
{{!< default}} {{!< default}}
{{#post}} {{#post}}
<article>
<div class="relative group index-header"> <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}} {{!--Special header-image.hbs partial to generate the background image--}}
<div class="h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity"> <div class="h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity">
</div> </div>
</div> </div>
<div class="absolute bottom-0 py-6 left-0 right-0"> <div class="absolute bottom-0 py-6 left-0 right-0">
<div class="container mx-auto px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64"> <div class="container mx-auto content-full">
{{#if primary_tag}} {{#if primary_tag}}
{{#primary_tag}} {{#primary_tag}}
<div> <div>
@ -40,20 +39,21 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
{{> "site-header"}} {{> "site-header"}}
</div>
</div> </div>
<div class="px-4"> <article class="post-article">
<main class="container mx-auto content" id="post"> <main class="content container" id="post">
<div class="px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64"> <div class="content-full">
{{content}} {{content}}
</div> </div>
<div class="px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64"> <div class="content-full">
<div class="my-4" id="comments"> <div class="my-4" id="comments">
</div> </div>
<div class="my-4 flex flex-row justify-between"> </div>
</main>
<div class="my-4 w-full content-full">
<div class="flex flex-row justify-between">
{{#prev_post}} {{#prev_post}}
<div class="w-1/3"> <div class="w-1/3">
<a href="{{url}}"> <a href="{{url}}">
@ -64,6 +64,7 @@
</a> </a>
</div> </div>
{{/prev_post}} {{/prev_post}}
<div class="flex flex-grow"></div>
{{#next_post}} {{#next_post}}
<div class="w-1/3"> <div class="w-1/3">
<a href="{{url}}"> <a href="{{url}}">
@ -75,8 +76,25 @@
</div> </div>
{{/next_post}} {{/next_post}}
</div> </div>
</div>
<div class="mx-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}}" class="bg-green-700 w-auto inline px-2 py-1 text-white text-2xl">{{name}}</a> </p>
</div> </div>
</main> {{/../primary_tag}}
<div class="flex flex-wrap justify-start w-full">
{{#foreach related_posts}}
{{> post-card}}
{{/foreach}}
</div>
{{/if}}
{{/get}}
{{/if}}
</div>
{{/post}} {{/post}}
</article> </article>

6
tag.hbs
View File

@ -3,11 +3,11 @@
{{#tag}} {{#tag}}
<div class="relative group index-header"> <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}} {{!--Special header-image.hbs partial to generate the background image--}}
<div class="h-full opacity-50 bg-black"> <div class="h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity">
</div> </div>
</div> </div>
<div class="absolute bottom-0 py-6 h-full left-0 right-0"> <div class="absolute bottom-0 py-6 h-full left-0 right-0">
<div class="container mx-auto px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64 h-full flex flex-col justify-end items-begin"> <div class="container mx-auto content-full h-full flex flex-col justify-end items-begin">
<div> <div>
<p class="bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm">Tag</p> <p class="bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm">Tag</p>
</div> </div>
@ -23,9 +23,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
{{> "site-header"}} {{> "site-header"}}
</div>
</div> </div>
{{/tag}} {{/tag}}