Skip to content

Kevin / CSS Optimizations Workshop

Go to a project
Commit 64b2f377 by Kevin Van Ransbeeck
Options

Social icons footer replaced by png's (regular and hover status)

1 parent 19edf45f
Inline Side-by-side
Showing 18 changed files with 29 additions and 110 deletions
assets/svg-defs.svg deleted 100644 → 0
<svg style="display: none;"><symbol viewBox="0 0 50 50" id="shape-facebook-up"><title>facebook-up</title> <path d="M25,3C12.9,3,3,5.3,3,25s9.9,22,22,22s22-2.3,22-22S37.1,3,25,3z M29,18.1c0,0-1.5,0-1.9,0c-0.3,0-1.1-0.3-1.1,0.5V21h3
l-0.1,3H26c0,5,0,11,0,11h-4c0,0,0-6,0-11h-2v-3h2v-2.6c0-1.7,0.8-4.4,4-4.4h3V18.1z"/> </symbol><symbol viewBox="0 0 50 50" id="shape-instagram-up"><title>instagram-up</title> <g> <path d="M28.5,22h3c0.3,0,0.5-0.2,0.5-0.5v-3c0-0.3-0.2-0.5-0.5-0.5h-3c-0.3,0-0.5,0.2-0.5,0.5v3C28,21.8,28.2,22,28.5,22z"/> <path d="M32,31.6V24h-0.9c0.1,1,0.2,0.9,0.2,1.3c0,3-2.4,5.3-5.4,5.3s-5.4-2.4-5.4-5.4c0-0.5,0.1-0.3,0.2-1.3H19v7.6
c0,0.3,0.1,0.4,0.4,0.4h12.9C32.5,32,32,31.8,32,31.6z"/> <ellipse cx="25.8" cy="25.2" rx="3.4" ry="3.4"/> <path d="M25,3C12.9,3,3,5.3,3,25s9.9,22,22,22s22-2.3,22-22S37.1,3,25,3z M34,32c0,1.2-0.2,2-1.4,2H19c-1.2,0-3-0.8-3-2V18.4
c0-1.2,1.8-2.4,3-2.4h13.6c1.2,0,1.4,1.2,1.4,2.4V32z"/> </g> </symbol><symbol viewBox="0 0 50 50" id="shape-linkedin-up"><title>linkedin-up</title> <g> <path d="M25,3C12.9,3,3,5.3,3,25s9.9,22,22,22s22-2.3,22-22S37.1,3,25,3z M20,33h-4V21h4V33z M18,19c-2,0-2-0.7-2-1.9
c0-1.1,0-2.1,2-2.1s2,0.8,2,2S20,19,18,19z M34,33h-4v-6c0-1.6-0.3-3.2-1.8-3.2c-1.1,0-1.8,0.8-2.1,1.5c-0.1,0.3-0.1,0.6-0.1,1V33
h-4c0,0,0.1-10.9,0-12h4v1.6c0.5-0.8,1.5-2,3.6-2c2.7,0,4.4,1.7,4.4,5.4V33z"/> <path d="M26,22.6L26,22.6L26,22.6L26,22.6z"/> </g> </symbol><symbol viewBox="0 0 50 50" id="shape-pinterest-up"><title>pinterest-up</title> <path d="M25,3C12.9,3,3,5.3,3,25s9.9,22,22,22s22-2.3,22-22S37.1,3,25,3z M26.5,30.2c-1.3,0-2.4-0.6-2.8-1.4c0,0-0.7,2.3-0.9,2.8
c-0.5,1.9-2,3.7-2.1,3.9c-0.1,0.1-0.3,0.1-0.3-0.1c0-0.2-0.6-2.7-0.1-4.6c0.2-1,1.5-6.3,1.5-6.3s-0.5-0.8-0.5-1.9
c0-1.7,1.1-3.3,2.4-3.3c1.1,0,2,0.9,2,1.9c0,1.1-0.9,2.9-1.2,4.4c-0.3,1.3,0.6,2.3,1.9,2.3c2.2,0,3.7-2.9,3.7-6.3
c0-2.6-1.7-4.2-4.9-4.2c-3.6,0-5.5,2.3-5.5,5.3c0,1,0.2,1.7,0.7,2.3c0.2,0.3,0.3,0.4,0.2,0.7c-0.1,0.2-0.4,0.7-0.5,0.9
C20,27,19.7,27.1,19.4,27c-1.6-0.7-2.4-2.5-2.4-4.5c0-3.3,2.7-7.5,8.3-7.5c4.5,0,7.8,3.5,7.8,7C33.1,26.5,31,30.2,26.5,30.2z"/> </symbol><symbol viewBox="0 0 50 50" id="shape-twitter-up"><title>twitter-up</title> <path d="M25,3C12.8,3,3,5.3,3,25s9.8,22,22,22s22-2.3,22-22S37.2,3,25,3z M32.9,20.9c0,0.2,0,0.4,0,0.5c0,5.6-4.2,12-12,12
c-2.4,0-4.6-0.7-6.4-1.9c0.3,0,0.7,0.1,1,0.1c2,0,3.8-0.7,5.2-1.8c-1.8,0-3.4-1.2-3.9-2.9c0.3,0,0.5,0.1,0.8,0.1
c0.4,0,0.8-0.1,1.1-0.1c-1.9-0.4-3.4-2.1-3.4-4.1c0,0,0,0,0-0.1c0.6,0.3,1.2,0.5,1.9,0.5c-1.1-0.8-1.9-2-1.9-3.5
c0-0.8,0.2-1.5,0.6-2.1c2.1,2.5,5.2,4.2,8.7,4.4c-0.1-0.3-0.1-0.6-0.1-1c0-2.3,1.9-4.2,4.2-4.2c1.2,0,2.3,0.5,3.1,1.3
c1-0.2,1.9-0.5,2.7-1c-0.3,1-1,1.8-1.8,2.3c0.9-0.1,1.7-0.3,2.4-0.7C34.4,19.5,33.7,20.3,32.9,20.9z"/> </symbol></svg>
\ No newline at end of file
index.php
......@@ -89,31 +89,11 @@
<footer>
<div class="row">
<div class="large-4 medium-4 columns social">
<a href="https://www.facebook.com/KevinVR" target="_blank">
<svg class="facebook-icon">
<use xlink:href="#shape-facebook-up" />
</svg>
</a>
<a href="https://twitter.com/kevinvransbeeck" target="_blank">
<svg class="twitter-icon">
<use xlink:href="#shape-twitter-up" />
</svg>
</a>
<a href="https://www.linkedin.com/profile/view?id=140537646" target="_blank">
<svg class="linkedin-icon">
<use xlink:href="#shape-linkedin-up" />
</svg>
</a>
<a href="http://instagram.com/kevinvanransbeeck" target="_blank">
<svg class="instagram-icon">
<use xlink:href="#shape-instagram-up" />
</svg>
</a>
<a href="http://www.pinterest.com/KevinVRansbeeck/" target="_blank">
<svg class="pinterest-icon">
<use xlink:href="#shape-pinterest-up" />
</svg>
</a>
<a href="https://www.facebook.com/KevinVR" target="_blank" class="facebook-icon"></a>
<a href="https://twitter.com/kevinvransbeeck" target="_blank" class="twitter-icon"></a>
<a href="https://www.linkedin.com/profile/view?id=140537646" target="_blank" class="linkedin-icon"></a>
<a href="http://instagram.com/kevinvanransbeeck" target="_blank" class="instagram-icon"></a>
<a href="http://www.pinterest.com/KevinVRansbeeck/" target="_blank" class="pinterest-icon"></a>
</div>
</div>
</footer>
......
scss/_social.scss
......@@ -13,48 +13,57 @@
}
.facebook-icon {
background: url('../assets/facebook-up.png') no-repeat;
display: inline-block;
height: 50px;
width: 50px;
$color: #3C5A98;
fill: $color;
&:hover {
fill: darken($color, 10%);
background-image: url('../assets/facebook-down.png');
}
}
.twitter-icon {
background: url('../assets/twitter-up.png') no-repeat;
display: inline-block;
height: 50px;
width: 50px;
$color: #28AAE2;
fill: $color;
&:hover {
fill: darken($color, 10%);
background-image: url('../assets/twitter-down.png');
}
}
.linkedin-icon {
background: url('../assets/linkedin-up.png') no-repeat;
display: inline-block;
height: 50px;
width: 50px;
$color: #047CB7;
fill: $color;
&:hover {
fill: darken($color, 10%);
background-image: url('../assets/linkedin-down.png');
}
}
.instagram-icon {
background: url('../assets/instagram-up.png') no-repeat;
display: inline-block;
height: 50px;
width: 50px;
$color: #43739B;
fill: $color;
&:hover {
fill: darken($color, 10%);
background-image: url('../assets/instagram-down.png');
}
}
.pinterest-icon {
background: url('../assets/pinterest-up.png') no-repeat;
display: inline-block;
height: 50px;
width: 50px;
$color: #CB2128;
fill: $color;
&:hover {
fill: darken($color, 10%);
background-image: url('../assets/pinterest-down.png');
}
}
......
svg/facebook-up.svg deleted 100755 → 0
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path d="M25,3C12.9,3,3,5.3,3,25s9.9,22,22,22s22-2.3,22-22S37.1,3,25,3z M29,18.1c0,0-1.5,0-1.9,0c-0.3,0-1.1-0.3-1.1,0.5V21h3
l-0.1,3H26c0,5,0,11,0,11h-4c0,0,0-6,0-11h-2v-3h2v-2.6c0-1.7,0.8-4.4,4-4.4h3V18.1z"/>
</svg>
svg/instagram-up.svg deleted 100755 → 0
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<g>
<path d="M28.5,22h3c0.3,0,0.5-0.2,0.5-0.5v-3c0-0.3-0.2-0.5-0.5-0.5h-3c-0.3,0-0.5,0.2-0.5,0.5v3C28,21.8,28.2,22,28.5,22z"/>
<path d="M32,31.6V24h-0.9c0.1,1,0.2,0.9,0.2,1.3c0,3-2.4,5.3-5.4,5.3s-5.4-2.4-5.4-5.4c0-0.5,0.1-0.3,0.2-1.3H19v7.6
c0,0.3,0.1,0.4,0.4,0.4h12.9C32.5,32,32,31.8,32,31.6z"/>
<ellipse cx="25.8" cy="25.2" rx="3.4" ry="3.4"/>
<path d="M25,3C12.9,3,3,5.3,3,25s9.9,22,22,22s22-2.3,22-22S37.1,3,25,3z M34,32c0,1.2-0.2,2-1.4,2H19c-1.2,0-3-0.8-3-2V18.4
c0-1.2,1.8-2.4,3-2.4h13.6c1.2,0,1.4,1.2,1.4,2.4V32z"/>
</g>
</svg>
svg/linkedin-up.svg deleted 100755 → 0
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<g>
<path d="M25,3C12.9,3,3,5.3,3,25s9.9,22,22,22s22-2.3,22-22S37.1,3,25,3z M20,33h-4V21h4V33z M18,19c-2,0-2-0.7-2-1.9
c0-1.1,0-2.1,2-2.1s2,0.8,2,2S20,19,18,19z M34,33h-4v-6c0-1.6-0.3-3.2-1.8-3.2c-1.1,0-1.8,0.8-2.1,1.5c-0.1,0.3-0.1,0.6-0.1,1V33
h-4c0,0,0.1-10.9,0-12h4v1.6c0.5-0.8,1.5-2,3.6-2c2.7,0,4.4,1.7,4.4,5.4V33z"/>
<path d="M26,22.6L26,22.6L26,22.6L26,22.6z"/>
</g>
</svg>
svg/pinterest-up.svg deleted 100755 → 0
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path d="M25,3C12.9,3,3,5.3,3,25s9.9,22,22,22s22-2.3,22-22S37.1,3,25,3z M26.5,30.2c-1.3,0-2.4-0.6-2.8-1.4c0,0-0.7,2.3-0.9,2.8
c-0.5,1.9-2,3.7-2.1,3.9c-0.1,0.1-0.3,0.1-0.3-0.1c0-0.2-0.6-2.7-0.1-4.6c0.2-1,1.5-6.3,1.5-6.3s-0.5-0.8-0.5-1.9
c0-1.7,1.1-3.3,2.4-3.3c1.1,0,2,0.9,2,1.9c0,1.1-0.9,2.9-1.2,4.4c-0.3,1.3,0.6,2.3,1.9,2.3c2.2,0,3.7-2.9,3.7-6.3
c0-2.6-1.7-4.2-4.9-4.2c-3.6,0-5.5,2.3-5.5,5.3c0,1,0.2,1.7,0.7,2.3c0.2,0.3,0.3,0.4,0.2,0.7c-0.1,0.2-0.4,0.7-0.5,0.9
C20,27,19.7,27.1,19.4,27c-1.6-0.7-2.4-2.5-2.4-4.5c0-3.3,2.7-7.5,8.3-7.5c4.5,0,7.8,3.5,7.8,7C33.1,26.5,31,30.2,26.5,30.2z"/>
</svg>
svg/twitter-up.svg deleted 100755 → 0
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path d="M25,3C12.8,3,3,5.3,3,25s9.8,22,22,22s22-2.3,22-22S37.2,3,25,3z M32.9,20.9c0,0.2,0,0.4,0,0.5c0,5.6-4.2,12-12,12
c-2.4,0-4.6-0.7-6.4-1.9c0.3,0,0.7,0.1,1,0.1c2,0,3.8-0.7,5.2-1.8c-1.8,0-3.4-1.2-3.9-2.9c0.3,0,0.5,0.1,0.8,0.1
c0.4,0,0.8-0.1,1.1-0.1c-1.9-0.4-3.4-2.1-3.4-4.1c0,0,0,0,0-0.1c0.6,0.3,1.2,0.5,1.9,0.5c-1.1-0.8-1.9-2-1.9-3.5
c0-0.8,0.2-1.5,0.6-2.1c2.1,2.5,5.2,4.2,8.7,4.4c-0.1-0.3-0.1-0.6-0.1-1c0-2.3,1.9-4.2,4.2-4.2c1.2,0,2.3,0.5,3.1,1.3
c1-0.2,1.9-0.5,2.7-1c-0.3,1-1,1.8-1.8,2.3c0.9-0.1,1.7-0.3,2.4-0.7C34.4,19.5,33.7,20.3,32.9,20.9z"/>
</svg>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!