// Place all the styles related to the Posts controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

@import "src/variables";

header {
	height: 30px;
	line-height: 30px;

	font-size: 2em;

	nav {
		height: 30px;
		line-height: 30px;
		& > .navbar-brand {
			justify-content: center;
			margin-left: auto;
			margin-right: auto;

			font-family: 'Ubuntu Mono', monospace;
			text-decoration: none;
			font-size: 2em;
		}
	}

}

#content {
	padding-top: 40px;

	h1.title{
		color: $blanc_immacule
	}

	.card {
		border-radius: 6px;
		overflow: hidden;
		margin: 0 auto;

		min-height: 255px;

		word-wrap: break-word;

		box-shadow: 0 0 15px 0 $hovered_shadow;

		.header {
			height: 50px;
			.avatar {
				width: 80px;
				height: 100%;
				position: relative;
				margin: 0 auto;
				img {
					display: block;
					border-radius: 50%;
					position: absolute;
					bottom: -42px;
					border: 4px solid $blanc_immacule;
				}
			}
		}
		.card-body {
			padding: 30px;
			.user-info {
				padding-top: 20px;
				.username {
					font-size: 18px;
					font-weight: 600;
				}
				.created_at {
					font-size: .8em;
					color: #787485;;
				}

				.block_code {
					background: #2f3136;
					border-radius: 5px;
					border: 2px solid $block_code--border;
					margin-top: 6px;
					padding: .5em;
					color: $block_code--color;
					font-weight: 300;
					& strong {
						font-weight: 900;
						color: $block_code--strong-color;
					}
				}
			}
		}
		.actions {
			position: absolute;
			bottom: 30px;
			left: 0;
			right: 0;
			margin-left: auto;
			margin-right: auto;
			.button {
				padding: 13px 17px;
				color: $blanc_immacule;
				border-radius: 100px;
				border-color: $bleu-violet;
				transition: opacity .2s;
				&:hover {
					opacity: 0.7;
				}
			}
		}
	}

	.user-card {
		border-radius: 10px;
		padding: 1%;
		background: $blanc_immacule;
		margin: 0 auto;

		.header {
			img {
				border-radius: 50%;
				width: 200px;
			}
			.username {
				font-size: 2em;
				font-weight: 600;
			}
		}
	}

	.subcard_action {
		font-size: 1rem;
		white-space: nowrap;
		user-select: none;

		a {
			align-items: center;
			display: flex;
			justify-content: center;
			padding: 0 .75em;
			font-size: 1.2em;
		}

		ul {
			align-items: center;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			li {
				align-items: center;
				display: flex;

				&:first-child a {
					padding-left: 0;
				}

				&+li::before {
					color: $grey-light;
					content: "|";
				}
			}
		}
	}
}