Social media update

_config.yml

@@ -6,6 +6,9 @@ baseurl: ""
 
 url: "https://plattshacks.org/"
 
+event:
+  name: "Plattshacks: the best hackathon in the North Country"
+
 # The ability to use custom themes.
 style:
   theme: "main"

_data/navbar.yml

@@ -7,3 +7,11 @@ navbar:
     #   link: "/credits"
     - title: "Apply"
       link: "https://fs30.formsite.com/CASplattsburgh/mxly6jdd7i/index.html"
+
+  social-media:
+    - url: "https://www.facebook.com/PlattsHack/"
+      type: "fab fa-facebook-square"
+      name: "facebook"
+    - url: "mailto:plattshack@gmail.com?Subject=Hello%20Plattshacks"
+      type: "far fa-envelope"
+      name: "mail"

_includes/head.html

@@ -29,6 +29,7 @@
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
   <link rel="stylesheet" href="/css/unsemantic-grid-responsive-tablet.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/7.0.3/jquery.mmenu.all.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/7.2.2/addons/iconbar/jquery.mmenu.iconbar.css">
   <link rel="stylesheet" type="text/css" href="{{ '/css/' | prepend: site.baseurl | prepend: site.url }}{{ site.style.theme | append: '.css?ver=002' }}" />
 
   <!-- Favicon -->

_includes/hero.html

@@ -22,11 +22,4 @@ <h3 rel="location">{{ hero.date }} &mdash; {{ hero.location }}</h3>
           {% endfor %}
         </div>
     </div>
-    <div class="hero-social-media">
-      <p>Follow us on social media</p>
-
-      <div class="social-media-badges">
-        <a href="https://www.facebook.com/PlattsHack/" target="_blank"><i class="fab fa-facebook-square"></i></a>
-      </div>
-    </div>
 </section>

_includes/navbar.html

@@ -17,6 +17,12 @@
         </li>
     </ul>
 
+    <span class="navbar-social hide-on-mobile">
+      {% for sm in navbar.social-media %}
+        <a href="{{ sm.url }}"><i class="{{ sm.type }}"></i></a>
+      {% endfor %}
+    </span>
+
     <a id="menu-mobile-button" class="hide-on-desktop hide-on-tablet"><i class="fa fa-bars" aria-hidden="true"></i></a>
 
     <div id="navbar">

_includes/scripts.html

@@ -1,11 +1,9 @@
-<script
-  src="https://code.jquery.com/jquery-3.3.1.min.js"
-  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
-  crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
 <script src="{{ '/js/particles.min.js' | prepend: site.baseurl | prepend: site.url }}"></script>
 <script src="{{ '/js/masonry.pkgd.min.js' | prepend: site.baseurl | prepend: site.url }}"></script>
 <script src="{{ '/js/main.js' | prepend: site.baseurl | prepend: site.url }}"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/7.0.3/jquery.mmenu.all.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/7.0.3/addons/fixedelements/jquery.mmenu.fixedelements.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/7.2.2/addons/iconbar/jquery.mmenu.iconbar.css"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

_layouts/default.html

@@ -13,7 +13,6 @@
             <section class="footer">
                 <div class="container text-center">
                     <h3>Made with <span style="color: #e25555;">&hearts;</span> by the Plattshacks team</h3>
-                    <p> Contact us: <a href="mailto:plattshack@gmail.com?Subject=Hello%20Plattshacks" target="_top">plattshack@gmail.com</a></p>
                 </div>
             </section>
         </div>

css/main.css

@@ -75,6 +75,22 @@ section {
     display: inline-block;
 }
 
+.navbar .navbar-social {
+  font-size: 25px;
+}
+
+.navbar .navbar-social a {
+  padding: 0 10px;
+}
+
+.navbar .navbar-social .fa-facebook-square {
+  color: #3b5998;
+}
+
+.navbar .navbar-social .fa-envelope {
+  color: rgba(0,0,0,.9);
+}
+
 /*
  * Trust Badge
  */
@@ -179,23 +195,6 @@ section {
     color: #d44b7d;
 }
 
-.hero-social-media {
-    text-align: right;
-    padding: 0 20px 30px 20px;
-    font-size: 20px;
-    color: #d44b7d;
-    z-index: 100;
-}
-
-.social-media-badges a {
-    color: #333;
-    font-size: 30px;
-}
-
-.social-media-badges a:hover {
-    opacity: 0.8;
-}
-
 .hero .buttons {
     margin: 40px 0;
     z-index: 12;

js/main.js

@@ -26,6 +26,13 @@
 
     function mmenu() {
       $("#navbar").mmenu({
+        "iconbar": {
+          "add": true,
+          "top": [
+            '<a href="https://www.facebook.com/PlattsHack/"><i class="fab fa-facebook-square"></i></a>',
+            '<a href="mailto:plattshack@gmail.com?Subject=Hello%20Plattshacks"><i class="far fa-envelope"></i></a>'
+          ]
+        },
       	extensions: ["fx-menu-slide", "pagedim-black", "theme-dark", "position-right"]
       });