bibliogram/src/site/sass/main.sass

$layout-a-max: 820px
$layout-b-min: 821px
$layout-c-max: 680px;
$layout-home-a-max: 520px
$layout-home-b-min: 521px

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

.main-divider
	display: flex
	flex-direction: column
	min-height: 100vh

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

.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

	&.disabled
		cursor: default

	&:hover:not(.disabled), &:active, &.clicked
		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
		white-space: pre-line
		overflow-wrap: break-word

		@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: 150px
		flex: 1

	@media screen and (max-width: $layout-c-max)
		--image-size: calc(33vw - 10px)

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

	&.no-posts
		display: flex
		flex-direction: column
		justify-content: center

	.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

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


		&:no-posts

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

	.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

		@media screen and (max-width: $layout-c-max)
			display: grid
			grid-template-columns: repeat(3, 1fr)
			justify-content: center
			justify-items: center

		@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
			overflow: hidden
			@include sized

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

			@media screen and (max-width: $layout-c-max)
				$margin: 2px
				margin: $margin

				&:hover
					$border-width: 2px
					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, .sized-video
				color: #eee
				background-color: #3b3c3d
				max-height: 94vh
				max-width: 100%

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

			.sized-image
				width: auto
				height: auto

			.sized-video
				width: 100%
				height: 100%

.error-page
	box-sizing: border-box
	min-height: 100vh
	background: #191919
	padding: 10px
	text-align: center
	display: flex
	flex-direction: column
	justify-content: center
	align-items: center

	a, a:visited
		color: #4a93d2

	.code, .message, .explanation, .back-link
		line-height: 1.2
		margin: 0px

	.code
		font-size: 80px
		color: #fff
		margin-bottom: 25px

	.message
		font-size: 35px
		color: #ccc

	.explanation
		line-height: 1.3
		margin-top: 10px
		font-size: 20px
		color: #bbb
		white-space: pre-line

	.back
		margin-top: 15vh
		font-size: 25px

.homepage
	$link-color: #ffb8b8

	display: flex
	flex-direction: column
	min-height: 100vh
	background-color: #bd4444
	color: #fff

	h1
		font-size: 48px
		margin: 0px

	h2
		font-size: 32px
		margin: 0px

	a, a:visited
		color: $link-color

	.banner
		padding: 0px 5px
		height: 60vh
		display: flex
		justify-content: center
		align-items: center

		.banner-image
			max-width: 100%

		@media screen and (max-width: $layout-home-a-max)
			height: 30vh

	.go-sections-container
		padding: 0px 10px 50px

		.go-sections
			max-width: 900px
			margin: 0px auto
			display: grid
			grid-gap: 10px
			grid-template-columns: repeat(2, 1fr)
			justify-items: center

			@media screen and (max-width: $layout-home-a-max)
				grid-template-columns: 1fr

			.title
				text-align: center
				margin-bottom: 20px

			.pair-entry
				display: flex

				.text, .button
					appearance: none
					-moz-appearance: none
					display: flex
					padding: 9px 8px 7px
					line-height: 1
					box-sizing: content-box
					font-size: 20px
					height: 20px
					border: 1px solid #333

				.text
					border-radius: 6px 0px 0px 6px
					border-right: none
					max-width: 230px
					width: 30vw

					@media screen and (max-width: 520px)
						width: 80vw

				.button
					border-radius: 0px 6px 6px 0px
					padding-left: 12px
					padding-right: 12px
					cursor: pointer
					background-color: #ffbebe
					color: #111

					&:hover
						background-color: #ff7c7c

	.about-container
		background-color: #6a2222
		color: #eee
		padding: 50px 20px
		flex: 1
		min-height: 60vh

		.about
			max-width: 700px
			margin: 0px auto
			line-height: 1.4
			font-size: 20px

			.example-link
				white-space: nowrap

			.link-list
				color: $link-color