darkicewolf50_site/src/lib/components/contact.svelte

<!-- const: Asset = asset!("assets/professional_photo_2023.jpg"); -->
<script>
	import PROFESSIONAL_PHOTO_JPG from '$lib/professional_photo_2023.jpg';
</script>

<!-- document::Stylesheet { href: asset!("/assets/styling/contact.css") } -->
<h2>Contact</h2>
<div>
	<div>
		<div>
			<img src={PROFESSIONAL_PHOTO_JPG} alt="Brock's professional headshot" />
		</div>
	</div>
	<div>
		<div>
			<h4>Brock Tomlinson</h4>
			<ul>
				<li>FullStack Webdev and Student Software Engineer</li>
				<li>
					<a href="mailto:darkicewolf50@gmail.com">
						<img src="https://www.svgrepo.com/show/491226/email.svg" alt="Email icon/logo" />
						<div>
							<p>Email I check:</p>
							<p>darkicewolf50@gmail.com</p>
						</div>
					</a>
				</li>
				<li>
					<a href="mailto:brock@eatsleepski.com">
						<img src="https://www.svgrepo.com/show/491226/email.svg" alt="Email icon/logo" />
						<div>
							<p>Professional Email:</p>
							<p>brock@eatsleepski.com</p>
						</div>
					</a>
				</li>
				<li>
					<a href="https://github.com/darkicewolf50">
						<img src="https://www.svgrepo.com/show/512317/github-142.svg" alt="Github logo" />
						<p>darkicewolf50</p>
					</a>
				</li>
				<li>
					<a href="https://www.linkedin.com/in/brock-tomlinson/">
						<img src="https://www.svgrepo.com/show/521725/linkedin.svg" alt="LinkedIn logo" />

						<p>Brock Tomlinson</p>
					</a>
				</li>
				<li>
					<a href="https://www.twitch.tv/darkicewolf50">
						<img src="https://www.svgrepo.com/show/519925/twitch.svg" alt="Twitch logo" />

						<p>darkicewolf50</p>
					</a>
				</li>
				<li>
					<a href="https://www.youtube.com/@darkicewolf50">
						<img src="https://www.svgrepo.com/show/521936/youtube.svg" alt="Youtube logo" />
						<p>@darkicewolf50</p>
					</a>
				</li>
			</ul>
		</div>
	</div>
</div>

<style>
	div {
		display: flex;
		flex-direction: row;
		gap: 2svw;
		align-items: center;
		justify-content: center;
	}

	img {
		border-radius: 100%;
		max-height: 250px;
		display: block;
		background-color: var(--card-background-color);
		padding: 0.5rem;
	}

	div div {
		display: flex;
		justify-content: center;
		/* flex: 0 0 48%; */
	}

	div div div {
		display: flex;
		flex-direction: column;
		flex-basis: auto;
	}

	div div ul {
		display: flex;
		flex-direction: column;
	}

	div div ul div {
		display: flex;
		flex-direction: row;
		gap: 0px;
	}

	a {
		text-decoration: none;
		color: inherit;
	}

	h4 {
		text-align: center;
		margin-bottom: 0px;
	}

	div div ul {
		list-style-type: none;
		gap: 1svh;
		padding: 0px;
	}

	div div ul li {
		/* display: flex;
	justify-content: flex-start; */
		/* text-wrap: nowrap; */
		padding-right: 1svw;
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
		/* border: 1px solid whitesmoke; */
		padding: 0.5svh 1svw;
	}

	div div ul li a {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	div div ul li a div {
		display: flex;
		flex-direction: column;
	}

	ul li p {
		padding: 0px;
		margin: 0px;
	}

	ul li img {
		height: var(--img-width);
		width: var(--img-height);
		object-fit: contain;
		border-radius: 0px;
		background-color: transparent;
		filter: invert() hue-rotate(180deg);
	}

	ul li a:hover {
		cursor: pointer;
		color: #91a4d2;
		filter: brightness(0) saturate(100%) invert(65%) sepia(13%) saturate(733%) hue-rotate(187deg)
			brightness(95%) contrast(90%);
	}

	@media only screen and (max-width: 500px) {
		ul li img {
			display: none;
		}
		img {
			border-radius: 100%;
			max-width: 100%;
			max-height: 250px;
			display: block;
		}
	}
</style>