gotosocial/web/source/css/_profile-header.css

/*
	GoToSocial
	Copyright (C) GoToSocial Authors admin@gotosocial.org
	SPDX-License-Identifier: AGPL-3.0-or-later

	This program is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.

	This program is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU Affero General Public License for more details.

	You should have received a copy of the GNU Affero General Public License
	along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

.profile .profile-header {
	background: $profile-bg;
	border-radius: $br;
	margin-bottom: 1rem;
	padding-bottom: 1rem;

	/*
		Link to open media in slide
		should fill entire media wrapper.
	*/
	a.photoswipe-slide {
		display: inline-block;
		height: 100%;
		width: 100%;
		
		&:focus-visible {
			outline: $button-focus-outline;
		}
	}

	.moved-to {
		padding: 1rem;
		text-align: center;
	}

	.header-image-wrapper {
		position: relative;
		aspect-ratio: 3;
		height: 100%;
		width: 100%;
		
		img {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	/* 
		Basic info container has the user's avatar, display- and username, and role
		It's partially overlapped over the header image, by a negative margin-top.
	*/
	$avatar-size: 8.5rem;
	$name-size: 3rem;
	$username-size: 2rem;
	$overlap: calc($avatar-size - $name-size - $username-size);

	.basic-info {
		position: relative;
		display: grid;
		gap: 0 1rem;
		box-sizing: border-box;
		grid-template-columns: $avatar-size auto 1fr;
		grid-template-rows: $overlap $name-size auto;
		grid-template-areas:
			"avatar . ."
			"avatar namerole namerole"
			"avatar namerole namerole";

		/*
			Margin top to inset profile pic into
			header image, margin sides to inset
			basic info from header wrapper.
		*/
		margin: calc(-1 * $overlap) 1rem 0 1rem;

		.avatar-image-wrapper {
			grid-area: avatar;
			
			border: 0.2rem solid $avatar-border;
			border-radius: $br;
			
			/*
				Wrapper always same
				size + proportions no
				matter image inside.
			*/
			height: $avatar-size;
			width: $avatar-size;

			/*
				Offset to avoid clashing with
				thick border around avatars.
			*/
			a.photoswipe-slide:focus-visible {
				outline-offset: 0.25rem;
			}

			.avatar {
				/*
					Fit 100% of the wrapper.
				*/
				height: 100%;
				width: 100%;

				/*
					Normalize non-square images.
				*/
				object-fit: cover;

				/*
					Prevent image extending
					beyond rounded borders.
				*/
				border-radius: $br-inner;
			}
		}

		.namerole {
			grid-area: namerole;

			display: grid;
			gap: 0 1rem;
			box-sizing: border-box;
			grid-template-columns: 1fr auto;
			grid-template-rows: $name-size auto;
			grid-template-areas:
				"displayname displayname"
				"username role";

			.displayname {
				grid-area: displayname;
				line-height: $name-size;
				font-size: 1.5rem;
				font-weight: bold;
			}

			.bot-username-wrapper {
				display: flex;
				gap: 0.5rem;
				grid-area: username;
				align-items: center;
				
				.bot-legend-wrapper {
					display: flex;
					gap: 0.25rem;
					align-items: center;
					
					background: $bg;
					color: $fg;
		
					border-radius: $br;
					padding: 0.1rem 0.4rem 0.2rem 0.4rem;
					
					font-variant: small-caps;
					font-weight: bold;

					cursor: default;

					.bot-icon {
						/*
							FA icon is weirdly
							aligned so tweak it
						*/
						margin-top: 0.25rem;
					}
				}

				.username {
					min-width: 0;
					line-height: $username-size;
		
					font-size: 1rem;
					font-weight: bold;
					color: $fg-accent;
					user-select: all;
				}
			}
	
			.role {
				background: $bg;
				color: $fg;
				border: 0.13rem solid $bg;
	
				grid-area: role;
				align-self: center;
				justify-self: start;
				border-radius: $br;
				padding: 0.3rem;
				
				line-height: 1.1rem;
				font-size: 0.9rem;
				font-variant: small-caps;
				font-weight: bold;
	
				&.admin {
					color: $role-admin;
					border-color: $role-admin;
				}
	
				&.moderator {
					color: $role-mod;
					border-color: $role-mod;
				}
			}
		}
	}
}

.profile .about-user {
	flex: 35 14rem;
	border-radius: $br;
	overflow: hidden;

	.col-header {
		margin-bottom: -0.25rem;
	}

	dt {
		font-weight: bold;
	}

	.fields {
		background: $profile-bg;
		display: flex;
		flex-direction: column;
		padding: 0 0.5rem;
		padding-top: 0.25rem;

		.field {
			padding: 0.25rem;
			display: flex;
			flex-direction: column;
			border-bottom: 0.1rem solid $gray2;

			> dt, > dd {
				word-break: break-word;
			}

			&:first-child {
				border-top: 0.1rem solid $gray2;
			}
		}
	}

	.bio {
		background: $profile-bg;
		padding: 1rem 0.75rem;
		padding-bottom: 1.25rem;
	}

	.accountstats {
		background: $bg-accent;
		padding: 0.75rem;
		
		display: flex;
		flex-direction: column;
		gap: 0.25rem;

		.stats-item {
			display: flex;
			dt {
				width: 7rem;
			}
		}
	}
}

/*
	RSS icon isn't really part of the profile header exactly,
	but also it sort of is, and we want it styled the same for
	both microblog and gallery view anyway, so include it here.
*/
.rss-icon {
	display: block;
	margin: -0.25rem 0;
	
	.fa {
		font-size: 2rem;
		object-fit: contain;
		vertical-align: middle;
		color: $orange2;
		/*
			Can't size a single-color background, so we use
			a linear-gradient that's effectively white.
		*/
		background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center;
		background-size: 1.2rem 1.4rem;
		/* light mode */
		@media (prefers-color-scheme: light) {
			background: linear-gradient(to right, $white 100%, transparent 0) no-repeat center center;
			background-size: 1.2rem 1.4rem;
		}
	}
}

/*
	Tablet-ish-kinda size.
*/
@media screen and (max-width: 750px) {
	.profile .profile-header {
		.basic-info {
			grid-template-columns: auto 1fr;
			grid-template-rows: $avatar-size $name-size auto;
			grid-template-areas:
				"avatar avatar"
				"namerole namerole"
				"namerole namerole";
			
			/*
				Make display name a bit smaller
				so there's more chance of being
				able to read everything.
			*/
			.namerole {
				.displayname {
					font-size: 1.2rem;
					line-height: 2rem;
					margin-top: 0.5rem;
				}
			}
		}
	}
}

/*
	Phone-ish-kinda size.
*/
@media screen and (max-width: 500px) {
	.profile
	.profile-header
	.basic-info
	.namerole {
		/*
			Line up in smallest possible
			horizontal space to avoid overflow.
		*/
		display: flex;
		flex-direction: column;
		gap: 0.5rem;

		/*
			Don't hug the right anymore
			(good life advice in general).
		*/
		.role {
			align-self: flex-start;
		}

		/*
			Allow this to wrap in case
			of a really skinny screen.
		*/
		.bot-username-wrapper {
			flex-wrap: wrap;
		}
	}
}