Skip to content

Commit 703aadf

Browse files
GoJo-RikaGoJo-Rika
committed
Enhanced post layouts with improved responsiveness, overflow handling, and mobile styling.
1 parent d700f6a commit 703aadf

13 files changed

Lines changed: 1118 additions & 0 deletions

‎post_template.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,21 @@ <h2 class="section-heading" style="justify-content: flex-start;">Technologies &
272272
gap: 2rem;
273273
max-width: 1550px;
274274
margin: 0 auto;
275+
padding: 0 1rem;
276+
box-sizing: border-box;
277+
width: 100%;
278+
}
279+
280+
/* Prevent horizontal overflow on the whole page */
281+
.page-content {
282+
overflow-x: hidden;
283+
}
284+
285+
.post-center-column,
286+
.post-content-main {
287+
min-width: 0;
288+
overflow-wrap: break-word;
289+
word-wrap: break-word;
275290
}
276291

277292
/* Adjustments for tablets and large desktop screens */
@@ -540,6 +555,31 @@ <h2 class="section-heading" style="justify-content: flex-start;">Technologies &
540555

541556
/* ===== Mobile: hide sidebar TOC, show toggle, stack nav ===== */
542557
@media (max-width: 48rem) {
558+
/* Constrain all content to viewport */
559+
.post-layout {
560+
max-width: 100% !important;
561+
padding: 0 1rem !important;
562+
}
563+
564+
.post-center-column {
565+
max-width: 100%;
566+
overflow-x: hidden;
567+
}
568+
569+
.post-content-main {
570+
padding: 1rem 0 0 0 !important;
571+
}
572+
573+
.post-content-main pre {
574+
max-width: 100%;
575+
overflow-x: auto;
576+
}
577+
578+
.post-content-main img {
579+
max-width: 100%;
580+
height: auto;
581+
}
582+
543583
.post-sidebar-left {
544584
display: none !important;
545585
}
@@ -585,6 +625,52 @@ <h2 class="section-heading" style="justify-content: flex-start;">Technologies &
585625
text-align: left;
586626
justify-content: flex-start;
587627
}
628+
629+
/* Right sidebar: remove desktop border and make compact */
630+
.post-sidebar-right {
631+
border-left: none !important;
632+
padding-left: 0 !important;
633+
position: static !important;
634+
max-height: none !important;
635+
overflow-y: visible !important;
636+
}
637+
638+
/* Compact post info card on mobile */
639+
.post-sidebar-right .competency-item-sidebar {
640+
padding: 1rem;
641+
border: 1px solid var(--border-color);
642+
border-radius: 8px;
643+
background: var(--card-bg-color);
644+
}
645+
646+
.post-sidebar-right .competency-title-sidebar {
647+
font-size: 1rem;
648+
margin-bottom: 0.25rem;
649+
}
650+
651+
/* GitHub button: compact */
652+
.post-sidebar-right .sidebar-button {
653+
margin-top: 0.75rem;
654+
padding: 8px 12px;
655+
font-size: 0.9rem;
656+
}
657+
658+
/* Tighter tech tags on mobile */
659+
.post-sidebar-right .tech-stack {
660+
gap: 0.35rem;
661+
}
662+
663+
.post-sidebar-right .tech-stack .tag {
664+
font-size: 0.8rem;
665+
padding: 3px 8px;
666+
margin-bottom: 0;
667+
}
668+
669+
/* Series nav box: compact on mobile */
670+
.series-navigation-sidebar {
671+
padding: 1rem;
672+
margin-bottom: 1.5rem;
673+
}
588674
}
589675
</style>
590676

‎posts/building-an-intelligent-video-analyst-crafting-the-agents-brain-part-2.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -439,6 +439,21 @@ <h2 class="section-heading" style="justify-content: flex-start;">Technologies &
439439
gap: 2rem;
440440
max-width: 1550px;
441441
margin: 0 auto;
442+
padding: 0 1rem;
443+
box-sizing: border-box;
444+
width: 100%;
445+
}
446+
447+
/* Prevent horizontal overflow on the whole page */
448+
.page-content {
449+
overflow-x: hidden;
450+
}
451+
452+
.post-center-column,
453+
.post-content-main {
454+
min-width: 0;
455+
overflow-wrap: break-word;
456+
word-wrap: break-word;
442457
}
443458

444459
/* Adjustments for tablets and large desktop screens */
@@ -707,6 +722,31 @@ <h2 class="section-heading" style="justify-content: flex-start;">Technologies &
707722

708723
/* ===== Mobile: hide sidebar TOC, show toggle, stack nav ===== */
709724
@media (max-width: 48rem) {
725+
/* Constrain all content to viewport */
726+
.post-layout {
727+
max-width: 100% !important;
728+
padding: 0 1rem !important;
729+
}
730+
731+
.post-center-column {
732+
max-width: 100%;
733+
overflow-x: hidden;
734+
}
735+
736+
.post-content-main {
737+
padding: 1rem 0 0 0 !important;
738+
}
739+
740+
.post-content-main pre {
741+
max-width: 100%;
742+
overflow-x: auto;
743+
}
744+
745+
.post-content-main img {
746+
max-width: 100%;
747+
height: auto;
748+
}
749+
710750
.post-sidebar-left {
711751
display: none !important;
712752
}
@@ -752,6 +792,52 @@ <h2 class="section-heading" style="justify-content: flex-start;">Technologies &
752792
text-align: left;
753793
justify-content: flex-start;
754794
}
795+
796+
/* Right sidebar: remove desktop border and make compact */
797+
.post-sidebar-right {
798+
border-left: none !important;
799+
padding-left: 0 !important;
800+
position: static !important;
801+
max-height: none !important;
802+
overflow-y: visible !important;
803+
}
804+
805+
/* Compact post info card on mobile */
806+
.post-sidebar-right .competency-item-sidebar {
807+
padding: 1rem;
808+
border: 1px solid var(--border-color);
809+
border-radius: 8px;
810+
background: var(--card-bg-color);
811+
}
812+
813+
.post-sidebar-right .competency-title-sidebar {
814+
font-size: 1rem;
815+
margin-bottom: 0.25rem;
816+
}
817+
818+
/* GitHub button: compact */
819+
.post-sidebar-right .sidebar-button {
820+
margin-top: 0.75rem;
821+
padding: 8px 12px;
822+
font-size: 0.9rem;
823+
}
824+
825+
/* Tighter tech tags on mobile */
826+
.post-sidebar-right .tech-stack {
827+
gap: 0.35rem;
828+
}
829+
830+
.post-sidebar-right .tech-stack .tag {
831+
font-size: 0.8rem;
832+
padding: 3px 8px;
833+
margin-bottom: 0;
834+
}
835+
836+
/* Series nav box: compact on mobile */
837+
.series-navigation-sidebar {
838+
padding: 1rem;
839+
margin-bottom: 1.5rem;
840+
}
755841
}
756842
</style>
757843

‎posts/building-an-intelligent-video-analyst-the-foundational-pipeline-part-1.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -467,6 +467,21 @@ <h2 class="section-heading" style="justify-content: flex-start;">Technologies &
467467
gap: 2rem;
468468
max-width: 1550px;
469469
margin: 0 auto;
470+
padding: 0 1rem;
471+
box-sizing: border-box;
472+
width: 100%;
473+
}
474+
475+
/* Prevent horizontal overflow on the whole page */
476+
.page-content {
477+
overflow-x: hidden;
478+
}
479+
480+
.post-center-column,
481+
.post-content-main {
482+
min-width: 0;
483+
overflow-wrap: break-word;
484+
word-wrap: break-word;
470485
}
471486

472487
/* Adjustments for tablets and large desktop screens */
@@ -735,6 +750,31 @@ <h2 class="section-heading" style="justify-content: flex-start;">Technologies &
735750

736751
/* ===== Mobile: hide sidebar TOC, show toggle, stack nav ===== */
737752
@media (max-width: 48rem) {
753+
/* Constrain all content to viewport */
754+
.post-layout {
755+
max-width: 100% !important;
756+
padding: 0 1rem !important;
757+
}
758+
759+
.post-center-column {
760+
max-width: 100%;
761+
overflow-x: hidden;
762+
}
763+
764+
.post-content-main {
765+
padding: 1rem 0 0 0 !important;
766+
}
767+
768+
.post-content-main pre {
769+
max-width: 100%;
770+
overflow-x: auto;
771+
}
772+
773+
.post-content-main img {
774+
max-width: 100%;
775+
height: auto;
776+
}
777+
738778
.post-sidebar-left {
739779
display: none !important;
740780
}
@@ -780,6 +820,52 @@ <h2 class="section-heading" style="justify-content: flex-start;">Technologies &
780820
text-align: left;
781821
justify-content: flex-start;
782822
}
823+
824+
/* Right sidebar: remove desktop border and make compact */
825+
.post-sidebar-right {
826+
border-left: none !important;
827+
padding-left: 0 !important;
828+
position: static !important;
829+
max-height: none !important;
830+
overflow-y: visible !important;
831+
}
832+
833+
/* Compact post info card on mobile */
834+
.post-sidebar-right .competency-item-sidebar {
835+
padding: 1rem;
836+
border: 1px solid var(--border-color);
837+
border-radius: 8px;
838+
background: var(--card-bg-color);
839+
}
840+
841+
.post-sidebar-right .competency-title-sidebar {
842+
font-size: 1rem;
843+
margin-bottom: 0.25rem;
844+
}
845+
846+
/* GitHub button: compact */
847+
.post-sidebar-right .sidebar-button {
848+
margin-top: 0.75rem;
849+
padding: 8px 12px;
850+
font-size: 0.9rem;
851+
}
852+
853+
/* Tighter tech tags on mobile */
854+
.post-sidebar-right .tech-stack {
855+
gap: 0.35rem;
856+
}
857+
858+
.post-sidebar-right .tech-stack .tag {
859+
font-size: 0.8rem;
860+
padding: 3px 8px;
861+
margin-bottom: 0;
862+
}
863+
864+
/* Series nav box: compact on mobile */
865+
.series-navigation-sidebar {
866+
padding: 1rem;
867+
margin-bottom: 1.5rem;
868+
}
783869
}
784870
</style>
785871

0 commit comments

Comments
 (0)