~stick/hackwhacktackbang.fyi

9573ace7f0115ca5ac306ae61e6f21a74c6aaac9 — Stick 4 years ago 57e5f0f
break out list of pointers
1 files changed, 104 insertions(+), 83 deletions(-)

M content/_index.html
M content/_index.html => content/_index.html +104 -83
@@ 1,46 1,52 @@
+++
plain=true
+++

<div class="v-item">
  <div class="h-item tooltip">
    <svg viewBox="0 0 100 100">
      <!-- Definitions used in other SVGs -->
      <defs>
		  <radialGradient id="bg" r="1" fx="0.3" fy="0.3">
			<stop offset="0%" stop-color="#333" />
			<stop offset="100%" stop-color="#000" />
		  </radialGradient>
		  <radialGradient id="fg" r="1" fx="0.3" fy="0.3">
			<stop offset="0" stop-color="#3f5" />
			<stop offset="1" stop-color="#0c2" />
		  </radialGradient>
      <path id="squircle"
            fill="url(#bg)"
            d="M 0,50
        <radialGradient id="bg" r="1" fx="0.3" fy="0.3">
          <stop offset="0%" stop-color="#333" />
          <stop offset="100%" stop-color="#000" />
        </radialGradient>
        <radialGradient id="fg" r="1" fx="0.3" fy="0.3">
          <stop offset="0" stop-color="#3f5" />
          <stop offset="1" stop-color="#0c2" />
        </radialGradient>
        <path
          id="squircle"
          fill="url(#bg)"
          d="M 0,50
            C 0,0 0,0 50,0
            100,0 100,0 100,50
            100,100 100,100 50,100
            0,100 0,100 0,50"
            />
        />
      </defs>
      <use xlink:href="#squircle" />
      <text x="50"
            y="40"
            dominant-baseline="central"
            font-family="Source Code Pro"
            font-size="50"
            font-weight="bold"
            text-anchor="middle" 
            fill="url(#fg)">
      /
      <text
        x="50"
        y="40"
        dominant-baseline="central"
        font-family="Source Code Pro"
        font-size="50"
        font-weight="bold"
        text-anchor="middle"
        fill="url(#fg)"
      >
        /
      </text>
      <text x="50"
            y="80"
            dominant-baseline="central"
            font-size="12"
            text-anchor="middle" 
            fill="url(#fg)">
      Hack
      <text
        x="50"
        y="80"
        dominant-baseline="central"
        font-size="12"
        text-anchor="middle"
        fill="url(#fg)"
      >
        Hack
      </text>
    </svg>
    <aside>AKA "Slash"</aside>


@@ 48,23 54,27 @@ plain=true
  <div class="h-item tooltip">
    <svg viewBox="0 0 100 100">
      <use xlink:href="#squircle" />
      <text x="50"
            y="40"
            dominant-baseline="central"
            font-family="Source Code Pro"
            font-size="50"
            font-weight="bold"
            text-anchor="middle" 
            fill="url(#fg)">
      \
      <text
        x="50"
        y="40"
        dominant-baseline="central"
        font-family="Source Code Pro"
        font-size="50"
        font-weight="bold"
        text-anchor="middle"
        fill="url(#fg)"
      >
        \
      </text>
      <text x="50"
            y="80"
            dominant-baseline="central"
            font-size="12"
            text-anchor="middle" 
            fill="url(#fg)">
      Whack
      <text
        x="50"
        y="80"
        dominant-baseline="central"
        font-size="12"
        text-anchor="middle"
        fill="url(#fg)"
      >
        Whack
      </text>
    </svg>
    <aside>AKA "Backslash"</aside>


@@ 72,24 82,28 @@ plain=true
  <div class="h-item tooltip">
    <svg viewBox="0 0 100 100">
      <use xlink:href="#squircle" />
      <text  x="50"
             y="40"
             dominant-baseline="central"
             font-family="Source Code Pro"
             font-size="50"
             font-weight="bold"
             text-anchor="middle" 
             fill="url(#fg)">
      -
      <text
        x="50"
        y="40"
        dominant-baseline="central"
        font-family="Source Code Pro"
        font-size="50"
        font-weight="bold"
        text-anchor="middle"
        fill="url(#fg)"
      >
        -
      </text>
      <text class="minor"
            x="50"
            y="80"
            dominant-baseline="central"
            font-size="12"
            text-anchor="middle" 
            fill="url(#fg)">
      Tack
      <text
        class="minor"
        x="50"
        y="80"
        dominant-baseline="central"
        font-size="12"
        text-anchor="middle"
        fill="url(#fg)"
      >
        Tack
      </text>
    </svg>
    <aside>AKA "Dash"</aside>


@@ 97,38 111,45 @@ plain=true
  <div class="h-item tooltip">
    <svg viewBox="0 0 100 100">
      <use xlink:href="#squircle" />
      <text x="50"
            y="40"
            dominant-baseline="central"
            font-family="Source Code Pro"
            font-size="50"
            font-weight="bold"
            text-anchor="middle" 
            fill="url(#fg)">
      !
      <text
        x="50"
        y="40"
        dominant-baseline="central"
        font-family="Source Code Pro"
        font-size="50"
        font-weight="bold"
        text-anchor="middle"
        fill="url(#fg)"
      >
        !
      </text>
      <text x="50"
            y="80"
            dominant-baseline="central"
            font-size="12"
            text-anchor="middle" 
            fill="url(#fg)">
      Bang
      <text
        x="50"
        y="80"
        dominant-baseline="central"
        font-size="12"
        text-anchor="middle"
        fill="url(#fg)"
      >
        Bang
      </text>
    </svg>
    <aside>AKA "Exclamation Point"</aside>
  </div>
</div>
<h2 class="tooltip v-item">
    There is no such thing as forward slash.
  There is no such thing as forward slash.
  <aside>
    <p>
      Brackets are <strong>[</strong>square<strong>]</strong>.
      Braces are <strong>{</strong>curly<strong>}</strong>.
      Pronounce "gif" with <a link="http://howtoreallypronouncegif.com/">a hard G</a>.
    </p>
    <p>
      Thank you for coming to my TED talk.
    </p>
  </aside>
</h2>
<ul>
  <li>Brackets are <strong>[</strong>square<strong>]</strong>.</li>
  <li>Braces are <strong>{</strong>curly<strong>}</strong>.</li>
  <li>
    Pronounce "gif" with
    <a link="http://howtoreallypronouncegif.com/">a hard G</a>.
  </li>
</ul>