Skip to content

Instantly share code, notes, and snippets.

@electricg

electricg/index.html

Created September 28, 2017 22:28
Show Gist options
  • Save electricg/f369bd09f7a2f277d0fa25e7bae34cd0 to your computer and use it in GitHub Desktop.
Save electricg/f369bd09f7a2f277d0fa25e7bae34cd0 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/qavadam
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
body {
background: pink;
color: green;
/* margin: 0; */
}
svg {
background: #f90;
display: block;
margin: 1rem 0;
padding: 0;
--scale: 2;
--h: 27px;
height: calc(var(--scale) * var(--h));
/* width: calc(var(--scale) * var(--w)); */
}
.shop-whowhatwear {
stroke-width: 0;
}
.shop-mydomaine {
stroke-width: 0;
}
.shop-byrdie {
stroke-width: 0;
}
.shop {
stroke-width: 0;
}
.light {
background: #111;
color: #FFF;
stroke-width: 1;
}
.dark {
background: #FFF;
color: #000;
}
.no-viewbox {
height: auto;
/* height: 50px; */
width: 200px;
display: none;
}
body {
background: #111;
/* display: flex; */
flex-wrap: wrap;
align-items: flex-start;
}
svg {
/* display: inline-block; */
height: 30px;
}
.light {
order: 1;
}
.dark {
order: 2;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="display:none;width:0;height:0;visibility:hidden;position:absolute;" width="0" height="0">
<defs>
<symbol id="svg-logo-byrdie" viewBox="0 0 155 28"><title>byrdie</title><path fill="currentColor" transform="translate(0, 2)" d="M6.022 18.963h.768c1.78 0 4.792.09 4.792-2.42 0-2.75-2.98-2.48-4.946-2.48h-.614v4.9zm0-9.314h.675c1.598 0 3.257-.273 3.257-2.21 0-2.086-1.874-2.207-3.502-2.207h-.43V9.65zM0 23.5V.697h8.602c4.117 0 6.882 1.572 6.882 5.927 0 2.057-.676 3.72-2.55 4.658v.06c3.318.424 4.73 2.632 4.73 5.807 0 4.777-4.147 6.35-8.386 6.35H0zM25.008.697h7.22l4.332 6.2 4.332-6.2h7.22L39.57 12.552V23.5h-6.02V12.552L25.007.697M65.347 10.92h.584c1.967 0 4.178-.364 4.178-2.844s-2.21-2.843-4.177-2.843h-.583v5.686zm13.24 12.58h-7.496l-5.682-8.77h-.06v8.77h-6.023V.697h9.002c4.577 0 8.05 2.147 8.05 7.016 0 3.145-1.783 5.867-5.07 6.442l7.28 9.345zM96.07 18.48h1.35c3.596 0 6.668-1.936 6.668-6.382 0-4.082-2.734-6.38-6.605-6.38H96.07V18.48zM90.048.697h8.54c6.452 0 11.767 4.99 11.767 11.4 0 6.413-5.346 11.403-11.766 11.403h-8.542V.697zM122.368.697h6.022V23.5h-6.022zM147.56 5.717v3.81h6.79v5.02h-6.79v3.933h7.16v5.02h-13.18V.697h13.18v5.02h-7.16" /></symbol>
<symbol id="svg-logo-mydomaine" viewBox="0 0 259 28"><title>mydomaine</title><path fill="currentColor" transform="translate(0, 1.5)" d="M67.576 19.855c3.775 0 6.85-3.11 6.85-6.925 0-3.816-3.075-6.926-6.85-6.926H63.77v13.85h3.806zm-8.37 4.616V1.39h8.37c6.302 0 11.414 5.168 11.414 11.54 0 6.37-5.112 11.54-11.414 11.54h-8.37zm32.57-11.54c0 3.816 3.076 6.925 6.85 6.925 3.774 0 6.85-3.11 6.85-6.925 0-3.816-3.076-6.926-6.85-6.926-3.774 0-6.85 3.11-6.85 6.926zm6.85 11.54c-6.3 0-11.417-5.17-11.417-11.54 0-6.37 5.115-11.54 11.417-11.54 6.3 0 11.414 5.168 11.414 11.54 0 6.37-5.113 11.54-11.416 11.54h.003zM122.19 1.39h1.154l8.25 9.016 8.22-9.017H141l1.735 23.08h-4.567l-1.005-13.356-5.57 6.093-5.572-6.087-1.03 13.352h-4.566l1.766-23.08V1.39zm47.12 14.62l-3.378-6.278-3.38 6.286h6.76l-.003-.008zm2.497 4.62h-11.75l-2.07 3.84h-5.208L165.932.128l13.18 24.344h-5.206l-2.1-3.846v.005zM189.77 1.39h4.566v23.065h-4.567V1.39zm18.564 0h1.218l14.003 13.48V1.39h4.567v23.08h-1.25l-13.97-13.48v13.48h-4.568V1.39zm33.793 0h16.74v4.614h-12.176v6.926h9.135v4.615h-9.134v2.31h12.178v4.616h-16.74V1.39zM18.646 22.273l-1.31-14.825-6.458 6.776-6.495-6.78-1.188 14.83-1.583-.026 1.32-19 7.898 8.762 7.924-8.814 1.414 19.05-1.522.027zM20.04.986h-1.138l-8.06 8.626L2.88.986H1.74L0 23.69h4.5l1.006-13.175 5.337 5.836 5.385-5.84L17.27 23.69h4.5L20.046.994 20.04.986zM41.79 15.31v7.37h-1.995v-7.37L32 2.5h2.17l6.616 10.838L47.524 2.51H49.7l-7.908 12.813-.004-.014zm4.92-14.25l-5.922 9.545-5.89-9.544-5.647.017 9.047 14.743v8.374h4.98v-8.38L52.383 1.07l-5.678-.015.003.006zm-8.563 12.353l.005.008-.005-.007z" /></symbol>
<symbol id="svg-logo-whowhatwear" viewBox="0 0 329 28"><title>whowhatwear</title><path fill="currentColor" transform="translate(0, 2)" d="M33.258.758l-9.13 22.425h-1.844L16.646 11.67l-5.672 11.513H9.128L0 .758h6.444l4.16 10.578L15.707.358h1.845l5.1 10.978L26.814.758h6.444zM58.67 22.782h-5.773v-8.81H44.81v8.81h-5.773V.758h5.773v8.04h8.087V.76h5.773v22.024-.002zM89.015 11.77c0 6.51-5.37 11.413-11.982 11.413-6.612 0-11.913-4.904-11.913-11.413 0-6.474 5.3-11.41 11.913-11.41s11.982 4.936 11.982 11.41zm-17.99 0c0 3.737 2.485 6.14 6.042 6.14 3.422 0 6.04-2.403 6.04-6.14 0-3.67-2.618-6.14-6.04-6.14-3.557 0-6.04 2.47-6.04 6.14h-.002zM135.913.758l-9.127 22.425h-1.847L119.3 11.67l-5.67 11.513h-1.847L102.656.758h6.443l4.16 10.578 5.1-10.978h1.84l5.1 10.978L129.47.758h6.443zm25.41 22.024h-5.77v-8.81h-8.09v8.81h-5.77V.758h5.77v8.04h8.09V.76h5.77v22.024-.002zm19.454-4.138h-6.034l-1.767 4.14h-6.208l9.73-22.427h2.816l9.436 22.426h-6.21l-1.763-4.14zm-3-9.71l-1.948 5.104h3.86l-1.92-5.104h.007zm118.497 9.71h-6.034l-1.767 4.14h-6.208l9.73-22.427h2.816l9.44 22.426h-6.21l-1.76-4.14h-.006zm-3-9.71l-1.948 5.104h3.86l-1.913-5.104zM208.858 5.93h-6.645v16.853h-5.772V5.93h-6.64V.76h19.067v5.17h-.01zM255.69.758l-9.127 22.425h-1.847l-5.638-11.513-5.67 11.513h-1.848L222.432.758h6.444l4.16 10.578L238.14.358h1.844l5.1 10.978L249.248.758h6.443zm21.15 5.172h-9.6v3.037h6.85v4.806h-6.842v3.837h10v5.173h-15.77V.76h15.37v5.17h-.007zm45.595 16.852l-5-6.84h-2.385v6.84h-5.77V.758h8.69c4.866 0 8.557 2.904 8.557 7.575 0 2.77-1.343 4.973-3.49 6.273l5.84 8.176h-6.443zm-7.385-11.846H318c1.61 0 2.65-1.036 2.65-2.603 0-1.534-1.04-2.568-2.65-2.568h-2.955v5.17h.005z" /></symbol>
<symbol id="svg-logo-shop" viewBox="0 0 113 28"><title>shop</title><g fill="currentColor" stroke="currentColor"><path d="M1.536 22.183l.285-.38c.216-.253.436-.348.686-.126.312.283 2.623 2.434 5.778 2.434 2.843 0 5.247-1.927 5.247-4.236 0-2.817-2.28-4.082-6.058-5.377-3.623-1.298-6.025-2.595-6.025-6.233 0-2.373 1.873-5.597 6.744-5.597 3.093 0 5.372 1.61 5.372 1.61.125.095.344.32.125.666-.095.127-.186.283-.25.41-.19.254-.375.35-.687.16-.095-.064-2.186-1.488-4.59-1.488-3.842 0-5.28 2.404-5.28 4.207 0 2.69 2.032 3.86 5.185 4.904 4.28 1.488 6.998 3.006 6.998 6.674 0 3.163-3.217 5.63-6.807 5.63-3.72 0-6.218-2.213-6.624-2.59-.187-.16-.34-.32-.096-.667zm18.27-18.79c0-.22.188-.412.405-.412h.657c.25 0 .407.193.407.413v9.71h14.023v-9.71c0-.22.19-.412.404-.412h.657c.247 0 .398.193.398.413v21.32c0 .22-.17.412-.416.412h-.664c-.218 0-.407-.192-.407-.412v-10.28H21.246v10.28c0 .22-.157.412-.406.412h-.652c-.22 0-.406-.192-.406-.412V3.393h.023zM53.063 24.05c5.464 0 9.9-4.428 9.9-9.967 0-5.534-4.437-10.024-9.9-10.024-5.468 0-9.87 4.49-9.87 10.023 0 5.538 4.41 9.966 9.877 9.966h-.008zm0-21.385c6.275 0 11.273 5.093 11.273 11.42 0 6.358-4.996 11.356-11.274 11.356-6.246 0-11.242-4.997-11.242-11.355 0-6.325 4.996-11.42 11.24-11.42h.002zm23.386 13.127c3.058 0 5.65-2.562 5.65-5.757 0-3.1-2.59-5.566-5.683-5.566h-5.56V15.79h5.593zm-7.06-12.4c0-.22.19-.41.405-.41h6.7c3.865 0 7.057 3.194 7.057 7.085 0 3.95-3.192 7.17-7.035 7.17h-5.674v7.454c0 .22-.19.41-.5.41h-.565c-.227 0-.416-.192-.416-.412V3.39l.03.002h-.002zm27.823-.158c.062-.156.22-.253.405-.253h.438c.282 0 .472.193.376.444L91.53 24.84c-.063.19-.25.287-.407.287h-.472c-.246 0-.435-.16-.34-.445l6.888-21.448h.015z" /></g></symbol>
<symbol id="svg-logo-shop-whowhatwear" viewBox="0 0 436 28"><title>shop whowhatwear</title><g fill="currentColor"><use xlink:href="#svg-logo-shop" transform="translate(-161.5, 0)" stroke="currentColor" /><use xlink:href="#svg-logo-whowhatwear" transform="translate(53, 0)" /></g></symbol>
<symbol id="svg-logo-shop-mydomaine" viewBox="0 0 364 28"><title>shop mydomaine</title><g fill="currentColor"><use xlink:href="#svg-logo-shop" transform="translate(-125.5, 0)" stroke="currentColor" /><use xlink:href="#svg-logo-mydomaine" transform="translate(53, 0)" /></g></symbol>
<symbol id="svg-logo-shop-byrdie" viewBox="0 0 262 28"><title>shop byrdie</title><g fill="currentColor"><use xlink:href="#svg-logo-shop" transform="translate(-74.5, 0)" stroke="currentColor" /><use xlink:href="#svg-logo-byrdie" transform="translate(53, 0)" /></g></symbol>
<symbol id="svg-logo-thethirty" viewBox="0 0 168 28"><title>thethirty</title><path d="M5.71 25.636h4.545c.29 0 .472-.18.472-.472V7.927h4.728c.29 0 .472-.182.472-.472v-3.89c0-.292-.182-.474-.472-.474H.473c-.29 0-.473.183-.473.474v3.854c0 .29.182.473.473.473H5.2v17.237c0 .29.218.51.51.51zm24.98 0h4.546c.29 0 .473-.18.473-.472v-21.6c0-.29-.183-.473-.474-.473H30.69c-.29 0-.508.183-.508.474v8.618h-7.31V3.564c0-.29-.18-.473-.472-.473h-4.545c-.29 0-.473.183-.473.474v21.563c0 .29.182.473.473.473H22.4c.29 0 .473-.182.473-.473v-8.11h7.31v8.11c0 .29.217.51.508.51zm19.855-17.71c.29 0 .473-.18.473-.47V3.563c0-.29-.182-.473-.473-.473H38.29c-.29 0-.472.183-.472.474v21.563c0 .29.182.473.473.473h12.292c.29 0 .473-.182.473-.473v-3.854c0-.29-.182-.473-.473-.473H43.31v-4.182h6.8c.29 0 .472-.182.472-.473v-3.89c0-.29-.182-.473-.473-.473h-6.8V7.927h7.235zM69.2 2.547c.145-.364-.036-.546-.4-.546h-4.618c-.255 0-.473.145-.582.4L54.473 26h5.672L69.2 2.545zm7.818 23.09h4.546c.29 0 .472-.18.472-.472V7.927h4.728c.29 0 .472-.182.472-.472v-3.89c0-.292-.18-.474-.472-.474H71.782c-.29 0-.473.183-.473.474v3.854c0 .29.18.473.472.473h4.727v17.237c0 .29.217.51.508.51zm29.49-22.545h-4.544c-.29 0-.473.183-.473.474v8.618h-7.308V3.564c0-.29-.182-.473-.473-.473h-4.546c-.29 0-.473.183-.473.474v21.563c0 .29.183.473.474.473h4.545c.29 0 .472-.182.472-.473v-8.11h7.31v8.11c0 .29.18.473.472.473h4.545c.29 0 .472-.182.472-.473V3.564c.036-.29-.182-.473-.473-.473zm7.6 0h-4.544c-.29 0-.473.183-.473.474v21.563c0 .29.183.473.474.473h4.545c.29 0 .472-.182.472-.473V3.564c.036-.29-.182-.473-.473-.473zm19.165 21.965l-4.91-7.564c2.873-1.163 4.364-3.635 4.364-6.835 0-4.473-3.018-7.564-8.545-7.564h-7.018c-.29 0-.473.183-.473.474v21.563c0 .29.183.473.474.473h4.545c.29 0 .472-.182.472-.473v-6.91h.873l4.51 7.092c.144.217.326.326.58.326h4.8c.4 0 .546-.254.328-.58zm-9.164-11.673h-1.928V7.927h1.89c1.528 0 3.383.546 3.383 2.728.036 2.145-1.82 2.727-3.346 2.727zm24.4-9.818v3.854c0 .29-.183.473-.474.473h-4.727v17.237c0 .29-.183.473-.474.473h-4.545c-.29 0-.472-.182-.472-.473v-17.2h-4.727c-.29 0-.472-.182-.472-.472v-3.89c0-.292.182-.474.473-.474h14.983c.218 0 .436.183.436.474zm19.38.11l-6.58 11.67v9.82c0 .29-.183.472-.474.472h-4.545c-.29 0-.472-.18-.472-.472v-9.89l-6.582-11.6c-.18-.4-.072-.583.328-.583h4.763c.255 0 .437.11.582.328l3.635 6.727 3.637-6.727c.145-.218.327-.327.582-.327h4.8c.363 0 .51.183.327.583z" fill="currentColor"/></symbol>
</defs>
</svg>
<svg viewBox="0 0 168 28" class="thethirty light" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-thethirty" />
</svg>
<svg viewBox="0 0 168 28" class="thethirty dark" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-thethirty" />
</svg>
<svg viewBox="0 0 329 28" class="whowhatwear light" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-whowhatwear" />
</svg>
<svg viewBox="0 0 329 28" class="whowhatwear dark" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-whowhatwear" />
</svg>
<svg viewBox="0 0 436 28" class="shop-whowhatwear light" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-shop-whowhatwear" />
</svg>
<svg viewBox="0 0 436 28" class="shop-whowhatwear dark" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-shop-whowhatwear" />
</svg>
<svg viewBox="0 0 259 28" class="mydomaine light" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-mydomaine" />
</svg>
<svg viewBox="0 0 259 28" class="mydomaine dark" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-mydomaine" />
</svg>
<svg viewBox="0 0 364 28" class="shop-mydomaine light" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-shop-mydomaine" />
</svg>
<svg viewBox="0 0 364 28" class="shop-mydomaine dark" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-shop-mydomaine" />
</svg>
<svg viewBox="0 0 155 28" class="byrdie light" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-byrdie" />
</svg>
<svg viewBox="0 0 155 28" class="byrdie dark" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-byrdie" />
</svg>
<svg viewBox="0 0 262 28" class="shop-byrdie light" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-shop-byrdie" />
</svg>
<svg viewBox="0 0 262 28" class="shop-byrdie dark" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-shop-byrdie" />
</svg>
<svg viewBox="0 0 113 28" class="shop light" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-shop" />
</svg>
<svg viewBox="0 0 113 28" class="shop dark" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-shop" />
</svg>
<svg viewBox="0 0 450 28" class="shop-whowhatwear dark no-viewbox" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#svg-logo-shop-whowhatwear" />
</svg>
<script id="jsbin-source-css" type="text/css">body {
background: pink;
color: green;
/* margin: 0; */
}
svg {
background: #f90;
display: block;
margin: 1rem 0;
padding: 0;
--scale: 2;
--h: 27px;
height: calc(var(--scale) * var(--h));
/* width: calc(var(--scale) * var(--w)); */
}
.shop-whowhatwear {
stroke-width: 0;
}
.shop-mydomaine {
stroke-width: 0;
}
.shop-byrdie {
stroke-width: 0;
}
.shop {
stroke-width: 0;
}
.light {
background: #111;
color: #FFF;
stroke-width: 1;
}
.dark {
background: #FFF;
color: #000;
}
.no-viewbox {
height: auto;
/* height: 50px; */
width: 200px;
display: none;
}
body {
background: #111;
/* display: flex; */
flex-wrap: wrap;
align-items: flex-start;
}
svg {
/* display: inline-block; */
height: 30px;
}
.light {
order: 1;
}
.dark {
order: 2;
}</script>
</body>
</html>
Raw
jsbin.qavadam.css
body {
background: pink;
color: green;
/* margin: 0; */
}
svg {
background: #f90;
display: block;
margin: 1rem 0;
padding: 0;
--scale: 2;
--h: 27px;
height: calc(var(--scale) * var(--h));
/* width: calc(var(--scale) * var(--w)); */
}
.shop-whowhatwear {
stroke-width: 0;
}
.shop-mydomaine {
stroke-width: 0;
}
.shop-byrdie {
stroke-width: 0;
}
.shop {
stroke-width: 0;
}
.light {
background: #111;
color: #FFF;
stroke-width: 1;
}
.dark {
background: #FFF;
color: #000;
}
.no-viewbox {
height: auto;
/* height: 50px; */
width: 200px;
display: none;
}
body {
background: #111;
/* display: flex; */
flex-wrap: wrap;
align-items: flex-start;
}
svg {
/* display: inline-block; */
height: 30px;
}
.light {
order: 1;
}
.dark {
order: 2;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment