Skip to content

Commit 8b747b7

Browse files
khusikakhusika
committed
feat(single): Add related content section to footer
Resolves in #57 TO DO: Configurable index content headings Signed-off-by: Khusika Dhamar Gusti <[email protected]>
1 parent 4ba6654 commit 8b747b7

File tree

19 files changed

+163
-0
lines changed

19 files changed

+163
-0
lines changed

‎assets/css/_partial/_single/_footer.scss‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,4 +96,88 @@
9696
@include transform(translateX(4px));
9797
}
9898
}
99+
100+
.related-content {
101+
.related-title {
102+
font-size: 1.4rem;
103+
font-weight: bold;
104+
margin: 1.5rem 0;
105+
}
106+
107+
.related-posts {
108+
display: flex;
109+
overflow-x: auto;
110+
gap: 1rem;
111+
padding-bottom: 1rem;
112+
}
113+
114+
.related-post {
115+
flex: 0 0 280px;
116+
display: flex;
117+
align-items: center;
118+
text-decoration: none;
119+
color: $global-font-color;
120+
border: 3px solid $global-border-color;
121+
@include border-radius(.5rem);
122+
padding: .75rem;
123+
124+
[theme=dark] & {
125+
color: $global-font-color-dark;
126+
border-color: $global-border-color-dark;
127+
}
128+
129+
&:hover {
130+
color: $global-link-hover-color;
131+
border-color: $global-link-hover-color;
132+
@include box-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
133+
[theme=dark] & {
134+
color: $global-link-hover-color-dark;
135+
border-color: $global-link-hover-color-dark;
136+
}
137+
}
138+
}
139+
140+
.related-post-image,
141+
.related-post-image-placeholder {
142+
flex-shrink: 0;
143+
margin-right: 1rem;
144+
width: 68px;
145+
height: 68px;
146+
@include border-radius(4px);
147+
overflow: hidden;
148+
}
149+
150+
.related-post-image-placeholder {
151+
display: flex;
152+
align-items: center;
153+
justify-content: center;
154+
background: $global-background-card-color;
155+
font-size: 2rem;
156+
color: #495057;
157+
[theme=dark] & {
158+
background: $global-background-card-color-dark;
159+
color: #adb5bd;
160+
}
161+
}
162+
163+
.related-post-image img {
164+
width: 100%;
165+
height: 100%;
166+
object-fit: cover;
167+
}
168+
169+
.related-post-content {
170+
overflow: hidden;
171+
}
172+
173+
.related-post-title {
174+
font-size: .875rem;
175+
font-weight: 500;
176+
line-height: 1.3;
177+
white-space: nowrap;
178+
text-overflow: ellipsis;
179+
display: block;
180+
overflow: hidden;
181+
}
182+
}
99183
}

‎i18n/cs.toml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,9 @@ other = "Zjistit více"
9595
# === partials/plugin/share.html ===
9696
[shareOn]
9797
other = "Sdílet na"
98+
99+
[relatedContent]
100+
other = "Viz Také"
98101
# === partials/plugin/share.html ===
99102

100103
# === posts/single.html ===

‎i18n/de.toml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,9 @@ other = "Erfahren Sie mehr"
9999
# === partials/plugin/share.html ===
100100
[shareOn]
101101
other = "Teilen auf"
102+
103+
[relatedContent]
104+
other = "Siehe Auch"
102105
# === partials/plugin/share.html ===
103106

104107
# === posts/single.html ===

‎i18n/en.toml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,9 @@ other = "Learn more"
9595
# === partials/plugin/share.html ===
9696
[shareOn]
9797
other = "Share on"
98+
99+
[relatedContent]
100+
other = "See Also"
98101
# === partials/plugin/share.html ===
99102

100103
# === posts/single.html ===

‎i18n/es.toml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,9 @@ other = "Aprende más"
9999
# === partials/plugin/share.html ===
100100
[shareOn]
101101
other = "Compartir en"
102+
103+
[relatedContent]
104+
other = "Ver También"
102105
# === partials/plugin/share.html ===
103106

104107
# === posts/single.html ===

‎i18n/fa.toml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,9 @@ other = "مطالعه بیشتر"
9595
# === partials/plugin/share.html ===
9696
[shareOn]
9797
other = "اشتراک گذاری در"
98+
99+
[relatedContent]
100+
other = "همچنین ببینید"
98101
# === partials/plugin/share.html ===
99102

100103
# === posts/single.html ===

‎i18n/fr.toml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,9 @@ other = "Apprendre encore plus"
9999
# === partials/plugin/share.html ===
100100
[shareOn]
101101
other = "Partager sur"
102+
103+
[relatedContent]
104+
other = "Voir Aussi"
102105
# === partials/plugin/share.html ===
103106

104107
# === posts/single.html ===

‎i18n/hu.toml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,9 @@ other = "Tudj meg többet"
9595
# === partials/plugin/share.html ===
9696
[shareOn]
9797
other = "Megosztás be"
98+
99+
[relatedContent]
100+
other = "Lásd Még"
98101
# === partials/plugin/share.html ===
99102

100103
# === posts/single.html ===

‎i18n/id.toml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,9 @@ other = "Pelajari lebih lanjut"
9595
# === partials/plugin/share.html ===
9696
[shareOn]
9797
other = "Bagikan ke"
98+
99+
[relatedContent]
100+
other = "Lihat Juga"
98101
# === partials/plugin/share.html ===
99102

100103
# === posts/single.html ===

‎i18n/it.toml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,9 @@ other = "Per saperne di più"
9999
# === partials/plugin/share.html ===
100100
[shareOn]
101101
other = "Condividi su"
102+
103+
[relatedContent]
104+
other = "Vedi Anche"
102105
# === partials/plugin/share.html ===
103106

104107
# === posts/single.html ===

0 commit comments

Comments
 (0)