BeerSearch.css

/*
*
*
*
In this stylesheet items are broken down into section, and within sections
 generally are in the approximate order they appear in the html (after the api calls)

Sections include:
	General CSS;
	One of a kind items;
	Cards and contents of cards;
	Media Queries
*
*
*
*/





/*
*
*
*
General CSS
*
*
*
*/
:root{
	--site-bg :#ffddc0;
	--page-bg: #f0dddd;
	--page-border : #a74;
	--page-border-shadow : #a74;
	--background-tab: #fdc;
	--button-bg: #a74;
	--button-txt: #fff9f9;
	--button-border : #963;
	--button-click : #a9723d;
	--button-shadow : #aa9090;
	--card-bg : #fff0f0;
}


.card,.subcard, .card_image_holder, .card_image, .card_text_holder, 
.favorite_checkbox, .favorite_icon, .card_description{
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

*{
	transition: opacity 1s, border-width .3s, height .3s, width .3s, margin .3s, transform .1s;
	webkit-transition: opacity 1s, border-width .3s, height .3s, width .3s, margin .3s;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

button{
	color:var(--button-txt);
	background:var(--button-bg);
	font-size:16px;
	border: 1px solid var(--button-border);
	border-radius:5px;
	border-bottom: none;
	padding:5px 15px;
	outline:none;
	box-shadow: 0 3px var(--button-shadow);
	transition-property: all 0s, color .2s;
}

button:active{
	box-shadow: 0 1px grey;
	transform: translateY(2px);
	background:var(--button-click);
}


*{
	font-family: 'Nunito', sans-serif;
}

.tab, h2, button, h1, header>div>p {
	font-family: 'Fjalla One', sans-serif;
}

/*
*
*
*
One of a kind items
*
*
*
*/

body{
	background:var(--site-bg);
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

header{
	text-align: center;
}

h1{
	margin-bottom: 0px;
	margin-top:25px;
	text-align: center;
}

header > div{
	display: flex;
	justify-content: center;
}

header > div > p{
	font-size: 18px;
	margin-bottom: 35px;
	border-bottom: 1px solid #333;
	max-width: 4000px;
}

#search_bar_input{
	width:60%;
	padding:5px 10px;
	box-shadow:none;
	font-size: 14px;
	color:#555;
}

#sections{
	display: flex;
	justify-content: flex-end;
	margin-top: 25px;
	margin-right:5px;
	width: 80%;
}

.tab{
	display: inline-flex;
	position: relative;
	top:2px;
	border-top: 2px solid var(--page-border);
	border-left: 2px solid var(--page-border);
	border-right: 2px solid var(--page-border);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding: 7px 25px 5px 25px;
	margin: 0px;
	border-bottom: 2px solid var(--page-bg);
	background: var(--page-bg);
	transition: opacity .3s;
	opacity: .4;
	border-bottom: 2px solid var(--page-border);
}


.tab_checkbox{
	display: none;
}

.tab_checkbox:checked + .tab{
	border-bottom: none;
	opacity: 1;
	
}

#all_tab{
	
}

#favorites_tab{
	
}

#content{
	display:inline-flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	border: 2px solid var(--page-border);
	border-radius: 1px;
	background:var(--page-bg);
	box-shadow: 15px -32px 80px -32px rgba(0,0,0,0.3);
	min-height: 300px;
	width:90%;
}

#load_button{
	display: block;
	margin:auto;
	margin-top: 10px;
}

#go_to_top {
	position: fixed;
	bottom:0px;
	right:0px;
	padding: 4px 100px 100px 100px;
	transform: translateY(50%) translateX(50%) rotate(-45deg);
	font-size:16px;
	background:var(--page-border);
	border-top: 3px solid var(--button-border);
	color:var(--button-txt);
	z-index: 2;
}

#ruler{
	visibility: hidden;
}

footer{
	border-top: 1px solid var(--button-border);
	margin-top: 20px;
	padding:10px;
}

/*
*
*
*
Cards and Card contents
*
*
*
*/

.card{
	margin:20px 15px;
	background: var(--card-bg);
	display: inline-block;
	border: 2px solid var(--page-border);
	height:350px;
	opacity: 0;
	border-radius:5px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:80%;
    display: inline-flex;
    justify-content: space-around;
    align-items: flex-start;
    position: relative;
}

.subcard{
	width:100%;
	height:100%;
	padding: 0px;
	margin: 0px;
	display: inline-flex;
    justify-content: space-around;
    align-items: flex-start;
    padding-top: 45px;
}

.card.long {
	height:auto;
}

.card:hover {
	transform: scale(1.02);
	border:3px solid var(--page-border);
}


.card_image_holder{
	display: none;
}

.card_image {
	height:100%;

}

.card_text_holder{
	display: inline-block;
	text-align: right;
	max-width:175px;
	float:right;
	margin-right: 5px;
	margin-left:5px;
}


.favorite_checkbox{
	display: none;
}

.favorite_icon{
	background-image:url('unselected.png');
	background-size: 100% 100%;
	display: inline-block;
	width:35px;
	height: 35px;
	position: absolute;
	right:10px;
	top:10px;
	z-index: 1;
}

.favorite_checkbox:checked ~.favorite_icon{
	background-image:url('selected.png');
}

.card_title{
	text-align: center;
	margin:5px 0 0 0;
}

.card_description {
	display: inline-block;
	width:100%;
	text-align: center;
}





/*
*
*
*
Media Queries
*
*
*
*/

@media(min-width: 400px){
	/* Cards and elements inside cards */
	.card_image_holder{
		width:125px;
		display: inline-flex;
		text-align: center;
		height:255px;
		float:left;
		position: relative;
		margin-left:10px;
	}
	.card_text_holder{
		margin-right: 10px;
	}
}


@media (min-width:605px){
	/* Unique items */
	#content{
		width:80%;
	}
}

@media (min-width:755px){
	/* Unique items */
	#content{
		width:90%;
	}

	/* Cards and elements inside cards */
	.favorite_icon{
		width:25px;
		height: 25px;
	}
	.card{
		margin:20px 15px;
		background: var(--card-bg);
		display: inline-block;
		border: 2px solid var(--page-border);
		height:380px;
		opacity: 0;
		border-radius:5px;
		-webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
	    display: inline-flex;
	    align-items: flex-start;
	    justify-content: space-between;
		width:300px;
		height:275px;
	}
	.card_image_holder{
		width:125px;
		height:240px;
		align-items: flex-start;
	}

	.card_image {
		height:200px;
	}
	.card_text_holder{
		max-width:175px;
		padding-right: 5px;
	}
	.subcard{
		padding-top: 35px;
	}
}

@media (min-width:834px){
	/* Unique items */
	#content{
		width:90%;
	}
	/* Cards and elements inside cards */
	.card{
		width:335px;
	}
	.card_image_holder{
		width:125px;
		height:240px;
	}

	.card_image {
		height:200px;
	}
	.card_text_holder{
		max-width:175px;
	}
}