JimFrenette.com | Sandbox - Responsive Sidebar

HTML

CSS

html {
	background: #ccc;
	height: 100%;
    box-sizing: border-box;
}
*, *:before, *:after {
  	box-sizing: inherit;
}
body {
	margin: 0;
}
.sidebar {
    display: none;
}
.sidebar-content {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 30px 3%;
}
aside {
	display: none;
}
@media screen and (min-width: 601px) {
	html {
	 	background: url(/sandbox/assets/image/03862_scars_800x480.jpg) no-repeat center fixed;
	    -webkit-background-size: cover;
	    -moz-background-size: cover;
	    -o-background-size: cover;
	    background-size: cover;
	}
	.sidebar {
	    display: block;
	    position: fixed;
	    top: 0;
	    left: 0;
	    background: rgba(0, 0, 0, 0.75);
	    height: 100%;
	    width: 30%;
	    min-width: 320px;
	}
	.sidebar-content {
		width: 30%;
		min-width: 320px;
		color: #fff;
	}
	aside {
		display: inline-block;
	    position: fixed;
	    right: 0;
	    bottom: 0;
		color: #fff;
		font-weight: bold;
		padding: 10px;
	}
	a {
		color: #fff;
		font-weight: bold;	
	}
}

HTML

CSS

JavaScript