feat: change theme styles

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

View file

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

View file

@ -1,6 +1,6 @@
<header class="post-header">
<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">
<time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
@ -8,4 +8,13 @@
{{ page.date | date: date_format }}
</time>
</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>

View file

@ -1,6 +1,6 @@
---
layout: framework
banner: 'default'
banner:
banner_html: post-header.html
sidebar:
- article-menu
@ -21,18 +21,28 @@ sidebar:
<div class="post-nav">
{%- 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 -%}
<span></span>
{%- endif -%}
{%- 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 -%}
<span></span>
{%- endif -%}
</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 site.disqus.shortname -%}

View file

@ -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-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"

View file

@ -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 {

View file

@ -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;
}
}
}

View file

@ -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";