pibby’s gists

pibby / JS: Smooth Scroll Hashed Links

Last active December 23, 2015 13:19

JS: Smooth scroll from links with hashed href with fixed header

	// Smooth scrolling of hashed links (#id)
	$('a[href*=#]:not([href=#])').click(function() {
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
	\|\| location.hostname == this.hostname) {

	var target = $(this.hash);
	target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
	if (target.length) {
	$('html,body').animate({
	scrollTop: target.offset().top - 20

pibby / JS: Highlight current menu item on fixed nav as user scrolls

Last active May 29, 2018 15:05

JS: Highlight current menu item on fixed nav as user scrolls

	// Highlight current page menu item as user scrolls
	var lastId,
	pageMenu = $(".nav"),
	pageMenuHeight = pageMenu.outerHeight() + 126,
	// All list items
	menuItems = pageMenu.find("a"),
	// Anchors corresponding to menu items
	scrollItems = menuItems.map(function(){
	var item = $($(this).attr("href"));
	if (item.length) { return item; }

pibby / JS: Convert navigation to select dropdown on mobile

Created September 20, 2013 18:37

JS: Convert navigation to select dropdown on mobile

pibby / jekyll-bash-new-post

Last active May 16, 2021 23:16

This bash script will setup a new Jekyll blog post in Markdown and open it for editing in Sublime Text 2

	#!/bin/bash
	# Katie Harron - @pibby
	# This bash script will setup a new Jekyll blog post in Markdown and open it for editing in Sublime Text 2

	echo "Post Title: "
	read title
	echo "Post Description: "
	read desc
	echo "Post Tags: "
	read tags

pibby / Preferences.sublime-settings

Created October 11, 2013 23:50

My Sublime Text User Preferences

	{
	"auto_complete": true,
	"auto_complete_commit_on_tab": true,
	"auto_indent": true,
	"auto_match_enabled": true,
	"bold_folder_labels": true,
	"caret_style": "smooth",
	"color_scheme": "Packages/User/Flatland Dark.tmTheme",
	"detect_indentation": true,
	"draw_minimap_border": true,

pibby / new-project.sh

Created December 5, 2013 00:08

This bash script will ask for a Project Name and Directory name to create in Sites folder, clone my boilerplate repo, create a README with the project name and date this script was run, and open the directory in Sublime Text 2 (save as a project once opened)

	#!/bin/bash
	# Katie Harron - @pibby
	# This bash script will ask for a Project Name and Directory name to create in Sites folder, clone my boilerplate repo, create a README with the project name and date this script was run, and open the directory in Sublime Text 2 (save as a project once opened)

	echo "Project name: "
	read name
	echo "Project directory in ~/Sites: "
	read directory

	created=`date +%Y-%m-%d` # create date as Year-Month-Date

pibby / rem-mixins-margin-padding.less

Last active January 1, 2016 00:19

LESS CSS mixins for margin and padding in rem units with pixel fallback

	// This assumes that the font-size on your <html> is 100% (1rem = 16px)
	@font-size: 16;

	// Margin mixin - enter pixel values in order: margin-top, margin-right, margin-bottom, margin-left
	// Usage: .mar(10, 30, 15, 20);
	.mar(@mt: 0; @mr: 0; @mb: 0; @ml: 0;) {
	@mtv: @mt / @font-size;
	@mrv: @mr / @font-size;
	@mbv: @mb / @font-size;
	@mlv: @ml / @font-size;

pibby / dotfiles.sh

Created February 18, 2014 01:55

Dotfiles backup on Linux

	#!/bin/sh
	## Backup dotfiles and commit to git
	## by Katie Harron - @pibby

	date=`date "+%Y-%m-%d %H:%M:%S"`
	dest=~/dotfiles

	cd ~
	cp -r .fluxbox/ $dest/fluxbox/
	cp -r .irssi/ $dest/irssi/

pibby / screencap-responsive-firefox

Last active August 29, 2015 13:57

Using watir-webdriver, take screenshots in Firefox of a responsive website entered by the user at different breakpoints

	#!/usr/bin/ruby
	# Katie Harron - @pibby
	# Use Firefox to take screen captures of a responsive website at multiple breakpoints, ask the user to input the URL

	require 'watir-webdriver'

	puts "Enter URL to capture: "
	site = gets.chomp()

	mq = [320,480,640,768,1024,1280,1440]

pibby / screencap-responsive-local-safari

Last active August 29, 2015 13:57

Using selenium, take screenshots in Safari of a responsive website running on a local python simple server at different breakpoints

	#!/usr/bin/ruby
	# Katie Harron - @pibby

	require 'selenium-webdriver'

	mq = [320,480,640,768,1024,1280,1440]

	driver = Selenium::WebDriver.for :safari
	driver.get 'http://localhost:8000'

	// Convert page navigation to dropdown menu on smaller screens
	$(function() {
	$("<select />").appendTo("#navigation .wrapper");

	$("<option />",
	{
	"selected": "selected",
	"value" : "",
	"text" : "Page Menu" // default <option> to display in dropdown

Katie Harron pibby