combined FAQ + SSP to About menu, changed FA source, transitioning fo…

…nts to rem
MRGS · Mar 29, 2019 · de3d194 · de3d194
1 parent bbac16a
commit de3d194
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 14 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -10,7 +10,7 @@
   <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 
   <!-- Custom Fonts -->
-  <link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
   <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
   <link href="https://fonts.googleapis.com/css?family=Vesper+Libre:700,900" rel="stylesheet" type="text/css">

diff --git a/_includes/intro.md b/_includes/intro.md
@@ -23,8 +23,8 @@ A series of welcoming events connecting games with social justice struggles.
    </div>
    <div class="row">
 <div class="col-lg-6 col-lg-offset-3 text-center">
-<a class="btn btn-circle" href="https://{{ site.fb }}" target="_blank"><i class="fa fa-facebook animated"></i></a> 
-<a class="btn btn-circle" href="https://{{ site.twitter }}" target="_blank"><i class="fa fa-twitter animated" style="margin-left: -4px; margin-top: -7px;"></i></a> 
+<a class="btn btn-circle" href="https://{{ site.fb }}" target="_blank"><i class="fab fa-facebook-f animated"></i></a> 
+<a class="btn btn-circle" href="https://{{ site.twitter }}" target="_blank"><i class="fab fa-twitter animated" style="margin-left: -4px; margin-top: -7px;"></i></a> 
 <a class="btn btn-circle" href="mailto:{{ site.email }}"><i class="fa fa-envelope animated" style="margin-left: -2px; margin-top: -1px;"></i></a> 
 <a class="btn btn-circle" href="https://{{ site.itch }}" target="_blank"><i class="fa fa-gamepad animated" style="margin-left: -4px; margin-top: -7px;"></i></a> 
   		</div>

diff --git a/_includes/nav.html b/_includes/nav.html
@@ -12,18 +12,19 @@
       <ul class="nav navbar-nav">
         <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
         <li class="hidden"> <a href="/#page-top"></a></li>
-        <li> <a class="page-scroll" href="/#about"><span class="o-light"></span>À propos<br>
-          About</a></li>
+	<li> <a class="page-scroll" href="/#about"><span class="o-light"></span>À propos <i class="fas fa-caret-down"></i><br>About</a>
+		<ul data-toggle=="collapse">
+			<li> <a class="page-scroll" href="/faq"><span class="o-light"></span>FAQ</a> </li>
+			<li> <a class="page-scroll" href="/espacesecuritaire">Espace sécuritaire / Safer Space Policy</a></li>
+		</ul>
+	</li>
         <li> <a class="page-scroll" href="/#schedule"><span class="o-light"></span>Évènements<br>
           Events</a></li>
         <li> <a class="page-scroll" href="/games">Les jeux<br>Games</a></li>
         <li> <a class="page-scroll" href="/make">Faites!<br>Make!</a></li>
-        <li> <a class="page-scroll" href="/faq"><span class="o-light"></span>FAQ</a> </li>
-	<li> <a class="page-scroll" href="/espacesecuritaire">Espace sécuritaire<br>Safer Space</a></li>
-        <li> <a class="page-scroll" href="/#contact">Contact</a></li>
+	<li> <a class="page-scroll" href="/#contact">Nous Joindre<br>Contact</a></li>
       </ul>
     </div>
     <!-- /.navbar-collapse -->
   </div>
-  <!-- /.container -->
 </nav>
diff --git a/css/style.css b/css/style.css
@@ -55,7 +55,7 @@ h6 {
 .navbar-custom .navbar-toggle {
   color: #fff;
   background-color: rgba(255, 255, 255, .2);
-  font-size: 0.8rem;
+  font-size: 1.4rem;
 }
 
 .navbar-custom .nav li a:active,
@@ -78,8 +78,7 @@ h6 {
   outline: 0;
 }
 
-
-.navbar-custom .nav li a {
+.nanavbar-custom .nav li a {
   -webkit-transition: background .2s ease-in-out;
   -moz-transition: background .2s ease-in-out;
   transition: background .2s ease-in-out;
@@ -97,6 +96,22 @@ h6 {
   color: #fff;
 }
 
+/* submenu */
+.nav ul {
+	background-color: rgba(255, 210, 66, 0.85);
+	width: 100rem;
+	position: absolute;
+	left: -999rem;
+	top: 1rem;
+	list-style: none;
+	line-height: 3.42rem;
+	border-bottom-left-radius: 1rem;
+}
+.nav li:hover ul {
+	left: 0;
+	top: auto;
+}
+
 @media (min-width:768px) {
   .navbar-custom {
     padding: 1.1rem 0;
@@ -145,7 +160,7 @@ h6 {
   }
   /** Website Title Size **/
   .intro .intro-body .brand-heading {
-    font-size: 60px;
+    font-size: 3.75rem;
     line-height: 75px;
   }
   .intro .intro-body .intro-text {
@@ -461,7 +476,7 @@ p a:focus, p a:hover {
 }
 #location iframe {
   float: left;
-  margin-bottom: 60px;
+  margin-bottom: 3.75rem;
   border: medium solid #000000;
   height: 500px;
 }