Website: Update article template (#36924)

Closes: #35379

Changes:
- Added "Last updated on" to the publish date on article pages and
updated the layout of the article details section on mobile devices
(<575px screen width).
This commit is contained in:
Eric 2025-12-08 21:30:13 -06:00 committed by GitHub
parent d83c30761b
commit 240d58b686
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 18 additions and 6 deletions

View file

@ -425,6 +425,7 @@
[purpose='article-details'] {
font-size: 14px;
line-height: 20px;
flex-direction: row;
span {
color: @core-fleet-black-50;
}
@ -901,6 +902,15 @@
margin-bottom: 32px;
}
}
[purpose='article-details'] {
flex-direction: column;
[purpose='divider'] {
display: none;
}
[purpose='article-author'] {
margin-top: 8px;
}
}
}
@media (max-width: 375px) {

View file

@ -33,11 +33,13 @@
<h2 v-if="articleHasSubtitle && articleSubtitle !== undefined">{{articleSubtitle}}</h2>
</div>
<div class="d-flex flex-sm-row flex-column justify-content-between align-items-sm-center">
<div purpose="article-details" class="d-flex flex-row align-items-center">
<span><js-timestamp format="billing" :at="thisPage.meta.publishedOn"></js-timestamp></span>
<span class="px-2">|</span>
<img style="height: 28px; width: 28px; border-radius: 100%;" alt="The author's GitHub profile picture" :src="'https://github.com/'+thisPage.meta.authorGitHubUsername+'.png?size=200'">
<p class="pl-2 font-weight-bold"><%=thisPage.meta.authorFullName %></p>
<div purpose="article-details" class="d-flex align-items-sm-center">
<span>Last updated on <js-timestamp format="billing" :at="thisPage.meta.publishedOn"></js-timestamp></span>
<span purpose="divider" class="px-2">|</span>
<div purpose="article-author" class="d-flex flex-row align-items-center">
<img style="height: 28px; width: 28px; border-radius: 100%;" alt="The author's GitHub profile picture" :src="'https://github.com/'+thisPage.meta.authorGitHubUsername+'.png?size=200'">
<p class="pl-2 font-weight-bold"><%=thisPage.meta.authorFullName %></p>
</div>
</div>
</div>
@ -110,7 +112,7 @@
</div>
<div class="d-flex flex-sm-row flex-column justify-content-between align-items-sm-center">
<div purpose="article-details" class="d-flex flex-row align-items-center">
<span><js-timestamp format="billing" :at="thisPage.meta.publishedOn"></js-timestamp></span>
<span>Last updated on <js-timestamp format="billing" :at="thisPage.meta.publishedOn"></js-timestamp></span>
<span class="px-2">|</span>
<img style="height: 28px; width: 28px; border-radius: 100%;" alt="The author's GitHub profile picture" :src="'https://github.com/'+thisPage.meta.authorGitHubUsername+'.png?size=200'">
<p class="pl-2 font-weight-bold"><%=thisPage.meta.authorFullName %></p>