feat: change theme styles
This commit is contained in:
jeffreytse
parent
8ca77da4d4
commit
413f0997d9
7 changed files with 346 additions and 68 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 }}">« 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 »</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 -%}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Reference in a new issue