From 413f0997d9ad36a8be97387456f47c740e071e95 Mon Sep 17 00:00:00 2001 From: jeffreytse Date: Sun, 12 Jul 2020 16:23:23 +0800 Subject: feat: change theme styles --- _includes/views/pagination.html | 13 +- _includes/views/post-header.html | 11 +- _layouts/post.html | 16 ++- _sass/yat.scss | 24 ++-- _sass/yat/_base.scss | 39 +++-- _sass/yat/_layout.scss | 299 +++++++++++++++++++++++++++++++++++---- assets/css/main.scss | 12 +- 7 files changed, 346 insertions(+), 68 deletions(-) diff --git a/_includes/views/pagination.html b/_includes/views/pagination.html index 11eb5aa..48e27bb 100644 --- a/_includes/views/pagination.html +++ b/_includes/views/pagination.html @@ -11,16 +11,23 @@ {%- for post in paginator.posts -%}
  • {%- assign date_format = site.yat.date_format | default: "%b %-d, %Y" -%} - {{ post.date | date: date_format }} -

    +

    {%- assign post_url = post.url | relative_url -%} {{ post.title | escape }} -

    + +
    + {{ post.date | date: date_format }} +

    {{ post.content | strip_html | truncatewords: 50 }}

    +
    + {%- for tag in post.tags -%} + #{{tag}} + {%- endfor -%} +
    • {%- endfor -%} diff --git a/_includes/views/post-header.html b/_includes/views/post-header.html index 82329bd..d109597 100644 --- a/_includes/views/post-header.html +++ b/_includes/views/post-header.html @@ -1,6 +1,6 @@

    {{ heading | default: page.title | escape }}

    -

    {{ subheading | default: page.subtitle | escape }}

    +

    {{ subheading | default: page.subtitle | escape }}

    + + {%- if page.tags.size > 0 -%} +
    + {%- for tag in page.tags -%} + #{{tag}} + {%- endfor -%} +
    + {%- endif -%} +
    diff --git a/_layouts/post.html b/_layouts/post.html index dbf623d..9195f13 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -1,6 +1,6 @@ --- layout: framework -banner: 'default' +banner: banner_html: post-header.html sidebar: - article-menu @@ -21,18 +21,28 @@ sidebar:
    {%- if page.previous -%} - « Prev + {%- else -%} {%- endif -%} {%- if page.next -%} - Next » + {%- else -%} {%- endif -%}
    +
    +
    Related Articles
    + +
    + {%- if page.comments != false -%} {%- if site.disqus.shortname -%} diff --git a/_sass/yat.scss b/_sass/yat.scss index 4db827b..8d1730f 100644 --- a/_sass/yat.scss +++ b/_sass/yat.scss @@ -2,18 +2,18 @@ // Define defaults for each variable. -$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, Oswald, -"Apple Color Emoji", "Open Sans", "FontAwesome", !default; -$base-font-size: 14px !default; +$base-font-family: 'Noto Sans Light', 'AppleSDGothicNeo-Regular', 'Malgun +Gothic', "Apple Color Emoji", Helvetica, Arial, sans-serif, Oswald, dotum, sans-serif, !default; +$base-font-size: 14px !default; $base-font-weight: 400 !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; -$text-color: #333 !default; -$background-color: #fefefe !default; -$brand-color: #2a7ae2 !default; +$text-color: #313b3f !default; +$background-color: #fff !default; +$brand-color: #ff5100 !default; $grey-color: #828282 !default; $grey-color-light: lighten($grey-color, 40%) !default; @@ -24,16 +24,16 @@ $white-color: #fdfdfd !default; $table-text-align: left !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; $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; -$banner-height: 420px !default; +$banner-height: 640px !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 $content-width: 920px !default; @@ -62,7 +62,7 @@ $on-laptop: 800px !default; @import "yat/base", "yat/layout", - "yat/syntax-highlighting", + // "yat/syntax-highlighting", "misc/article-menu", "misc/common-list", "misc/google-translate" diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss index 38c41e5..61c3d87 100644 --- a/_sass/yat/_base.scss +++ b/_sass/yat/_base.scss @@ -14,7 +14,10 @@ dl, dd, ol, ul, figure { * Basic styling */ 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; background-color: $background-color; -webkit-text-size-adjust: 100%; @@ -107,7 +110,7 @@ a { text-decoration: none; &:visited { - color: darken($brand-color, 15%); + color: #606060; } &:hover { @@ -149,22 +152,37 @@ blockquote { pre, code { @include relative-font-size(0.9375); - border-radius: 3px; - background-color: #3d3d3d; } code { padding: 1px 5px; + border-radius: 3px; + color: #fff; + background-color: $brand-color; } pre { - padding: 8px 12px; 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 { border: 0; - padding-right: 0; - padding-left: 0; + padding: 20px!important; + background-color: transparent; } } @@ -179,11 +197,6 @@ pre { padding-right: $spacing-unit; padding-left: $spacing-unit; @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; width: 100%; text-align: $table-text-align; - color: lighten($text-color, 18%); + color: lighten($text-color, 5%); border-collapse: collapse; tr { diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss index 50bbb13..c0e7064 100644 --- a/_sass/yat/_layout.scss +++ b/_sass/yat/_layout.scss @@ -11,14 +11,31 @@ html { &[data-scroll-status='top'] { header.site-header-transparent { height: 0; + margin-top: 20px; + background-color: transparent; + transition: 0.1s height,background-color,box-shadow; &.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 { - color: #888; background-color: transparent; .site-footer-inner { @@ -46,11 +63,22 @@ html { height: $header-height; width: 100%; 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 @include flex-sticky(0); z-index: 1000; + & > .wrapper { + margin: 0 60px; + max-width: 100%; + + @include media-query(1024px) { + margin: unset; + max-width: unset; + } + } + a { text-decoration: none; } @@ -68,16 +96,12 @@ html { @include relative-font-size(1.125); font-weight: $base-font-weight; letter-spacing: -1px; - transition: filter 0.2s; + transition: 0.1s filter color; &, &:visited { color: $header-text-color; } - &:hover { - filter: drop-shadow(0 0 2px #08080880); - } - .site-favicon { display: inline-block; height: $header-height / 1.5; @@ -87,7 +111,7 @@ html { } .site-nav { - @include relative-font-size(1.025); + @include relative-font-size(1.125); line-height: $header-height; position: absolute; right: 0; @@ -102,16 +126,20 @@ html { } .page-link { - color: $header-text-color; 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 &: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; top: 0; text-align: left; @@ -128,13 +156,16 @@ html { text-align: center; > svg { - fill: $white-color; + fill: rgba($header-text-color, 80%); + transition: 0.1s fill; } } input ~ .trigger { clear: both; display: none; + border-radius: 3px; + box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .06); } input:checked ~ .trigger { @@ -155,7 +186,7 @@ html { * Site footer */ .site-footer { - @include relative-font-size(0.9); + @include relative-font-size(1.0); color: $footer-text-color; background-color: $footer-background-color; text-align: left; @@ -163,11 +194,11 @@ html { .site-footer-inner { transition: border-top 0.2s; - padding: $spacing-unit * 0.8 0; + padding: $spacing-unit * 1.8 0; } a { - $a-color: invert(mix(invert($theme-color), #0030ae)); + $a-color: $brand-color; color: $a-color; &:hover { @@ -193,6 +224,15 @@ html { @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 { @extend %flex-1; /* <-- Keep footer on the bottom */ -ms-flex: none; /* <-- Fix IE footer issue */ - padding: $spacing-unit * 1.5 0; + padding: $spacing-unit * 2 0; } .page-heading { @@ -221,20 +261,65 @@ html { list-style: none; > 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 { - font-size: $small-font-size; + font-size: $base-font-size; color: $grey-color; + margin-bottom: $spacing-unit * 0.5; } .post-link { @include relative-font-size(1.5); - - display: block; 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 { @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 { margin-bottom: $spacing-unit; @@ -271,6 +370,67 @@ html { @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 { display: flex; justify-content: space-between; + margin: 72px 0 59px; + padding: 31px 0 0; 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; background-color: $banner-background; transition: height 0.2s; + margin-bottom: 32px; .page-banner-img { position: absolute; @@ -343,16 +530,17 @@ html { color: $banner-text-color; padding: 10px 5px; - text-shadow: 1px 1px 2px #333; + text-shadow: 1px 1px 2px #33333355; & > *:first-child { margin: 0; > :nth-child(1) { - @include relative-font-size(2.825); + @include relative-font-size(3.9); letter-spacing: -1px; - line-height: 1; - margin-bottom: 10px; + line-height: 0.95; + margin-bottom: 18px; + font-weight: normal; @include media-query($on-palm) { @include relative-font-size(2.425); @@ -360,13 +548,41 @@ html { } > :nth-child(2) { - font-weight: $base-font-weight * 1.5; + font-weight: normal; + margin-bottom: 0; } > :last-child { 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) { @@ -391,7 +607,7 @@ html { @include flex-sticky($header-height + 20px); - @include media-query($on-palm) { + @include media-query($on-laptop) { display: none; } @@ -419,7 +635,6 @@ html { margin-top: 28px; } - &:hover:before { content: '#'; left: -1em; @@ -432,5 +647,33 @@ html { 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; + } + } } diff --git a/assets/css/main.scss b/assets/css/main.scss index 112a9ef..afe4e59 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -4,22 +4,18 @@ // Default theme colors $theme-colors: ( + coolblack: #090a0b, spacegrey: #353535, - inkpurple: #543581, - aquablue: #00aaa0, - azureblue: #2863b1, - gracered: #a12a50, - aloegreen: #3d9e56, - rustbrown: #795548, + snowwhite: #ffffff, ); $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) { $theme-color: map-get($theme-colors, $theme-name); } @else if str-index($theme-name, "#") == 1 { - $theme-color: {{ site.theme_color | default: '#353535' }}; + $theme-color: {{ site.theme_color | default: '#ffffff' }}; } @import "yat"; -- cgit v1.2.3