Commit 0c0b45f5 authored by Jaisen Mathai's avatar Jaisen Mathai
Browse files

Updating layouts

parent b03b712b
title: The Story of OpenPhoto / Trovebox
description: Documenting my 3 year startup journey founding OpenPhoto / Trovebox.
logo: site-logo.png
title: Jaisen Mathai
description:
logo: bio-photo.jpg
disqus_shortname:
search: true
# Change url to your domain. Leave localhost server or blank when working locally.
......@@ -34,9 +34,12 @@ bing_verify:
# Links to include in top navigation
# For external links add external: true
links:
- title: Articles
url: /articles/
external: true
- title: Home
url: /
external: false
- title: Start-up
url: /openphoto-trovebox/
external: false
# http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
timezone: America/Los_Angeles
......
......@@ -10,7 +10,7 @@
{% endif %}
</li>
{% endfor %}
<li><a href="{{ site.url }}/feed.xml" title="Atom/RSS feed"><i class="icon-rss"></i> Feed</a></li>
<!--<li><a href="{{ site.url }}/feed.xml" title="Atom/RSS feed"><i class="icon-rss"></i> Feed</a></li>-->
{% if site.search %}<li class="dosearch"><i class="icon-search"></i> Search</li>{% endif %}
</ul>
</nav>
......@@ -26,19 +26,26 @@
</div><!-- /.search-form -->
</div><!-- ./search-wrapper -->{% endif %}
{% if page.image.feature %}<header class="masthead">
{% if site.logo != null %}
<div class="wrap">
<a href="{{ site.url }}/" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated bounceInDown"></a>
</div>
{% endif %}
</header><!-- /.masthead -->
{% else %}<header class="masthead">
<div class="wrap">
{% if site.logo != null %}
<a href="{{ site.url }}/" class="site-logo" rel="home" title="{{ site.title }}"><img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated fadeInUp"></a>
<header class="masthead">
<div class="wrap">
<div class="site-logo">
{% if page.image.feature %}
{% if page.logo != null %}
<img src="{{ site.url }}/images/{{ page.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated bounceInDown page"></div>
{% else if site.logo != null %}
<img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated bounceInDown site"></a>
{% endif %}
{% else %}<header class="masthead">
{% if page.logo != null %}
<img src="{{ site.url }}/images/{{ page.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated fadeInUp page">
{% else if site.logo != null %}
<img src="{{ site.url }}/images/{{ site.logo }}" width="200" height="200" alt="{{ site.title }} logo" class="animated fadeInUp site">
{% endif %}
<h1 class="site-title animated fadeIn"><a href="{{ site.url }}/">{{ site.title }}</a></h1>
<h2 class="site-description animated fadeIn" itemprop="description">{{ site.description }}</h2>
</div>
</header><!-- /.masthead -->{% endif %}
{% endif %}
</div>
{% if page.layout == 'page' %}
<h1 class="site-title animated fadeIn"><a href="{{ site.url }}/">{{ page.title or site.title }}</a></h1>
<h2 class="site-description animated fadeIn" itemprop="description">{{ page.description or site.description }}</h2>
{% endif %}
</div>
</header><!-- /.masthead -->
......@@ -13,11 +13,18 @@
<div id="main" role="main">
<article class="entry">
{% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}" {% if site.logo == null %}style="margin-top:0;"{% endif %}>{% if page.image.credit %}<p class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a>{% endif %}{% endif %}
{% if page.image.feature %}
<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}" {% if site.logo == null %}style="margin-top:0;"{% endif %}>
{% if page.image.credit %}
<p class="image-credit">Photo Credit: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a>
{% endif %}
{% endif %}
<div class="entry-wrapper">
<header class="entry-header">
<h1 class="entry-title">{% if page.headline %}{{ page.headline }}{% else %}{{ page.title }}</h1>{% endif %}
</header>
{% if page.skipheader != true %}
<header class="entry-header">
<h1 class="entry-title">{% if page.headline %}{{ page.headline }}{% else %}{{ page.title }}</h1>{% endif %}
</header>
{% endif %}
<div class="entry-content">
{{ content }}
</div><!-- /.entry-content -->
......@@ -34,4 +41,4 @@
{% include scripts.html %}
</body>
</html>
\ No newline at end of file
</html>
......@@ -2,7 +2,8 @@
layout: post
title: "In The Beginning..."
description: "The first of many posts chronicling my journey from having an idea to selling it."
category: articles
category: openphoto-trovebox
logo: site-logo.png
#tags: [sample-post, readability, test, intro]
image:
feature: so-simple-sample-image-2.jpg
......@@ -29,12 +30,4 @@ In June of 2010 we had our son, Tavin. Life became infinitely better and busier.
I revisted the question of what to do with all these photos. It was important to us that these photos be around when Tavin was in his 20s and beyond. I realized everything was converging on being able to write software making it easy to organize and share photos without sacrificing data ownership or portability.
## <a name="kickstarter"></a>Kickstarting OpenPhoto
It was 2011 and Kickstarter was only 2 years old. The largest campaign hadn't yet broke the $1M funding level. It was also a time when Kickstarter had to approve which project could launch a crowdfunding campaign on their site. Fortunately they picked an idea I submitted.
I launched my [Kickstarter campaign for OpenPhoto](https://www.kickstarter.com/projects/jmathai/openphoto-a-photo-service-for-your-s3-or-dropbox-a) on July 1<sup>st</sup> of 2011. It was an intense 30 days that didn't follow the typical inverted bell curve of funding that most Kickstarter campaigns do. Instead I received a big boost in the middle of the 30 day campaign when [Techcrunch covered OpenPhoto](http://techcrunch.com/2011/06/29/former-yahoo-engineer-quits-to-build-a-flickr-killer-on-kickstarter/).
By the end of the campaign I crossed my funding goal by raising $25,242 of my $25,000 goal. The successful funding from Kickstarter helped validate not only that people were interested in OpenPhoto but that they were willing to pay for it.
After celebrating I realized that the real work was still ahead of me...
The seeds for OpenPhoto had been planted.
---
layout: post
title: "Testing Readability with a Bunch of Text"
description: "A ton of text to test readability."
category: articles
tags: [sample-post, readability, test, intro]
image:
feature: so-simple-sample-image-2.jpg
credit: Michael Rose
creditlink: http://mademistakes.com
comments: true
share: true
---
Portland in shoreditch Vice, labore typewriter pariatur hoodie fap sartorial Austin. Pinterest literally occupy Schlitz forage. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.
Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies.
## Cupidatat 90's lo-fi authentic try-hard
In pug Portland incididunt mlkshk put a bird on it vinyl quinoa. Terry Richardson shabby chic +1, scenester Tonx excepteur tempor fugiat voluptate fingerstache aliquip nisi next level. Farm-to-table hashtag Truffaut, Odd Future ex meggings gentrify single-origin coffee try-hard 90's.
* Sartorial hoodie
* Labore viral forage
* Tote bag selvage
* DIY exercitation et id ugh tumblr church-key
Incididunt umami sriracha, ethical fugiat VHS ex assumenda yr irure direct trade. Marfa Truffaut bicycle rights, kitsch placeat Etsy kogi asymmetrical. Beard locavore flexitarian, kitsch photo booth hoodie plaid ethical readymade leggings yr.
Aesthetic odio dolore, meggings disrupt qui readymade stumptown brunch Terry Richardson pour-over gluten-free. Banksy american apparel in selfies, biodiesel flexitarian organic meh wolf quinoa gentrify banjo kogi. Readymade tofu ex, scenester dolor umami fingerstache occaecat fashion axe Carles jean shorts minim. Keffiyeh fashion axe nisi Godard mlkshk dolore. Lomo you probably haven't heard of them eu non, Odd Future Truffaut pug keytar meggings McSweeney's Pinterest cred. Etsy literally aute esse, eu bicycle rights qui meggings fanny pack. Gentrify leggings pug flannel duis.
## Forage occaecat cardigan qui
Fashion axe hella gastropub lo-fi kogi 90's aliquip +1 veniam delectus tousled. Cred sriracha locavore gastropub kale chips, iPhone mollit sartorial. Anim dolore 8-bit, pork belly dolor photo booth aute flannel small batch. Dolor disrupt ennui, tattooed whatever salvia Banksy sartorial roof party selfies raw denim sint meh pour-over. Ennui eu cardigan sint, gentrify iPhone cornhole.
> Whatever velit occaecat quis deserunt gastropub, leggings elit tousled roof party 3 wolf moon kogi pug blue bottle ea. Fashion axe shabby chic Austin quinoa pickled laborum bitters next level, disrupt deep v accusamus non fingerstache.
Tote bag asymmetrical elit sunt. Occaecat authentic Marfa, hella McSweeney's next level irure veniam master cleanse. Sed hoodie letterpress artisan wolf leggings, 3 wolf moon commodo ullamco. Anim occupy ea labore Terry Richardson. Tofu ex master cleanse in whatever pitchfork banh mi, occupy fugiat fanny pack Austin authentic. Magna fugiat 3 wolf moon, labore McSweeney's sustainable vero consectetur. Gluten-free disrupt enim, aesthetic fugiat jean shorts trust fund keffiyeh magna try-hard.
## Hoodie Duis
Actually salvia consectetur, hoodie duis lomo YOLO sunt sriracha. Aute pop-up brunch farm-to-table odio, salvia irure occaecat. Sriracha small batch literally skateboard. Echo Park nihil hoodie, aliquip forage artisan laboris. Trust fund reprehenderit nulla locavore. Stumptown raw denim kitsch, keffiyeh nulla twee dreamcatcher fanny pack ullamco 90's pop-up est culpa farm-to-table. Selfies 8-bit do pug odio.
### Thundercats Ho!
Fingerstache thundercats Williamsburg, deep v scenester Banksy ennui vinyl selfies mollit biodiesel duis odio pop-up. Banksy 3 wolf moon try-hard, sapiente enim stumptown deep v ad letterpress. Squid beard brunch, exercitation raw denim yr sint direct trade. Raw denim narwhal id, flannel DIY McSweeney's seitan. Letterpress artisan bespoke accusamus, meggings laboris consequat Truffaut qui in seitan. Sustainable cornhole Schlitz, twee Cosby sweater banh mi deep v forage letterpress flannel whatever keffiyeh. Sartorial cred irure, semiotics ethical sed blue bottle nihil letterpress.
Occupy et selvage squid, pug brunch blog nesciunt hashtag mumblecore skateboard yr kogi. Ugh small batch swag four loko. Fap post-ironic qui tote bag farm-to-table american apparel scenester keffiyeh vero, swag non pour-over gentrify authentic pitchfork. Schlitz scenester lo-fi voluptate, tote bag irony bicycle rights pariatur vero Vice freegan wayfarers exercitation nisi shoreditch. Chambray tofu vero sed. Street art swag literally leggings, Cosby sweater mixtape PBR lomo Banksy non in pitchfork ennui McSweeney's selfies. Odd Future Banksy non authentic.
Aliquip enim artisan dolor post-ironic. Pug tote bag Marfa, deserunt pour-over Portland wolf eu odio intelligentsia american apparel ugh ea. Sunt viral et, 3 wolf moon gastropub pug id. Id fashion axe est typewriter, mlkshk Portland art party aute brunch. Sint pork belly Cosby sweater, deep v mumblecore kitsch american apparel. Try-hard direct trade tumblr sint skateboard. Adipisicing bitters excepteur biodiesel, pickled gastropub aute veniam.
\ No newline at end of file
......@@ -2,7 +2,8 @@
layout: post
title: "The Road To Funding"
description: "Our path to fundraising took many detours and caused a lot more stress than I imagined."
category: articles
category: openphoto-trovebox
logo: site-logo.png
#tags: [sample-post, readability, test, intro]
image:
feature: so-simple-sample-image-2.jpg
......@@ -20,7 +21,15 @@ I remember telling Rachel when I left my job in May that I'd go no longer than 6
Determined to close a round of funding by the end of 2012 I warmed up leads and had a spreadsheet of a couple dozen angel investors I knew by 1 or 2 degrees of separation. I probably still have that spreadsheet laying around; it'd be fun to dig up.
The [Kickstarter funding](../openphoto/#kickstarter) wasn't a proper angel or seed round but I knew it would help. The exposure from Kickstarter [helped get us accepted by Mozilla into their WebFWD accelerator](http://blog.webfwd.org/post/9300091721/webfwd-welcomes-the-first-fellows). WebFWD didn't include any funding but legitimized us a little bit more and we got access to some great mentors and investors.
## Kickstarting OpenPhoto
It was 2011 and Kickstarter was only 2 years old. The largest campaign hadn't yet broke the $1M funding level. It was also a time when Kickstarter had to approve which project could launch a crowdfunding campaign on their site. Fortunately they picked an idea I submitted.
I launched my [Kickstarter campaign for OpenPhoto](https://www.kickstarter.com/projects/jmathai/openphoto-a-photo-service-for-your-s3-or-dropbox-a) on July 1<sup>st</sup> of 2011. It was an intense 30 days that didn't follow the typical inverted bell curve of funding that most Kickstarter campaigns do. Instead I received a big boost in the middle of the 30 day campaign when [Techcrunch covered OpenPhoto](http://techcrunch.com/2011/06/29/former-yahoo-engineer-quits-to-build-a-flickr-killer-on-kickstarter/).
By the end of the campaign I crossed my funding goal by raising $25,242 of my $25,000 goal. The successful funding from Kickstarter helped validate not only that people were interested in OpenPhoto but that they were willing to pay for it.
The Kickstarter funding wasn't a proper angel or seed round but I knew it would help. The exposure from Kickstarter [helped get us accepted by Mozilla into their WebFWD accelerator](http://blog.webfwd.org/post/9300091721/webfwd-welcomes-the-first-fellows). WebFWD didn't include any funding but legitimized us a little bit more and we got access to some great mentors and investors.
It was time to turn that into a successful angel round.
......@@ -28,6 +37,8 @@ It was time to turn that into a successful angel round.
Between October and March we talked with numerous angel investors while also pitching Kapoor Ventures and Khosla Ventures amoung others. I knew the pitches weren't going well. If an investor is interested, you'll know. I knew anything else meant there wasn't chemistry.
> "I have reviewed the idea and the material with [partner] and our team, and we’ve decided it’s not a fit for [firm]." -- one of the VC firms we pitched
When fundraising it's vital not to take rejection personally or as a sign you won't get funding elsewhere. This is one of the most difficult parts of fundraising. I had prepared for maximum rejection and it was paying off; the rejection didn't phase me.
2012 came to an end and I was faced with a decision and an unfulfilled promise I made to Rachel. I experienced something at that time which would be a recurring theme over the next 3 years; Rachel's unflinching support.
......
---
layout: post
title: "A Post with Images"
description: "Examples and code for displaying images in posts."
category: articles
tags: [sample-post, images, test]
comments: true
share: true
---
Here are some examples of what a post with images might look like. If you want to display two or three images next to each other responsively use `figure` with the appropriate `class`. Each instance of `figure` is auto-numbered and displayed in the caption.
## Figures (for images or video)
### One Up
<figure>
<a href="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_b.jpg"><img src="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_c.jpg" alt="image"></a>
<figcaption><a href="http://www.flickr.com/photos/80901381@N04/7758832526/" title="Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr">Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr</a>.</figcaption>
</figure>
### Two Up
Apply the `half` class like so to display two images side by side that share the same caption.
{% highlight html %}
<figure class="half">
<img src="/images/image-filename-1.jpg" alt="image">
<img src="/images/image-filename-2.jpg" alt="image">
<figcaption>Caption describing these two images.</figcaption>
</figure>
{% endhighlight %}
And you'll get something that looks like this:
<figure class="half">
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<img src="http://placehold.it/600x300.jpg" alt="image">
<img src="http://placehold.it/600x300.jpg" alt="image">
<figcaption>Two images.</figcaption>
</figure>
### Three Up
Apply the `third` class like so to display three images side by side that share the same caption.
{% highlight html %}
<figure class="third">
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<figcaption>Caption describing these three images.</figcaption>
</figure>
{% endhighlight %}
And you'll get something that looks like this:
<figure class="third">
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt="image"></a>
<figcaption>Three images.</figcaption>
</figure>
\ No newline at end of file
---
layout: post
title: "Post with Large Feature Image and Text"
description: "Custom written post descriptions are the way to go... if you're not lazy."
category: articles
tags: [sample-post, readability]
modified: 2013-06-30
image:
feature: so-simple-sample-image-3.jpg
credit: Michael Rose
creditlink: http://mademistakes.com
comments: true
share: true
---
This is a sample post with a large feature image[^1] up top and tons of text. Odio ad blue bottle vinyl, 90's narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney's. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.
Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies.
## Cupidatat 90's lo-fi authentic try-hard
In pug Portland incididunt mlkshk put a bird on it vinyl quinoa. Terry Richardson shabby chic +1, scenester Tonx excepteur tempor fugiat voluptate fingerstache aliquip nisi next level. Farm-to-table hashtag Truffaut, Odd Future ex meggings gentrify single-origin coffee try-hard 90's.
* Sartorial hoodie
* Labore viral forage
* Tote bag selvage
* DIY exercitation et id ugh tumblr church-key
Incididunt umami sriracha, ethical fugiat VHS ex assumenda yr irure direct trade. Marfa Truffaut bicycle rights, kitsch placeat Etsy kogi asymmetrical. Beard locavore flexitarian, kitsch photo booth hoodie plaid ethical readymade leggings yr.
Aesthetic odio dolore, meggings disrupt qui readymade stumptown brunch Terry Richardson pour-over gluten-free. Banksy american apparel in selfies, biodiesel flexitarian organic meh wolf quinoa gentrify banjo kogi. Readymade tofu ex, scenester dolor umami fingerstache occaecat fashion axe Carles jean shorts minim. Keffiyeh fashion axe nisi Godard mlkshk dolore. Lomo you probably haven't heard of them eu non, Odd Future Truffaut pug keytar meggings McSweeney's Pinterest cred. Etsy literally aute esse, eu bicycle rights qui meggings fanny pack. Gentrify leggings pug flannel duis.
## Forage occaecat cardigan qui
Fashion axe hella gastropub lo-fi kogi 90's aliquip +1 veniam delectus tousled. Cred sriracha locavore gastropub kale chips, iPhone mollit sartorial. Anim dolore 8-bit, pork belly dolor photo booth aute flannel small batch. Dolor disrupt ennui, tattooed whatever salvia Banksy sartorial roof party selfies raw denim sint meh pour-over. Ennui eu cardigan sint, gentrify iPhone cornhole.
> Whatever velit occaecat quis deserunt gastropub, leggings elit tousled roof party 3 wolf moon kogi pug blue bottle ea. Fashion axe shabby chic Austin quinoa pickled laborum bitters next level, disrupt deep v accusamus non fingerstache.
Tote bag asymmetrical elit sunt. Occaecat authentic Marfa, hella McSweeney's next level irure veniam master cleanse. Sed hoodie letterpress artisan wolf leggings, 3 wolf moon commodo ullamco. Anim occupy ea labore Terry Richardson. Tofu ex master cleanse in whatever pitchfork banh mi, occupy fugiat fanny pack Austin authentic. Magna fugiat 3 wolf moon, labore McSweeney's sustainable vero consectetur. Gluten-free disrupt enim, aesthetic fugiat jean shorts trust fund keffiyeh magna try-hard.
## Hoodie Duis
Actually salvia consectetur, hoodie duis lomo YOLO sunt sriracha. Aute pop-up brunch farm-to-table odio, salvia irure occaecat. Sriracha small batch literally skateboard. Echo Park nihil hoodie, aliquip forage artisan laboris. Trust fund reprehenderit nulla locavore. Stumptown raw denim kitsch, keffiyeh nulla twee dreamcatcher fanny pack ullamco 90's pop-up est culpa farm-to-table. Selfies 8-bit do pug odio.
### Thundercats Ho!
Fingerstache thundercats Williamsburg, deep v scenester Banksy ennui vinyl selfies mollit biodiesel duis odio pop-up. Banksy 3 wolf moon try-hard, sapiente enim stumptown deep v ad letterpress. Squid beard brunch, exercitation raw denim yr sint direct trade. Raw denim narwhal id, flannel DIY McSweeney's seitan. Letterpress artisan bespoke accusamus, meggings laboris consequat Truffaut qui in seitan. Sustainable cornhole Schlitz, twee Cosby sweater banh mi deep v forage letterpress flannel whatever keffiyeh. Sartorial cred irure, semiotics ethical sed blue bottle nihil letterpress.
Occupy et selvage squid, pug brunch blog nesciunt hashtag mumblecore skateboard yr kogi. Ugh small batch swag four loko. Fap post-ironic qui tote bag farm-to-table american apparel scenester keffiyeh vero, swag non pour-over gentrify authentic pitchfork. Schlitz scenester lo-fi voluptate, tote bag irony bicycle rights pariatur vero Vice freegan wayfarers exercitation nisi shoreditch. Chambray tofu vero sed. Street art swag literally leggings, Cosby sweater mixtape PBR lomo Banksy non in pitchfork ennui McSweeney's selfies. Odd Future Banksy non authentic.
Aliquip enim artisan dolor post-ironic. Pug tote bag Marfa, deserunt pour-over Portland wolf eu odio intelligentsia american apparel ugh ea. Sunt viral et, 3 wolf moon gastropub pug id. Id fashion axe est typewriter, mlkshk Portland art party aute brunch. Sint pork belly Cosby sweater, deep v mumblecore kitsch american apparel. Try-hard direct trade tumblr sint skateboard. Adipisicing bitters excepteur biodiesel, pickled gastropub aute veniam.
\ No newline at end of file
---
layout: post
title: "A Post with a Video"
description: "Custom written post descriptions are the way to go... if you're not lazy."
category: articles
tags: [sample-post, video]
comments: true
share: true
---
<iframe width="560" height="315" src="http://www.youtube.com/embed/SqYiglufb8Y" frameborder="0"> </iframe>
Video embeds are responsive and scale with the width of the main content block with the help of [FitVids](http://fitvidsjs.com/).
Not sure if this only effects Kramdown or if it's an issue with Markdown in general. But adding YouTube video embeds causes errors when building your Jekyll site. To fix add a space between the `<iframe>` tags and remove `allowfullscreen`. Example below:
{% highlight html %}
<iframe width="560" height="315" src="http://www.youtube.com/embed/PWf4WUoMXwg" frameborder="0"> </iframe>
{% endhighlight %}
\ No newline at end of file
---
layout: post
title: "Sample Link Post"
description: "Example and code for using link posts."
category: articles
tags: [sample-post, link-post]
comments: true
link: http://mademistakes.com
---
So Simple Theme now supports **link posts**, made famous by John Gruber. To activate just add `link: http://url-you-want-linked` to the post's YAML front matter and you're done.
\ No newline at end of file
---
layout: post
title: Syntax Highlighting Post
description: "Demo post displaying the various ways of highlighting code in Markdown."
category: articles
tags: [sample-post, code, highlighting]
image:
feature: so-simple-sample-image-5.jpg
credit: Michael Rose
creditlink: http://mademistakes.com
comments: true
share: true
---
Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.[^1]
[^1]: <http://en.wikipedia.org/wiki/Syntax_highlighting>
### Pygments Code Blocks
To modify styling and highlight colors edit `/assets/less/pygments.less` and compile `main.less` with your favorite preprocessor. Or edit `main.css` if that's your thing, the classes you want to modify all begin with `.highlight`.
{% highlight css %}
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
{% endhighlight %}
{% highlight html %}
{% raw %}
<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
</nav><!-- /.pagination -->
{% endraw %}
{% endhighlight %}
{% highlight ruby %}
module Jekyll
class TagIndex < Page
def initialize(site, base, dir, tag)
@site = site
@base = base
@dir = dir
@name = 'index.html'
self.process(@name)
self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
self.data['tag'] = tag
tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
self.data['title'] = "#{tag_title_prefix}#{tag}"
self.data['description'] = "An archive of posts tagged #{tag}."
end
end
end
{% endhighlight %}
### Standard Code Block
{% raw %}
<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
</nav><!-- /.pagination -->
{% endraw %}
### Fenced Code Blocks
To modify styling and highlight colors edit `/assets/less/coderay.less` and compile `main.less` with your favorite preprocessor. Or edit `main.css` if that's your thing, the classes you want to modify all begin with `.coderay`. Line numbers and a few other things can be modified in `_config.yml` under `coderay`.
~~~ css
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
~~~
~~~ html
{% raw %}<nav class="pagination" role="navigation">
{% if page.previous %}
<a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
{% endif %}
{% if page.next %}
<a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
{% endif %}
</nav><!-- /.pagination -->{% endraw %}
~~~
~~~ ruby
module Jekyll
class TagIndex < Page
def initialize(site, base, dir, tag)
@site = site
@base = base
@dir = dir
@name = 'index.html'
self.process(@name)
self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
self.data['tag'] = tag
tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
self.data['title'] = "#{tag_title_prefix}#{tag}"
self.data['description'] = "An archive of posts tagged #{tag}."
end
end
end
~~~
\ No newline at end of file
---
layout: post
title: "Override Author Byline Test Post"
description: "An article to test overriding the default site author."
category: articles
tags: [sample-post, readability, test]
author:
name: Billy Rick
avatar: bio-photo-alt.jpg
comments: true
share: true
---
For those of you who may have content written by multiple authors on your site, here's a new feature I added to So Simple.
Traditionally you would assign a global author for the entire site and those attributes would be used in all post bylines, social networking links in the footer, Twitter Cards, and Google Authorship. These `owner` variables still work the same way when set in your `config.yml`, but now if you add an author variable to a post's YAML front matter, you can override a post's author byline.
Let's say we have an author Billy Rick --- he wrote this post and we want his name and photo to appear on the page instead of whoever the default site author is. To do so we'd add the following YAML front matter.
{% highlight yaml %}
author:
name: Billy Rick
avatar: billy-photo.jpg #place in /images
twitter: billyrick #marked as a creator for Twitter Card links
{% endhighlight %}
......@@ -2,7 +2,7 @@
layout: page
permalink: /about/
title: About the Jekyll Theme
tags: [Jekyll, theme, simple, minimal, minimalism, responsive]
#tags: [Jekyll, theme, simple, minimal, minimalism, responsive]
modified: 2013-09-13
image:
feature: so-simple-sample-image-4.jpg
......@@ -30,4 +30,4 @@ Looking for a simple, responsive, theme for your Jekyll powered blog? Well look
<a markdown="0" href="{{ site.url }}/theme-setup" class="btn">Install Minimal Mistakes Theme</a>
[^1]: Example: *domain.com/category-name/post-title*
\ No newline at end of file
[^1]: Example: *domain.com/category-name/post-title*
......@@ -112,6 +112,9 @@ body {
}
.site-logo {
img {
&.site {
border-radius: 50%;
}
width: 100px;
height: 100px;
-webkit-animation-duration: 1s;
......
---
layout: page
title: Latest Posts
description: "A simple and clean responsive Jekyll theme for words and photos."
tags: [Jekyll, theme, themes, responsive, blog, minimalism]
skipheader: true
title: This is where I keep my website.
description:
---
<ul class="post-list">
{% for post in site.posts reversed %}
<li><article><a href="{{ site.url }}{{ post.url }}">{{ post.title }} <span class="entry-date"><time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %d, %Y" }}</time></span></a></article></li>
{% endfor %}
</ul>
---
layout: page
permalink: /openphoto-trovebox/
logo: site-logo.png
skipheader: true
title: The Story of OpenPhoto / Trovebox
description: Documenting my 3 year startup journey founding OpenPhoto / Trovebox.
#tags: [Jekyll, theme, themes, responsive, blog, minimalism]
---
<ul class="post-list">
{% for post in site.posts reversed %}
<li><article><a href="{{ site.url }}{{ post.url }}">{{ post.title }} <span class="entry-date"><time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %d, %Y" }}</time></span></a></article></li>
{% endfor %}
</ul>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment