Skip to content

Instantly share code, notes, and snippets.

View levinmejia's full-sized avatar

Levin Mejia levinmejia

View GitHub Profile
{% assign linklist = linklists["brands"] %}
{% assign collections_per_row = settings.frontpage_collections_per_row %}
<div class="twelve columns collection-list">
<h1 class="page-title">{{page.title | escape}}</h1>
{{ page.content }}
{% include 'collection-within-collection' %}
</div>
{% unless collection.handle != 'bags' or collection.handle != 'blazers jackets' %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Quickly Implement and Easily Animate SVG Icons On Your Site</title>
<link rel="stylesheet" href="css/style.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/vivus.js"></script>
<script>
new Vivus('my-svg', {type: 'delayed', duration: 100, file: 'images/facebook.svg'});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Quickly Implement and Easily Animate SVG Icons On Your Site</title>
<link rel="stylesheet" href="css/style.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
/*Facebook Filled icon by Icons8 */
.icons8-Facebook-Filled { /* Customizes Facebook Filled icon */
fill:false;
width: 50px;
height: 50px;
}
.icon { /* Customizes all icons at once */
display: inline-block;
}
<!-- Facebook Filled icon by Icons8 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" width="50" height="50" viewBox="0 0 50 50" style="null" class="icon icons8-Facebook-Filled" > <path d="M40,0H10C4.486,0,0,4.486,0,10v30c0,5.514,4.486,10,10,10h30c5.514,0,10-4.486,10-10V10C50,4.486,45.514,0,40,0z M39,17h-3 c-2.145,0-3,0.504-3,2v3h6l-1,6h-5v20h-7V28h-3v-6h3v-3c0-4.677,1.581-8,7-8c2.902,0,6,1,6,1V17z"></path></svg>
<code>
clicking on "ul.feature li, ul.feature li img" removes class "open" on "ul.feature li"
clicking on "ul.feature li" adds class "open" on "target"
</code>
<code>
clicking on "ul.feature li" adds class "open" on "target"
</code>
ul.feature .open > * {
pointer-events: auto;
-webkit-transform: translate(-25%, -25%);
transform: translate(-25%, -25%);
}
ul.feature .open img {
z-index: 3;
}
ul.feature .open p {
z-index: 2;