Added side-menu links to footer and applied flex-wrap to footer

Author: katlich112358

src/assets/css/main.css

@@ -271,6 +271,7 @@ textarea {
 /* <======== Styling for footer menu bar ========> */
 #footer-menu {
     display: flex;   
+    flex-wrap: wrap;
     list-style: none;
     font-family: 'Montserrat', sans-serif;
     font-size: 1em;
@@ -281,7 +282,26 @@ textarea {
 #footer-menu li {
    margin-right: 1em;
 }
-#footer-menu a {
+
+#footer-menu a{
+    color: #ed225d;
+    
+  }
+
+  #footer-menu-socials {
+    display: flex;   
+    flex-wrap: wrap;
+    list-style: none;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 1em;
+    padding-top: 1em;
+    border-bottom: 0.11em dashed transparent;
+}
+
+#footer-menu-socials li {
+   margin-right: 1em;
+}
+#footer-menu-socials a{
     color: #ed225d;
 
   }

src/templates/partials/footer.hbs

@@ -3,13 +3,30 @@ title: footer
 ---
 <footer>
     <h2 class="sr-only">{{#i18n "footerxh1"}}{{/i18n}}</h2>
-    <ul id="footer-menu" aria-labelledby="menu-title">   
+    <ul id="footer-menu-socials" aria-labelledby="menu-title">   
       <li><a href="https://discourse.processing.org/c/p5js" target=_blank class="other-link">{{#i18n "Forum"}}{{/i18n}}</a></li>
       <li><a href="http://github.com/processing/p5.js" target=_blank class="other-link">GitHub</a></li>
       <li><a href="http://twitter.com/p5xjs" target=_blank class="other-link">Twitter</a></li>
       <li><a href="https://www.instagram.com/p5xjs/" target=_blank class="other-link">Instagram</a></li>
       <li><a href="https://discord.gg/SHQ8dH25r9" target=_blank class="other-link">Discord</a></li>
     </ul>  
+
+    <ul id="footer-menu" aria-labelledby="menu-title">   
+      <li><a href="{{root}}/">{{#i18n "Home"}}{{/i18n}}</a></li>
+      <li><a href="https://editor.p5js.org">{{#i18n "Editor"}}{{/i18n}}</a></li>
+      <li><a href="{{root}}/download/">{{#i18n "Download"}}{{/i18n}}</a></li>
+      <li><a href="{{root}}/download/support.html">{{#i18n "Donate"}}{{/i18n}}</a></li>
+      <li><a href="{{root}}/get-started/">{{#i18n "Start"}}{{/i18n}}</a></li>
+      <li><a href="{{root}}/reference/">{{#i18n "Reference"}}{{/i18n}}</a></li>
+      <li><a href="{{root}}/libraries/">{{#i18n "Libraries"}}{{/i18n}}</a></li>
+      <li><a href="{{root}}/learn/">{{#i18n "Learn"}}{{/i18n}}</a></li>
+      <li><a href="{{root}}/teach/">{{#i18n "Teach"}}{{/i18n}}</a></li>
+      <li><a href="{{root}}/examples/">{{#i18n "Examples"}}{{/i18n}}</a></li>
+      <li><a href="https://p5js.org/contributor-docs/#/">{{#i18n "Contribute"}}{{/i18n}}</a></li>
+      <li><a href="{{root}}/books/">{{#i18n "Books"}}{{/i18n}}</a></li>
+      <li><a href="{{root}}/community/">{{#i18n "Community"}}{{/i18n}}</a></li>
+      <li><a href="https://showcase.p5js.org">{{#i18n "Showcase"}}{{/i18n}}</a></li>
+    </ul>  
 
     <p>
         {{#i18n "footer1"}}{{/i18n}}<a href='http://qianqian-ye.com/' target="_blank">Qianqian Ye</a>{{#i18n "footer3"}}{{/i18n}}<a href='https://lauren-mccarthy.com' target="_blank">Lauren Lee McCarthy</a>{{#i18n "footer4"}}{{/i18n}}<a href="https://processingfoundation.org/" target="_blank">Processing Foundation</a>{{#i18n "footer5"}}{{/i18n}}<a href="https://itp.nyu.edu/itp/" target="_blank">NYU ITP</a>{{#i18n "footer6"}}{{/i18n}}<a href="https://jereljohnson.com/" target="_blank">Jerel Johnson</a>{{#i18n "footer7"}}{{/i18n}}<a href="{{root}}/copyright.html">&copy; {{#i18n "footer8"}}{{/i18n}}</a>{{#i18n "footer9"}}{{/i18n}}