Vulcan/client/sass/partials/_mobile.scss

.mobile{
	display:none !important;
}
.mobile-nav{
	position:fixed;
	overflow:auto;
	width:280px;
	left:-280px;
	top:0px;
	bottom:0px;
	background:#444;
	color:white;
	@include box-shadow(inset -3px 0px 7px black(0.5));
	ul{
		li{
			border-bottom:1px white(0.1) solid;
			a{
				display:block;
				height:50px;
				padding:0 10px;
				line-height:50px;
				&:hover{
					background:$red;
					color:white;
				}
			}
		}
	}
}
.mobile-nav, .content-wrapper{
	@include single-transition(ease-out, left, 300ms, 0ms);
}
.content-wrapper{
	position:relative;

	left:0px;
}
.mobile-nav-open{
	.mobile-nav{
		left:0px;
	}
	.outer-wrapper{
		overflow:hidden;
		.content-wrapper{
			left:280px;
		}
	}
}
@media screen and (max-width: $break-small) {
	.header-button{
		position:relative;
		display:block;
		margin-top:10px;
		background:$red;
		color:white;
		height:30px;
		width:40px;
		i{
			position:absolute;
			width:100%;
			text-align:center;
			line-height:30px;
			height:30px;
			font-size:18px;
		}
	}
	.mobile{
		display:block !important;
	}
	.desktop{
		display:none !important;
	}
	.grid, .grid-small{
		width:auto;
		margin-left:0;
		margin-right:0;
		padding-left:10px;
		padding-right:10px;
		min-width:200px;
	}
	.posts{
		margin:0 10px;
		padding:0;
		.post-rank{
			display:none;
		}
	}
	.header{
		height:50px;
		@include border-radius(0px);
		.logo{
			top:0px;
			left:0px;
			font-size:22px;
			line-height:50px;
			z-index:10;
			a{
				img{
					height:auto !important;
					max-height:40px !important;
					width:auto !important;
				}
			}
			&.image{
				margin-top:-10px; //since the mobile header is 20px thinner than the normal one, take off 10px more
			}
		}
		.auth-buttons{
			z-index:100;
			margin:0;
			#login-buttons{
				display:block !important;
			}
			.login-link-and-dropdown-list{
				right:0px !important;
				position:static !important;
				#login-dropdown-list{
					right:0px !important;
					margin:0px !important;
				}
				.login-link-text{
					@extend .header-button;
					@include hide-text2;
					height:30px !important;
					margin:10px 0 0 0 !important;
					display:block !important;
					&:after{
						content: "\75" !important;
						font-family: 'icomoon' !important;
						position:absolute;
						width:100%;
						text-align:center;
						line-height:30px !important;
						height:30px !important;
						font-size:18px !important;
					}
				}
			}
		}
		.mobile-button{
			z-index:100;
			@extend .header-button;
			
			span{
				display:none;
			}
			&.menu{
				float:left;
			}
			&.submit{
				float:right;
			}
			&:hover{
				background:white;
				i{
					color:$red;
				}
			}
		}
	}
	.post{
		.post-content{
			margin-right:50px;
			margin-right:0px;
			// min-height:90px;
			.upvote-link{
				width:30px;
			}
			.post-info{
				margin-left:30px;
				padding:6px 4px 6px 8px;
			}
			.post-heading{
				.post-title{
					line-height:1.2;
					display:block;
					margin-bottom:4px;
					font-size:18px;
				}
				.post-domain{
					line-height:1;
					display:block;
					margin-bottom:4px;
					font-size:13px;
				}	
			}
			.post-meta{
				font-size:11px;
				.comments{
					// display:none;
				}
				.unit{
					font-size:0;
					&:after{
						font-size:12px;
						content:"pts ";
					}
				}
			}
		}
		.post-actions{
			display:none;
			li{
				float:none;
				a{
					height:40px;
					width:40px;
					font-size:30px;				
					i{
						display:block;
						position:absolute;
						top:0px;
						left:0px;
						width:100%;
						height:100%;
						line-height:40px;
						text-align:center;
					}
					.count{
						top:9px;
					}
					.action{
						display:none;
					}
				}
			}
		}
	}
}