<article class="card">
	<div>
		<p class="sub-heading">
			Article
			<time datetime="2020-03-20">
				Mar 20, 2020 </time>
		</p>
		<h2><a href="https://css-tricks.com/a-complete-guide-to-calc-in-css/" class="main-link" target="_blank">A Complete Guide to calc() in CSS</a></h2>
		<p>
			In this guide, let’s cover just about everything there is to know about this very useful function.
		</p>
	</div>
	<a class="author-name" href="https://css-tricks.com/author/chriscoyier/" target="_blank"><img src="https://secure.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=80&d=retro&r=pg" alt="" /><span>Chris Coyier</span></a>
	<div class="tags">
		<a class="tag" href="https://css-tricks.com/tag/calc/" target="_blank">calc</a>
		<a class="tag" href="https://css-tricks.com/tag/math/" target="_blank">math</a>
	</div>
</article>

<article class="card">
	<div>
		<p class="sub-heading">
			Article
			<time datetime="2020-03-20">
				Mar 20, 2020 </time>
		</p>
		<h2><a href="https://css-tricks.com/a-complete-guide-to-calc-in-css/" class="main-link" target="_blank">A Complete Guide to calc() in CSS</a></h2>
		<p>
			In this guide, let’s cover just about everything there is to know about this very useful function.
		</p>
	</div>
	<a class="author-name" href="https://css-tricks.com/author/chriscoyier/" target="_blank"><img src="https://secure.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=80&d=retro&r=pg" alt="" /><span>Chris Coyier</span></a>
	<div class="tags">
		<a class="tag" href="https://css-tricks.com/tag/calc/" target="_blank">calc</a>
		<a class="tag" href="https://css-tricks.com/tag/math/" target="_blank">math</a>
	</div>
</article>

<article class="card">
	<div>
		<p class="sub-heading">
			Article
			<time datetime="2020-03-20">
				Mar 20, 2020 </time>
		</p>
		<h2><a href="https://css-tricks.com/a-complete-guide-to-calc-in-css/" class="main-link" target="_blank">A Complete Guide to calc() in CSS</a></h2>
		<p>
			In this guide, let’s cover just about everything there is to know about this very useful function.
		</p>
	</div>
	<a class="author-name" href="https://css-tricks.com/author/chriscoyier/" target="_blank"><img src="https://secure.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=80&d=retro&r=pg" alt="" /><span>Chris Coyier</span></a>
	<div class="tags">
		<a class="tag" href="https://css-tricks.com/tag/calc/" target="_blank">calc</a>
		<a class="tag" href="https://css-tricks.com/tag/math/" target="_blank">math</a>
	</div>
</article>

body {
	display: flex;
}

.card {
	font-family: "PT Serif", serif;
	width: 300px;
	height: 350px;
	background: #17141d;
	border-radius: 16px;
	padding: 1rem 1.5rem;
	box-shadow: -1rem 0 3rem #000;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	transition: 0.2s;
	margin: 30px;

	&:hover {
		transform: translateY(-10px);

		.main-link {
			color: #ff8a00;
		}
	}

	&:focus-within {
		box-shadow: 0 0 0 0.25rem;
	}

	&:focus-within a:focus {
		text-decoration: none;
	}
}

h2,
a,
p {
	color: #fff;
}

a {
	text-decoration: none;
	transition: 0.2s;

	&:hover,
	&:focus {
		color: #ff8a00;
		outline: none;
	}
}

time {
	color: grey;
}

.author-name {
	display: flex;
	align-items: center;

	img {
		height: 36px;
		margin-right: 10px;
		border-radius: 50%;
	}
}

.tags {
	display: flex;
	margin: 10px 0;

	.tag {
		padding: 5px 10px;
		border: solid 1px grey;
		border-radius: 3px;
		transition: 0.2s;

		&:hover {
			background: gray;
		}
	}

	.tag + .tag {
		margin-left: 10px;
	}
}

const card = document.querySelector(".card");
const mainLink = card.querySelector(".main-link");
const clickableElements = Array.from(card.querySelectorAll("a")); //we are using 'a' here for simplicity but ideally you should put a class like 'clickable' on every clicable element inside card(a, button) and use that in query selector

clickableElements.forEach((ele) =>
	ele.addEventListener("click", (e) => e.stopPropagation())
);

function handleClick(event) {
	const noTextSelected = !window.getSelection().toString();

	if (noTextSelected) {
		mainLink.click();
	}
}

card.addEventListener("click", handleClick);