fauna-gql-upload/site/css/main.css

Manage your FaunaDB resources in within your project and upload them using a single command

:root{
	--dark: #2d0075;
	--light: #c9a7ff;
}
*{
	box-sizing: border-box;
}
html, body{
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	height: 100vh;
}

strong{
	font-weight: bold;
}
h1, h2, h3, h4, h5, h6{
	margin-bottom: 0;
	margin-top: 40px;
	line-height: 100%;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	color: var(--dark);
}
p{
	margin-top: 10px;
	line-height: 150%;
	font-weight: 300;
}
a{
	text-decoration: none;
	color: var(--dark);
}
li{
	margin: 10px 0;
	line-height: 150%;
}

blockquote{
	background: var(--light);
	padding: 10px 20px 10px 40px;
	margin: 0;
	border-radius: 4px;

	line-height: 150%;
	font-weight: 300;
	margin-top: 15px;
	font-size: 1rem;
}
blockquote strong{
	color: var(--dark);
}
blockquote p{
	margin: 0;
}
code{
	background: #e6e6e6;
	padding: 3px;
	border-radius: 3px;
	font-family: monospace;
	font-size: .9rem;
}

table{
	border-collapse: collapse;
}
th{
	text-align: left;
	background: #fff;
}
tr:nth-child(odd){
	background: #eee;
}
tr, td, th{
	border: 1px solid var(--light);
	padding: 10px 5px;
}
td{
	padding: 10px 5px;
}
tr, td{
	margin: 0;
}

.icon-button{
	background: none;
	border: none;
	font-size: 1rem;
	cursor: pointer;
}
.icon-button img{
	width: 1.4rem;
	width: 1.4rem;
}

body > header{
	display: none;
	padding: 1rem;
	position: fixed;
	top: 0;
	background: var(--light);
}
body > header .title{
	font-size: 1.2rem;
	margin: 0;
	margin-left: 15px;
}
body > header .social{
	margin-left: auto;
}
body > header .social a{
	margin: 0 10px;
}
body > header .social img{
	width: 26px;
	height: 26px;
}

.nav{
	box-sizing: border-box;

	position: fixed;
	width: 250px;
	height: 100%;
	top: 0;
	bottom: 0;

	background: #eee;

	display: flex;
	flex-direction: column;

	overflow-y: auto;
}
.nav header{
	margin-bottom: 20px;
}
.nav header .backburger{
	display: none;
	margin: 20px 0;
}
.nav footer{
	box-sizing: border-box;
	height: 54px;
	background: var(--light);
	width: 100%;
	padding: 0 10px 0 0;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	flex-shrink: 0;
}
.nav footer a{
	margin: 0 10px;
}
.nav footer img{
	height: 26px;
	width: 26px;
}
.nav .title{
	font-size: 1.2rem;
	color: var(--dark);
	display: block;
	text-align: center;
}
.nav .list{
	padding: 0;
	margin: 10px 15px;
	list-style: none;
	margin-bottom: auto;
}
.nav .list li{
	margin: 10px 0;
	padding: 5px;
	border-radius: 4px;
	font-weight: 600;
	color: var(--dark);
	line-height: 130%;
}
.nav .list li.active{
	/* text-decoration: underline; */
	outline: 2px solid var(--light);
}
.nav .list li ul{
	list-style: none;
	margin: 0;
	padding: 0 15px;
}
.nav .list li ul li{
	font-weight: 400;
}
.nav .list li a{
	color: inherit;
	text-decoration: none;
}
.main{
	padding: 1rem;
	width: 100%;
	max-width: 800px;
	margin-left: 300px;
	padding-bottom: 100px;
}

.dropdown.active{
	outline: none !important;
}

.dropdown-button{
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
	border: none;
	padding: 0;
	cursor: pointer;
}
.dropdown-button .chevron{
	margin-left: 5px;
	vertical-align: middle;
	transform: rotate(-90deg);
}
.dropdown.active .dropdown-button .chevron{
	transform: rotate(0deg);
}
.dropdown-button ~ .closed{
	display: none;
}

.ad-frame{
	position: fixed;
	right: 20px;
	bottom: 20px;

	background: var(--light);
}

@media only screen and (max-width: 1360px){
	.main{
		max-width: 600px;
	}
}

@media only screen and (max-width: 1130px){
	.ad-frame{
		display: none;
	}
	.main{
		margin-left: 270px;
	}
}

@media only screen and (max-width: 905px){
	body > header{
		display: block;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 1rem;
	}
	.nav{
		display: none;
		width: 100%;
	}
	.nav header{
		display: flex;
		background: var(--light);
		height: auto;
		margin-bottom: 20px;
		align-items: center;
		padding: 0 1rem;
	}
	.nav header .title{
		margin: 0;
		text-align: left;
	}
	.nav header .backburger{
		display: flex;
		margin-right: 20px;
	}
	.main{
		box-sizing: border-box;
		margin-left: 0;
		margin: auto;
		padding-top: 50px;
	}
}