Personal Site
Make the feed scroll independently on desktop mode
+23
-5
+23
-5
src/components/home/feeds/Feeds.astro
+23
-5
src/components/home/feeds/Feeds.astro
···
50
50
}
51
51
</div>
52
52
53
-
<div id="tabs">
53
+
<div class="feed-contents">
54
54
{
55
55
tabs.map((tab) => (
56
-
<div class="tab" data-tab={tab.id} id={tab.id}>
56
+
<div class="content" data-tab={tab.id} id={"tab-" + tab.id}>
57
57
<tab.content />
58
58
</div>
59
59
))
···
68
68
set:html={tabs
69
69
.map(
70
70
({ id }) =>
71
-
`#tab-container:has([data-tab-for="${id}"]:checked) ~ #tabs #${id} { display: var(--display, block); }`,
71
+
`#tab-container:has([data-tab-for="${id}"]:checked) + .feed #tab-${id} { /* show relevant tab */ }`,
72
72
)
73
73
.join("\n")}
74
74
></style>
75
75
76
76
<style>
77
-
.tab {
78
-
display: none;
77
+
/* wrapper */
78
+
.feeds {
79
+
display: grid;
80
+
grid-template: "menu" auto "contents" 1fr / 1fr;
81
+
/* calculate header height and reduce the height accordingly */
82
+
/* screen height - margin&padding - h1 text */
83
+
height: calc(100vh - 40px - 2rem * 1.5);
84
+
@media (max-width: 90ch) {
85
+
height: 600px;
86
+
}
79
87
}
80
88
89
+
/* tab menu */
81
90
#tab-container {
82
91
display: flex;
83
92
flex-direction: row;
84
93
gap: 10px;
85
94
overflow-x: auto;
86
95
scrollbar-width: none;
96
+
97
+
grid-area: menu;
87
98
88
99
border-bottom: 2px solid green;
89
100
···
133
144
grid-area: icon;
134
145
}
135
146
}
147
+
}
148
+
149
+
/* tab contents */
150
+
.feed-contents {
151
+
grid-area: contents;
152
+
overflow-y: auto;
153
+
min-height: 100%;
136
154
}
137
155
</style>