``````<article class="card">
<div>
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>
</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;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
transition: 0.2s;
margin: 30px;

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

color: #ff8a00;
}
}

&:focus-within {
}

&: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;
}
}

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

.tag {
border: solid 1px grey;
transition: 0.2s;

&:hover {
background: gray;
}
}

.tag + .tag {
margin-left: 10px;
}
}
``````
``````const card = document.querySelector(".card");

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

if (noTextSelected) {