mirror of https://github.com/Damillora/Yuika
Styling changes
This commit is contained in:
parent
2834ff0eaf
commit
18a04f4a3c
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
6
page.hbs
6
page.hbs
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
40
post.hbs
40
post.hbs
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
6
tag.hbs
6
tag.hbs
|
|
@ -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}}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue