Skip to content

Commit

Permalink
Revert "feat(ux): turn home page posts into clickable cards (cotes202…
Browse files Browse the repository at this point in the history 
…0#895)"

This reverts commit b85f633.
  • Loading branch information
@HOKAGO-MEMORIES
HOKAGO-MEMORIES committed Jan 18, 2024
1 parent ca95445 commit e0342fc
Show file tree
Hide file tree
Showing 4 changed files with 222 additions and 255 deletions.
126 changes: 51 additions & 75 deletions _layouts/home.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
---
layout: default
refactor: true
layout: page
# The Home page layout
---

{% include lang.html %}
{% assign pinned = site.posts | where: "pin", "true" %}
{% assign default = site.posts | where_exp: "item", "item.pin != true and item.hidden != true" %}

{% assign pinned = site.posts | where: 'pin', 'true' %}
{% assign default = site.posts | where_exp: 'item', 'item.pin != true and item.hidden != true' %}

{% assign posts = '' | split: '' %}
{% assign posts = "" | split: "" %}

<!-- Get pinned posts -->

Expand All @@ -31,7 +29,7 @@
{% assign default_beg = 0 %}
{% endif %}

{% assign default_num = paginator.posts | size | minus: pinned_num %}
{% assign default_num = paginator.posts | size | minus: pinned_num %}
{% assign default_end = default_beg | plus: default_num | minus: 1 %}

{% if default_num > 0 %}
Expand All @@ -40,79 +38,57 @@
{% endfor %}
{% endif %}

<div id="post-list" class="flex-grow-1 px-xl-1">
{% for post in posts %}
<article class="card-wrapper card">
<a href="{{ post.url | relative_url }}" class="post-preview row g-0 flex-md-row-reverse">
{% assign card_body_col = '12' %}
<div id="post-list">

{% for post in posts %}

<div class="post-preview">
<h1>
<a href="{{ post.url | relative_url }}">{{ post.title }}</a>
</h1>

<div class="post-content">
<p>
{% include no-linenos.html content=post.content %}
{{ content | markdownify | strip_html | truncate: 200 | escape }}
</p>
</div>

<div class="post-meta text-muted d-flex">
<div class="mr-auto">

<!-- posted date -->
<i class="far fa-calendar fa-fw"></i>
{% include datetime.html date=post.date %}

<!-- categories -->
{% if post.categories.size > 0 %}
<i class="far fa-folder-open fa-fw"></i>
<span>
{% for category in post.categories %}
{{ category }}
{%- unless forloop.last -%},{%- endunless -%}
{% endfor %}
</span>
{% endif %}

{% if post.image %}
{% assign src = post.image.path | default: post.image %}
{% unless src contains '//' %}
{% assign src = post.img_path | append: '/' | append: src | replace: '//', '/' %}
{% endunless %}
</div>

{% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
{% if post.pin %}
<div class="pin">
<i class="fas fa-thumbtack fa-fw"></i>
<span>{{ site.data.locales[site.lang].post.pin_prompt }}</span>
</div>
{% endif %}

{% assign lqip = null %}
</div> <!-- .post-meta -->

{% if post.image.lqip %}
{% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
{% endif %}
</div> <!-- .post-review -->

<div class="col-md-5">
<img src="{{ src }}" alt="{{ alt }}" {{ lqip }}>
</div>
{% endfor %}

{% assign card_body_col = '7' %}
{% endif %}

<div class="col-md-{{ card_body_col }}">
<div class="card-body d-flex flex-column">
<h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>

<div class="card-text content mt-0 mb-3">
<p>
{% include no-linenos.html content=post.content %}
{{ content | markdownify | strip_html | truncate: 200 | escape }}
</p>
</div>

<div class="post-meta flex-grow-1 d-flex align-items-end">
<div class="me-auto">
<!-- posted date -->
<i class="far fa-calendar fa-fw me-1"></i>
{% include datetime.html date=post.date lang=lang %}

<!-- categories -->
{% if post.categories.size > 0 %}
<i class="far fa-folder-open fa-fw me-1"></i>
<span class="categories">
{% for category in post.categories %}
{{ category }}
{%- unless forloop.last -%},{%- endunless -%}
{% endfor %}
</span>
{% endif %}
</div>

{% if post.pin %}
<div class="pin ms-1">
<i class="fas fa-thumbtack fa-fw"></i>
<span>{{ site.data.locales[lang].post.pin_prompt }}</span>
</div>
{% endif %}
</div>
<!-- .post-meta -->
</div>
<!-- .card-body -->
</div>
</a>
</article>
{% endfor %}
</div>
<!-- #post-list -->
</div> <!-- #post-list -->

{% if paginator.total_pages > 1 %}
{% if paginator.total_pages > 0 %}
{% include post-paginator.html %}
{% endif %}
69 changes: 38 additions & 31 deletions _sass/colors/typography-dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,19 @@

/* Common color */
--text-color: rgb(175, 176, 177);
--text-muted-color: #868686;
--text-muted-hightlight-color: #aeaeae;
--text-muted-color: rgb(107, 116, 124);
--heading-color: #cccccc;
--label-color: #a7a7a7;
--blockquote-border-color: rgb(66, 66, 66);
--blockquote-text-color: #868686;
--blockquote-text-color: rgb(117, 117, 117);
--link-color: rgb(138, 180, 248);
--link-underline-color: rgb(82, 108, 150);
--button-bg: #1e1e1e;
--btn-border-color: #2e2f31;
--button-bg: rgb(39, 40, 43);
--btn-border-color: rgb(63, 65, 68);
--btn-backtotop-color: var(--text-color);
--btn-backtotop-border-color: #212122;
--btn-backtotop-border-color: var(--btn-border-color);
--btn-box-shadow: var(--main-bg);
--card-header-bg: #292929;
--card-header-bg: rgb(51, 50, 50);
--label-color: rgb(108, 117, 125);
--checkbox-color: rgb(118, 120, 121);
--checkbox-checked-color: var(--link-color);
--img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
Expand All @@ -35,63 +34,64 @@
);

/* Sidebar */
--site-title-color: #717070;
--site-subtitle-color: #868686;
--sidebar-bg: #1e1e1e;
--sidebar-border-color: #292929;
--sidebar-muted-color: #868686;
--sidebar-active-color: rgb(255, 255, 255, 0.95);
--sidebar-hover-bg: #262626;
--sidebar-btn-bg: #232328;
--sidebar-btn-color: #787878;
--avatar-border-color: rgb(206, 206, 206, 0.9);
--sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
--sidebar-muted-color: #6d6c6b;
--sidebar-active-color: rgb(255, 255, 255, 0.8);
--nav-cursor-color: rgb(183, 182, 182);
--sidebar-btn-bg: rgb(117, 116, 116, 0.2);

/* Topbar */
--topbar-bg: rgb(27, 27, 30, 0.64);
--topbar-text-color: var(--text-color);
--search-border-color: rgb(55, 55, 55);
--topbar-wrapper-bg: rgb(39, 40, 43);
--search-wrapper-bg: rgb(34, 34, 39);
--search-wrapper-border-color: rgb(34, 34, 39);
--search-icon-color: rgb(100, 102, 105);
--input-focus-border-color: rgb(112, 114, 115);

/* Home page */
--post-list-text-color: rgb(175, 176, 177);
--btn-patinator-text-color: var(--text-color);
--btn-paginator-hover-color: #2e2e2e;
--btn-paginator-hover-color: rgb(64, 65, 66);
--btn-paginator-border-color: var(--btn-border-color);
--btn-text-color: var(--text-color);
--pin-bg: rgb(34, 35, 37);
--pin-color: inherit;

/* Posts */
--toc-highlight: rgb(116, 178, 243);
--tag-bg: rgb(41, 40, 40);
--tag-hover: rgb(43, 56, 62);
--tb-odd-bg: #252526; /* odd rows of the posts' table */
--tb-odd-bg: rgba(42, 47, 53, 0.52); /* odd rows of the posts' table */
--tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */
--tb-border-color: var(--tb-odd-bg);
--footnote-target-bg: rgb(63, 81, 181);
--btn-share-color: #6c757d;
--btn-share-hover-color: #bfc1ca;
--card-bg: #1e1e1e;
--card-hovor-bg: #464d51;
--card-shadow: rgb(21, 21, 21, 0.72) 0 6px 18px 0,
rgb(137, 135, 135, 0.24) 0 0 0 1px;
--relate-post-date: var(--text-muted-color);
--card-bg: rgb(39, 40, 43);
--card-border-color: rgb(53, 53, 60);
--card-box-shadow: var(--main-bg);
--kbd-wrap-color: #6a6a6a;
--kbd-text-color: #d3d3d3;
--kbd-bg-color: #242424;
--prompt-text-color: rgb(216, 212, 212, 0.75);
--prompt-tip-bg: rgb(22, 60, 36, 0.64);
--prompt-tip-icon-color: rgb(15, 164, 15, 0.81);
--prompt-tip-bg: rgba(77, 187, 95, 0.2);
--prompt-tip-icon-color: rgb(5, 223, 5, 0.68);
--prompt-info-bg: rgb(7, 59, 104, 0.8);
--prompt-info-icon-color: #0075d1;
--prompt-warning-bg: rgb(90, 69, 3, 0.88);
--prompt-warning-bg: rgb(90, 69, 3, 0.95);
--prompt-warning-icon-color: rgb(255, 165, 0, 0.8);
--prompt-danger-bg: rgb(86, 28, 8, 0.8);
--prompt-danger-icon-color: #cd0202;

/* tags */
--tag-border: rgb(59, 79, 88);
--tag-shadow: rgb(32, 33, 33);
--search-tag-bg: var(--tag-bg);
--dash-color: rgb(63, 65, 68);
--search-tag-bg: #292828;

/* categories */
--categories-border: rgb(64, 66, 69, 0.5);
--categories-border: rgb(64, 66, 69);
--categories-hover-bg: rgb(73, 75, 76);
--categories-icon-hover-color: white;

Expand All @@ -100,6 +100,13 @@
--timeline-color: rgb(63, 65, 68);
--timeline-year-dot-color: var(--timeline-color);

.post img[data-src] {
&.lazyloaded {
-webkit-filter: brightness(95%);
filter: brightness(95%);
}
}

.light {
display: none;
}
Expand Down
61 changes: 28 additions & 33 deletions _sass/colors/typography-light.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,11 @@

/* Common color */
--text-color: #34343c;
--text-muted-color: #757575;
--text-muted-hightlight-color: inherit;
--heading-color: #2a2a2a;
--label-color: #585858;
--text-muted-color: gray;
--heading-color: black;
--blockquote-border-color: #eeeeee;
--blockquote-text-color: #757575;
--link-color: #0056b2;
--blockquote-text-color: #9a9a9a;
--link-color: #2a408e;
--link-underline-color: #dee2e6;
--button-bg: #ffffff;
--btn-border-color: #e9ecef;
Expand All @@ -28,7 +26,7 @@
--img-bg: radial-gradient(
circle,
rgb(255, 255, 255) 0%,
rgb(239, 239, 239) 100%
rgb(249, 249, 249) 100%
);
--shimmer-bg: linear-gradient(
90deg,
Expand All @@ -38,38 +36,42 @@
);

/* Sidebar */
--site-title-color: rgb(113, 113, 113);
--site-subtitle-color: #717171;
--sidebar-bg: #f6f8fa;
--sidebar-border-color: #efefef;
--sidebar-muted-color: #545454;
--sidebar-active-color: #1d1d1d;
--sidebar-hover-bg: rgb(223, 233, 241, 0.64);
--sidebar-bg: #eeeeee;
--sidebar-muted-color: #a2a19f;
--sidebar-active-color: #424242;
--nav-cursor-color: #757575;
--sidebar-btn-bg: white;
--sidebar-btn-color: #8e8e8e;
--avatar-border-color: white;

/* Topbar */
--topbar-bg: rgb(255, 255, 255, 0.7);
--topbar-text-color: rgb(78, 78, 78);
--search-border-color: rgb(240, 240, 240);
--topbar-wrapper-bg: white;
--search-wrapper-bg: rgb(245, 245, 245, 0.5);
--search-wrapper-border-color: rgb(245, 245, 245);
--search-tag-bg: #f8f9fa;
--search-icon-color: #c2c6cc;
--input-focus-border-color: #b8b8b8;
--input-focus-border-color: var(--btn-border-color);

/* Home page */
--post-list-text-color: dimgray;
--btn-patinator-text-color: #555555;
--btn-paginator-hover-color: var(--sidebar-bg);
--btn-paginator-border-color: var(--sidebar-bg);
--btn-text-color: #676666;
--pin-bg: #f5f5f5;
--pin-color: #999fa4;

/* Posts */
--toc-highlight: #0550ae;
--btn-share-color: gray;
--btn-share-hover-color: #0d6efd;
--card-bg: white;
--card-hovor-bg: #e2e2e2;
--card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,
rgba(211, 209, 209, 0.15) 0 0 0 1px;
--toc-highlight: #563d7c;
--btn-share-hover-color: var(--link-color);
--card-border-color: #f1f1f1;
--card-box-shadow: rgba(234, 234, 234, 0.76);
--label-color: #616161;
--relate-post-date: rgba(30, 55, 70, 0.4);
--footnote-target-bg: lightcyan;
--tag-bg: rgba(0, 0, 0, 0.075);
--tag-border: #dee2e6;
--tag-shadow: var(--btn-border-color);
--tag-hover: rgb(222, 226, 230);
--tb-odd-bg: #fbfcfd;
--tb-border-color: #eaeaea;
--dash-color: silver;
Expand All @@ -86,12 +88,6 @@
--prompt-danger-bg: rgb(248, 215, 218, 0.56);
--prompt-danger-icon-color: #df3c30;

/* Tags */
--tag-border: #dee2e6;
--tag-shadow: var(--btn-border-color);
--tag-hover: rgb(222, 226, 230);
--search-tag-bg: #f8f9fa;

[class^='prompt-'] {
--link-underline-color: rgb(219, 216, 216);
}
Expand All @@ -101,7 +97,6 @@
}

/* Categories */
--categories-border: rgba(0, 0, 0, 0.125);
--categories-hover-bg: var(--btn-border-color);
--categories-icon-hover-color: darkslategray;

Expand Down
Loading

0 comments on commit e0342fc

Please sign in to comment.