Merge branch 'feature/improve-post-design'
This commit is contained in:
Cotes Chung
commit
99e468cae5
9 changed files with 146 additions and 135 deletions
|
|
@ -118,16 +118,16 @@
|
|||
{% assign _left = _snippet | split: '><' | last%}
|
||||
|
||||
{% if _left contains 'file="' %}
|
||||
{% assign _text = _left | split: 'file="' | last | split: '"' | first %}
|
||||
{% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
|
||||
{% assign _label_icon = 'far fa-file-code' %}
|
||||
{% else %}
|
||||
{% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
|
||||
{% capture _text %}{% include language-alias.html language=_lang %}{% endcapture %}
|
||||
{% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %}
|
||||
{% assign _label_icon = 'fas fa-code small' %}
|
||||
{% endif %}
|
||||
|
||||
{% capture _label %}
|
||||
<span text-data="{{ _text }}"><i class="fa-fw {{ _label_icon }}"></i></span>
|
||||
<span label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
|
||||
{% endcapture %}
|
||||
|
||||
{% assign _new_content = _new_content | append: _snippet
|
||||
|
|
|
|||
|
|
@ -10,6 +10,16 @@ tail_includes:
|
|||
|
||||
{% include lang.html %}
|
||||
|
||||
{% if page.image.src %}
|
||||
{% capture bg %}
|
||||
{% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
|
||||
{% endcapture %}
|
||||
<img src="{{ page.image.src }}" class="preview-img {{ bg | strip }}"
|
||||
alt="{{ page.image.alt | default: "Preview Image" }}"
|
||||
{% if page.image.width %}width="{{ page.image.width }}"{% endif %}
|
||||
{% if page.image.height %}height="{{ page.image.height }}"{% endif %}>
|
||||
{% endif %}
|
||||
|
||||
<h1 data-toc-skip>{{ page.title }}</h1>
|
||||
|
||||
<div class="post-meta text-muted d-flex flex-column">
|
||||
|
|
@ -47,17 +57,7 @@ tail_includes:
|
|||
</div> <!-- .post-meta -->
|
||||
|
||||
<div class="post-content">
|
||||
|
||||
{% if page.image.src %}
|
||||
<img src="{{ page.image.src }}"
|
||||
class="preview-img"
|
||||
alt="{{ page.image.alt | default: "Preview Image" }}"
|
||||
{% if page.image.width %}width="{{ page.image.width }}"{% endif %}
|
||||
{% if page.image.height %}height="{{ page.image.height }}"{% endif %}>
|
||||
{% endif %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="post-tail-wrapper text-muted">
|
||||
|
|
|
|||
|
|
@ -196,6 +196,33 @@ i { // fontawesome icons
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
img[data-src] {
|
||||
margin: 0.5rem 0;
|
||||
|
||||
&[data-loaded=true] {
|
||||
animation: fade-in linear 0.5s;
|
||||
}
|
||||
|
||||
&.left {
|
||||
float: left;
|
||||
margin: 0.75rem 1rem 1rem 0;
|
||||
}
|
||||
|
||||
&.right {
|
||||
float: right;
|
||||
margin: 0.75rem 0 1rem 1rem;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Panels --- */
|
||||
|
||||
.access {
|
||||
|
|
@ -332,23 +359,6 @@ i { // fontawesome icons
|
|||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
h1 {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
em { /* MarkDown italic */
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
code {
|
||||
@extend %link-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Begin of Markdown table style --- */
|
||||
|
||||
.table-wrapper { // it will be created by Liquid
|
||||
|
|
@ -390,6 +400,39 @@ i { // fontawesome icons
|
|||
|
||||
/* --- post --- */
|
||||
|
||||
.post {
|
||||
h1 {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
em { // MarkDown italic
|
||||
padding-right: 0.2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
&.img-link {
|
||||
@extend %no-cursor;
|
||||
}
|
||||
|
||||
&.popup { // created by `_includes/img-extra.html`
|
||||
cursor: zoom-in;
|
||||
|
||||
> img[data-src]:not(.normal):not(.left):not(.right) {
|
||||
@include align-center;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
code {
|
||||
@extend %link-hover;
|
||||
}
|
||||
}
|
||||
|
||||
} // a
|
||||
|
||||
}
|
||||
|
||||
.pageviews .fa-spinner {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
|
@ -418,47 +461,6 @@ i { // fontawesome icons
|
|||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
|
||||
@mixin caption {
|
||||
+ em {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-size: 80%;
|
||||
padding: 0;
|
||||
color: #6d6c6c;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
img[data-src] {
|
||||
margin: 0.5rem 0;
|
||||
|
||||
&[data-loaded=true] {
|
||||
animation: fade-in linear 0.5s;
|
||||
}
|
||||
|
||||
&.left {
|
||||
float: left;
|
||||
margin: 0.75rem 1rem 1rem 0;
|
||||
}
|
||||
|
||||
&.right {
|
||||
float: right;
|
||||
margin: 0.75rem 0 1rem 1rem;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
|
||||
}
|
||||
|
||||
@include caption;
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
&:not(.img-link) {
|
||||
@extend %link-underline;
|
||||
|
|
@ -468,21 +470,16 @@ i { // fontawesome icons
|
|||
}
|
||||
}
|
||||
|
||||
&.popup { // created by `_includes/img-extra.html`
|
||||
cursor: zoom-in;
|
||||
|
||||
> img[data-src]:not(.normal):not(.left):not(.right) {
|
||||
@include align-center;
|
||||
}
|
||||
&.img-link + em {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-size: 80%;
|
||||
padding: 0;
|
||||
color: #6d6c6c;
|
||||
}
|
||||
|
||||
&.img-link {
|
||||
@include caption;
|
||||
|
||||
@extend %no-cursor;
|
||||
}
|
||||
|
||||
} // a
|
||||
}
|
||||
|
||||
ul {
|
||||
// attribute 'hide-bullet' was added by liquid
|
||||
|
|
|
|||
|
|
@ -38,13 +38,8 @@ $code-radius: 6px;
|
|||
}
|
||||
|
||||
%code-snippet-padding {
|
||||
padding: 1.2rem;
|
||||
}
|
||||
|
||||
div > pre {
|
||||
@extend %code-snippet-bg;
|
||||
@extend %code-snippet-radius;
|
||||
@extend %code-snippet-padding;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.highlighter-rouge {
|
||||
|
|
@ -65,6 +60,8 @@ div > pre {
|
|||
}
|
||||
|
||||
overflow: auto;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
pre {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -74,20 +71,12 @@ div > pre {
|
|||
}
|
||||
|
||||
table {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
td pre {
|
||||
overflow: visible; /* Fixed iOS safari overflow-x */
|
||||
word-break: normal; /* Fixed iOS safari linenos code break */
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.lineno {
|
||||
padding-right: 0.5rem;
|
||||
min-width: 2.2rem;
|
||||
|
|
@ -140,7 +129,7 @@ code {
|
|||
}
|
||||
|
||||
td.rouge-code {
|
||||
padding: 1.2rem 1.5rem 1.2rem 1rem;
|
||||
@extend %code-snippet-padding;
|
||||
|
||||
// Prevent some browser extends from
|
||||
// changing the URL string of code block.
|
||||
|
|
@ -164,62 +153,80 @@ div {
|
|||
}
|
||||
|
||||
td.rouge-code {
|
||||
@extend %code-snippet-padding;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-header {
|
||||
background: var(--code-header-bg);
|
||||
@extend %no-cursor;
|
||||
|
||||
$code-header-height: 2.25rem;
|
||||
|
||||
border-top-left-radius: $code-radius;
|
||||
border-top-right-radius: $code-radius;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
line-height: 1.85rem;
|
||||
height: $code-header-height;
|
||||
|
||||
// icons
|
||||
i {
|
||||
font-size: 1rem;
|
||||
color: var(--lang-badge-muted-color);
|
||||
&::before {
|
||||
$dot-size: 0.75rem;
|
||||
$dot-margin: 0.5rem;
|
||||
|
||||
&.small {
|
||||
font-size: 70%;
|
||||
}
|
||||
content: "";
|
||||
display: inline-block;
|
||||
margin-left: 1rem;
|
||||
width: $dot-size;
|
||||
height: $dot-size;
|
||||
border-radius: 50%;
|
||||
background-color: var(--code-header-muted-color);
|
||||
box-shadow:
|
||||
($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
|
||||
($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
|
||||
}
|
||||
|
||||
// the label block
|
||||
span {
|
||||
padding-left: 0.35rem;
|
||||
|
||||
&::after {
|
||||
content: attr(text-data);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--lang-badge-color);
|
||||
}
|
||||
|
||||
// label icon
|
||||
i {
|
||||
margin: 0 0.5rem;
|
||||
font-size: 1rem;
|
||||
margin-right: 0.4rem;
|
||||
color: var(--code-header-icon-color);
|
||||
|
||||
&.small {
|
||||
font-size: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@at-root [file] #{&} > i {
|
||||
position: relative;
|
||||
top: 1px; // center the file icon
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
// label text
|
||||
&::after {
|
||||
content: attr(label-text);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--code-header-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
// clipboard
|
||||
button {
|
||||
border: 1px solid var(--code-header-bg);
|
||||
@extend %cursor-pointer;
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-radius: $code-radius;
|
||||
height: $code-header-height;
|
||||
width: $code-header-height;
|
||||
padding: 0;
|
||||
width: 1.95rem;
|
||||
background-color: inherit;
|
||||
|
||||
@extend %cursor-pointer;
|
||||
i {
|
||||
color: var(--code-header-icon-color);
|
||||
}
|
||||
|
||||
&[timeout] {
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -74,9 +74,9 @@
|
|||
--highlighter-rouge-color: #de6b18;
|
||||
--highlight-lineno-color: #6c6c6d;
|
||||
--inline-code-bg: #272822;
|
||||
--code-header-bg: #353535;
|
||||
--lang-badge-color: #858586;
|
||||
--lang-badge-muted-color: #6c6c6d;
|
||||
--code-header-text-color: #6a6a6a;
|
||||
--code-header-muted-color: rgb(60 60 60);
|
||||
--code-header-icon-color: rgb(86 86 86);
|
||||
--clipboard-checked-color: #2bcc2b;
|
||||
|
||||
.highlight {
|
||||
|
|
|
|||
|
|
@ -67,6 +67,7 @@
|
|||
--card-bg: rgb(39, 40, 43);
|
||||
--card-border-color: rgb(53, 53, 60);
|
||||
--card-box-shadow: var(--main-wrapper-bg);
|
||||
--preview-img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%);
|
||||
|
||||
/* tags */
|
||||
--tag-border: rgb(59, 79, 88);
|
||||
|
|
|
|||
|
|
@ -71,9 +71,9 @@
|
|||
--highlighter-rouge-color: #2f2f2f;
|
||||
--highlight-lineno-color: #c2c6cc;
|
||||
--inline-code-bg: #f3f3f3;
|
||||
--code-header-bg: #eaeaea;
|
||||
--lang-badge-color: rgb(128 128 128 / 87%);
|
||||
--lang-badge-muted-color: rgb(128 128 128 / 36%);
|
||||
--code-header-text-color: #a3a3b1;
|
||||
--code-header-muted-color: #ebebeb;
|
||||
--code-header-icon-color: #d1d1d1;
|
||||
--clipboard-checked-color: #43c743;
|
||||
|
||||
} // light-syntax
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@
|
|||
--tb-odd-bg: #fbfcfd;
|
||||
--tb-border-color: #eaeaea;
|
||||
--dash-color: silver;
|
||||
--preview-img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(249 249 249) 100%);
|
||||
|
||||
/* Categories */
|
||||
--categories-hover-bg: var(--btn-border-color);
|
||||
|
|
|
|||
|
|
@ -31,12 +31,13 @@ h1 + .post-meta {
|
|||
}
|
||||
}
|
||||
|
||||
.post-content {
|
||||
.preview-img {
|
||||
@include align-center;
|
||||
img.preview-img {
|
||||
margin-top: 3.75rem;
|
||||
margin-bottom: 0;
|
||||
border-radius: 6px;
|
||||
|
||||
margin-top: 0;
|
||||
margin-bottom: 2.5rem !important;
|
||||
&.bg[data-loaded=true] {
|
||||
background: var(--preview-img-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -321,6 +322,10 @@ nav[data-toggle=toc] {
|
|||
} // .license-wrapper
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
.preview-img[data-src] {
|
||||
margin-top: 2.2rem;
|
||||
}
|
||||
|
||||
.post-tail-bottom {
|
||||
-ms-flex-wrap: wrap-reverse !important;
|
||||
flex-wrap: wrap-reverse !important;
|
||||
|
|
|
|||
Loading…
Reference in a new issue