TA blog post, change to cards, margin blog

This commit is contained in:
Firq 2023-03-15 17:03:50 +01:00
parent 9b903a881f
commit 359c06184d
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
8 changed files with 303 additions and 32 deletions
src/components

View file

@ -13,12 +13,17 @@ const icon: string = `background-image: url('/assets/technologies/${image}.webp'
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
<article>
<div style={icon}>
<h2>{title}</h2>
<span>
<h2>{title}</h2>
</span>
</div>
</article>
</a>
<style>
a {
text-decoration: none;
}
article {
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
@ -41,18 +46,32 @@ const icon: string = `background-image: url('/assets/technologies/${image}.webp'
height: 100px;
}
article:hover h2 {
color: white;
article:hover span {
padding: 0 0.5rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--c-darkgray);
font-size: 18px;
display: inline-block;
vertical-align: center;
line-height: 150%;
width: 95%;
height: 100%;
width: 100%;
opacity: 90%;
}
article:hover h2 {
margin: 0;
display: inline-flex;
font-weight: bold;
color: white;
font-size: 18px;
line-height: 150%;
}
article h2 {
display: none;
}
article span {
display: none;
}
</style>