Skip to content

Kevin / CSS Optimizations Workshop

Go to a project
Commit 25c52607 by Kevin Van Ransbeeck
Options

PNG image for header. SVG removed

1 parent 0d1bdf3c
Inline Side-by-side
Showing 5 changed files with 5 additions and 63 deletions
assets/svg-defs.svg
......@@ -21,20 +21,7 @@
M86,205.7c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8c0-0.5,0.4-0.8,0.8-0.8C85.6,204.9,86,205.3,86,205.7"/> </g> </symbol><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 134.9 27" id="shape-kevinletterlogo"><title>kevinletterlogo</title> <g> <path d="M3.7,13.8L9.3,11v0.8l-4.7,2.4v0l4.7,2.4v0.8l-5.6-2.9V13.8z"/> <path d="M10.1,17.8l3.3-8.7h0.8l-3.4,8.7H10.1z"/> <path d="M15.1,9.3h1v3.9h0c0.2-0.3,0.4-0.6,0.6-0.9l2.5-3h1.3l-2.9,3.4l3.2,4.7h-1.2l-2.7-4l-0.8,0.9v3.1h-1V9.3z"/> <path d="M25.8,13.6h-3.1v2.9h3.5v0.9h-4.5V9.3H26v0.9h-3.3v2.6h3.1V13.6z"/> <path d="M29.4,17.4l-2.6-8.1h1.1l1.3,4c0.3,1.1,0.6,2.1,0.9,3h0c0.2-0.9,0.6-2,0.9-3l1.4-4h1.1l-2.9,8.1H29.4z"/> <path d="M35.4,9.3v8.1h-1V9.3H35.4z"/> <path d="M37.2,17.4V9.3h1.1l2.6,4.1c0.6,0.9,1.1,1.8,1.5,2.6l0,0c-0.1-1.1-0.1-2.1-0.1-3.3V9.3h1v8.1h-1.1l-2.6-4.1
c-0.6-0.9-1.1-1.8-1.5-2.7l0,0c0.1,1,0.1,2,0.1,3.3v3.5H37.2z"/> <path fill="#729AD0" d="M46.8,17.4l-2.6-8.1h1.1l1.3,4c0.3,1.1,0.6,2.1,0.9,3h0c0.2-0.9,0.6-2,0.9-3l1.4-4h1.1L48,17.4H46.8z"/> <path fill="#729AD0" d="M52.4,14.8l-0.8,2.5h-1.1l2.7-8.1h1.3l2.8,8.1h-1.1l-0.9-2.5H52.4z M55,14l-0.8-2.3c-0.2-0.5-0.3-1-0.4-1.5
h0c-0.1,0.5-0.3,1-0.4,1.5L52.6,14H55z"/> <path fill="#729AD0" d="M58.4,17.4V9.3h1.1l2.6,4.1c0.6,0.9,1.1,1.8,1.5,2.6l0,0c-0.1-1.1-0.1-2.1-0.1-3.3V9.3h1v8.1h-1.1l-2.6-4.1
c-0.6-0.9-1.1-1.8-1.5-2.7l0,0c0.1,1,0.1,2,0.1,3.3v3.5H58.4z"/> <path d="M66.3,9.4c0.5-0.1,1.3-0.2,2-0.2c1.1,0,1.8,0.2,2.3,0.7c0.4,0.4,0.6,0.9,0.6,1.5c0,1.1-0.7,1.8-1.5,2.1v0
c0.6,0.2,1,0.8,1.2,1.6c0.3,1.1,0.5,1.9,0.6,2.2h-1.1c-0.1-0.2-0.3-0.9-0.5-1.9c-0.2-1.1-0.7-1.5-1.6-1.6h-1v3.5h-1V9.4z
M67.4,13.1h1.1c1.1,0,1.8-0.6,1.8-1.5c0-1-0.8-1.5-1.9-1.5c-0.5,0-0.9,0-1,0.1V13.1z"/> <path d="M74.1,14.8l-0.8,2.5h-1.1L75,9.3h1.3l2.8,8.1h-1.1L77,14.8H74.1z M76.8,14L76,11.7c-0.2-0.5-0.3-1-0.4-1.5h0
c-0.1,0.5-0.3,1-0.4,1.5L74.4,14H76.8z"/> <path d="M80.2,17.4V9.3h1.1l2.6,4.1c0.6,0.9,1.1,1.8,1.5,2.6l0,0c-0.1-1.1-0.1-2.1-0.1-3.3V9.3h1v8.1h-1.1l-2.6-4.1
c-0.6-0.9-1.1-1.8-1.5-2.7l0,0c0.1,1,0.1,2,0.1,3.3v3.5H80.2z"/> <path d="M87.9,16.1c0.5,0.3,1.2,0.5,1.9,0.5c1.1,0,1.7-0.6,1.7-1.4c0-0.8-0.4-1.2-1.5-1.6c-1.3-0.5-2.1-1.2-2.1-2.3
c0-1.3,1-2.2,2.6-2.2c0.8,0,1.4,0.2,1.8,0.4L92,10.4c-0.3-0.1-0.8-0.4-1.5-0.4c-1.1,0-1.5,0.7-1.5,1.2c0,0.8,0.5,1.1,1.6,1.6
c1.4,0.5,2.1,1.2,2.1,2.4c0,1.2-0.9,2.3-2.8,2.3c-0.8,0-1.6-0.2-2.1-0.5L87.9,16.1z"/> <path d="M94,9.4c0.5-0.1,1.2-0.2,1.9-0.2c1,0,1.7,0.2,2.2,0.6c0.4,0.3,0.7,0.8,0.7,1.4c0,0.8-0.5,1.5-1.4,1.8v0
c0.8,0.2,1.7,0.8,1.7,2c0,0.7-0.3,1.2-0.7,1.6c-0.6,0.5-1.5,0.8-2.8,0.8c-0.7,0-1.3,0-1.6-0.1V9.4z M95,12.7H96
c1.1,0,1.8-0.6,1.8-1.4c0-0.9-0.7-1.3-1.8-1.3c-0.5,0-0.8,0-0.9,0.1V12.7z M95,16.6c0.2,0,0.5,0,0.9,0c1.1,0,2.1-0.4,2.1-1.6
c0-1.1-0.9-1.6-2.1-1.6H95V16.6z"/> <path d="M104.7,13.6h-3.1v2.9h3.5v0.9h-4.5V9.3h4.4v0.9h-3.3v2.6h3.1V13.6z"/> <path d="M110.6,13.6h-3.1v2.9h3.5v0.9h-4.5V9.3h4.4v0.9h-3.3v2.6h3.1V13.6z"/> <path d="M118,17.1c-0.4,0.2-1.2,0.4-2.1,0.4c-2.3,0-4-1.4-4-4.1c0-2.5,1.7-4.2,4.2-4.2c1,0,1.6,0.2,1.9,0.4l-0.3,0.9
c-0.4-0.2-1-0.3-1.6-0.3c-1.9,0-3.2,1.2-3.2,3.3c0,2,1.1,3.3,3.1,3.3c0.6,0,1.3-0.1,1.7-0.3L118,17.1z"/> <path d="M119.3,9.3h1v3.9h0c0.2-0.3,0.4-0.6,0.6-0.9l2.5-3h1.3l-2.9,3.4l3.2,4.7h-1.2l-2.7-4l-0.8,0.9v3.1h-1V9.3z"/> <path d="M131.2,14.5l-5.6,2.9v-0.8l4.7-2.4v0l-4.7-2.4V11l5.6,2.9V14.5z"/> </g> </symbol><symbol viewBox="156 156 200 200" id="shape-link-icon"><title>link-icon</title> <g> <path d="M260.2,270.7l-11.8,11.8l0.4,0.4c1.6,1.6,1.6,4.3,0,5.9l-49.2,49.2c-1.6,1.6-4.3,1.6-5.9,0l-19.7-19.7
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="156 156 200 200" id="shape-link-icon"><title>link-icon</title> <g> <path d="M260.2,270.7l-11.8,11.8l0.4,0.4c1.6,1.6,1.6,4.3,0,5.9l-49.2,49.2c-1.6,1.6-4.3,1.6-5.9,0l-19.7-19.7
c-1.6-1.6-1.6-4.3,0-5.9l49.2-49.2c1.6-1.6,4.3-1.6,5.9,0l0.4,0.4l11.8-11.8l-0.4-0.4c-8.2-8.2-21.4-8.2-29.5,0l-49.2,49.2
c-8.2,8.2-8.2,21.4,0,29.5l19.7,19.7c8.2,8.2,21.4,8.2,29.5,0l49.2-49.2c8.2-8.2,8.2-21.4,0-29.5L260.2,270.7z"/> <path d="M349.9,181.8l-19.7-19.7c-8.2-8.2-21.4-8.2-29.6,0l-49.2,49.2c-8.2,8.2-8.2,21.4,0,29.5l0.4,0.4l11.8-11.8l-0.4-0.4
c-1.6-1.6-1.6-4.3,0-5.9l49.2-49.2c1.6-1.6,4.3-1.6,5.9,0l19.7,19.7c1.6,1.6,1.6,4.3,0,5.9l-49.2,49.2c-1.6,1.6-4.3,1.6-5.9,0
......
index.php
......@@ -9,15 +9,10 @@
<body>
<?php
require_once ('assets/svg-defs.svg');
?>
<header>
<div class="row">
<div class="large-12 columns">
<svg>
<use xlink:href="#shape-kevinletterlogo" />
</svg>
<img src="assets/kevinletterlogo.png" alt="Kevin Van Ransbeeck" />
</div>
<div class="large-12 columns">
<nav class="top-bar" data-topbar role="navigation">
......
scss/_structure.scss
header {
svg {
width: 100%;
text-align: center;
img {
max-width: 749px;
}
}
......
svg/kevinletterlogo.svg deleted 100644 → 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 134.9 27" enable-background="new 0 0 134.9 27" xml:space="preserve">
<g>
<path d="M3.7,13.8L9.3,11v0.8l-4.7,2.4v0l4.7,2.4v0.8l-5.6-2.9V13.8z"/>
<path d="M10.1,17.8l3.3-8.7h0.8l-3.4,8.7H10.1z"/>
<path d="M15.1,9.3h1v3.9h0c0.2-0.3,0.4-0.6,0.6-0.9l2.5-3h1.3l-2.9,3.4l3.2,4.7h-1.2l-2.7-4l-0.8,0.9v3.1h-1V9.3z"/>
<path d="M25.8,13.6h-3.1v2.9h3.5v0.9h-4.5V9.3H26v0.9h-3.3v2.6h3.1V13.6z"/>
<path d="M29.4,17.4l-2.6-8.1h1.1l1.3,4c0.3,1.1,0.6,2.1,0.9,3h0c0.2-0.9,0.6-2,0.9-3l1.4-4h1.1l-2.9,8.1H29.4z"/>
<path d="M35.4,9.3v8.1h-1V9.3H35.4z"/>
<path d="M37.2,17.4V9.3h1.1l2.6,4.1c0.6,0.9,1.1,1.8,1.5,2.6l0,0c-0.1-1.1-0.1-2.1-0.1-3.3V9.3h1v8.1h-1.1l-2.6-4.1
c-0.6-0.9-1.1-1.8-1.5-2.7l0,0c0.1,1,0.1,2,0.1,3.3v3.5H37.2z"/>
<path fill="#729AD0" d="M46.8,17.4l-2.6-8.1h1.1l1.3,4c0.3,1.1,0.6,2.1,0.9,3h0c0.2-0.9,0.6-2,0.9-3l1.4-4h1.1L48,17.4H46.8z"/>
<path fill="#729AD0" d="M52.4,14.8l-0.8,2.5h-1.1l2.7-8.1h1.3l2.8,8.1h-1.1l-0.9-2.5H52.4z M55,14l-0.8-2.3c-0.2-0.5-0.3-1-0.4-1.5
h0c-0.1,0.5-0.3,1-0.4,1.5L52.6,14H55z"/>
<path fill="#729AD0" d="M58.4,17.4V9.3h1.1l2.6,4.1c0.6,0.9,1.1,1.8,1.5,2.6l0,0c-0.1-1.1-0.1-2.1-0.1-3.3V9.3h1v8.1h-1.1l-2.6-4.1
c-0.6-0.9-1.1-1.8-1.5-2.7l0,0c0.1,1,0.1,2,0.1,3.3v3.5H58.4z"/>
<path d="M66.3,9.4c0.5-0.1,1.3-0.2,2-0.2c1.1,0,1.8,0.2,2.3,0.7c0.4,0.4,0.6,0.9,0.6,1.5c0,1.1-0.7,1.8-1.5,2.1v0
c0.6,0.2,1,0.8,1.2,1.6c0.3,1.1,0.5,1.9,0.6,2.2h-1.1c-0.1-0.2-0.3-0.9-0.5-1.9c-0.2-1.1-0.7-1.5-1.6-1.6h-1v3.5h-1V9.4z
M67.4,13.1h1.1c1.1,0,1.8-0.6,1.8-1.5c0-1-0.8-1.5-1.9-1.5c-0.5,0-0.9,0-1,0.1V13.1z"/>
<path d="M74.1,14.8l-0.8,2.5h-1.1L75,9.3h1.3l2.8,8.1h-1.1L77,14.8H74.1z M76.8,14L76,11.7c-0.2-0.5-0.3-1-0.4-1.5h0
c-0.1,0.5-0.3,1-0.4,1.5L74.4,14H76.8z"/>
<path d="M80.2,17.4V9.3h1.1l2.6,4.1c0.6,0.9,1.1,1.8,1.5,2.6l0,0c-0.1-1.1-0.1-2.1-0.1-3.3V9.3h1v8.1h-1.1l-2.6-4.1
c-0.6-0.9-1.1-1.8-1.5-2.7l0,0c0.1,1,0.1,2,0.1,3.3v3.5H80.2z"/>
<path d="M87.9,16.1c0.5,0.3,1.2,0.5,1.9,0.5c1.1,0,1.7-0.6,1.7-1.4c0-0.8-0.4-1.2-1.5-1.6c-1.3-0.5-2.1-1.2-2.1-2.3
c0-1.3,1-2.2,2.6-2.2c0.8,0,1.4,0.2,1.8,0.4L92,10.4c-0.3-0.1-0.8-0.4-1.5-0.4c-1.1,0-1.5,0.7-1.5,1.2c0,0.8,0.5,1.1,1.6,1.6
c1.4,0.5,2.1,1.2,2.1,2.4c0,1.2-0.9,2.3-2.8,2.3c-0.8,0-1.6-0.2-2.1-0.5L87.9,16.1z"/>
<path d="M94,9.4c0.5-0.1,1.2-0.2,1.9-0.2c1,0,1.7,0.2,2.2,0.6c0.4,0.3,0.7,0.8,0.7,1.4c0,0.8-0.5,1.5-1.4,1.8v0
c0.8,0.2,1.7,0.8,1.7,2c0,0.7-0.3,1.2-0.7,1.6c-0.6,0.5-1.5,0.8-2.8,0.8c-0.7,0-1.3,0-1.6-0.1V9.4z M95,12.7H96
c1.1,0,1.8-0.6,1.8-1.4c0-0.9-0.7-1.3-1.8-1.3c-0.5,0-0.8,0-0.9,0.1V12.7z M95,16.6c0.2,0,0.5,0,0.9,0c1.1,0,2.1-0.4,2.1-1.6
c0-1.1-0.9-1.6-2.1-1.6H95V16.6z"/>
<path d="M104.7,13.6h-3.1v2.9h3.5v0.9h-4.5V9.3h4.4v0.9h-3.3v2.6h3.1V13.6z"/>
<path d="M110.6,13.6h-3.1v2.9h3.5v0.9h-4.5V9.3h4.4v0.9h-3.3v2.6h3.1V13.6z"/>
<path d="M118,17.1c-0.4,0.2-1.2,0.4-2.1,0.4c-2.3,0-4-1.4-4-4.1c0-2.5,1.7-4.2,4.2-4.2c1,0,1.6,0.2,1.9,0.4l-0.3,0.9
c-0.4-0.2-1-0.3-1.6-0.3c-1.9,0-3.2,1.2-3.2,3.3c0,2,1.1,3.3,3.1,3.3c0.6,0,1.3-0.1,1.7-0.3L118,17.1z"/>
<path d="M119.3,9.3h1v3.9h0c0.2-0.3,0.4-0.6,0.6-0.9l2.5-3h1.3l-2.9,3.4l3.2,4.7h-1.2l-2.7-4l-0.8,0.9v3.1h-1V9.3z"/>
<path d="M131.2,14.5l-5.6,2.9v-0.8l4.7-2.4v0l-4.7-2.4V11l5.6,2.9V14.5z"/>
</g>
</svg>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!