Improve image style (#204)

This commit is contained in:
Cotes Chung 2020-12-14 15:00:21 +08:00
parent cc24af11fc
commit dc88321ed5
3 changed files with 5 additions and 5 deletions

View file

@ -51,10 +51,10 @@ layout: default
<div class="post-content"> <div class="post-content">
{%- capture img_placehodler -%} {%- capture img_placehodler -%}
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
{% endcapture%} {%- endcapture -%}
{% if page.image %} {% if page.image %}
<img src="{{ img_placehodler }}" data-src="{{ page.image }}" class="post-preview-img"> <img src="{{ img_placehodler }}" data-src="{{ page.image }}" class="preview-img">
{% endif %} {% endif %}
<!-- Using lozad. See: <https://github.com/ApoorvSaxena/lozad.js#usage> --> <!-- Using lozad. See: <https://github.com/ApoorvSaxena/lozad.js#usage> -->

View file

@ -807,10 +807,10 @@ div.post-content .table-wrapper {
word-wrap: break-word; word-wrap: break-word;
@mixin img($caption: false) { @mixin img($caption: false) {
> img:not([style]) { > img[data-src] {
margin: 0.5rem 0; margin: 0.5rem 0;
&:not(.normal):not(.left):not(.right) { &:not([class]) {
@include align-center; @include align-center;
@if $caption { @if $caption {

View file

@ -43,7 +43,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
margin: 1rem 0 0.8rem; margin: 1rem 0 0.8rem;
} }
} }
.post-preview-img { .preview-img {
margin-top: 0; margin-top: 0;
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
@include align-center; @include align-center;