Skip to content

Commit

Permalink
fix: Modify title & banner image
Browse files Browse the repository at this point in the history 
fix: Modify banner image size

fix: Fix title image error

fix: Modify image file

fix: Modify files to render image file

fix: title image

fix: title image

fix: Modify title image path

fix: Set header background color

fix: Modify header menu text color

fix: Modify header menu text color

fix: Modify header menu text color

fix: Modify url custom & Add test post

fix: Modify blog title image
  • Loading branch information
@anso33
anso33 committed Nov 10, 2023
1 parent dad35fb commit 4c946de
Show file tree
Hide file tree
Showing 13 changed files with 274 additions and 227 deletions.
32 changes: 18 additions & 14 deletions _config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
# You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}.

title: Kernel360 Tech Blog
title: Kernel360 Crew Tech Blog
#email: [email protected]
author: Kernel360

Expand All @@ -40,7 +40,7 @@ author: Kernel360
# "Copyright (c) 2017-{currentYear} <a href="https://example.com">{author}</a>"
# "Copyright © 2017-2021 Foobar"
#
copyright: "Unpublished Work (cleft) 2017-{currentYear} {author}"
copyright: "Unpublished Work (cleft) 2023-{currentYear} {author}"

description: >- # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this
Expand Down Expand Up @@ -169,18 +169,19 @@ yat:
# Banner default settings
# These banner settings are for global banner default, but you can also
# config it by the front matter for one specific post
# banner:
# video: null # Video banner source
# loop: true # Video loop
# volume: 0 # Video volume (100% is 1.0)
# start_at: 0 # Video start time
# image: null # Image banner source
# opacity: 1.0 # Banner opacity (100% is 1.0)
# background: "rgba(0, 0, 0, 0.8)" # Banner background (Could be a image)
# height: "640px" # Banner default height
# min_height: null # Banner minimum height
# heading_style: null # Custom heading style (e.g. "font-weight: bold; text-decoration: underline")
# subheading_style: null # Custom subheading style (e.g. color: gold)
banner:
# video: null # Video banner source
# loop: true # Video loop
# volume: 0 # Video volume (100% is 1.0)
# start_at: 0 # Video start time
# image: null # Image banner source
# opacity: 1.0 # Banner opacity (100% is 1.0)
# background: "rgba(0, 0, 0, 0.8)" # Banner background (Could be a image)
# height: "640px" # Banner default height
# min_height: null # Banner minimum height
heading_style: # Custom heading style (e.g. "font-weight: bold; text-decoration: underline")
font-weight: $base-font-max-bold-weight
# subheading_style: null # Custom subheading style (e.g. color: gold)

# Excerpt settings
# excerpt:
Expand Down Expand Up @@ -239,6 +240,9 @@ yat:

# Build settings
# highlighter: none

permalink: /:title

markdown: kramdown
kramdown:
input: GFM
Expand Down
222 changes: 99 additions & 123 deletions _includes/views/banner.html
View file
Original file line number Diff line number Diff line change
@@ -1,131 +1,107 @@
{%- include functions.html func='log' level='debug' msg='Get banner_html value' -%}
{% assign name = 'banner_html' %}
{%- include functions.html func='get_value' -%}
{% assign banner_html = return %}
{%- include functions.html func='log' level='debug' msg='Get banner_html value'
-%} {% assign name = 'banner_html' %} {%- include functions.html
func='get_value' -%} {% assign banner_html = return %} {%- include
functions.html func='log' level='debug' msg='Get heading value' -%} {% assign
name = 'heading' %} {%- include functions.html func='get_value' -%} {% assign
heading = return %} {%- include functions.html func='log' level='debug' msg='Get
subheading value' -%} {% assign name = 'subheading' %} {%- include
functions.html func='get_value' -%} {% assign subheading = return %} {%- include
functions.html func='get_banner' -%} {%- if has_banner -%} {%- if
banner_background -%}
<style>
html .page-banner {
background: {{ banner_background }};
}
</style>
{%- endif -%} {%- if banner_height -%}
<style>
{%- assign num = banner_height | times: 1 -%}
{%- assign unit = banner_height | replace_first: num -%}
{%- assign banner_min_height = banner_min_height | default: banner_height -%}
html .page-banner {
height: {{ banner_height | times: 0.368 | append: unit }};
min-height: {{ banner_min_height }};
}
html[data-scroll-status="top"] .page-banner {
height: {{ banner_height }};
}
</style>
{%- endif -%} {%- if banner_opacity -%}
<style>
html .page-banner .page-banner-img > *:first-child {
opacity: {{ banner_opacity }};
}

{%- include functions.html func='log' level='debug' msg='Get heading value' -%}
{% assign name = 'heading' %}
{%- include functions.html func='get_value' -%}
{% assign heading = return %}

{%- include functions.html func='log' level='debug' msg='Get subheading value' -%}
{% assign name = 'subheading' %}
{%- include functions.html func='get_value' -%}
{% assign subheading = return %}

{%- include functions.html func='get_banner' -%}

{%- if has_banner -%}
{%- if banner_background -%}
<style>
html .page-banner {
background: {{ banner_background }};
}
</style>
{%- endif -%}
{%- if banner_height -%}
<style>
{%- assign num = banner_height | times: 1 -%}
{%- assign unit = banner_height | replace_first: num -%}
{%- assign banner_min_height = banner_min_height | default: banner_height -%}
html .page-banner {
height: {{ banner_height | times: 0.368 | append: unit }};
min-height: {{ banner_min_height }};
}
html[data-scroll-status="top"] .page-banner {
height: {{ banner_height }};
}
</style>
{%- endif -%}

{%- if banner_opacity -%}
<style>
html .page-banner .page-banner-img > *:first-child {
opacity: {{ banner_opacity }};
}

html[data-theme="dark"] .page-banner .page-banner-img > *:first-child {
opacity: {{ banner_opacity | times: 0.718 }};
}
</style>
{%- endif -%}
{%- if banner_heading_style -%}
<style>
html .page-banner .page-banner-inner > *:first-child > *:nth-child(1) {
{{ banner_heading_style }}
}
</style>
{%- endif -%}
{%- if banner_subheading_style -%}
<style>
html .page-banner .page-banner-inner > *:first-child > *:nth-child(2) {
{{ banner_subheading_style }}
}
</style>
{%- endif -%}
<section class="page-banner">
<div class="page-banner-img">
{%- if banner_video -%}
<video
autoplay=""
poster="{{ banner_image }}"
playsinline
>
<source src="{{ banner_video }}">
</video>
<script>
(function() {
var video = document.querySelector('.page-banner .page-banner-img > video');
var videoPlay = function() {
video.play().catch (function() {
video.muted = true;
video.play();
});
}

video.onloadstart = function() {
video.currentTime = {{ banner_start_at }};
video.volume = {{ banner_volume }};
video.muted = (video.volume == 0);
videoPlay();
}

video.onended = function() {
video.currentTime = {{ banner_start_at }};
video.volume = 0;
{%- if banner_loop -%}
html[data-theme="dark"] .page-banner .page-banner-img > *:first-child {
opacity: {{ banner_opacity | times: 0.718 }};
}
</style>
{%- endif -%} {%- if banner_heading_style -%}
<style>
html .page-banner .page-banner-inner > *:first-child > *:nth-child(1) {
{{ banner_heading_style }}
}
</style>
{%- endif -%} {%- if banner_subheading_style -%}
<style>
html .page-banner .page-banner-inner > *:first-child > *:nth-child(2) {
{{ banner_subheading_style }}
}
</style>
{%- endif -%}
<section class="page-banner">
<div class="page-banner-img">
{%- if banner_video -%}
<video autoplay="" poster="{{ banner_image }}" playsinline>
<source src="{{ banner_video }}" />
</video>
<script>
(function() {
var video = document.querySelector('.page-banner .page-banner-img > video');
var videoPlay = function() {
video.play().catch (function() {
video.muted = true;
video.play();
{%- endif -%}
}
})();
</script>
{%- else -%}
<div style="background-image: url({{ banner_image }})"></div>
<img class="img-placeholder" src="{{ banner_image }}">
{%- endif -%}
</div>
<div class="wrapper">
<div class="page-banner-inner">

{%- if banner_html -%}

{%- assign banner_html = 'views/' | append: banner_html -%}
{%- include {{ banner_html }} -%}

{%- else -%}
});
}

<div class="page-banner-default">
<h1 class="page-banner-heading">
{{ heading | default: page.title | escape }}
</h1>
<h2 class="page-banner-subheading">
{{ subheading | default: page.subtitle | escape }}
</h2>
</div>
video.onloadstart = function() {
video.currentTime = {{ banner_start_at }};
video.volume = {{ banner_volume }};
video.muted = (video.volume == 0);
videoPlay();
}

video.onended = function() {
video.currentTime = {{ banner_start_at }};
video.volume = 0;
{%- if banner_loop -%}
video.play();
{%- endif -%}
}
})();
</script>
{%- else -%}
<div style="background-image: url({{ banner_image }})"></div>
<img class="img-placeholder" src="{{ banner_image }}" />
{%- endif -%}
</div>
<div class="wrapper">
<div class="page-banner-inner">
{%- if banner_html -%} {%- assign banner_html = 'views/' | append:
banner_html -%} {%- include {{ banner_html }} -%} {%- else -%}

<div class="page-banner-default">
<h1 class="page-banner-heading">
{{ heading | default: page.title | escape }}
</h1>
<h2 class="page-banner-subheading">
{{ subheading | default: page.subtitle | escape }}
</h2>
</div>

{%- endif -%}
</div>
</section>
</div>
</section>
{%- endif -%}

87 changes: 39 additions & 48 deletions _includes/views/header.html
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,49 @@

{%- include functions.html func='get_banner' -%}

{%- include functions.html func='log' level='debug' msg='Get header_transparent value' -%}
{%- assign name = 'header_transparent' -%}
{%- include functions.html func='get_value' default=true -%}
{%- assign header_transparent = return -%}

{%- if has_banner and header_transparent -%}
{%- assign header_transparent_class = "site-header-transparent" -%}
{%- endif -%}
{%- include functions.html func='get_banner' -%} {%- include functions.html
func='log' level='debug' msg='Get header_transparent value' -%} {%- assign name
= 'header_transparent' -%} {%- include functions.html func='get_value'
default=true -%} {%- assign header_transparent = return -%} {%- if has_banner
and header_transparent -%} {%- assign header_transparent_class =
"site-header-transparent" -%} {%- endif -%}

<header class="site-header {{ header_transparent_class }}" role="banner">

<div class="wrapper">
<div class="site-header-inner">
{%- assign default_paths = site.pages | where: "dir", "/" | map: "path" -%}
{%- assign page_paths = site.header_pages | default: default_paths -%}
{%- assign default_paths = site.pages | where: "dir", "/" | map: "path"
-%} {%- assign page_paths = site.header_pages | default: default_paths -%}

<span class="site-brand">
{%- include views/site-brand.html -%}
</span>
<span class="site-brand"> {%- include views/site-brand.html -%} </span>

{%- if page_paths -%}
<nav class="site-nav">
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger">
<span class="menu-icon">
<svg viewBox="0 0 18 15" width="18px" height="15px">
<path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
</svg>
</span>
</label>

<div class="trigger">
{%- for path in page_paths -%}
{%- assign my_page = site.pages | where: "path", path | first -%}
{%- if my_page.title -%}
<a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | upcase | escape }}</a>
{%- endif -%}
{%- endfor -%}

{%- assign name = 'translate_langs' -%}
{%- include functions.html func='get_value' -%}
{%- assign translate_langs = return -%}
{%- if translate_langs.size > 0 -%}
{%- assign name = 'lang' -%}
{%- include functions.html func='get_value' default='en' -%}
{%- assign lang = return -%}
<span class="page-link">
{%- include extensions/google-translate.html -%}
</span>
{%- endif -%}
</div>
</nav>
<nav class="site-nav">
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger">
<span class="menu-icon">
<svg viewBox="0 0 18 15" width="18px" height="15px">
<path
d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"
/>
</svg>
</span>
</label>

<div class="trigger">
{%- for path in page_paths -%} {%- assign my_page = site.pages |
where: "path", path | first -%} {%- if my_page.title -%}

<a class="page-link" href="{{ my_page.url | relative_url }}"
>{{ my_page.title | upcase | escape }}</a
>
{%- endif -%} {%- endfor -%} {%- assign name = 'translate_langs' -%}
{%- include functions.html func='get_value' -%} {%- assign
translate_langs = return -%} {%- if translate_langs.size > 0 -%} {%-
assign name = 'lang' -%} {%- include functions.html func='get_value'
default='en' -%} {%- assign lang = return -%}
<span class="page-link">
{%- include extensions/google-translate.html -%}
</span>
{%- endif -%}
</div>
</nav>
{%- endif -%}
</div>
</div>
Expand Down
Loading

0 comments on commit 4c946de

Please sign in to comment.