aboutme-hex-horizontal.svg

---
items:
  - [22.0, -1, linkedin]
  - [22.0,  1, github]
  - [21.5,  0, codepen]
  - [21.0, -1, curriculumvitae]
  - [21.0,  1, githubgist]
  - [20.5,  0, hackerrank]
  - [20.0, -1, stackexchange]
  - [20.0,  1, bitbucket]
  - [19.5,  0, topcoder]
  - [19.0, -1, devpost]
  - [19.0,  1, userscripts]
  - [18.5,  0, shadertoy]
  - [18.0, -1, regexcrossword]
  - [18.0,  1, greasyfork]
  - [17.5,  0, speakerdeck]
  - [17.0, -1, coderwall]
  - [17.0,  1, usercss]
  - [16.5,  0, slideshare]
  - [16.0, -1, instagram]
  - [16.0,  1, ifttt]
  - [15.5,  0, slides]
  - [15.0, -1, flickr]
  - [15.0,  1, asciinema]
  - [14.5,  0, behance]
  - [14.0, -1, imgur]
  - [14.0,  1, youtube]
  - [13.5,  0, openclipart]
  - [13.0, -1, soundcloud]
  - [13.0,  1, vimeo]
  - [12.5,  0, opengameart]
  - [12.0, -1, tunein]
  - [12.0,  1, twitch]
  - [11.5,  0, deviantart]
  - [11.0, -1, bandcamp]
  - [11.0,  1, retroachievements]
  - [10.5,  0, drawception]
  - [10.0, -1, steam]
  - [10.0,  1, backloggery]
  - [9.5,  0, itchio]
  - [9.0, -1, kongregate]
  - [9.0,  1, alvanista]
  - [8.5,  0, patreon]
  - [8.0, -1, gamejolt]
  - [8.0,  1, medium]
  - [7.5,  0, buymeacoffee]
  - [7.0, -1, newgrounds]
  - [7.0,  1, livejournal]
  - [6.5,  0, kofi]
  - [6.0, -1, indiegogo]
  - [6.0,  1, myspace]
  - [5.5,  0, paypal]
  - [5.0, -1, kickstarter]
  - [5.0,  1, vk]
  - [4.5,  0, angellist]
  - [4.0, -1, pinterest]
  - [4.0,  1, snapchat]
  - [3.5,  0, gravatar]
  - [3.0, -1, pocket]
  - [3.0,  1, tumblr]
  - [2.5,  0, aboutme]
  - [2.0, -1, disqus]
  - [2.0,  1, facebook]
  - [1.5,  0, twitter]
  - [1.0, -1, reddit]
  - [1.0,  1, telegram]
  - [0.5,  0, blog]
  - [0.0, -1, email]
  - [0.0,  1, skype]

---
<?xml version="1.0" encoding="UTF-8"?>

<!--
Note: don't include a DOCTYPE in SVG documents:
http://jwatt.org/svg/authoring/
-->

{% comment %}
  xgrid and ygrid = the offset between each hexagon cell

  xgrid = width of a pointy-top hexagon + margin
  ygrid = 3/4 height of a pointy-top hexagon + margin

  xorigin = origin of the hexagon coordinates

  divided_by will round down to the nearest integer if the input is an integer.
{% endcomment %}

{% assign xwidth  = 17.32 %}
{% assign yheight = 20.00 %}
{% assign xhalf   = xwidth | divided_by: 2 %}

{% assign xmargin = 1.0 %}
{% assign ymargin = xmargin | times: 0.866 %}

{% assign xgrid = xwidth  | plus: xmargin %}
{% assign ygrid = yheight | times: 0.75 | plus: ymargin %}

{% assign picsize = ygrid | times: 2.0 | plus: yheight | divided_by: 0.866 %}
{% assign pichalf = picsize | divided_by: 2.0 %}
{% assign picshortsize = picsize | times: 0.866 %}
{% assign picshorthalf = picshortsize | divided_by: 2.0 %}

{% assign xorigin = xhalf | divided_by: -2.0 | plus: xmargin | plus: pichalf %}
{% assign yorigin = 0 %}

{% assign number_of_items = page.items | size %}
{% assign horizontal_items = number_of_items | divided_by: 3.0 | ceil | plus: 1 %}

<svg viewBox="-{{ pichalf }} -{{ picshorthalf }} {{ xgrid | times: horizontal_items | plus: xorigin | plus: pichalf }} {{ picshortsize }}"
	preserveAspectRatio="xMinYMid meet"
	version="1.1"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
>

<style type="text/css"><![CDATA[
@import url(https://fonts.googleapis.com/css?family=Roboto);

/* Relevant Firefox bug/behavior: https://bugzilla.mozilla.org/show_bug.cgi?id=265894#c5 */

.item > a {
	cursor: pointer;
}

.item > a > .outline {
	transition-property: opacity, transform, -webkit-transform;
	transition-duration: 250ms;
	fill: white;
	stroke: white;
	stroke-width: {{ xmargin | times: 2 }}px;
}
.item > a > .left,
.item > a > .middle,
.item > a > .right {
	transition-property: fill, stroke, transform, -webkit-transform;
	transition-duration: 250ms;
	fill: #D3D7CF;

	/* To prevent a seam between the elements. But gets buggy on Firefox. */
	stroke: #D3D7CF;
	stroke-width: 0.25px;
	stroke-linecap: round;
}
.item > a > text {
	transition-property: opacity, transform, -webkit-transform;
	transition-duration: 250ms;
	pointer-events: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
.item > a > .icon {
	transition-property: opacity, transform, -webkit-transform;
	transition-duration: 250ms;
}
.item > a > text,
.item > a > text tspan {
	fill: #2e3436;
	font-family: "Roboto", "Arial", sans-serif;
	font-size: 6.5px;
	text-anchor: middle;
	/* middle can be obtained from the font definition. */
	/* central is defined as the half of EM box. */
	dominant-baseline: central;
}

.item:hover > a > .left,
.item:hover > a > .middle,
.item:hover > a > .right {
	fill: #EDEEEB;
	stroke: #EDEEEB;
}
/* Chrome bug if using scaleX(0): http://crbug.com/395675 */
.item       > a > .outline { -webkit-transform: scaleX(0.00001); transform: scaleX(0.00001); opacity: 0; }
.item:hover > a > .outline { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; }
.item       > a > .middle  { -webkit-transform: scaleX(0.00001); transform: scaleX(0.00001); }
.item:hover > a > .middle  { -webkit-transform: scaleX(1); transform: scaleX(1); }
.item       > a > .right   { -webkit-transform: translateX( 0px); transform: translateX( 0px); }
.item:hover > a > .right   { -webkit-transform: translateX({{ xgrid | times: 1 }}px); transform: translateX({{ xgrid | times: 1 }}px); }
/* Firefox bug with transform and stroke: https://bugzilla.mozilla.org/show_bug.cgi?id=1183449 */
.item       > a > .left    { transform: translateX(0px); }
/* Chrome bug about applying transform to text on hover: http://crbug.com/394829 */
.item       > a > text     { opacity: 0.0; }
.item:hover > a > text     { opacity: 1.0; }
.item       > a > .icon    { opacity: 1.000; -webkit-transform: translateX(0); transform: translateX(0); }
.item:hover > a > .icon    { opacity: 0.125; -webkit-transform: translateX({{ xhalf | times: 1 }}px); transform: translateX({{ xhalf | times: 1 }}px); }

]]></style>

<!-- ============================================================ -->

<defs>

{% assign restrict = 'hexagonflattopclip,hexagonpointytopclip' %}
{% for itemdesc in page.items %}
	{% assign itemname = itemdesc[2] %}
	{% assign item = site.data.aboutme[itemname] %}
	{% assign restrict = restrict | append: ',' | append: item.useid %}
{% endfor %}
{% include aboutme-defs.svg restrict=restrict %}

</defs>

<!-- ============================================================ -->

{% comment %}
<rect x="-{{ pichalf }}" y="-{{ picshorthalf }}" width="{{ xgrid | times: 7 | plus: xorigin | plus: pichalf }}" height="{{ picshortsize }}" fill="#FEE" />
{% endcomment %}

<g class="centralpicture">
	<image x="-{{ pichalf }}" y="-{{ pichalf }}" width="{{ picsize }}" height="{{ picsize }}"
		clip-path="url(#hexagonflattopclip)"
		xlink:href="ProfilePhoto-small.jpg" />
</g>

{% for itemdesc in page.items %}
{% assign itemx = itemdesc[0] %}
{% assign itemy = itemdesc[1] %}
{% assign itemname = itemdesc[2] %}
{% assign item = site.data.aboutme[itemname] %}
{% comment %}
  The following line does not work:
  assign item = site.data.aboutme[itemdesc[2]]
  That's why I'm using itemname as a temporary var.
{% endcomment %}
<g transform="translate({{ itemx | times: xgrid | plus: xorigin }} {{ itemy | times: ygrid | plus: yorigin }})" class="item with-icon">
	<a target="_top" xlink:href="{{ item.href | xml_escape }}">
		<polygon points="
		0,-10
		-{{ xhalf }},-5
		-{{ xhalf }},5
		0,10
		{{ xgrid | times: 1 }},10
		{{ xgrid | times: 1 | plus: xhalf }},5
		{{ xgrid | times: 1 | plus: xhalf }},-5
		{{ xgrid | times: 1 }},-10
		" class="outline" />
		<polygon points="
		0,-10
		-{{ xhalf }},-5
		-{{ xhalf }},5
		0,10
		" class="left" />
		<rect x="0" y="-10" width="{{ xgrid | times: 1 }}" height="20" class="middle" />
		<polygon points="
		0,10
		{{ xhalf }},5
		{{ xhalf }},-5
		0,-10
		" class="right" />
		<use class="icon" xlink:href="#{{ item.useid }}" x="-6.25" y="-6.25" width="12.5" height="12.5" />
		<text x="{{ xgrid | divided_by: 2 }}" y="0">
		{% if item.text3 %}
			<tspan x="{{ xgrid | divided_by: 2 }}" y="-0.9em">{{ item.text1 }}</tspan>
			<tspan x="{{ xgrid | divided_by: 2 }}" y="0em">{{ item.text2 }}</tspan>
			<tspan x="{{ xgrid | divided_by: 2 }}" y="0.9em">{{ item.text3 }}</tspan>
		{% elsif item.text2 %}
			<tspan x="{{ xgrid | divided_by: 2 }}" y="-0.5em">{{ item.text1 }}</tspan>
			<tspan x="{{ xgrid | divided_by: 2 }}" y="0.5em">{{ item.text2 }}</tspan>
		{% else %}
			{{ item.text1 }}
		{% endif %}
		</text>
	</a>
</g>
{% endfor %}

</svg>