Skip to content

Commit a21b7a1

Browse files
sayeeg-11sayeeg-11
authored
Merge pull request #1095 from Eshita-Badhe/fix/footer-navbar-global-fix
Fix Footer Rendering Issue on Contribute Page + Navbar & Global Cleanup
2 parents e051c4f + 3957d50 commit a21b7a1

5 files changed

Lines changed: 101 additions & 93 deletions

File tree

‎frontend/css/feedback.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,6 @@ body.dark-mode input {
197197
body.dark-mode textarea::placeholder,
198198
body.dark-mode input::placeholder {
199199
color: #94a3b8 !important;
200-
}}
201200
}
202201
}
203202
:root {

‎frontend/css/style.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1941,6 +1941,7 @@ body.dark-mode .faq-cta-content p {
19411941
}
19421942
/* =========================
19431943
ACCESSIBILITY
1944+
===========================*/
19441945
@media (prefers-reduced-motion: reduce) {
19451946

19461947
footer.site-footer::after,
@@ -1958,12 +1959,14 @@ body.dark-mode .faq-cta-content p {
19581959

19591960
/* =========================
19601961
QUIZ SECTION SCROLLBAR
1962+
===========================*/
19611963
#level-chain-wrapper::-webkit-scrollbar {
19621964
display: none;
19631965
}
19641966

19651967
/* =========================
19661968
PRINT STYLES
1969+
===========================*/
19671970
@media print {
19681971

19691972
.why-section::before,
@@ -1978,6 +1981,7 @@ body.dark-mode .faq-cta-content p {
19781981

19791982
/* =========================
19801983
FOOTER (GLOBAL)
1984+
===========================*/
19811985
footer.site-footer {
19821986
position: relative;
19831987
overflow: hidden;
@@ -2234,6 +2238,7 @@ body.dark-mode footer.site-footer {
22342238

22352239
/* =========================
22362240
RESOURCE LINKS
2241+
===========================*/
22372242
.resource-link-wrapper {
22382243
display: flex;
22392244
align-items: center;
@@ -2272,6 +2277,7 @@ body.dark-mode footer.site-footer {
22722277

22732278
/* =========================
22742279
DARK MODE FIXES
2280+
===========================*/
22752281
body.dark-mode .navbar,
22762282
body.dark-mode header {
22772283
background-color: rgba(27, 38, 59, 0.98);

‎frontend/js/components.js‎

Lines changed: 88 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -55,96 +55,95 @@ OpenSource Compass
5555
`;
5656

5757
const footerHTML = `
58-
<footer class="site-footer" role="contentinfo" aria-label="Site footer">
59-
<div class="footer-shell">
60-
<div class="footer-top">
61-
<div class="footer-brand">
62-
<div class="footer-mark" aria-hidden="true">
63-
<i class="fas fa-compass"></i>
64-
</div>
65-
<div>
66-
<div class="footer-title">OpenSource Compass</div>
67-
<div class="footer-tagline">
68-
OpenSource Compass is a beginner-friendly,
69-
community-driven platform that guides students
70-
and first-time contributors in open source.
71-
It offers Git/GitHub basics, contribution best practices,
72-
do’s and don’ts, and a hub for programs
73-
like SWOsC, GSSoC, GSoC, Hacktoberfest, etc
74-
</div>
75-
</div>
76-
</div>
77-
78-
<div class="footer-columns" aria-label="Footer links">
79-
<nav class="footer-col" aria-label="Explore">
80-
<div class="footer-col-title">Explore</div>
81-
<ul class="footer-links">
82-
<li><a href="${getPath('index.html')}">Home</a></li>
83-
<li><a href="${getPath('frontend/pages/guides.html')}">Guides</a></li>
84-
<li><a href="${getPath('frontend/pages/programs.html')}">Programs</a></li>
85-
<li><a href="${getPath('frontend/pages/Resources.html')}">Resources</a></li>
86-
</ul>
87-
</nav>
88-
89-
<nav class="footer-col" aria-label="Community">
90-
<div class="footer-col-title">Community</div>
91-
<ul class="footer-links">
92-
<li><a href="${getPath('frontend/pages/contributors.html')}">Contributors</a></li>
93-
<li><a href="${getPath('frontend/pages/Contribute.html')}">Contribute</a></li>
94-
<li><a href="${getPath('frontend/pages/faq.html')}">FAQ</a></li>
95-
</ul>
96-
</nav>
97-
98-
<nav class="footer-col" aria-label="Project">
99-
<div class="footer-col-title">Project</div>
100-
<ul class="footer-links">
101-
<li>
102-
<a href="https://github.com/sayeeg-11/OpenSource-Compass" target="_blank" rel="noopener noreferrer">
103-
GitHub
104-
</a>
105-
</li>
106-
<li>
107-
<a href="https://github.com/sayeeg-11/OpenSource-Compass/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer">
108-
Contributing
109-
</a>
110-
</li>
111-
<li>
112-
<a href="${getPath('frontend/pages/code-of-conduct.html')}" target="_blank" rel="noopener noreferrer">
113-
Code of Conduct
114-
</a>
115-
</li>
116-
</ul>
117-
</nav>
118-
</div>
119-
</div>
120-
121-
<div class="footer-divider" aria-hidden="true"></div>
122-
123-
<div class="footer-bottom">
124-
<div class="footer-badges" aria-label="Footer highlights">
125-
<span class="footer-pill"><i class="fas fa-shield"></i> Community-safe</span>
126-
<span class="footer-pill"><i class="fas fa-bolt"></i> Beginner-ready</span>
127-
<span class="footer-pill"><i class="fas fa-code-branch"></i> Open source</span>
128-
<button id="pwa-install-btn" class="footer-pill" style="display: none; cursor: pointer; border: none; font-family: inherit; font-size: inherit; margin-left:10px;">
129-
<i class="fas fa-download"></i> Install App
130-
</button>
131-
</div>
132-
133-
<div class="footer-meta">
134-
<span>© <span id="footer-year"></span> OpenSource Compass</span>
135-
<span class="footer-sep" aria-hidden="true">•</span>
136-
<a class="footer-inline"
137-
href="https://github.com/sayeeg-11/OpenSource-Compass"
138-
target="_blank"
139-
rel="noopener noreferrer">
140-
<i class="fab fa-github"></i> Star on GitHub
141-
</a>
142-
</div>
143-
</div>
144-
</div>
145-
</footer>
146-
`;
58+
<footer class="site-footer" role="contentinfo" aria-label="Site footer">
59+
<div class="footer-shell">
60+
<div class="footer-top">
61+
<div class="footer-brand">
62+
<div class="footer-mark" aria-hidden="true">
63+
<i class="fas fa-compass"></i>
64+
</div>
65+
<div>
66+
<div class="footer-title">OpenSource Compass</div>
67+
<div class="footer-tagline">
68+
OpenSource Compass is a beginner-friendly,
69+
community-driven platform that guides students
70+
and first-time contributors in open source.
71+
It offers Git/GitHub basics, contribution best practices,
72+
do’s and don’ts, and a hub for programs
73+
like SWOsC, GSSoC, GSoC, Hacktoberfest, etc
74+
</div>
75+
</div>
76+
</div>
77+
78+
<div class="footer-columns" aria-label="Footer links">
79+
<nav class="footer-col" aria-label="Explore">
80+
<div class="footer-col-title">Explore</div>
81+
<ul class="footer-links">
82+
<li><a href="${getPath('index.html')}">Home</a></li>
83+
<li><a href="${getPath('frontend/pages/guides.html')}">Guides</a></li>
84+
<li><a href="${getPath('frontend/pages/programs.html')}">Programs</a></li>
85+
<li><a href="${getPath('frontend/pages/Resources.html')}">Resources</a></li>
86+
</ul>
87+
</nav>
88+
89+
<nav class="footer-col" aria-label="Community">
90+
<div class="footer-col-title">Community</div>
91+
<ul class="footer-links">
92+
<li><a href="${getPath('frontend/pages/contributors.html')}">Contributors</a></li>
93+
<li><a href="${getPath('frontend/pages/Contribute.html')}">Contribute</a></li>
94+
<li><a href="${getPath('frontend/pages/faq.html')}">FAQ</a></li>
95+
</ul>
96+
</nav>
97+
98+
<nav class="footer-col" aria-label="Project">
99+
<div class="footer-col-title">Project</div>
100+
<ul class="footer-links">
101+
<li>
102+
<a href="https://github.com/sayeeg-11/OpenSource-Compass" target="_blank" rel="noopener noreferrer">
103+
GitHub
104+
</a>
105+
</li>
106+
<li>
107+
<a href="https://github.com/sayeeg-11/OpenSource-Compass/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer">
108+
Contributing
109+
</a>
110+
</li>
111+
<li>
112+
<a href="${getPath('frontend/pages/code-of-conduct.html')}" target="_blank" rel="noopener noreferrer">
113+
Code of Conduct
114+
</a>
115+
</li>
116+
</ul>
117+
</nav>
118+
</div>
119+
</div>
120+
121+
<div class="footer-divider" aria-hidden="true"></div>
147122
123+
<div class="footer-bottom">
124+
<div class="footer-badges" aria-label="Footer highlights">
125+
<span class="footer-pill"><i class="fas fa-shield"></i> Community-safe</span>
126+
<span class="footer-pill"><i class="fas fa-bolt"></i> Beginner-ready</span>
127+
<span class="footer-pill"><i class="fas fa-code-branch"></i> Open source</span>
128+
<button id="pwa-install-btn" class="footer-pill" style="display: none; cursor: pointer; border: none; font-family: inherit; font-size: inherit; margin-left:10px;">
129+
<i class="fas fa-download"></i> Install App
130+
</button>
131+
</div>
132+
133+
<div class="footer-meta">
134+
<span>© <span id="footer-year"></span> OpenSource Compass</span>
135+
<span class="footer-sep" aria-hidden="true">•</span>
136+
<a class="footer-inline"
137+
href="https://github.com/sayeeg-11/OpenSource-Compass"
138+
target="_blank"
139+
rel="noopener noreferrer">
140+
<i class="fab fa-github"></i> Star on GitHub
141+
</a>
142+
</div>
143+
</div>
144+
</div>
145+
</footer>
146+
`;
148147

149148
// Inject components immediately
150149
const navbarContainer = document.getElementById('navbar');

‎frontend/pages/Contribute.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,11 @@
132132
/* Black for bold text */
133133
}
134134

135+
#footer,
136+
#footer * {
137+
text-align: left !important;
138+
text-decoration-color: black !important;
139+
}
135140
</style>
136141

137142
<body>

‎index.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1398,9 +1398,8 @@ <h3>Stay Ahead of Open Source</h3>
13981398
<button id="scrollTopBtn" title="Back to Top">
13991399
<i class="fas fa-chevron-up"></i>
14001400
</button>
1401-
1402-
<span class="close-btn" onclick="closeModal()">&times;</span>
1403-
1401+
1402+
<div id="footer"></div>
14041403
</div>
14051404
</div>
14061405
<!-- PROGRAM MODAL -->

0 commit comments

Comments
 (0)