Skip to content

Commit c3f8662

Browse files
ryanphuangryanphuang
committed
update blog style
1 parent 61bb564 commit c3f8662

8 files changed

Lines changed: 263 additions & 32 deletions

File tree

‎_layouts/post.html‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,25 @@
44
<body class="layout-post page-{{ page.title | default: 'post' | slugify }}">
55
{% include banner.html %}
66
<main class="side-main">
7-
<section class="hero-banner hero-banner--sm mb-30px">
7+
<section class="section-margin blog-post-page">
88
<div class="container">
9-
<div class="hero-banner--sm__content">
10-
<h1>{{ page.title }}</h1>
11-
<h4>{{ page.date | date: "%B %-d, %Y" }}</h4>
12-
</div>
13-
</div>
14-
</section>
15-
<section class="section-margin">
16-
<div class="container">
17-
<article class="post-shell">
18-
<div class="post-meta">
19-
<span><strong>Published:</strong> {{ page.date | date: "%b %-d, %Y" }}</span>
20-
{% if page.author %}<span><strong>Author:</strong> {{ page.author }}</span>{% endif %}
21-
{% if page.last_modified_at %}<span><strong>Updated:</strong> {{ page.last_modified_at | date: "%b %-d, %Y" }}</span>{% endif %}
22-
</div>
23-
<div class="single-post-content">
9+
<article class="blog-post">
10+
<header class="blog-post__header">
11+
<p class="blog-post__eyebrow">OrderLab Blog</p>
12+
<h1>{{ page.title }}</h1>
13+
<div class="blog-post__meta">
14+
<span>{{ page.date | date: "%b %-d, %Y" }}</span>
15+
{% if page.author %}<span>{{ page.author }}</span>{% endif %}
16+
{% if page.last_modified_at %}<span>Updated {{ page.last_modified_at | date: "%b %-d, %Y" }}</span>{% endif %}
17+
</div>
18+
</header>
19+
<div class="blog-post__content">
2420
{{ content }}
2521
</div>
26-
</article>
22+
<footer class="blog-post__footer">
23+
<a class="blog-hub__read" href="{{ '/blog/' | relative_url }}">Back to all posts</a>
24+
</footer>
25+
</article>
2726
</div>
2827
</section>
2928
{% include footer.html %}

‎_posts/2026-02-21-launching-orderlab-blog.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Launching the OrderLab Blog
3-
author: OrderLab
3+
author: Ryan Huang
44
---
55

66
We have added a dedicated blog to the lab website to share technical updates in a faster, more narrative format than conference papers.

‎_scss/theme/_publications.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ a.nodec:hover {
3131
vertical-align: middle;
3232
}
3333
a.conf {
34-
color: #515151;
34+
color: #dc3545;
3535
}
3636
.publinkitem {
3737
padding: 0 0.5rem;

‎assets/css/modern.css‎

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -741,6 +741,230 @@ a:hover {
741741
padding: 1.1rem;
742742
}
743743

744+
/* Blog hub + post redesign */
745+
.layout-default .side-main > section.section-margin.blog-hub > .container,
746+
.layout-post .side-main > section.blog-post-page > .container {
747+
border: 0;
748+
background: transparent;
749+
box-shadow: none;
750+
padding: 0;
751+
}
752+
753+
.blog-hub__head {
754+
max-width: 760px;
755+
margin: 0 auto 1.8rem;
756+
text-align: center;
757+
}
758+
759+
.blog-hub__eyebrow,
760+
.blog-post__eyebrow {
761+
display: inline-block;
762+
margin: 0 0 0.6rem;
763+
border: 1px solid #c8d8ec;
764+
border-radius: 999px;
765+
background: #f2f7ff;
766+
color: #2c4e79;
767+
font-size: 0.76rem;
768+
font-weight: 700;
769+
letter-spacing: 0.08em;
770+
text-transform: uppercase;
771+
padding: 0.24rem 0.62rem;
772+
}
773+
774+
.blog-hub__head h1 {
775+
margin-bottom: 0.45rem;
776+
}
777+
778+
.blog-hub__head p {
779+
margin: 0;
780+
color: var(--ink-subtle);
781+
}
782+
783+
.blog-hub__list {
784+
display: grid;
785+
gap: 1rem;
786+
}
787+
788+
.blog-hub__item {
789+
border: 1px solid var(--line);
790+
border-radius: 16px;
791+
background: #ffffff;
792+
box-shadow: var(--shadow-sm);
793+
padding: 1.15rem 1.2rem;
794+
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
795+
}
796+
797+
.blog-hub__item:hover {
798+
transform: translateY(-2px);
799+
border-color: #c4d6ea;
800+
box-shadow: var(--shadow-md);
801+
}
802+
803+
.blog-hub__meta {
804+
font-size: 0.8rem;
805+
color: #6f8198;
806+
letter-spacing: 0.06em;
807+
text-transform: uppercase;
808+
margin-bottom: 0.42rem;
809+
}
810+
811+
.blog-hub__item h3 {
812+
margin: 0 0 0.42rem;
813+
font-size: 1.4rem;
814+
line-height: 1.25;
815+
}
816+
817+
.blog-hub__item h3 a {
818+
color: var(--ink);
819+
text-decoration: none;
820+
}
821+
822+
.blog-hub__item h3 a:hover {
823+
color: var(--brand-strong);
824+
}
825+
826+
.blog-hub__item p {
827+
margin: 0 0 0.55rem;
828+
}
829+
830+
.blog-hub__read {
831+
display: inline-flex;
832+
align-items: center;
833+
gap: 0.35rem;
834+
font-weight: 700;
835+
color: var(--brand-strong);
836+
text-decoration: none;
837+
}
838+
839+
.blog-hub__read::after {
840+
content: "\2192";
841+
font-size: 0.95rem;
842+
}
843+
844+
.blog-hub__read:hover {
845+
color: var(--brand);
846+
}
847+
848+
.blog-post {
849+
width: min(860px, 100%);
850+
margin: 0 auto;
851+
border: 1px solid var(--line);
852+
border-radius: 20px;
853+
background: #ffffff;
854+
box-shadow: var(--shadow-sm);
855+
padding: 1.45rem 1.45rem 1.3rem;
856+
}
857+
858+
.blog-post__header {
859+
padding-bottom: 1rem;
860+
border-bottom: 1px solid #e5edf8;
861+
margin-bottom: 1.1rem;
862+
}
863+
864+
.blog-post__header h1 {
865+
margin-bottom: 0.45rem;
866+
}
867+
868+
.blog-post__meta {
869+
display: flex;
870+
flex-wrap: wrap;
871+
gap: 0.38rem 0.62rem;
872+
color: #61758f;
873+
font-size: 0.9rem;
874+
font-weight: 600;
875+
}
876+
877+
.blog-post__meta span {
878+
display: inline-flex;
879+
align-items: center;
880+
gap: 0.28rem;
881+
}
882+
883+
.blog-post__meta span:not(:last-child)::after {
884+
content: "\00B7";
885+
color: #91a3b8;
886+
margin-left: 0.45rem;
887+
}
888+
889+
.blog-post__content {
890+
color: var(--ink-subtle);
891+
font-size: 1.03rem;
892+
line-height: 1.8;
893+
}
894+
895+
.blog-post__content > :first-child {
896+
margin-top: 0;
897+
}
898+
899+
.blog-post__content h2,
900+
.blog-post__content h3,
901+
.blog-post__content h4 {
902+
margin-top: 1.55rem;
903+
margin-bottom: 0.55rem;
904+
}
905+
906+
.blog-post__content p,
907+
.blog-post__content ul,
908+
.blog-post__content ol,
909+
.blog-post__content pre,
910+
.blog-post__content blockquote {
911+
margin-bottom: 1rem;
912+
}
913+
914+
.blog-post__content ul,
915+
.blog-post__content ol {
916+
padding-left: 1.15rem;
917+
}
918+
919+
.blog-post__content li + li {
920+
margin-top: 0.26rem;
921+
}
922+
923+
.blog-post__content blockquote {
924+
border-left: 3px solid #c8d8ee;
925+
background: #f7faff;
926+
color: #415975;
927+
border-radius: 8px;
928+
padding: 0.72rem 0.85rem;
929+
}
930+
931+
.blog-post__content code {
932+
background: #f2f6fc;
933+
border: 1px solid #dde8f6;
934+
border-radius: 6px;
935+
color: #193a64;
936+
font-size: 0.92em;
937+
padding: 0.08rem 0.34rem;
938+
}
939+
940+
.blog-post__content pre {
941+
border: 1px solid #d7e3f2;
942+
border-radius: 12px;
943+
background: #0f1e33;
944+
color: #e6f0ff;
945+
padding: 0.9rem 1rem;
946+
overflow: auto;
947+
}
948+
949+
.blog-post__content pre code {
950+
background: transparent;
951+
border: 0;
952+
color: inherit;
953+
padding: 0;
954+
}
955+
956+
.blog-post__content img {
957+
max-width: 100%;
958+
height: auto;
959+
border-radius: 10px;
960+
}
961+
962+
.blog-post__footer {
963+
margin-top: 0.9rem;
964+
padding-top: 0.9rem;
965+
border-top: 1px solid #e5edf8;
966+
}
967+
744968
/* Home news preview */
745969
.home-news-list {
746970
list-style: none;
@@ -1175,6 +1399,15 @@ a:hover {
11751399
.blog-grid {
11761400
grid-template-columns: 1fr;
11771401
}
1402+
1403+
.blog-post {
1404+
padding: 1.05rem 0.95rem 1rem;
1405+
border-radius: 14px;
1406+
}
1407+
1408+
.blog-post__content {
1409+
font-size: 0.98rem;
1410+
}
11781411
}
11791412

11801413
@media (prefers-reduced-motion: reduce) {

‎assets/css/style.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)