Skip to content

Commit 935716c

Browse files
MATBckh22MATBckh22
committed
Modified blog
1 parent 846a2e2 commit 935716c

2 files changed

Lines changed: 870 additions & 524 deletions

File tree

‎src/index.css‎

Lines changed: 204 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3178,7 +3178,7 @@ ul {
31783178
}
31793179

31803180
.blog-article {
3181-
max-width: 900px;
3181+
max-width: 1400px;
31823182
margin: 0 auto;
31833183
padding: 0 var(--space-md) var(--space-xl);
31843184
}
@@ -3303,7 +3303,7 @@ ul {
33033303

33043304
/* Blog Hero */
33053305
.blog-hero {
3306-
text-align: center;
3306+
text-align: left;
33073307
padding: var(--space-xl) 0 var(--space-lg);
33083308
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
33093309
margin-bottom: var(--space-lg);
@@ -3334,15 +3334,15 @@ ul {
33343334
.blog-subtitle {
33353335
font-size: 1.15rem;
33363336
color: rgba(255, 255, 255, 0.7);
3337-
max-width: 600px;
3338-
margin: 0 auto var(--space-md);
3337+
max-width: 100%;
3338+
margin: 0 0 var(--space-md);
33393339
line-height: 1.6;
33403340
}
33413341

33423342
.blog-meta {
33433343
display: flex;
33443344
align-items: center;
3345-
justify-content: center;
3345+
justify-content: flex-start;
33463346
gap: 0.75rem;
33473347
font-size: 0.9rem;
33483348
color: rgba(255, 255, 255, 0.5);
@@ -3430,13 +3430,13 @@ ul {
34303430

34313431
.blog-section p {
34323432
color: rgba(255, 255, 255, 0.85);
3433-
font-size: 1rem;
3433+
font-size: 1.15rem;
34343434
line-height: 1.8;
34353435
margin-bottom: var(--space-sm);
34363436
}
34373437

34383438
.blog-lead {
3439-
font-size: 1.15rem !important;
3439+
font-size: 1.3rem !important;
34403440
color: rgba(255, 255, 255, 0.9) !important;
34413441
border-left: 3px solid #c41e3a;
34423442
padding-left: var(--space-sm);
@@ -3479,6 +3479,13 @@ ul {
34793479
margin: var(--space-md) 0;
34803480
}
34813481

3482+
.blog-images-vertical {
3483+
display: flex;
3484+
flex-direction: column;
3485+
gap: var(--space-md);
3486+
margin: var(--space-md) 0;
3487+
}
3488+
34823489
/* Callouts */
34833490
.blog-callout {
34843491
padding: var(--space-sm) var(--space-md);
@@ -3536,6 +3543,7 @@ ul {
35363543
padding-left: 1.5rem;
35373544
margin: 0.75rem 0;
35383545
color: rgba(255, 255, 255, 0.85);
3546+
font-size: 1.1rem;
35393547
line-height: 1.6;
35403548
}
35413549

@@ -3577,6 +3585,7 @@ ul {
35773585

35783586
.blog-step>div {
35793587
color: rgba(255, 255, 255, 0.85);
3588+
font-size: 1.1rem;
35803589
line-height: 1.6;
35813590
}
35823591

@@ -3603,11 +3612,34 @@ ul {
36033612
}
36043613

36053614
.blog-card p {
3606-
font-size: 0.9rem;
3615+
font-size: 1rem;
36073616
color: rgba(255, 255, 255, 0.7);
36083617
margin: 0;
36093618
}
36103619

3620+
/* Subsections */
3621+
.blog-subsection {
3622+
margin-bottom: var(--space-lg);
3623+
padding-bottom: var(--space-md);
3624+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
3625+
}
3626+
3627+
.blog-subsection:last-child {
3628+
border-bottom: none;
3629+
}
3630+
3631+
.blog-subsection h3 {
3632+
font-size: 1.4rem;
3633+
color: #ffb3b3;
3634+
margin-bottom: var(--space-sm);
3635+
}
3636+
3637+
.blog-subsection p {
3638+
font-size: 1.15rem;
3639+
color: rgba(255, 255, 255, 0.9);
3640+
margin-bottom: var(--space-md);
3641+
}
3642+
36113643
/* Credits */
36123644
.blog-credits {
36133645
text-align: center;
@@ -3916,4 +3948,168 @@ ul {
39163948
.carousel-next {
39173949
order: 2;
39183950
}
3951+
}
3952+
3953+
/* Blog Q&A Section */
3954+
.blog-qna {
3955+
margin: var(--space-md) 0;
3956+
padding: var(--space-md);
3957+
background: rgba(255, 255, 255, 0.05);
3958+
border-left: 3px solid #c41e3a;
3959+
border-radius: 4px;
3960+
}
3961+
3962+
.qna-question {
3963+
color: #ffb3b3;
3964+
margin-bottom: var(--space-sm);
3965+
font-weight: 600;
3966+
font-size: 1.1rem;
3967+
}
3968+
3969+
.qna-answer {
3970+
color: rgba(255, 255, 255, 0.9);
3971+
line-height: 1.6;
3972+
font-size: 1.05rem;
3973+
}
3974+
3975+
/* ============================================
3976+
Blog Sidebar & Sticky TOC
3977+
============================================ */
3978+
.blog-container {
3979+
display: grid;
3980+
grid-template-columns: 1fr min(900px, 100%) 1fr;
3981+
gap: var(--space-xl);
3982+
max-width: 100%;
3983+
margin: 0;
3984+
padding: 0 var(--space-md);
3985+
position: relative;
3986+
}
3987+
3988+
.blog-sidebar {
3989+
grid-column: 1;
3990+
width: auto;
3991+
display: none;
3992+
/* Hidden on mobile by default */
3993+
justify-content: flex-end;
3994+
}
3995+
3996+
.blog-content-wrapper {
3997+
grid-column: 2;
3998+
flex: 1;
3999+
min-width: 0;
4000+
/* Prevent flex item from overflowing */
4001+
width: 100%;
4002+
margin: 0 auto;
4003+
/* Center the content */
4004+
}
4005+
4006+
.sticky-toc {
4007+
position: sticky;
4008+
top: 100px;
4009+
/* Adjust based on navbar height */
4010+
padding: var(--space-md);
4011+
background: transparent;
4012+
border-right: none;
4013+
border-radius: 0;
4014+
max-height: calc(100vh - 120px);
4015+
overflow-y: auto;
4016+
width: 250px;
4017+
/* Fixed width for the TOC content */
4018+
margin-left: auto;
4019+
/* Push to the right side of the left column */
4020+
margin-top: 2.5rem;
4021+
/* Align with title height */
4022+
}
4023+
4024+
.sticky-toc h3 {
4025+
color: var(--frost-light);
4026+
font-size: 1.1rem;
4027+
margin-bottom: var(--space-md);
4028+
font-weight: 600;
4029+
text-transform: uppercase;
4030+
letter-spacing: 1px;
4031+
}
4032+
4033+
.sticky-toc ul {
4034+
list-style: none;
4035+
padding: 0;
4036+
margin: 0;
4037+
display: flex;
4038+
flex-direction: column;
4039+
gap: 0.25rem;
4040+
/* Reduced from 0.5rem */
4041+
}
4042+
4043+
.sticky-toc li button {
4044+
background: none;
4045+
border: none;
4046+
color: rgba(255, 255, 255, 0.6);
4047+
font-size: 0.85rem;
4048+
/* Smaller font size as requested */
4049+
text-align: left;
4050+
cursor: pointer;
4051+
padding: 0.4rem 0.8rem;
4052+
border-left: 2px solid transparent;
4053+
transition: all 0.2s ease;
4054+
width: 100%;
4055+
line-height: 1.4;
4056+
}
4057+
4058+
.sticky-toc li button:hover {
4059+
color: var(--white);
4060+
background: rgba(255, 255, 255, 0.05);
4061+
}
4062+
4063+
.sticky-toc li button.active {
4064+
color: var(--white);
4065+
border-left-color: var(--redstone);
4066+
background: rgba(185, 60, 60, 0.3);
4067+
font-weight: 500;
4068+
}
4069+
4070+
/* Nested subsections in TOC */
4071+
.toc-subsections {
4072+
list-style: none;
4073+
padding: 0;
4074+
margin: 0.25rem 0 0.25rem 1rem;
4075+
display: none;
4076+
/* Hidden by default */
4077+
}
4078+
4079+
.toc-subsections.open {
4080+
display: block;
4081+
/* Show when parent section is active */
4082+
}
4083+
4084+
.toc-subsections li button {
4085+
font-size: 0.8rem;
4086+
padding: 0.3rem 0.6rem;
4087+
color: rgba(255, 255, 255, 0.5);
4088+
}
4089+
4090+
.toc-subsections li button:hover {
4091+
color: rgba(255, 255, 255, 0.8);
4092+
}
4093+
4094+
.toc-subsections li button.active {
4095+
color: var(--white);
4096+
border-left-color: var(--redstone);
4097+
background: rgba(185, 60, 60, 0.25);
4098+
}
4099+
4100+
/* Hide original TOC on desktop if sidebar is visible */
4101+
@media (min-width: 1024px) {
4102+
.blog-sidebar {
4103+
display: block;
4104+
}
4105+
4106+
.blog-toc {
4107+
display: none;
4108+
}
4109+
4110+
/* Increase Chinese Blog Title Size */
4111+
.lang-zh .blog-hero h1 {
4112+
font-size: 4.5rem;
4113+
/* Bigger than default */
4114+
}
39194115
}

0 commit comments

Comments
 (0)