hernik/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: change theme styles

Browse source
This commit is contained in:
jeffreytse 2020-07-12 16:23:23 +08:00
parent 8ca77da4d4
commit 413f0997d9
7 changed files with 346 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
_includes/views/pagination.html
View file

@ -11,16 +11,23 @@
{%- for post in paginator.posts -%} {%- for post in paginator.posts -%}
<li> <li>
{%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%} {%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ post.date | date: date_format }}</span> <h2 class="post-title">
<h3>
{%- assign post_url = post.url | relative_url -%} {%- assign post_url = post.url | relative_url -%}
<a class="post-link" href="{{ post_url }}"> <a class="post-link" href="{{ post_url }}">
{{ post.title | escape }} {{ post.title | escape }}
</a> </a>
</h3> </h2>
<div class="post-meta">
<span class="post-date">{{ post.date | date: date_format }}</span>
</div>
<p class="post-excerpt"> <p class="post-excerpt">
{{ post.content | strip_html | truncatewords: 50 }} {{ post.content | strip_html | truncatewords: 50 }}
</p> </p>
<div class="post-tags">
{%- for tag in post.tags -%}
<a class="post-tag" href="/tags.html#{{tag}}">#{{tag}}</a>
{%- endfor -%}
</div>
</li> </li>
{%- endfor -%} {%- endfor -%}
</ul> </ul>

11
_includes/views/post-header.html
View file

@ -1,6 +1,6 @@
<header class="post-header"> <header class="post-header">
<h1 class="post-title p-name" itemprop="name headline">{{ heading | default: page.title | escape }}</h1> <h1 class="post-title p-name" itemprop="name headline">{{ heading | default: page.title | escape }}</h1>
<h3>{{ subheading | default: page.subtitle | escape }}</h3> <h3 class="post-subtitle">{{ subheading | default: page.subtitle | escape }}</h3>
<p class="post-meta"> <p class="post-meta">
<time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished"> <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
@ -8,4 +8,13 @@
{{ page.date | date: date_format }} {{ page.date | date: date_format }}
</time> </time>
</p> </p>
{%- if page.tags.size > 0 -%}
<div class="post-tags">
{%- for tag in page.tags -%}
<a class="post-tag" href="/tags.html#{{tag}}">#{{tag}}</a>
{%- endfor -%}
</div>
{%- endif -%}
</header> </header>

16
_layouts/post.html
View file

@ -1,6 +1,6 @@
--- ---
layout: framework layout: framework
banner: 'default' banner:
banner_html: post-header.html banner_html: post-header.html
sidebar: sidebar:
- article-menu - article-menu
@ -21,18 +21,28 @@ sidebar:
<div class="post-nav"> <div class="post-nav">
{%- if page.previous -%} {%- if page.previous -%}
<a href="{{ page.previous.url }}" title="{{ page.previous.title | escape }}">&laquo; Prev</a> <a class="previous" href="{{ page.previous.url }}" title="{{ page.previous.title | escape }}">{{ page.previous.title | escape }}</a>
{%- else -%} {%- else -%}
<span></span> <span></span>
{%- endif -%} {%- endif -%}
{%- if page.next -%} {%- if page.next -%}
<a href="{{ page.next.url }}" title="{{ page.next.title | escape }}">Next &raquo;</a> <a class="next" href="{{ page.next.url }}" title="{{ page.next.title | escape }}">{{ page.next.title | escape }}</a>
{%- else -%} {%- else -%}
<span></span> <span></span>
{%- endif -%} {%- endif -%}
</div> </div>
<div class="post-related">
<div>Related Articles</div>
<ul>
{% assign posts = site[page.collection] | sample:4 %}
{%- for post in posts -%}
<li><a class="post-link" href="{{post.url}}">{{post.title}}</a></li>
{%- endfor -%}
</ul>
</div>
{%- if page.comments != false -%} {%- if page.comments != false -%}
{%- if site.disqus.shortname -%} {%- if site.disqus.shortname -%}

24
_sass/yat.scss
View file

@ -2,18 +2,18 @@
// Define defaults for each variable. // Define defaults for each variable.
$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, Oswald, $base-font-family: 'Noto Sans Light', 'AppleSDGothicNeo-Regular', 'Malgun
"Apple Color Emoji", "Open Sans", "FontAwesome", !default; Gothic', "Apple Color Emoji", Helvetica, Arial, sans-serif, Oswald, dotum, sans-serif, !default;
$base-font-size: 14px !default; $base-font-size: 14px !default;
$base-font-weight: 400 !default; $base-font-weight: 400 !default;
$small-font-size: $base-font-size * 0.875 !default; $small-font-size: $base-font-size * 0.875 !default;
$base-line-height: 1.5 !default; $base-line-height: 1.6 !default;
$spacing-unit: 30px !default; $spacing-unit: 30px !default;
$text-color: #333 !default; $text-color: #313b3f !default;
$background-color: #fefefe !default; $background-color: #fff !default;
$brand-color: #2a7ae2 !default; $brand-color: #ff5100 !default;
$grey-color: #828282 !default; $grey-color: #828282 !default;
$grey-color-light: lighten($grey-color, 40%) !default; $grey-color-light: lighten($grey-color, 40%) !default;
@ -24,16 +24,16 @@ $white-color: #fdfdfd !default;
$table-text-align: left !default; $table-text-align: left !default;
$header-height: $base-line-height * $base-font-size * 2.85 !default; $header-height: $base-line-height * $base-font-size * 2.85 !default;
$header-text-color: lighten($white-color, 10%) !default; $header-text-color: invert($theme-color) !default;
$header-background-color: $theme-color !default; $header-background-color: $theme-color !default;
$footer-height: $header-height * 1.05 !default; $footer-height: $header-height * 1.05 !default;
$footer-text-color: rgba(lighten(invert($theme-color), 30%), 50%) !default; $footer-text-color: lighten(invert($theme-color), 25%) !default;
$footer-background-color: darken($theme-color, 5%) !default; $footer-background-color: darken($theme-color, 5%) !default;
$banner-height: 420px !default; $banner-height: 640px !default;
$banner-text-color: lighten($white-color, 0%) !default; $banner-text-color: lighten($white-color, 0%) !default;
$banner-background: darken(#333, 5%) !default; $banner-background: rgba(0,0,0,0.8) !default;
// Width of the content area // Width of the content area
$content-width: 920px !default; $content-width: 920px !default;
@ -62,7 +62,7 @@ $on-laptop: 800px !default;
@import @import
"yat/base", "yat/base",
"yat/layout", "yat/layout",
"yat/syntax-highlighting", // "yat/syntax-highlighting",
"misc/article-menu", "misc/article-menu",
"misc/common-list", "misc/common-list",
"misc/google-translate" "misc/google-translate"

39
_sass/yat/_base.scss
View file

@ -14,7 +14,10 @@ dl, dd, ol, ul, figure {
* Basic styling * Basic styling
*/ */
body { body {
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; font-family: $base-font-family;
font-weight: $base-font-weight;
font-size: #{$base-font-size};
line-height: #{$base-line-height};
color: $text-color; color: $text-color;
background-color: $background-color; background-color: $background-color;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
@ -107,7 +110,7 @@ a {
text-decoration: none; text-decoration: none;
&:visited { &:visited {
color: darken($brand-color, 15%); color: #606060;
} }
&:hover { &:hover {
@ -149,22 +152,37 @@ blockquote {
pre, pre,
code { code {
@include relative-font-size(0.9375); @include relative-font-size(0.9375);
border-radius: 3px;
background-color: #3d3d3d;
} }
code { code {
padding: 1px 5px; padding: 1px 5px;
border-radius: 3px;
color: #fff;
background-color: $brand-color;
} }
pre { pre {
padding: 8px 12px;
overflow-x: auto; overflow-x: auto;
position: relative;
&:before {
content: attr(data-lang);
color: #fff;
background-color: #ff4e00;
padding: 0 .5em;
border-radius: 0 2px;
text-transform: uppercase;
text-align: center;
min-width: 32px;
display: inline-block;
position: absolute;
right: 0;
}
> code { > code {
border: 0; border: 0;
padding-right: 0; padding: 20px!important;
padding-left: 0; background-color: transparent;
} }
} }
@ -179,11 +197,6 @@ pre {
padding-right: $spacing-unit; padding-right: $spacing-unit;
padding-left: $spacing-unit; padding-left: $spacing-unit;
@extend %clearfix; @extend %clearfix;
@include media-query($on-laptop) {
padding-right: $spacing-unit / 2;
padding-left: $spacing-unit / 2;
}
} }
@ -205,7 +218,7 @@ table {
margin-bottom: $spacing-unit; margin-bottom: $spacing-unit;
width: 100%; width: 100%;
text-align: $table-text-align; text-align: $table-text-align;
color: lighten($text-color, 18%); color: lighten($text-color, 5%);
border-collapse: collapse; border-collapse: collapse;
tr { tr {

299
_sass/yat/_layout.scss
View file

@ -11,14 +11,31 @@ html {
&[data-scroll-status='top'] { &[data-scroll-status='top'] {
header.site-header-transparent { header.site-header-transparent {
height: 0; height: 0;
margin-top: 20px;
background-color: transparent;
transition: 0.1s height,background-color,box-shadow;
&.site-header { &.site-header {
text-shadow: 0 0 2px #505050a0; .site-brand-inner, .page-link {
color: #fff;
transition: 0.1s color;
}
@include media-query($on-laptop) {
.page-link {
color: unset;
}
.menu-icon {
> svg {
fill: $white-color;
}
}
}
} }
} }
footer.site-footer { footer.site-footer {
color: #888;
background-color: transparent; background-color: transparent;
.site-footer-inner { .site-footer-inner {
@ -46,11 +63,22 @@ html {
height: $header-height; height: $header-height;
width: 100%; width: 100%;
transition: height 0.2s, text-shadow 0.2s, top 0.2s; transition: height 0.2s, text-shadow 0.2s, top 0.2s;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, .06);
// Positioning context for the mobile navigation icon // Positioning context for the mobile navigation icon
@include flex-sticky(0); @include flex-sticky(0);
z-index: 1000; z-index: 1000;
& > .wrapper {
margin: 0 60px;
max-width: 100%;
@include media-query(1024px) {
margin: unset;
max-width: unset;
}
}
a { a {
text-decoration: none; text-decoration: none;
} }
@ -68,16 +96,12 @@ html {
@include relative-font-size(1.125); @include relative-font-size(1.125);
font-weight: $base-font-weight; font-weight: $base-font-weight;
letter-spacing: -1px; letter-spacing: -1px;
transition: filter 0.2s; transition: 0.1s filter color;
&, &:visited { &, &:visited {
color: $header-text-color; color: $header-text-color;
} }
&:hover {
filter: drop-shadow(0 0 2px #08080880);
}
.site-favicon { .site-favicon {
display: inline-block; display: inline-block;
height: $header-height / 1.5; height: $header-height / 1.5;
@ -87,7 +111,7 @@ html {
} }
.site-nav { .site-nav {
@include relative-font-size(1.025); @include relative-font-size(1.125);
line-height: $header-height; line-height: $header-height;
position: absolute; position: absolute;
right: 0; right: 0;
@ -102,16 +126,20 @@ html {
} }
.page-link { .page-link {
color: $header-text-color;
line-height: $base-line-height; line-height: $base-line-height;
color: $header-text-color;
transition: 0.1s ease-in-out;
// Gaps between nav items, but not on the last one // Gaps between nav items, but not on the last one
&:not(:last-child) { &:not(:last-child) {
margin-right: 20px; margin-right: 24px;
&:hover {
text-decoration: underline;
}
} }
} }
@include media-query($on-palm) { @include media-query($on-laptop) {
position: absolute; position: absolute;
top: 0; top: 0;
text-align: left; text-align: left;
@ -128,13 +156,16 @@ html {
text-align: center; text-align: center;
> svg { > svg {
fill: $white-color; fill: rgba($header-text-color, 80%);
transition: 0.1s fill;
} }
} }
input ~ .trigger { input ~ .trigger {
clear: both; clear: both;
display: none; display: none;
border-radius: 3px;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .06);
} }
input:checked ~ .trigger { input:checked ~ .trigger {
@ -155,7 +186,7 @@ html {
* Site footer * Site footer
*/ */
.site-footer { .site-footer {
@include relative-font-size(0.9); @include relative-font-size(1.0);
color: $footer-text-color; color: $footer-text-color;
background-color: $footer-background-color; background-color: $footer-background-color;
text-align: left; text-align: left;
@ -163,11 +194,11 @@ html {
.site-footer-inner { .site-footer-inner {
transition: border-top 0.2s; transition: border-top 0.2s;
padding: $spacing-unit * 0.8 0; padding: $spacing-unit * 1.8 0;
} }
a { a {
$a-color: invert(mix(invert($theme-color), #0030ae)); $a-color: $brand-color;
color: $a-color; color: $a-color;
&:hover { &:hover {
@ -193,6 +224,15 @@ html {
@include relative-font-size(2.25); @include relative-font-size(2.25);
} }
} }
.post-tags {
display: inline-block;
padding-right: 150px;
.post-tag {
margin: 0 12px 0 0;
}
}
} }
/** /**
@ -201,7 +241,7 @@ html {
.page-content { .page-content {
@extend %flex-1; /* <-- Keep footer on the bottom */ @extend %flex-1; /* <-- Keep footer on the bottom */
-ms-flex: none; /* <-- Fix IE footer issue */ -ms-flex: none; /* <-- Fix IE footer issue */
padding: $spacing-unit * 1.5 0; padding: $spacing-unit * 2 0;
} }
.page-heading { .page-heading {
@ -221,20 +261,65 @@ html {
list-style: none; list-style: none;
> li { > li {
margin-bottom: $spacing-unit; margin-bottom: $spacing-unit * 1.5;
padding-bottom: 30px;
&:not(:last-child) {
border-bottom: 1px solid #e3e3e3;
}
}
}
.post-title {
margin-bottom: 2px;
a {
text-decoration: none;
&:after {
content: 'NEW';
position: absolute;
margin-left: 8px;
margin-top: 3px;
padding: 0px 3px;
background-color: $brand-color;
color: #fff;
font-size: 10px;
font-weight: 600;
border-radius: 2px;
}
&:visited:after {
background-color: #fff;
}
} }
} }
.post-meta { .post-meta {
font-size: $small-font-size; font-size: $base-font-size;
color: $grey-color; color: $grey-color;
margin-bottom: $spacing-unit * 0.5;
} }
.post-link { .post-link {
@include relative-font-size(1.5); @include relative-font-size(1.5);
display: block;
font-weight: $base-font-weight * 1.5; font-weight: $base-font-weight * 1.5;
color: #15171a;
}
.post-excerpt {
color: #777;
}
.post-tags .post-tag {
text-decoration: none;
border: 1px solid;
padding: 2px 4px;
border-radius: 2px;
&:not(:first-child) {
margin-left: 8px;
}
} }
} }
@ -245,6 +330,20 @@ html {
.post { .post {
@extend %post-header; @extend %post-header;
.post-header {
margin: 50px auto 60px;
padding: 0 0 20px;
border-bottom: 1px solid #ebebeb;
.post-title {
margin-bottom: 2px;
}
.post-meta {
color: #808080;
}
}
.post-content { .post-content {
margin-bottom: $spacing-unit; margin-bottom: $spacing-unit;
@ -271,6 +370,67 @@ html {
@include relative-font-size(1.125); @include relative-font-size(1.125);
} }
} }
img, iframe {
margin-left: auto;
margin-right: auto;
display: block;
}
h2, h3, h4, h5, h6 {
margin: 60px 0 19px;
}
p, hr {
margin-bottom: 24px;
}
hr {
height: 1px;
background-color: #ebebeb;
border: none;
}
}
.post-related {
&>*:first-child {
@include relative-font-size(1.425);
color: #333;
margin-bottom: 14px;
}
ul {
margin-left: 15px;
.post-link {
@include relative-font-size(1.075);
}
a {
text-decoration: none;
color: #666;
&:hover {
color: #333;
}
&:after {
content: 'NEW';
position: absolute;
margin-left: 8px;
margin-top: 3px;
padding: 0px 3px;
background-color: $brand-color;
color: #fff;
font-size: 10px;
font-weight: 600;
border-radius: 2px;
}
&:visited:after {
background-color: #fff;
}
}
}
} }
} }
@ -281,9 +441,35 @@ html {
.post-nav { .post-nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 72px 0 59px;
padding: 31px 0 0;
a { a {
display: flex; @include relative-font-size(1.125);
line-height: 15px;
color: #666;
}
.previous:before {
content: ' ';
border: solid #787878;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
margin-right: 8px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.next:after {
content: ' ';
border: solid #787878;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
margin-left: 8px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
} }
} }
@ -322,6 +508,7 @@ html {
height: $banner-height; height: $banner-height;
background-color: $banner-background; background-color: $banner-background;
transition: height 0.2s; transition: height 0.2s;
margin-bottom: 32px;
.page-banner-img { .page-banner-img {
position: absolute; position: absolute;
@ -343,16 +530,17 @@ html {
color: $banner-text-color; color: $banner-text-color;
padding: 10px 5px; padding: 10px 5px;
text-shadow: 1px 1px 2px #333; text-shadow: 1px 1px 2px #33333355;
& > *:first-child { & > *:first-child {
margin: 0; margin: 0;
> :nth-child(1) { > :nth-child(1) {
@include relative-font-size(2.825); @include relative-font-size(3.9);
letter-spacing: -1px; letter-spacing: -1px;
line-height: 1; line-height: 0.95;
margin-bottom: 10px; margin-bottom: 18px;
font-weight: normal;
@include media-query($on-palm) { @include media-query($on-palm) {
@include relative-font-size(2.425); @include relative-font-size(2.425);
@ -360,13 +548,41 @@ html {
} }
> :nth-child(2) { > :nth-child(2) {
font-weight: $base-font-weight * 1.5; font-weight: normal;
margin-bottom: 0;
} }
> :last-child { > :last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.post-subtitle {
@include relative-font-size(1.525);
color: #ffffffcc;
padding-right: 280px;
}
.post-meta {
color: #ffffffcc;
}
.post-tags {
color: #999;
padding-right: 280px;
.post-tag {
@include relative-font-size(1.125);
display: inline-block;
text-decoration: none;
margin: 9px 12px 0 0;
color: #fff;
&:hover {
text-decoration: underline;
}
}
}
} }
@include media-query($on-palm) { @include media-query($on-palm) {
@ -391,7 +607,7 @@ html {
@include flex-sticky($header-height + 20px); @include flex-sticky($header-height + 20px);
@include media-query($on-palm) { @include media-query($on-laptop) {
display: none; display: none;
} }
@ -419,7 +635,6 @@ html {
margin-top: 28px; margin-top: 28px;
} }
&:hover:before { &:hover:before {
content: '#'; content: '#';
left: -1em; left: -1em;
@ -432,5 +647,33 @@ html {
color: $grey-color; color: $grey-color;
} }
li a {
&.post-link {
margin-left: 5px;
}
color: #303030;
&:hover {
color: #000;
}
&:after {
content: 'NEW';
position: absolute;
margin-left: 8px;
margin-top: 3px;
padding: 0px 3px;
background-color: $brand-color;
color: #fff;
font-size: 10px;
font-weight: 600;
border-radius: 2px;
}
&:visited:after {
background-color: #fff;
}
}
} }

12
assets/css/main.scss
View file

@ -4,22 +4,18 @@
// Default theme colors // Default theme colors
$theme-colors: ( $theme-colors: (
coolblack: #090a0b,
spacegrey: #353535, spacegrey: #353535,
inkpurple: #543581, snowwhite: #ffffff,
aquablue: #00aaa0,
azureblue: #2863b1,
gracered: #a12a50,
aloegreen: #3d9e56,
rustbrown: #795548,
); );
$theme-name: "{{ site.theme_color }}"; $theme-name: "{{ site.theme_color }}";
$theme-color: map-get($theme-colors, "spacegrey"); $theme-color: map-get($theme-colors, "snowwhite");
@if map-has-key($theme-colors, $theme-name) { @if map-has-key($theme-colors, $theme-name) {
$theme-color: map-get($theme-colors, $theme-name); $theme-color: map-get($theme-colors, $theme-name);
} @else if str-index($theme-name, "#") == 1 { } @else if str-index($theme-name, "#") == 1 {
$theme-color: {{ site.theme_color | default: '#353535' }}; $theme-color: {{ site.theme_color | default: '#ffffff' }};
} }
@import "yat"; @import "yat";