enhance the design of the footer

NgweBecky · Mar 11, 2024 · 8f33b83 · 8f33b83
1 parent 1dbef0a
commit 8f33b83
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 17 deletions.
diff --git a/apps/Info.html b/apps/Info.html
@@ -168,8 +168,14 @@ <h3 class="text-center h3 mb-2" style="margin-top:8px;margin-bottom:10px;">Infor
 </div>
 </div>
 
-<footer class="text-center text-white bg-dark p-3 mt-2">
-	<p class="p">Copyright © 2021 caMicroscope</p>
+<footer class="text-center text-white bg-dark">
+	<div class="row" style="background: #022837;">
+        <div class="col-12 text-center mb-2">
+            <p class="text-light mt-3">&copy; <span class="text-light" id="copyright">
+                <script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
+            </span> caMicroscope</p>
+        </div>
+    </div>
 </footer>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

diff --git a/apps/landing/landing.html b/apps/landing/landing.html
@@ -115,23 +115,47 @@ <h3>Documentation</h3>
 
 <!-- Footer -->
 
-<footer id="footer">
-
+<footer class="bg-dark" id="footer">
     <div class="content">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-4">
+                    <h5>Community</h5>
+                    <ul class="list-unstyled">
+                        <li><a href="https://github.com/orgs/camicroscope/discussions" target="_blank" class="text-light">Discussion</a></li>
+                        <li><a href="https://github.com/caMicroscope" target="_blank" class="text-light">Github</a></li>
+                        <li><a href="https://github.com/camicroscope/docs/issues/new/choose" target="_blank" class="text-light">Feedback</a></li>
+                    </ul>
+                </div>
+                <div class="col-md-4">
+                    <h5>Resources</h5>
+                    <ul class="list-unstyled">
+                        <li><a href="http://camicroscope.org/docs/#links-to-other-resources" target="_blank" class="text-light">Documentation</a></li>
+                        <li><a href=" https://camicroscope.github.io/" target="_blank" class="text-light">Open Source Support</a></li>
+                        <li><a href="https://camicroscope.github.io/conduct.html" target="_blank" class="text-light">Code of Conduct</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="container mt-3">
+            <div class="row mt-3">
+                <div class="inner">
+                    <section class="about text-center" style="margin-left:0cm">
 
-        <div class="inner">
-
-
-
-            <section class="about" style="margin-left:0cm">
-
-                U24 CA18092401A1, <b>Tools to Analyze Morphology and Spatially Mapped Molecular Data</b>
-            </section>
-
-
+                        U24 CA18092401A1, <b>Tools to Analyze Morphology and Spatially Mapped Molecular Data</b>
+                    </section>
+                </div>
+            </div>
         </div>
 
     </div>
+    <div class="row" style="background: #022837;">
+        <div class="col-12 text-center mb-2">
+            <p class="text-light mt-3">&copy; <span class="text-light" id="copyright">
+                <script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
+            </span> caMicroscope</p>
+        </div>
+    </div>
 
 </footer>
 

diff --git a/apps/landing/main.css b/apps/landing/main.css
@@ -4359,6 +4359,31 @@
 			letter-spacing: 0.05em;
 			text-transform: uppercase;
 		}
+		ul{
+			margin: 0.75em 0;
+			padding: 0 1em;
+			list-style: none;
+		}
+		#footer ul li a::before{
+			content: "";
+			border-color: transparent #16A2B8;
+			border-style: solid;
+			border-width: 0.35em 0 0.35em 0.45em;
+			display: block;
+			height: 0;
+			width: 0;
+			left: -1em;
+			top: 0.9em;
+			position: relative;
+			color: rgb(22, 162, 184) ;
+
+		}
+		#footer a{
+			text-decoration: none;
+		}
+		#footer ul li a:hover{
+			color: #16A2B8 !important;
+		}
 
 			#footer input[type="submit"]:hover,
 			#footer input[type="reset"]:hover,
@@ -4441,7 +4466,7 @@
 			@media screen and (max-width: 1280px) {
 
 				#footer .content {
-					padding: 5em 3em 3em 3em ;
+					padding: 3em 3em 3em 3em ;
 				}
 
 					#footer .content > .inner {

diff --git a/apps/signup/signup.html b/apps/signup/signup.html
@@ -111,8 +111,14 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
       </form>
       <div class="text-center" onclick="loginPage()">Already have an account? </div>
     </div>
-    <footer class="text-center text-white bg-dark p-3">
-      <p class="p">Copyright © 2021 caMicroscope</p>
+    <footer class="text-center text-white bg-dark">
+      <div class="row" style="background: #022837;">
+        <div class="col-12 text-center mb-2">
+            <p class="text-light mt-3">&copy; <span class="text-light" id="copyright">
+                <script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
+            </span> caMicroscope</p>
+        </div>
+    </div>
     </footer>
     <!-- popup -->
     <div id="popup-container"></div>