@@ -10,94 +10,26 @@ html, body {
1010 height : 100% ;
1111 margin : 0 ;
1212 padding : 0 ;
13- line-height : 1 ;
1413}
1514
16- /* Main Container */
1715# container {
1816 flex : 1 ;
1917 display : flex;
20- justify-content : center;
21- align-items : center;
22- height : 100% ;
18+ flex-direction : column;
19+ justify-content : space-between;
2320}
2421
25- /* Content Section */
2622# content {
27- width : 100% ;
28- height : 100% ;
29- padding : 0 ;
30- margin : 0 ;
23+ flex : 1 ;
24+ padding : 20px ;
3125}
3226
3327# start {
3428 width : 100% ;
35- height : 100% ;
36- box-sizing : border-box; /* Ensure padding is included in the element's width and height */
37- padding : 20px ; /* Optional: Add padding if needed */
38- }
39-
40- /* Header and Navigation */
41- header {
42- position : sticky;
43- top : 0 ;
44- z-index : 1000 ; /* Ensure it stays above other content */
45- background-color : # 333 ; /* Ensure the header has a background */
46- box-shadow : 0 2px 5px rgba (0 , 0 , 0 , 0.1 ); /* Optional: add a subtle shadow */
47- }
48-
49- .navbar-logo ul {
50- margin : 0 ;
51- padding : 0 ;
52- display : flex;
53- justify-content : space-around;
54- background-color : # 333 ; /* Same background color as before */
29+ box-sizing : border-box;
30+ padding : 20px ;
5531}
5632
57- .navbar-logo ul li {
58- list-style : none;
59- }
60-
61- .navbar-logo ul li a {
62- display : block;
63- padding : 15px 20px ;
64- color : # fff ; /* White text */
65- text-decoration : none;
66- }
67-
68- .navbar-logo ul li a : hover {
69- background-color : # 22769c ; /* Slightly darker background on hover */
70- color : # fff ; /* White text */
71- }
72-
73- /* Navbar customization */
74- .navbar-custom {
75- position : sticky;
76- top : 0 ;
77- z-index : 1000 ;
78- background-color : # 333 ; /* Your navbar background color */
79- border-bottom : 1px solid # 444 ; /* Optional: add a bottom border */
80- }
81-
82- .navbar-left {
83- display : flex;
84- align-items : center; /* Vertically center the items */
85- justify-content : flex-end; /* Align items to the right */
86- }
87-
88- /* HIGHLIGHT CURRENT PAGE */
89- .navbar-nav > li > a {
90- color : # fff ; /* Default link color */
91- text-decoration : none;
92- }
93-
94- .navbar-nav > li > a : hover ,
95- .navbar-nav > li .active > a {
96- background-color : # 22769c ; /* Background color on hover and active state */
97- color : # fff ; /* Text color on hover and active state */
98- }
99-
100- /* General Text and Element Styles */
10133h1 , h2 , h3 , h4 , h5 , h6 {
10234 color : # 222 ;
10335 margin : 0 0 20px ;
@@ -133,13 +65,6 @@ a:hover, a:focus {
13365 font-weight : bold;
13466}
13567
136- a small {
137- font-size : 11px ;
138- color : # 777 ;
139- margin-top : -0.3em ;
140- display : block;
141- }
142-
14368.wrapper {
14469 width : 860px ;
14570 margin : 0 auto;
@@ -203,23 +128,6 @@ kbd {
203128 vertical-align : middle;
204129}
205130
206- .flexbox {
207- display : flex;
208- height : 50px ;
209- }
210-
211- .logo {
212- display : block;
213- margin-top : 5px ;
214- }
215-
216- .navbar-logo {
217- display : flex;
218- height : 50px ;
219- margin : auto;
220- }
221-
222- /* Downloads */
223131.downloads li {
224132 width : 89px ;
225133 float : left;
@@ -254,6 +162,11 @@ kbd {
254162 background-color : # f0f0f0 ;
255163}
256164
165+ strong {
166+ color : # 222 ;
167+ font-weight : 700 ;
168+ }
169+
257170.downloads li + li + li {
258171 border-right : none;
259172 width : 89px ;
@@ -265,7 +178,6 @@ kbd {
265178 color : # 222 ;
266179}
267180
268- /* Section */
269181section {
270182 width : 500px ;
271183 float : right;
@@ -283,23 +195,156 @@ hr {
283195 margin : 0 0 20px ;
284196}
285197
286- /* Footer */
198+ /* NAVIGATION Sticky Header */
199+ header {
200+ position : sticky;
201+ width : 100% ;
202+ top : 0 ;
203+ z-index : 1000 ;
204+ background-color : # 333 ;
205+ box-shadow : 0 2px 5px rgba (0 , 0 , 0 , 0.1 );
206+ }
207+
208+ .navbar-logo ul {
209+ margin : 0 ;
210+ padding : 0 ;
211+ display : flex;
212+ justify-content : space-around;
213+ background-color : # 333 ;
214+ }
215+
216+ .navbar-logo ul li {
217+ list-style : none;
218+ }
219+
220+ .navbar-logo ul li a {
221+ display : block;
222+ padding : 15px 20px ;
223+ color : # fff ;
224+ text-decoration : none;
225+ }
226+
227+ .navbar-logo ul li a : hover {
228+ background-color : # 22769c ;
229+ color : # fff ;
230+ }
231+
232+ nav {
233+ background-color : # f31a1a ;
234+ }
235+
236+ nav ul {
237+ list-style-type : none;
238+ margin : 0 ;
239+ padding : 0 ;
240+ display : flex;
241+ justify-content : space-around;
242+ background-color : # 333 ;
243+ }
244+
245+ nav ul li {
246+ display : inline;
247+ margin-right : 15px ;
248+ list-style : none;
249+ }
250+
251+ nav ul li a {
252+ text-decoration : none;
253+ display : block;
254+ padding : 15px 20px ;
255+ color : # fff ;
256+ }
257+
258+ nav ul li a : hover {
259+ text-decoration : underline;
260+ background-color : # 22769c ;
261+ }
262+
263+ a {
264+ color : # 22769c ;
265+ }
266+
267+ a : hover {
268+ color : # 22769c ;
269+ }
270+
271+ .flexbox {
272+ display : flex;
273+ height : 50px ;
274+
275+ & > * { margin : auto }
276+ }
277+
278+ .logo {
279+ display : block;
280+ img { margin-top : 5px }
281+ }
282+
283+ .navbar-logo {
284+ display : flex;
285+ height : 50px ;
286+
287+ & > * { margin : auto }
288+ }
289+
290+ /* NAV BAR HIGHLIGHT CURRENT PAGE */
291+ .navbar-nav > li > a {
292+ color : # fff ;
293+ text-decoration : none;
294+ }
295+
296+ .navbar-nav > li > a : hover {
297+ background-color : # 22769c ;
298+ }
299+
300+ .navbar-nav > li .active > a {
301+ background-color : # 22769c ;
302+ color : # fff ;
303+ }
304+
305+ /* FOOTER STYLING */
287306footer {
288307 width : 100% ;
289- background-color : # 333 ; /* Dark background color */
290- color : # fff ; /* White text color */
291- padding : 20px 0 ; /* Padding for spacing */
292- text-align : center; /* Centered text */
293- font-size : 14px ; /* Font size */
294- position : relative;
308+ background-color : # 333 ;
309+ color : # fff ;
310+ padding : 20px 0 ;
311+ text-align : center;
312+ font-size : 14px ;
313+ margin-top : auto; /* Pushes footer to the bottom */
295314}
296315
297316footer a {
298- color : # fff ; /* Footer link color */
299- text-decoration : none; /* Remove underline */
317+ color : # fff ;
318+ text-decoration : none;
300319}
301320
302321footer a : hover {
303- color : # 22769c ; /* Link color on hover */
304- text-decoration : underline; /* Underline on hover */
322+ color : # 22769c ;
323+ text-decoration : underline;
324+ }
325+
326+ /* NAVBAR CUSTOMISATION */
327+ .navbar-custom {
328+ position : sticky;
329+ width : 100% ;
330+ top : 0 ;
331+ z-index : 1000 ;
332+ background-color : # 333 ;
333+ border-bottom : 1px solid # 444 ;
334+ }
335+
336+ .navbar-logo {
337+ max-height : 250px ;
338+ float : left;
339+ margin-right : 5px ;
340+ }
341+
342+ .navbar-left {
343+ display : flex;
344+ align-items : center;
345+ justify-content : flex-end;
346+ }
347+
348+ .navbar-nav > li > a : hover {
349+ background-color : # 22769c ;
305350}
0 commit comments