-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (108 loc) · 3.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
---
layout: default
title: Home
cover: true
about: about
---
<header class="main-header {% if page.cover %}" style="background-image: url({{ page.cover }}) {%else%}no-cover{% endif %}">
<nav class="main-nav overlay clearfix">
{% if page.logo %}
<a class="blog-logo" href="{{ site.baseurl }}">
<img src="{{ page.logo }}" alt="Blog Logo" />
</a>
{% endif %}
</nav>
<div class="vertical">
<div class="main-header-content inner">
<h1 class="page-title">{{ site.name }}</h1>
<h2 class="page-description">
{% if site.description %} {{ site.description }}. {% endif %}
{% if page.about %} <a href='{{ site.baseurl }}{{ page.about }}'></a> {% endif %}
</h2>
</div>
</div>
<a class="scroll-down icon-arrow-left" href="#content" data-offset="-45"><span class="hidden">Scroll Down</span></a>
</header>
<!-- MAIN PAGE -->
<main id="content" class="content" role="main">
<article class="post">
I am in pursuit of understanding how the world works. These are little +1's I have picked up along the way.
My hope is that at some point they may add up to a <a href="/gut/">GUT</a>.
</article>
<!-- <div class="branches">
<h1 class="branch"><a href="exp.html">EXP</a></h1>
<h1 class="branch"><a href="theory.html">THEORY</a></h1>
<h1 class="branch"><a href="{{ site.baseurl }}{{ page.about }}">ABOUT ME</a></h1>
</div>
-->
<div class="extra-pagination inner">
{% include pagination.html %}
</div>
{% for post in paginator.posts %}
<article class="post">
<div class="layer">
{% if post.cover %}
<a href="{{ post.url }}">
<div class="post-image" style=" background-image:url( {{ post.cover}} );">
</div></a>
{%else%}
{% endif %}
</div>
<header class="post-header">
<h2 class="post-title"><a href="{{ post.url }}">{{ post.title }}</a></h2>
</header>
<footer class="post-meta">
<!-- {% if site.author %}
<a href="/about/"><img class="author-thumb" src="/assets/images/profile.png" alt="Author's profile picture" nopin="nopin" /></a>
{{ site.author }}
{% endif %}
-->
{{ post.content | number_of_words }} words
{{ post.categories | array_to_sentence_string | prepend: 'about ' }}
<time class="post-date" datetime="{{ post.date | date:"%Y-%m-%d" }}">
{{ post.date | date_to_string }}
</time>
</footer>
</article>
{% endfor %}
{% include pagination.html %}
</main>
<style>
path {
fill: #222222;
stroke: #f04124;
stroke-linejoin: round;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var width = 960,
height = 300;
var svg = d3.select(".vertical").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")")
.append("path")
.attr("d", d3.svg.symbol().type("triangle-down").size(5000))
.call(twizzle, 10000)
.call(plonk, 2000);
function twizzle(path, duration) {
path.transition("twizzle")
.duration(duration)
.attrTween("transform", function() { return d3.interpolateString("rotate(0)", "rotate(720)"); })
.transition()
.duration(Math.random() * duration)
.each("end", function() { path.call(twizzle, duration); });
}
function plonk(path, duration) {
path.transition("plonk")
.duration(duration)
.style("stroke-width", "30px")
.transition()
.style("stroke-width", "0px")
.transition()
.duration(Math.random() * duration)
.each("end", function() { path.call(plonk, duration); });
}
</script>