From 18a04f4a3c1a7f702ccd91f7651ba4fbb84c1071 Mon Sep 17 00:00:00 2001 From: Damillora Date: Wed, 13 Nov 2019 00:51:01 +0700 Subject: [PATCH] Styling changes --- assets/css/styles.css | 54 ++++++++++++++++++++++++++++++++-------- author.hbs | 6 ++--- index.hbs | 8 +++--- page.hbs | 6 ++--- partials/site-header.hbs | 2 ++ post.hbs | 40 +++++++++++++++++++++-------- tag.hbs | 6 ++--- 7 files changed, 83 insertions(+), 39 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 0cb2254..ec3f495 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -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; diff --git a/author.hbs b/author.hbs index ee2c207..a68de18 100644 --- a/author.hbs +++ b/author.hbs @@ -2,11 +2,11 @@ {{#author}}
{{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}} -
+
-
+

Author

@@ -45,9 +45,7 @@
-
{{> "site-header"}} -
{{/author}} diff --git a/index.hbs b/index.hbs index 934c1fd..05b8f74 100644 --- a/index.hbs +++ b/index.hbs @@ -1,12 +1,10 @@ {{!< default}} -
+
{{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}} -
+
-
- {{> "site-header"}} -
+ {{> "site-header"}}
{{#foreach posts}} diff --git a/page.hbs b/page.hbs index e1e10c3..e63e28f 100644 --- a/page.hbs +++ b/page.hbs @@ -8,7 +8,7 @@
-
+
{{#if primary_tag}} {{#primary_tag}}
@@ -21,14 +21,12 @@
-
{{> "site-header"}} -
-
+
{{content}}
diff --git a/partials/site-header.hbs b/partials/site-header.hbs index aea4358..b24cf55 100644 --- a/partials/site-header.hbs +++ b/partials/site-header.hbs @@ -1,3 +1,4 @@ +
{{#if @site.logo}}
@@ -19,3 +20,4 @@ {{navigation}}
+
diff --git a/post.hbs b/post.hbs index e0e2e30..f103727 100644 --- a/post.hbs +++ b/post.hbs @@ -1,14 +1,13 @@ {{!< default}} {{#post}} -
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
-
+
{{#if primary_tag}} {{#primary_tag}}
@@ -40,20 +39,21 @@
-
{{> "site-header"}} -
-
-
-
+
+
+ {{/post}}
diff --git a/tag.hbs b/tag.hbs index f6eb5a7..97bb290 100644 --- a/tag.hbs +++ b/tag.hbs @@ -3,11 +3,11 @@ {{#tag}}
{{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}} -
+
-
+

Tag

@@ -23,9 +23,7 @@
-
{{> "site-header"}} -
{{/tag}}