bibliogram/src/site/sass/main.sass

$layout-a-max: 820px
$layout-b-min: 821px

body
	margin: 0
	padding: 0
	font-size: 18px

.main-divider
	display: block

	@media screen and (min-width: $layout-b-min)
		display: grid
		grid-template-columns: 235px 1fr
		min-height: 100vh

.pfp
	border-radius: 50%

@mixin link-button
	color: hsl(107, 100%, 21.8%)
	background: hsl(87, 78.4%, 80%)
	padding: 12px
	border-radius: 10px
	border: 1px solid hsl(106.9, 49.8%, 46.9%)
	line-height: 1
	text-decoration: none

	&:hover
		color: hsl(106.4, 100%, 12.9%)
		background: hsl(102.1, 77.2%, 67.3%)
		border-color: hsl(104, 51.4%, 43.5%)

.profile-overview
	text-align: center
	position: relative
	line-height: 1

	@media screen and (max-width: $layout-a-max)
		border-bottom: 1px solid #333
		box-shadow: 0px -2px 4px 4px rgba(0, 0, 0, 0.4)
		padding-bottom: 25px

	@media screen and (min-width: $layout-b-min)
		border-right: 1px solid #333
		box-shadow: -2px 0px 4px 4px rgba(0, 0, 0, 0.4)

	.profile-sticky
		position: sticky
		top: 0
		height: 100vh
		box-sizing: border-box
		overflow-y: auto
		padding: 10px

		@media screen and (max-width: $layout-a-max)
			height: unset

		.pfp
			margin: 25px 0

		.full-name
			margin: 0 0 8px
			font-size: 30px

		.username
			margin: 0
			font-size: 20px
			font-weight: normal

		.profile-counter
			line-height: 1.3

			.count
				font-weight: bold

		.links
			margin-top: 20px
			display: flex
			flex-wrap: wrap
			justify-content: center

			a
				margin: 5px

		> *:last-child
			margin-bottom: 10px // because padding-bottom on parent doesn't seem to work.

.timeline
	--image-size: 260px
	$image-size: var(--image-size)
	$background: #fff4e8

	@media screen and (max-width: $layout-a-max)
		--image-size: 120px

	background-color: $background
	padding: 15px 15px 40px

	.page-number
		color: #444
		line-height: 1
		max-width: 600px
		margin: 0px auto
		padding: 20px 0px // separate margin and padding for better page hash jump locations
		text-align: center
		position: relative

		.number
			position: relative
			z-index: 1
			padding: 10px
			background-color: $background

		&::before
			position: absolute
			display: block
			content: ""
			left: 0
			right: 0
			top: 50%
			border-top: 1px solid

	.next-page-container
		margin: 20px 0px
		display: flex
		justify-content: center

		.next-page
			@include link-button
			font-size: 18px
			text-align: center

	.timeline-inner
		display: flex
		justify-content: center
		flex-wrap: wrap
		margin: 0 auto

		@mixin sized()
			width: $image-size
			height: $image-size

		.sized-link
			$margin: 5px

			margin: $margin
			color: #111
			background-color: rgba(40, 40, 40, 0.25)
			text-decoration: none
			@include sized

			&:hover
				$border-width: 3px
				margin: $margin - $border-width
				border: $border-width solid #111

			.sized-image
				@include sized

.post-page
	background-color: #6a6b71

	.post-page-divider
		display: grid
		grid-template-columns: 360px auto
		max-width: 1200px
		margin: 0 auto
		min-height: 100vh

		@media screen and (max-width: $layout-a-max)
			display: flex
			flex-direction: column


		.description-section
			display: grid
			align-items: start
			align-content: normal
			background-color: #eee
			position: sticky
			top: 0
			height: 100vh
			overflow-y: auto
			box-sizing: border-box

			@media screen and (max-width: $layout-a-max)
				position: inherit
				top: inherit
				height: inherit

			.user-header
				display: flex
				align-items: center
				justify-content: center
				background-color: #b3b3b3
				padding: 10px

				.pfp
					$size: 40px

					width: $size
					height: $size
					margin-right: 10px
					background-color: rgba(40, 40, 40, 0.25)

				.name
					font-size: 20px
					color: black
					text-decoration: none

					&:hover
						text-decoration: underline

			.description
				margin: 12px
				white-space: pre-line
				font-size: 20px
				line-height: 1.4

				@media screen and (max-width: $layout-a-max)
					font-size: 18px

		.images-gallery
			display: flex
			flex-direction: column
			align-items: center
			justify-content: center
			background-color: #262728
			padding: 10px

			@media screen and (max-width: $layout-a-max)
				flex: 1

			.sized-image
				color: #eee
				background-color: #3b3c3d
				max-height: 94vh
				max-width: 100%
				width: auto
				height: auto

				&:not(:last-child)
					margin-bottom: 10px