jonathanfalkner

/* "Pure" CSS Menu (minimal JS added to "lock" menu open for larger viewscreens and to remove noJS class - gracefully degrades to standard summary/details functionality) */
@keyframes slideDown1 {
	0% { height: 0; }
	100% { height: 1em; }
}
@keyframes slideDown2 {
	0% { height: 0; }
	100% { height: 2em;	}
}
@keyframes slideDown3 {

jonathanfalkner

/**
 * CSS Menu based on radio buttons, labels, html5 nav elements (working) 
 */
* { 
	margin:0px;
	padding:0px;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box; }

jonathanfalkner

/**
 * CSS Menu based on radio buttons, labels, html5 nav elements, 
 */
* { 
	margin:0px;
	padding:0px;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box; }

jonathanfalkner

/**
 * responsive grid
 */

* { margin:0px; padding:0px; box-sizing: border-box; }
div{
    height:25px;
}
ul{
	list-style:none;

jonathanfalkner

/**
 * responsive grid
 */

* { margin:0px; padding:0px; box-sizing: border-box; }
div{
    height:25px;
}
#gridcontainer{
	width: 100%; max-width:960px;

jonathanfalkner

/**
 * responsive grid
 */

* { margin:0px; padding:0px; box-sizing: border-box; }
div{
    height:25px;
}
#gridcontainer{
	width: 100%; max-width:960px;

jonathanfalkner

/**
 * patterned linear gradients
 */

background:
linear-gradient(27deg, #EEEEEE 4px, transparent 4px) 0 4px,
linear-gradient(207deg, #EEEEEE 4px, transparent 4px) 8px 0px,
linear-gradient(27deg, #FEFCFE 4px, transparent 4px) 0px 8px,
linear-gradient(207deg, #FEFCFE 4px, transparent 4px) 8px 5px,
linear-gradient(90deg, #EBEBEB 8px, transparent 8px),

jonathanfalkner

/**
 * Butterfly effect
 */
 
* { padding:0; margin:0; }
div { 
width:100%; height:100%; min-height:500px; margin:0px; padding:0px;
background:
linear-gradient(45deg, #EEEEEE 8px, transparent 4px) 4px 0px,
linear-gradient(-45deg, #EEEEEE 4px, transparent 0px) 8px 4px,

jonathanfalkner

/**
 * Sawtoothed header
 */
body{
border-top:38px solid #FAFCFC;
width:100%;
height:100%
position:absolute;
background-color:black;
}

jonathanfalkner

/**
 * Navigataur test
 */
/*
 	Notes:
 
 	- Media queries should be edited in both style sections if you require 
	  a different breakpoint for your navigation.
	  
	- Toggle class & menu anchor tags in list items have box-sizing: border-box