LevityTech · MicDMar · Nov 25, 2020 · Nov 24, 2020
diff --git a/_includes/head.html b/_includes/head.html
@@ -11,6 +11,7 @@
 
     <title>Levity</title>
     <meta charset="utf-8" />
+    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}">
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

diff --git a/_includes/header.html b/_includes/header.html
@@ -3,6 +3,7 @@
     <a href = "javascript:void(0)" id = "toggle-btn" onclick="toggleHeader()">
         <i class="fa fa-bars" style="line-height: 40px;"></i>
     </a>
+    <script src="https://js.stripe.com/v3/"></script>
     <header>
         <a href="index.html">
         <span class="image avatar"><img src="images/logo.png" alt="" /></span>

diff --git a/_posts/2020-07-16-bvu+ilc.md b/_posts/2020-07-16-bvu+ilc.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-tag: blog
+filter: blog
 featured: "False"
 title: Corridor joins forces with Buena Vista University in winning Google grant
 img: ilc+bvu.jpg

diff --git a/_posts/2020-07-16-mll-app.md b/_posts/2020-07-16-mll-app.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 featured: "False"
-tag: works
+filter: works
 title: Levity team creates app for Match. Learn. Launch.
 img: match_learn_launch.jpg
 excerpt: BVU computer science seniors have created a mobile app to match existing business owners with up-and-coming entrepreneurs, part of a joint effort with the Iowa Great Lakes Corridor Development Corporation.

diff --git a/_posts/2020-07-21-understanding-fear.md b/_posts/2020-07-21-understanding-fear.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-tag: blog
+filter: blog
 featured: "True"
 title: Managing COVID Fear and Panic in the Workplace
 img: covidfear.png

diff --git a/_sass/main.scss b/_sass/main.scss
@@ -2059,41 +2059,26 @@
   background-color: #f1f1f1;
 }
 
-.list_posts{
-
-}
-
-.image_box{
-	width: 150px;
-	border: 5px dashed #r7a239;
-}
-
 .links{
 	color: #5ad3fe;
 	padding-right: 0px;
 	float: right;
 }
 
+@media only screen and (max-width: 950px){		
+	.links{
+	color: #5ad3fe;
+	padding-right: 0px;
+	float: inherit;	
+	}
+}
+
 .lm-images{
 	max-width: 50%;
 	height: auto;
 	padding: 10px;
 }
 
-.image_box{
-	float: left;
-}
-.filterDiv{
-	float: right;
-	background-color: #2196F3;
-	color: #fffff;
-	width: 100px;
-	line-height: 100px;
-	text-align: center;
-	margin: 2px;
-	display: none;
-}
-
 .show{
 	display: block;
 }
@@ -2120,6 +2105,72 @@
 	padding: 10px;
 }
 
-.myBtnContainer{
-
-}
+/* All Post Cards */
+.cards {
+	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+	transition: 0.5s;
+	border-radius: 10px;
+	border-radius: 10px 10px 10px 10px;
+	width: 130%;
+  }
+
+  .cards:hover {
+	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+  }
+
+  .container {
+	padding: 2px 16px;
+  }
+
+	.image_box{
+	display: inline-flex;
+	padding: 10px;
+	}
+
+	.title{
+	display: flex;
+	justify-content: center;
+	font-size: 25px;
+	}
+
+	.img_all{
+	width: 8%;
+	min-width: 150px;
+	}
+
+@media only screen and (max-width: 950px){	
+	.cards {
+		box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+		transition: 0.5s;
+		border-radius: 10px 10px 10px 10px;
+		width: auto;
+		}
+
+		.cards:hover {
+		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+		}
+
+		.container {
+		padding: 2px 16px;
+		}
+
+		.image_box{
+		display: inline-flex;
+		padding: 10px;
+		}
+
+		.title{
+		display: flex;
+		justify-content: center;
+		text-align: center;
+		font-size: 20px;
+		}
+
+		.img_all{
+		display: none;
+		}
+
+		#titleBar .toggle{
+		display: none;
+		}
+	}
diff --git a/allPosts.html b/allPosts.html
@@ -6,6 +6,15 @@
     Temporary
 -->
 
+{% for post in site.posts %}
+ <div class='Modal is-hidden is-visuallyHidden' id='{{ post.title }}'>
+     <div class='Modal-content'>
+         <span id="closeModal" class="Close" onclick="closeModal('{{ post.title }}')">&times;</span>
+        {{ post }}
+    </div>
+ </div>
+ {% endfor %}
+
 <body>
     <div class="loader">
         <img src="/images/loading.gif" alt="Loading...">
@@ -32,15 +41,13 @@
                 <h3 style="padding-left: 20px">All Posts</h3>
                 <ul style="list-style-type: none">
                     {% for post in site.posts %}
-                    <li>
-                        <div class="card {{post.tag}}" style="padding: 10px 10px 10px 10px; width: 130%">
-                        <a href="{{ post.url }}" style="display: flex; justify-content: center; font_size: 25px;">{{ post.title }}</a>
-                                <div class="imgae_box" style="display: inline-flex; padding: 10px">
-                                    <img src="{{base.url}}/images/posts/{{post.img}}" style="width:8%; min-width: 150px">
+                        <div class="cards {{ post.filter }}">
+                            <a href="#{{ post.title }}" class="title" onclick="openModal('{{ post.title }}')">{{post.title}}</a>
+                                <div class="image_box">
+                                    <img src="{{base.url}}/images/posts/{{post.img}}" class="img_all">
                         <p style="margin-bottom: auto; padding: inherit">{{ post.excerpt }}</p>
                                 </div>
                         </div>
-                    </li>
                     {% endfor %}
                 </ul>
             </div>
@@ -49,42 +56,17 @@ <h3 style="padding-left: 20px">All Posts</h3>
 
 <script>
 
-filterSelection("all")
-
-function filterSelection(c){
-    var i, x; 
-    x = document.getElementsByClassName("card");
-    if (c == "all") c = "";
-    for(i = 0; i < x.length; i++){
-        remove(x[i], "show");
-        if (x[i].className.indexOf(c) > -1) add(x[i], "show")
-    }
-}
-
-function add(element, name){
-    var i, arr2;
-    var arr;
-    arr = element.className.split(" ");
-    arr2 = name.split(" ");
-    for (i = 0; i < arr2.length; i++){
-        if (arr.indexOf(arr[2]) == -1) {
-            element.className += " " + arr[i];
+function filterSelection(sort_by){
+    var i, x;
+    x = document.getElementsByClassName('cards');
+    for( i=0; i < x.length; i++){
+        if(x[i].className == "cards " + sort_by || sort_by == "all"){
+            x[i].style.display = "block";
         }
+        else {x[i].style.display = "none";}
     }
 }
 
-function remove(element, name){
-    var i, arr1, arr2;
-    arr1 = element.className.split(" ");
-    arr2 = name.split(" ");
-    for (i = 0; i<arr2.length; i++){
-        while (arr1.indexOf(arr2[i]) > -1){
-        arr1.splice(arr1.indexOf(arr2[i]), 1);
-        }
-    }
-    element.className = arr1.join();
-}
-
 var btnContainer = document.getElementById("myBtnContainer");
 var btns = btnContainer.getElementsByClassName("btn");
 for(var i = 0; i < btns.length; i++){
@@ -95,4 +77,32 @@ <h3 style="padding-left: 20px">All Posts</h3>
     });
 }
 
+function closeModal(title){
+    var modal = document.getElementById(title);
+    modal.className = "Modal is-hidden is-visuallyHidden";
+    document.getElementById("main").classList.remove("is-blurred");
+    //document.getElementById("header").classList.add("is-blurred");
+}
+
+function openModal(title) {                                                     
+    var modal = document.getElementById(title);                                 
+    var container = document.getElementById("main");                            
+    modal.className = "Modal is-visuallyHidden";                                
+    setTimeout(function() {                                                     
+        document.getElementById("main").classList.add("is-blurred");            
+        //document.getElementById("header").classList.add("is-blurred");          
+        modal.className = "Modal";                                              
+    }, 50);                                                                     
+}                                                                               
+
+window.onclick = function(event) {                                              
+    console.log(event.target.className);                                        
+    console.log(event.target.classList);                                        
+    if (event.target.className == "Modal") {                                    
+        event.target.className = "Modal is-hidden is-visuallyHidden";           
+        document.getElementById("main").classList.remove("is-blurred");         
+        //document.getElementById("header").classList.remove("is-blurred");       
+    }                                                                           
+}                                                                               
+
 </script>
diff --git a/assets/css/main.css b/assets/css/main.css
diff --git a/assets/css/main.css.map b/assets/css/main.css.map
diff --git a/checkout.html b/checkout.html
@@ -0,0 +1,10 @@
+---
+layout: default
+---
+  <head>
+    <title>Buy cool new product</title>
+  </head>
+  <body>
+    <button id="checkout-button">Checkout</button>
+  </body>
+