Skip to content

Commit 90eef96

Browse files
Rajesh-Nagarajan-11Rajesh-Nagarajan-11
committed
Update Handbook.style.js
Signed-off-by: Rajesh-Nagarajan-11 <[email protected]>
1 parent 4f04825 commit 90eef96

File tree

1 file changed

+88
-38
lines changed

1 file changed

+88
-38
lines changed

‎src/sections/Community/Handbook/Handbook.style.js

Lines changed: 88 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import styled from "styled-components";
22
export const HandbookWrapper = styled.div`
3+
/* Ensure consistent initial layout for SSR */
34
display: flex;
45
flex-direction: column;
6+
min-height: 100vh;
7+
position: relative;
58
69
.content > a:first-of-type > h2:first-of-type {
710
padding-top: 1rem;
@@ -14,19 +17,19 @@ export const HandbookWrapper = styled.div`
1417
width:100%;
1518
padding-bottom: 2rem;
1619
ul > li {
17-
color: ${(props) => props.theme.text};
20+
color: ${(props) => props.theme.text || "#000"};
1821
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
1922
}
2023
ol > li {
21-
color: ${(props) => props.theme.menuColor};
24+
color: ${(props) => props.theme.menuColor || "#000"};
2225
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
2326
}
2427
ul > li > span {
25-
color: ${(props) => props.theme.text};
28+
color: ${(props) => props.theme.text || "#000"};
2629
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
2730
}
2831
ol > li > span {
29-
color: ${(props) => props.theme.text};
32+
color: ${(props) => props.theme.text || "#000"};
3033
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
3134
}
3235
}
@@ -57,7 +60,7 @@ export const HandbookWrapper = styled.div`
5760
margin: 0;
5861
padding: 0;
5962
width: 250px;
60-
background-color:${(props) => props.theme.secondaryLightColor};
63+
background-color:${(props) => props.theme.secondaryLightColor || "#f0f0f0"};
6164
height: auto;
6265
min-height: 100%;
6366
flex-shrink: 0;
@@ -73,25 +76,74 @@ export const HandbookWrapper = styled.div`
7376
}
7477
7578
.sidebar a.active {
76-
background-color: ${(props) => props.theme.primaryLightColorTwo};
79+
background-color: ${(props) => props.theme.primaryLightColorTwo || "#007acc"};
7780
color: white;
7881
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
7982
}
8083
8184
.sidebar a:hover:not(.active) {
82-
background-color:${(props) => props.theme.secondaryLightColor};
85+
background-color:${(props) => props.theme.secondaryLightColor || "#f0f0f0"};
8386
color: white;
8487
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
8588
}
8689
90+
/* SSR-safe header with strict dimension control */
8791
.page-header-section {
88-
height: 10rem;
89-
text-align: center;
92+
position: relative;
93+
width: 100%;
94+
height: 160px;
95+
margin: 0;
96+
padding: 0;
97+
display: flex;
98+
align-items: center;
99+
justify-content: center;
90100
background: rgb(71,126,150);
91101
background: linear-gradient(250deg, rgba(71,126,150,1) 0%, rgba(0,179,159,1) 35%, rgba(60,73,79,1) 100%);
92-
h1 {
93-
line-height: 10rem;
94-
color: white;
102+
/* Prevent layout shift during hydration */
103+
contain: layout;
104+
}
105+
106+
.page-header-section h1 {
107+
margin: 0;
108+
padding: 0 1rem;
109+
width: 100%;
110+
max-width: 1200px;
111+
color: white;
112+
font-size: 2.5rem;
113+
font-weight: 700;
114+
line-height: 1.2;
115+
text-align: center;
116+
box-sizing: border-box;
117+
/* Use standard system fonts to avoid FOUT */
118+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
119+
}
120+
121+
@media screen and (max-width: 768px) {
122+
.page-header-section {
123+
height: auto;
124+
min-height: 140px;
125+
padding: 1rem 0;
126+
}
127+
128+
.page-header-section h1 {
129+
font-size: 1.5rem;
130+
line-height: 1.2;
131+
padding: 0 1rem;
132+
word-wrap: break-word;
133+
hyphens: auto;
134+
}
135+
}
136+
137+
@media screen and (max-width: 480px) {
138+
.page-header-section {
139+
min-height: 120px;
140+
padding: 0.75rem 0;
141+
}
142+
143+
.page-header-section h1 {
144+
font-size: 1.25rem;
145+
line-height: 1.1;
146+
padding: 0 0.75rem;
95147
}
96148
}
97149
@@ -115,7 +167,7 @@ export const HandbookWrapper = styled.div`
115167
display: block;
116168
margin-left: auto;
117169
margin-right: auto;
118-
filter: invert(${(props) => props.theme.meshInterfaceLogoFilter});
170+
filter: invert(${(props) => props.theme.meshInterfaceLogoFilter || 0});
119171
}
120172
.site-icon{
121173
height: 1.6rem;
@@ -129,7 +181,7 @@ export const HandbookWrapper = styled.div`
129181
vertical-align: bottom;
130182
}
131183
.smp-action{
132-
filter: invert(${(props) => props.theme.meshInterfaceLogoFilter});
184+
filter: invert(${(props) => props.theme.meshInterfaceLogoFilter || 0});
133185
}
134186
}
135187
@@ -139,7 +191,7 @@ export const HandbookWrapper = styled.div`
139191
}
140192
141193
td, th {
142-
border: 0.05rem solid ${(props) => props.theme.primaryLightColor};
194+
border: 0.05rem solid ${(props) => props.theme.primaryLightColor || "#ccc"};
143195
text-align: left;
144196
padding: 0.5rem;
145197
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -157,7 +209,7 @@ export const HandbookWrapper = styled.div`
157209
}
158210
159211
tbody:nth-child(even) {
160-
background-color: ${(props) => props.theme.secondaryLightColorTwo};
212+
background-color: ${(props) => props.theme.secondaryLightColorTwo || "#f9f9f9"};
161213
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
162214
}
163215
@@ -195,7 +247,7 @@ export const HandbookWrapper = styled.div`
195247
}
196248
197249
input[type=checkbox] + label:before {
198-
content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="white" viewBox="0 4 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');;
250+
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="white" viewBox="0 4 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');
199251
border: 0.1em solid #000;
200252
border-radius: 0.2em;
201253
display: inline-block;
@@ -204,7 +256,6 @@ export const HandbookWrapper = styled.div`
204256
padding-left: 0.2em;
205257
padding-bottom: 0.3em;
206258
margin-right: 0.5em;
207-
208259
margin-bottom: 0.15em;
209260
vertical-align: bottom;
210261
color: transparent;
@@ -215,19 +266,18 @@ export const HandbookWrapper = styled.div`
215266
transform: scale(0);
216267
}
217268
rect {
218-
fill: ${props => props.theme.grey313131ToGreenC9FCF6};
269+
fill: ${props => props.theme.grey313131ToGreenC9FCF6 || "#313131"};
219270
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
220271
}
221272
path {
222-
stroke: ${props => props.theme.green00D3A9ToGreen00B39F};
273+
stroke: ${props => props.theme.green00D3A9ToGreen00B39F || "#00D3A9"};
223274
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
224275
}
225276
226277
input[type=checkbox]:checked + label:before {
227-
content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="black" viewBox="0 4 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');;
228-
229-
background-color: ${(props) => props.theme.keppelColor};
230-
border-color: ${(props) => props.theme.primaryLightColorTwo};
278+
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="black" viewBox="4 4 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');
279+
background-color: ${(props) => props.theme.keppelColor || "#00B39F"};
280+
border-color: ${(props) => props.theme.primaryLightColorTwo || "#007acc"};
231281
color: #fff;
232282
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
233283
}
@@ -239,8 +289,8 @@ export const HandbookWrapper = styled.div`
239289
240290
input[type=checkbox]:checked:disabled + label:before {
241291
transform: scale(1);
242-
background-color: ${(props) => props.theme.secondaryLightColor};
243-
border-color: ${(props) => props.theme.secondaryLightColor};
292+
background-color: ${(props) => props.theme.secondaryLightColor || "#f0f0f0"};
293+
border-color: ${(props) => props.theme.secondaryLightColor || "#f0f0f0"};
244294
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
245295
}
246296
@@ -335,7 +385,7 @@ export const HandbookWrapper = styled.div`
335385
overflow:hidden;
336386
.active{
337387
font-weight:5000;
338-
color: ${(props) => props.theme.secondaryColor};
388+
color: ${(props) => props.theme.secondaryColor || "#333"};
339389
}
340390
ul{
341391
list-style: none;
@@ -362,7 +412,7 @@ export const HandbookWrapper = styled.div`
362412
}
363413
.text{
364414
p{
365-
color: ${props => props.theme.tertiaryColor};
415+
color: ${props => props.theme.tertiaryColor || "#666"};
366416
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
367417
}
368418
}
@@ -375,7 +425,7 @@ export const HandbookWrapper = styled.div`
375425
vertical-align: top;
376426
}
377427
.skill{
378-
color: ${props => props.theme.tertiaryColor};
428+
color: ${props => props.theme.tertiaryColor || "#666"};
379429
font-size: 16px;
380430
padding: 0 0 1.25rem 1.8rem;
381431
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -396,11 +446,11 @@ export const HandbookWrapper = styled.div`
396446
.content_type {
397447
display: flex;
398448
flex-direction: column;
399-
background: ${props => props.theme.grey212121ToWhite};
400-
box-shadow: 0px 0px ${props => props.theme.projectShadowsize} ${props => props.theme.green00D3A9ToGreyE6E6E6};
449+
background: ${props => props.theme.grey212121ToWhite || "#212121"};
450+
box-shadow: 0px 0px ${props => props.theme.projectShadowsize || "10px"} ${props => props.theme.green00D3A9ToGreyE6E6E6 || "#00D3A9"};
401451
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
402452
&:hover{
403-
box-shadow: 0px 0px 5px ${props => props.theme.primaryColor};
453+
box-shadow: 0px 0px 5px ${props => props.theme.primaryColor || "#007acc"};
404454
}
405455
padding: 12% 6% 12% 6%;
406456
height: 220px;
@@ -411,11 +461,11 @@ export const HandbookWrapper = styled.div`
411461
margin-bottom: auto;
412462
margin-top: 0.5rem;
413463
font-weight: 700;
414-
color: ${props => props.theme.secondaryColor}
464+
color: ${props => props.theme.secondaryColor || "#333"}
415465
}
416466
p{
417467
font-weight: 300;
418-
color: ${props => props.theme.text};
468+
color: ${props => props.theme.text || "#000"};
419469
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
420470
}
421471
img{
@@ -425,7 +475,7 @@ export const HandbookWrapper = styled.div`
425475
}
426476
.process {
427477
margin: 10px auto;
428-
border-left: solid 2px ${(props) => props.theme.tertiaryColor};
478+
border-left: solid 2px ${(props) => props.theme.tertiaryColor || "#666"};
429479
padding: 0px 20px 0px 20px;
430480
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
431481
}
@@ -441,9 +491,9 @@ export const HandbookWrapper = styled.div`
441491
width: 20px;
442492
height: 20px;
443493
display: block;
444-
border: 3px solid ${(props) => props.theme.tertiaryColor};
494+
border: 3px solid ${(props) => props.theme.tertiaryColor || "#666"};
445495
border-radius: 50%;
446-
background-color: ${(props) => props.theme.secondaryColor};
496+
background-color: ${(props) => props.theme.secondaryColor || "#333"};
447497
top: 25px;
448498
left: -32px;
449499
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -458,7 +508,7 @@ export const HandbookWrapper = styled.div`
458508
details.invite-only {
459509
margin: 1rem;
460510
padding: 1rem;
461-
background-color: ${(props) => props.theme.grey313131ToGreenC9FCF6};
511+
background-color: ${(props) => props.theme.grey313131ToGreenC9FCF6 || "#313131"};
462512
span {
463513
font-weight: bold;
464514
display: inline;

0 commit comments

Comments
 (0)