Skip to content

Instantly share code, notes, and snippets.

@swosu
swosu / offscreen-text.css.scss
Created January 13, 2014 16:23
Accessible off-screen content as a SASS mixin using the technique found at http://webaim.org/techniques/css/invisiblecontent/
@mixin offscreen-text {
height: 1px;
left: -10000px;
overflow: hidden;
position: absolute;
top: auto;
width: 1px;
}
@swosu
swosu / sort-colors.rb
Last active December 30, 2015 22:29
Quick script to sort lines with hex colors by HSL.
require 'color'
lines = []
open('colors.txt') do |file|
lines = file.readlines.map(&:chomp)
end
color_sort = ->(a,b) do
color_a = Color::RGB.from_html(a[/#[A-Za-z0-9]{6}/]).to_hsl
@swosu
swosu / conventional-block-selector.xslt
Last active December 29, 2015 11:28
Splits a path on `/` and generates a list of names to find the most specific block available. Since we only care about folders, we ignore the last component of the path. This expects an index block of xhtml-blocks.
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" extension-element-prefixes="exsl str" version="1.0" xmlns:exsl="http://exslt.org/common" xmlns:str="http://exslt.org/strings">
<xsl:output encoding="utf-8" indent="yes" method="xml" version="1.0"/>
<xsl:template match="/system-index-block">
<xsl:variable name="index" select="."/>
<xsl:variable name="tokens">
<xsl:apply-templates select="calling-page/system-page/path"/>
</xsl:variable>
<xsl:variable name="matches">
@swosu
swosu / staging-toggle-bookmarklet.js
Last active December 28, 2015 19:59
A bookmarklet to switch between staging and live servers.
javascript:(function() {if (window.location.hostname == 'stage.swosu.edu') window.location = window.location.href.replace(/^http:\/\/stage.swosu.edu\/(.*)$/, function(match, $1, $2, offset, original) { return "http://www.swosu.edu/" + $1}); if (window.location.hostname == 'www.swosu.edu') window.location = window.location.href.replace(/^http:\/\/www.swosu.edu\/(.*)$/, function(match, $1, $2, offset, original) { return "http://stage.swosu.edu/" + $1});})()
@swosu
swosu / _mq-mixin.scss
Created July 26, 2013 19:08
A simple SASS mixin for media queries. $legacy must be defined. When $legacy is true, anything with no max-width is output without being wrapped in a media query, and anything with a max-width is not output. If legacy is false, the content block is wrapped with a media query.
@mixin mq($min-width: null, $max-width: null) {
@if $legacy {
@if $max-width == null {
@content;
}
} @else {
@if ($min-width and $max-width) {
@media (min-width: $min-width) and (max-width: $max-width) {
@content;
}