mirror of
https://github.com/cotes2020/jekyll-theme-chirpy.git
synced 2025-12-18 05:41:31 +00:00
feat(ui): show preview image in home page
This commit is contained in:
Cotes Chung
@@ -278,7 +278,7 @@ i {
|
||||
}
|
||||
|
||||
[data-topbar-visible='true'] & > div {
|
||||
top: 6rem;
|
||||
top: 5.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -422,7 +422,6 @@ i {
|
||||
|
||||
.post-meta {
|
||||
font-size: 0.85rem;
|
||||
word-spacing: 1px;
|
||||
|
||||
a {
|
||||
&:not([class]):hover {
|
||||
@@ -549,7 +548,6 @@ i {
|
||||
.img-link {
|
||||
color: transparent;
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shimmer {
|
||||
@@ -1275,7 +1273,7 @@ $sidebar-display: 'sidebar-display';
|
||||
/*
|
||||
Responsive Design:
|
||||
|
||||
{sidebar, content, panel} >= 1120px screen width
|
||||
{sidebar, content, panel} >= 1200px screen width
|
||||
{sidebar, content} >= 850px screen width
|
||||
{content} <= 849px screen width
|
||||
|
||||
@@ -1307,11 +1305,6 @@ $sidebar-display: 'sidebar-display';
|
||||
100vh - #{$topbar-height} - #{$footer-height-mobile}
|
||||
) !important;
|
||||
|
||||
h1 {
|
||||
margin-top: 2.2rem;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
> blockquote[class^='prompt-'] {
|
||||
@include ml-mr(-1.25rem);
|
||||
|
||||
@@ -75,6 +75,7 @@
|
||||
%no-cursor {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@@ -109,9 +110,18 @@
|
||||
color: rgba(117, 117, 117, 0.9);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
%text-clip {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
/* ---------- scss mixin --------- */
|
||||
|
||||
@mixin no-text-decoration {
|
||||
@@ -146,7 +156,6 @@
|
||||
@mixin align-center {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
|
||||
@@ -54,8 +54,6 @@
|
||||
--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);
|
||||
@@ -68,9 +66,9 @@
|
||||
--btn-share-color: #6c757d;
|
||||
--btn-share-hover-color: #bfc1ca;
|
||||
--relate-post-date: var(--text-muted-color);
|
||||
--card-bg: #212121;
|
||||
--card-bg: #1e1e1e;
|
||||
--card-hovor-bg: #3a3a3a;
|
||||
--card-border-color: rgb(53, 53, 60);
|
||||
--card-border-color: #2e2e2e;
|
||||
--card-box-shadow: var(--main-bg);
|
||||
--kbd-wrap-color: #6a6a6a;
|
||||
--kbd-text-color: #d3d3d3;
|
||||
@@ -101,13 +99,6 @@
|
||||
--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;
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
/* Common color */
|
||||
--text-color: #34343c;
|
||||
--text-muted-color: gray;
|
||||
--text-muted-color: #8e8e8e;
|
||||
--heading-color: black;
|
||||
--blockquote-border-color: #eeeeee;
|
||||
--blockquote-text-color: #9a9a9a;
|
||||
@@ -26,7 +26,7 @@
|
||||
--img-bg: radial-gradient(
|
||||
circle,
|
||||
rgb(255, 255, 255) 0%,
|
||||
rgb(249, 249, 249) 100%
|
||||
rgb(239, 239, 239) 100%
|
||||
);
|
||||
--shimmer-bg: linear-gradient(
|
||||
90deg,
|
||||
@@ -57,13 +57,12 @@
|
||||
--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: #563d7c;
|
||||
--btn-share-hover-color: var(--link-color);
|
||||
--card-hovor-bg: #eeeeee;
|
||||
--card-bg: white;
|
||||
--card-hovor-bg: #e2e2e2;
|
||||
--card-border-color: #ececec;
|
||||
--card-box-shadow: rgba(234, 234, 234, 0.76);
|
||||
--label-color: #616161;
|
||||
|
||||
@@ -1,6 +1,122 @@
|
||||
/*
|
||||
Style for Homepage
|
||||
*/
|
||||
$card-radius: 0.5rem;
|
||||
|
||||
#post-list {
|
||||
margin-top: 1.75rem;
|
||||
|
||||
a.card-wrapper {
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: $card-radius;
|
||||
border: 0;
|
||||
background: var(--card-bg);
|
||||
box-shadow: rgba(0, 0, 0, 0.05) 0 6px 14px 0,
|
||||
rgba(172, 169, 169, 0.08) 0 0 0 1px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: var(--card-hovor-bg);
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: $card-radius;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--card-hovor-bg);
|
||||
|
||||
&::before {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
%img-radius {
|
||||
border-radius: $card-radius $card-radius 0 0;
|
||||
}
|
||||
|
||||
.preview-img {
|
||||
height: 10rem;
|
||||
|
||||
@extend %img-radius;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
|
||||
@extend %img-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
min-height: 10.5rem;
|
||||
padding: 1rem;
|
||||
|
||||
.card-title {
|
||||
@extend %text-clip;
|
||||
@include mt-mb(0.5rem);
|
||||
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
%muted {
|
||||
color: var(--text-muted-color) !important;
|
||||
}
|
||||
|
||||
.card-text.post-content {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
@extend %muted;
|
||||
|
||||
p {
|
||||
@extend %text-clip;
|
||||
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
@extend %muted;
|
||||
|
||||
i {
|
||||
&:not(:first-child) {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
em {
|
||||
@extend %normal-font-style;
|
||||
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
> div:first-child {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} /* #post-list */
|
||||
|
||||
.pagination {
|
||||
color: var(--btn-patinator-text-color);
|
||||
@@ -52,87 +168,58 @@
|
||||
} /* .page-item */
|
||||
} /* .pagination */
|
||||
|
||||
#post-list {
|
||||
margin-top: 1.75rem;
|
||||
padding-right: 0.5rem;
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.post-preview {
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid var(--card-border-color);
|
||||
background: var(--card-bg);
|
||||
|
||||
&:hover {
|
||||
background: var(--card-hovor-bg);
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.4rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
i {
|
||||
font-size: 0.73rem;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
em {
|
||||
@extend %normal-font-style;
|
||||
}
|
||||
|
||||
.pin {
|
||||
i {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
padding-left: 3px;
|
||||
color: var(--pin-color);
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-content {
|
||||
margin-top: 0.6rem;
|
||||
margin-bottom: 0.6rem;
|
||||
color: var(--post-list-text-color);
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
} /* .post-preview */
|
||||
} /* #post-list */
|
||||
|
||||
@media (hover: hover) {
|
||||
.post-preview {
|
||||
transition: all 0.35s ease-in-out;
|
||||
#post-list .card {
|
||||
transition: border-color 0.35s ease-in-out;
|
||||
|
||||
&::before {
|
||||
transition: opacity 0.35s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet */
|
||||
@media all and (min-width: 768px) {
|
||||
#post-list {
|
||||
%img-radius {
|
||||
border-radius: 0 $card-radius $card-radius 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
.preview-img {
|
||||
width: 20rem;
|
||||
height: 11.5rem; // can hold 2 lines each for title and content
|
||||
}
|
||||
|
||||
.card-body {
|
||||
min-height: 10.75rem;
|
||||
width: 60%;
|
||||
padding: 1.75rem 1.75rem 1.25rem 1.75rem;
|
||||
|
||||
.card-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
display: inherit !important;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
i {
|
||||
&:not(:first-child) {
|
||||
margin-left: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide SideBar and TOC */
|
||||
@media all and (max-width: 830px) {
|
||||
.post-preview {
|
||||
#post-list .card {
|
||||
margin-left: -0.5rem;
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
@@ -151,27 +238,7 @@
|
||||
/* Sidebar is visible */
|
||||
@media all and (min-width: 831px) {
|
||||
#post-list {
|
||||
margin-top: 3rem;
|
||||
|
||||
.post-preview {
|
||||
padding: 0.5rem;
|
||||
|
||||
.post-meta {
|
||||
.pin {
|
||||
background: var(--pin-bg);
|
||||
border-radius: 5px;
|
||||
line-height: 1.4rem;
|
||||
height: 1.3rem;
|
||||
margin-top: 3px;
|
||||
padding-left: 1px;
|
||||
padding-right: 6px;
|
||||
|
||||
> span {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
@@ -194,9 +261,9 @@
|
||||
} /* .pagination */
|
||||
}
|
||||
|
||||
/* Panel hidden */
|
||||
@media all and (max-width: 1200px) {
|
||||
/* Panel is visible */
|
||||
@media all and (min-width: 1200px) {
|
||||
#post-list {
|
||||
padding-right: 0;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,6 +27,9 @@
|
||||
}
|
||||
|
||||
.preview-img {
|
||||
overflow: hidden;
|
||||
aspect-ratio: 40 / 21;
|
||||
|
||||
@extend %rounded;
|
||||
|
||||
&:not(.no-bg) {
|
||||
@@ -36,7 +39,6 @@
|
||||
}
|
||||
|
||||
img {
|
||||
aspect-ratio: 40 / 21;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user