1
0
mirror of https://github.com/Damillora/Yuika synced 2024-12-25 05:33:45 +00:00

Styling changes

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

View File

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

View File

@ -2,11 +2,11 @@
{{#author}}
<div class="relative group index-header">
{{> 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 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">
<p class="bg-red-700 w-auto inline-block px-2 py-1 text-white text-sm">Author</p>
</div>
@ -45,9 +45,7 @@
</div>
</div>
</div>
<div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
{{> "site-header"}}
</div>
</div>
{{/author}}

View File

@ -1,12 +1,10 @@
{{!< 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--}}
<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 class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
{{> "site-header"}}
</div>
{{> "site-header"}}
</div>
<div class="flex flex-wrap justify-start post-feed content w-full px-4">
{{#foreach posts}}

View File

@ -8,7 +8,7 @@
</div>
</div>
<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}}
{{#primary_tag}}
<div>
@ -21,14 +21,12 @@
</div>
</div>
</div>
<div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
{{> "site-header"}}
</div>
</div>
<div class="px-4">
<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}}
</div>
</main>

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">
{{#if @site.logo}}
<div class="flex flex-col h-12">
@ -19,3 +20,4 @@
{{navigation}}
</div>
</header>
</div>

View File

@ -1,14 +1,13 @@
{{!< default}}
{{#post}}
<article>
<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 group-hover:opacity-75 transition-opacity">
</div>
</div>
<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}}
{{#primary_tag}}
<div>
@ -40,20 +39,21 @@
</div>
</div>
</div>
<div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
{{> "site-header"}}
</div>
</div>
<div class="px-4">
<main class="container mx-auto content" id="post">
<div class="px-2 sm:px-8 md:px-16 lg:px-32 xl:px-64">
<article class="post-article">
<main class="content container" id="post">
<div class="content-full">
{{content}}
</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>
<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}}
<div class="w-1/3">
<a href="{{url}}">
@ -64,6 +64,7 @@
</a>
</div>
{{/prev_post}}
<div class="flex flex-grow"></div>
{{#next_post}}
<div class="w-1/3">
<a href="{{url}}">
@ -75,8 +76,25 @@
</div>
{{/next_post}}
</div>
</div>
</main>
</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>
{{/../primary_tag}}
<div class="flex flex-wrap justify-start w-full">
{{#foreach related_posts}}
{{> post-card}}
{{/foreach}}
</div>
{{/if}}
{{/get}}
{{/if}}
</div>
{{/post}}
</article>

View File

@ -3,11 +3,11 @@
{{#tag}}
<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 class="h-full opacity-50 bg-black group-hover:opacity-75 transition-opacity">
</div>
</div>
<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>
<p class="bg-blue-700 w-auto inline-block px-2 py-1 text-white text-sm">Tag</p>
</div>
@ -23,9 +23,7 @@
</div>
</div>
</div>
<div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
{{> "site-header"}}
</div>
</div>
{{/tag}}