update: adjust header brand favicon, banner, etc
This commit is contained in:
Jeffrey Tse
parent
563c82dd52
commit
fc7e421ae2
8 changed files with 74 additions and 55 deletions
|
|
@ -4,10 +4,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="google-translate-customization" content="108d9124921d80c3-80e20d618ff053c8-g4f02ec6f3dba68b7-c"></meta>
|
||||
{%- seo -%}
|
||||
{%- if site.favicon -%}
|
||||
<link rel="shortcut icon" href="{{ site.favicon }}">
|
||||
{%- endif -%}
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
|
||||
{%- feed_meta -%}
|
||||
{%- if jekyll.environment == 'production' and site.google_analytics -%}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
{% if banner %}
|
||||
|
||||
{% assign auto_banner = true %}
|
||||
{% assign array = banner | split: '//' %}
|
||||
{% assign array = banner | split: '/' %}
|
||||
{% assign protocol = array[0] %}
|
||||
|
||||
{% if array.size > 1 and (protocol == '' or protocol == 'http:' or protocol == 'https:') %}
|
||||
|
|
@ -57,9 +57,23 @@
|
|||
</section>
|
||||
|
||||
{%- if auto_banner -%}
|
||||
|
||||
{%- assign selector = ".page-banner-img" -%}
|
||||
{%- assign seed = page.id | append: '-seed-' | append: banner -%}
|
||||
|
||||
{%- if banner == "default" -%}
|
||||
|
||||
{%- assign heading = page.heading | default: page.title | escape -%}
|
||||
{%- assign subheading = page.subheading | default: page.subtitle | escape -%}
|
||||
{%- assign seed = page.date | append: heading | append: subheading -%}
|
||||
|
||||
{%- else -%}
|
||||
|
||||
{%- assign seed = 'theme-' | append: banner -%}
|
||||
|
||||
{%- endif -%}
|
||||
|
||||
{%- include extensions/trianglify.html -%}
|
||||
|
||||
{%- endif -%}
|
||||
|
||||
{%- endif -%}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
<a class="site-title" rel="author" href="{{ "/" | relative_url }}">
|
||||
{%- if site.favicon -%}
|
||||
<img class="site-favicon" title="{{ site.title | escape }}" src="{{
|
||||
site.favicon }}">
|
||||
{%- endif -%}
|
||||
<a class="site-brand-inner" rel="author" href="{{ "/" | relative_url }}">
|
||||
<img class="site-favicon" title="{{ site.title | escape }}" src="{{ site.favicon }}" onerror="this.style.display='none'">
|
||||
{{ site.title | escape }}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ $footer-height: $header-height * 1.05 !default;
|
|||
$footer-text-color: rgba(lighten(invert($theme-color), 30%), 50%) !default;
|
||||
$footer-background-color: darken($theme-color, 5%) !default;
|
||||
|
||||
$banner-height: 350px !default;
|
||||
$banner-height: 380px !default;
|
||||
$banner-text-color: lighten($white-color, 0%) !default;
|
||||
$banner-background: darken(#333, 5%) !default;
|
||||
|
||||
|
|
|
|||
|
|
@ -226,15 +226,6 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Vertical center
|
||||
*/
|
||||
%vertical-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/**
|
||||
* Flex layout
|
||||
*/
|
||||
|
|
@ -256,3 +247,33 @@ table {
|
|||
transform: scale(0.9999); /* <-- fix the sticky x overflow issue */
|
||||
top: $top;
|
||||
}
|
||||
|
||||
/**
|
||||
* Vertical center
|
||||
*/
|
||||
@mixin vertical-center($position) {
|
||||
position: $position;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/**
|
||||
* Horizontal center
|
||||
*/
|
||||
@mixin horizontal-center($position) {
|
||||
position: $position;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/**
|
||||
* Center background image
|
||||
*/
|
||||
@mixin center-image {
|
||||
height: 100%;
|
||||
max-width: 1000%;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,36 +16,30 @@
|
|||
}
|
||||
|
||||
.site-brand {
|
||||
@extend %vertical-center;
|
||||
|
||||
float: left;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
@include vertical-center(absolute);
|
||||
margin-right: 50px;
|
||||
|
||||
.site-favicon {
|
||||
margin-right: 10px;
|
||||
height: 65%;
|
||||
max-height: 65%;
|
||||
border-radius: 65%;
|
||||
box-shadow: 0 0 2px #080808d1;
|
||||
transition: 0.2s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 5px #080808d1;
|
||||
}
|
||||
}
|
||||
|
||||
.site-title {
|
||||
.site-brand-inner {
|
||||
@include relative-font-size(1.125);
|
||||
font-weight: $base-font-weight;
|
||||
line-height: $header-height;
|
||||
text-shadow: 0 0 3px #080808d1;
|
||||
filter: drop-shadow(0 0 2px #08080880);
|
||||
text-shadow: 0 0 2px #080808d0;
|
||||
letter-spacing: -1px;
|
||||
transition: drop-shadow 0.2s;
|
||||
|
||||
&, &:visited {
|
||||
color: $header-text-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: drop-shadow(0 0 3px #080808a0);
|
||||
}
|
||||
|
||||
.site-favicon {
|
||||
display: inline-block;
|
||||
height: $header-height / 1.5;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -157,7 +151,7 @@
|
|||
*/
|
||||
.page-content {
|
||||
@extend %flex-1; /* <-- Keep footer on the bottom */
|
||||
padding: $spacing-unit 0;
|
||||
padding: $spacing-unit * 1.5 0;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
|
|
@ -280,19 +274,12 @@
|
|||
|
||||
.page-banner-img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
& > *:first-child {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 100%;
|
||||
max-width: 1000%;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
overflow: hidden;
|
||||
@include center-image;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -301,9 +288,8 @@
|
|||
}
|
||||
|
||||
.page-banner-inner {
|
||||
@extend %vertical-center;
|
||||
@include vertical-center(relative);
|
||||
|
||||
position: relative;
|
||||
color: $banner-text-color;
|
||||
padding: 10px 5px;
|
||||
text-shadow: 1px 1px 2px #333;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
// Default theme colors
|
||||
$theme-colors: (
|
||||
spacegrey: #222222,
|
||||
spacegrey: #353535,
|
||||
inkpurple: #543581,
|
||||
aquablue: #00aaa0,
|
||||
azureblue: #2863b1,
|
||||
|
|
@ -19,7 +19,7 @@ $theme-color: map-get($theme-colors, "spacegrey");
|
|||
@if map-has-key($theme-colors, $theme-name) {
|
||||
$theme-color: map-get($theme-colors, $theme-name);
|
||||
} @else if str-index($theme-name, "#") == 1 {
|
||||
$theme-color: {{ site.theme_color | default: '#222' }};
|
||||
$theme-color: {{ site.theme_color | default: '#353535' }};
|
||||
}
|
||||
|
||||
@import "yat";
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
---
|
||||
# Feel free to add content and custom Front Matter to this file.
|
||||
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
|
||||
|
||||
layout: home
|
||||
title: home
|
||||
---
|
||||
|
|
|
|||
Loading…
Reference in a new issue