@okjavis/nodebb-theme-javis 1.3.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/scss/_base.scss +194 -0
- package/scss/_feed.scss +27 -17
package/package.json
CHANGED
package/scss/_base.scss
CHANGED
|
@@ -9,6 +9,200 @@ nav[component="sidebar/right"],
|
|
|
9
9
|
display: none !important;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
+
// ===========================================================
|
|
13
|
+
// MAIN CONTENT CENTERING (Reddit-style)
|
|
14
|
+
// ===========================================================
|
|
15
|
+
// Center the main content area with equal margins on both sides
|
|
16
|
+
// This applies to ALL main content pages including feed, category, recent, etc.
|
|
17
|
+
|
|
18
|
+
// Feed page uses col-lg-6 for main content and col-lg-3 for sidebars
|
|
19
|
+
.feed > .row {
|
|
20
|
+
max-width: 1440px !important; // Max width for entire content area
|
|
21
|
+
margin: 0 auto !important; // Center the row
|
|
22
|
+
padding: 0 24px !important; // Equal padding on both sides - 24px like Reddit
|
|
23
|
+
display: flex !important;
|
|
24
|
+
justify-content: center !important; // Center the flex items
|
|
25
|
+
|
|
26
|
+
// Left sidebar (widget area)
|
|
27
|
+
> .col-lg-3[data-widget-area="left"] {
|
|
28
|
+
flex: 0 0 auto !important;
|
|
29
|
+
width: 0 !important; // Hide left sidebar to match your design
|
|
30
|
+
max-width: 0 !important;
|
|
31
|
+
padding: 0 !important;
|
|
32
|
+
overflow: hidden !important;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// Main feed content (col-lg-6)
|
|
36
|
+
> .col-lg-6 {
|
|
37
|
+
flex: 0 0 auto !important;
|
|
38
|
+
width: 800px !important; // Main content fixed width (Reddit ~750-800px)
|
|
39
|
+
max-width: 800px !important;
|
|
40
|
+
padding-left: 0 !important;
|
|
41
|
+
padding-right: 24px !important; // Gap between content and sidebar
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// Right sidebar (trending/widgets)
|
|
45
|
+
> .col-lg-3[data-widget-area="right"] {
|
|
46
|
+
flex: 0 0 auto !important;
|
|
47
|
+
width: 312px !important; // Sidebar fixed width (Reddit ~312px)
|
|
48
|
+
max-width: 312px !important;
|
|
49
|
+
padding-left: 0 !important;
|
|
50
|
+
padding-right: 0 !important;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@media (max-width: 991px) {
|
|
54
|
+
padding: 0 16px !important; // Smaller padding on tablets
|
|
55
|
+
flex-direction: column !important;
|
|
56
|
+
|
|
57
|
+
> .col-lg-6,
|
|
58
|
+
> .col-lg-3 {
|
|
59
|
+
width: 100% !important;
|
|
60
|
+
max-width: 100% !important;
|
|
61
|
+
padding: 0 !important;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@media (max-width: 768px) {
|
|
66
|
+
padding: 0 12px !important; // Even smaller on mobile
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// ===========================================================
|
|
71
|
+
// SEARCH BAR (Reddit-style)
|
|
72
|
+
// ===========================================================
|
|
73
|
+
// Target the brand header area where search widget is
|
|
74
|
+
.brand-container [data-widget-area="brand-header"] {
|
|
75
|
+
max-width: 500px !important; // Reddit search bar width (~500px)
|
|
76
|
+
margin: 0 auto !important; // Center the search bar
|
|
77
|
+
display: flex !important;
|
|
78
|
+
align-items: center !important;
|
|
79
|
+
|
|
80
|
+
// Search form/input group
|
|
81
|
+
form,
|
|
82
|
+
.input-group {
|
|
83
|
+
width: 100% !important;
|
|
84
|
+
display: flex !important;
|
|
85
|
+
align-items: center !important;
|
|
86
|
+
position: relative !important; // For absolute positioning of button
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// Search input styling
|
|
90
|
+
input[type="text"],
|
|
91
|
+
input[type="search"],
|
|
92
|
+
.form-control {
|
|
93
|
+
flex: 1 !important;
|
|
94
|
+
padding: 10px 48px 10px 16px !important; // Extra padding on right for button
|
|
95
|
+
border-radius: 20px !important; // Fully rounded like Reddit
|
|
96
|
+
border: 1px solid $jv-border-subtle !important;
|
|
97
|
+
background: $jv-surface !important;
|
|
98
|
+
font-size: 14px !important;
|
|
99
|
+
width: 100% !important;
|
|
100
|
+
|
|
101
|
+
&:focus {
|
|
102
|
+
border-color: $jv-primary !important;
|
|
103
|
+
outline: none !important;
|
|
104
|
+
box-shadow: 0 0 0 1px $jv-primary !important;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// Search button styling - positioned inside input on the right
|
|
109
|
+
button[type="submit"],
|
|
110
|
+
.btn {
|
|
111
|
+
position: absolute !important;
|
|
112
|
+
right: 4px !important; // Small gap from edge
|
|
113
|
+
top: 50% !important;
|
|
114
|
+
transform: translateY(-50%) !important;
|
|
115
|
+
padding: 8px 12px !important;
|
|
116
|
+
border-radius: 16px !important;
|
|
117
|
+
background: transparent !important;
|
|
118
|
+
border: none !important;
|
|
119
|
+
color: $jv-text-muted !important;
|
|
120
|
+
margin: 0 !important;
|
|
121
|
+
|
|
122
|
+
&:hover {
|
|
123
|
+
background: rgba(0, 0, 0, 0.05) !important;
|
|
124
|
+
color: $jv-primary !important;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
i {
|
|
128
|
+
font-size: 16px !important;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// Main container padding adjustments (Reddit-style)
|
|
134
|
+
.container-lg {
|
|
135
|
+
max-width: 1440px !important; // Match our feed max-width
|
|
136
|
+
padding-left: 24px !important; // Equal padding like Reddit
|
|
137
|
+
padding-right: 24px !important;
|
|
138
|
+
|
|
139
|
+
@media (max-width: 991px) {
|
|
140
|
+
padding-left: 16px !important;
|
|
141
|
+
padding-right: 16px !important;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
@media (max-width: 768px) {
|
|
145
|
+
padding-left: 12px !important;
|
|
146
|
+
padding-right: 12px !important;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
// Feed header area - add more padding (Reddit-style)
|
|
151
|
+
.feed {
|
|
152
|
+
// Add top padding to feed container
|
|
153
|
+
padding-top: 20px !important; // Reddit has ~20px top padding
|
|
154
|
+
|
|
155
|
+
// Header controls (New Topic button, settings)
|
|
156
|
+
.d-flex.justify-content-between.py-2.mb-2 {
|
|
157
|
+
padding: 12px 0 !important; // More padding top/bottom
|
|
158
|
+
margin-bottom: 20px !important; // More space before cards (Reddit-style)
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
// For other pages (category, recent, etc.) that use col-lg-9
|
|
163
|
+
main .container,
|
|
164
|
+
.container-fluid {
|
|
165
|
+
> .row {
|
|
166
|
+
max-width: 1440px !important;
|
|
167
|
+
margin: 0 auto !important;
|
|
168
|
+
padding: 0 24px !important;
|
|
169
|
+
justify-content: center !important;
|
|
170
|
+
|
|
171
|
+
> .col-lg-9 {
|
|
172
|
+
flex: 0 0 auto !important;
|
|
173
|
+
width: 640px !important;
|
|
174
|
+
max-width: 640px !important;
|
|
175
|
+
padding-left: 0 !important;
|
|
176
|
+
padding-right: 24px !important;
|
|
177
|
+
|
|
178
|
+
@media (max-width: 1200px) {
|
|
179
|
+
width: 100% !important;
|
|
180
|
+
max-width: 640px !important;
|
|
181
|
+
padding-right: 16px !important;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
> .col-lg-3[data-widget-area="sidebar"] {
|
|
186
|
+
flex: 0 0 auto !important;
|
|
187
|
+
width: 312px !important;
|
|
188
|
+
max-width: 312px !important;
|
|
189
|
+
padding-left: 0 !important;
|
|
190
|
+
padding-right: 0 !important;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
@media (max-width: 991px) {
|
|
194
|
+
padding: 0 16px !important;
|
|
195
|
+
|
|
196
|
+
> .col-lg-9,
|
|
197
|
+
> .col-lg-3 {
|
|
198
|
+
width: 100% !important;
|
|
199
|
+
max-width: 100% !important;
|
|
200
|
+
padding: 0 !important;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
12
206
|
body {
|
|
13
207
|
font-family: $jv-font-sans;
|
|
14
208
|
font-size: $jv-font-size-base;
|
package/scss/_feed.scss
CHANGED
|
@@ -7,6 +7,9 @@
|
|
|
7
7
|
// FEED CONTAINER
|
|
8
8
|
// ===========================================================
|
|
9
9
|
.feed {
|
|
10
|
+
// No max-width - let Bootstrap grid handle width
|
|
11
|
+
// Already inside col-lg-9 which provides proper constraints
|
|
12
|
+
|
|
10
13
|
// Header controls row
|
|
11
14
|
.d-flex.justify-content-between.py-2.mb-2 {
|
|
12
15
|
padding: $jv-space-4 0 !important;
|
|
@@ -72,8 +75,8 @@
|
|
|
72
75
|
.feed li[component="post"].posts-list-item {
|
|
73
76
|
background: $jv-surface !important;
|
|
74
77
|
border: 1px solid $jv-border-subtle !important;
|
|
75
|
-
border-radius: $jv-radius-
|
|
76
|
-
margin-bottom: $jv-space-4 !important;
|
|
78
|
+
border-radius: $jv-radius-md !important; // 12px - more compact than 16px
|
|
79
|
+
margin-bottom: $jv-space-4 !important; // 8px - compact like Reddit
|
|
77
80
|
box-shadow: none !important;
|
|
78
81
|
overflow: hidden;
|
|
79
82
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
@@ -102,7 +105,7 @@
|
|
|
102
105
|
padding: 0 !important;
|
|
103
106
|
|
|
104
107
|
.overflow-hidden {
|
|
105
|
-
border-radius: $jv-radius-
|
|
108
|
+
border-radius: $jv-radius-md $jv-radius-md 0 0 !important; // Match card radius
|
|
106
109
|
max-height: 350px !important;
|
|
107
110
|
|
|
108
111
|
img {
|
|
@@ -128,16 +131,20 @@
|
|
|
128
131
|
// ===========================================================
|
|
129
132
|
.feed li[component="post"].posts-list-item {
|
|
130
133
|
> .d-flex.gap-2.p-3 {
|
|
131
|
-
padding: $jv-space-6 !important;
|
|
134
|
+
padding: $jv-space-6 !important; // 12px - compact but comfortable
|
|
132
135
|
gap: $jv-space-4 !important;
|
|
136
|
+
|
|
137
|
+
@media (max-width: 768px) {
|
|
138
|
+
padding: $jv-space-4 !important; // 8px on mobile
|
|
139
|
+
}
|
|
133
140
|
}
|
|
134
141
|
|
|
135
142
|
// Avatar
|
|
136
143
|
.d-none.d-lg-block {
|
|
137
144
|
.avatar,
|
|
138
145
|
img[class*="avatar"] {
|
|
139
|
-
width:
|
|
140
|
-
height:
|
|
146
|
+
width: 40px !important; // Smaller, cleaner
|
|
147
|
+
height: 40px !important;
|
|
141
148
|
border-radius: 50% !important;
|
|
142
149
|
object-fit: cover;
|
|
143
150
|
border: 2px solid rgba(0, 0, 0, 0.05);
|
|
@@ -146,7 +153,7 @@
|
|
|
146
153
|
|
|
147
154
|
// Post body
|
|
148
155
|
.post-body {
|
|
149
|
-
gap: $jv-space-
|
|
156
|
+
gap: $jv-space-2 !important; // Tighter gap - 4px
|
|
150
157
|
}
|
|
151
158
|
}
|
|
152
159
|
|
|
@@ -155,11 +162,12 @@
|
|
|
155
162
|
// ===========================================================
|
|
156
163
|
.feed li[component="post"].posts-list-item {
|
|
157
164
|
.topic-title {
|
|
158
|
-
font-size: 18px !important;
|
|
165
|
+
font-size: 18px !important; // Keeping subtle
|
|
159
166
|
font-weight: 600 !important;
|
|
160
|
-
line-height: 1.
|
|
167
|
+
line-height: 1.3 !important; // Tighter for clean look
|
|
161
168
|
color: $jv-text-main !important;
|
|
162
|
-
margin-bottom: $jv-space-2;
|
|
169
|
+
margin-bottom: $jv-space-2; // 4px
|
|
170
|
+
letter-spacing: -0.01em; // Slight tightening for modern feel
|
|
163
171
|
|
|
164
172
|
&:hover {
|
|
165
173
|
color: $jv-primary !important;
|
|
@@ -173,13 +181,13 @@
|
|
|
173
181
|
.feed li[component="post"].posts-list-item {
|
|
174
182
|
.post-info {
|
|
175
183
|
font-size: 13px !important;
|
|
176
|
-
color: $jv-text-
|
|
184
|
+
color: $jv-text-soft; // Lighter for hierarchy
|
|
177
185
|
gap: $jv-space-2 !important;
|
|
178
186
|
|
|
179
187
|
.post-author {
|
|
180
188
|
a {
|
|
181
|
-
color: $jv-text-
|
|
182
|
-
font-weight:
|
|
189
|
+
color: $jv-text-muted; // Less prominent
|
|
190
|
+
font-weight: 500; // Lighter weight
|
|
183
191
|
|
|
184
192
|
&:hover {
|
|
185
193
|
color: $jv-primary;
|
|
@@ -281,7 +289,7 @@
|
|
|
281
289
|
.feed li[component="post"].posts-list-item {
|
|
282
290
|
hr {
|
|
283
291
|
border-color: $jv-border-subtle !important;
|
|
284
|
-
margin: $jv-space-
|
|
292
|
+
margin: $jv-space-2 0 !important; // Tighter - 4px
|
|
285
293
|
opacity: 1;
|
|
286
294
|
}
|
|
287
295
|
}
|
|
@@ -292,14 +300,16 @@
|
|
|
292
300
|
.feed li[component="post"].posts-list-item {
|
|
293
301
|
.d-flex.justify-content-between:last-child {
|
|
294
302
|
margin: 0 (-$jv-space-2);
|
|
303
|
+
padding-top: $jv-space-2; // Small padding above - 4px
|
|
304
|
+
border-top: 1px solid rgba(0, 0, 0, 0.04); // Subtle separator
|
|
295
305
|
|
|
296
306
|
.btn-link {
|
|
297
307
|
display: inline-flex;
|
|
298
308
|
align-items: center;
|
|
299
309
|
gap: 6px;
|
|
300
|
-
padding:
|
|
310
|
+
padding: 6px 10px !important; // Tighter padding
|
|
301
311
|
font-size: 13px !important;
|
|
302
|
-
font-weight:
|
|
312
|
+
font-weight: 500 !important; // Lighter weight
|
|
303
313
|
color: $jv-text-muted !important;
|
|
304
314
|
background: transparent;
|
|
305
315
|
border: none;
|
|
@@ -308,7 +318,7 @@
|
|
|
308
318
|
transition: background-color 0.15s ease, color 0.15s ease;
|
|
309
319
|
|
|
310
320
|
&:hover {
|
|
311
|
-
background: rgba(0, 0, 0, 0.
|
|
321
|
+
background: rgba(0, 0, 0, 0.03); // Subtler hover
|
|
312
322
|
color: $jv-text-main !important;
|
|
313
323
|
}
|
|
314
324
|
|