manbearwolf’s gists

manbearwolf / index.html

Created July 31, 2017 18:51

New Personal Website [WIP]

	<div class="vertical-menu">
	<div class="menu-close-cont">
	<svg class="menu-close" data-src="http://jonathano.com/img/close.svg"></svg>
	</div>
	<ul class="vertical-links">
	<li class="vertical-link"><a href="#">About</a></li>
	<li class="vertical-link"><a href="#">Skills</a></li>
	<li class="vertical-link"><a href="#">Work</a></li>
	<li class="vertical-link"><a href="#">Open Source</a></li>
	<li class="vertical-link"><a href="#">Contact</a></li>

manbearwolf / index.html

Created July 31, 2017 18:53

Personal Portfolio Webpage

	<!-- Navigation bar -->
	<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container-fluid">
	<!-- Brand and toggle get grouped for better mobile display-->
	<div class="nav-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>

manbearwolf / HeaderOff.js Nav (Header Navbar made of junk, padding, etc.)

Last active October 23, 2017 02:44

	/**
	* Issue: When users click on an anchor link that scrolls them up/down the page,
	* the top of the section/heading they're going to is covered by a fixed header.
	*
	* This can be fixed on a case-by-case basis in CSS, but there are many gotchas!
	* In particular, if you add a pseudoelement offset above the anchor target, it might
	* make the text above the target unselectable (b/c it covers the text up)
	*
	* This JS solution simply scrolls the user up right after they click on the anchor,
	* just enough to compensate for the fixed header. It also compensates for the initial

manbearwolf / index.html

Created August 7, 2017 20:53

Multiple PhotoSwipe galleries on pagea

	<h2>First gallery:</h2>

	<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">

	<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
	<a href="https://farm3.staticflickr.com/2567/5697107145_a4c2eaa0cd_o.jpg" itemprop="contentUrl" data-size="1024x1024">
	<img src="https://farm3.staticflickr.com/2567/5697107145_3c27ff3cd1_m.jpg" itemprop="thumbnail" alt="Image description" />
	</a>
	<figcaption itemprop="caption description">Image caption 1</figcaption>

manbearwolf / css3-box-shadow-page-curl-effect.markdown

Created August 7, 2017 21:47

CSS3 - Box Shadow: Page Curl Effect

No Javascript. Just HTML and CSS.

manbearwolf / index.slim

Last active August 7, 2017 23:33

Shadow Demo

manbearwolf / 01-before.html

Created August 14, 2017 16:32 — forked from mikeygee/01-before.html

truncate blog posts in jekyll

	<!-- using the truncate filter -->
	{% for post in site.posts limit:10 %}
	<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
	<span class="post-date">{{ post.date \| date: "%B %d, %Y" }}</span>
	{% if post.content.size > 2000 %}
	{{ post.content \| truncatewords: 300 }} <!-- bad! content gives you rendered html and you will truncate in the middle of a node -->
	<a href="{{ post.url }}">read more</a>
	{% else %}
	{{ post.content }}
	{% endif %}

manbearwolf / post excerpt.html

Last active August 14, 2017 16:46

	<!-- index.html -->
	<p class="post-excerpt">

	{% if post.content contains '<!--excerpt.start-->' and post.content contains '<!--excerpt.end-->' %}
	{{ ((post.content \| split:'<!--excerpt.start-->' \| last) \| split: '<!--excerpt.end-->' \| first) \| strip_html \| truncatewords: 20 }}
	{% else %}
	{{ post.content \| strip_html \| truncatewords: 20 }}
	{% endif %}

	</p>

manbearwolf / index.html

Created August 14, 2017 19:39

Quick Bootstrap ScrollSpy Demo

	<link href='https://fonts.googleapis.com/css?family=Share+Tech&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	<body data-spy="scroll" data-target="#side-nav">
	<div class="container">
	<div class="row">
	<div id="side-nav">
	<ul class="nav nav-list affix">
	<li><a href="#start">*Scroll Spy<br><sub>vertical height</sub></a></li>
	<li><a href="#one">N°1</a></li>
	<li><a href="#two">N°2</a></li>
	<li><a href="#three">N°3</a></li>

manbearwolf / automatic-table-of-contents.markdown

Created August 18, 2017 22:44

Automatic Table of Contents

Matt Bott manbearwolf