Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases172 Packages1 Wiki Activity Actions

TA blog post, change to cards, margin blog

Browse source
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

4
src/components/blogCard.astro
View file

@ -43,6 +43,10 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
a:hover > .circle {
transform: none;
}
article {
margin-left: 0.5rem;
}
}
a {

36
src/components/contactCard.astro
View file

@ -12,27 +12,46 @@ const icon: string = `background-image: url('/assets/social/${image}.webp')`
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={site}>
<article class="contact do-hover">
<div style={icon}>
<h2>{site}</h2>
<span>
<h2>{site}</h2>
</span>
</div>
</article>
</a>
<style>
article:hover h2 {
color: white;
a {
text-decoration: none;
}
article:hover span {
padding: 0.5rem 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: 85%;
width: 100%;
opacity: 90%;
}
article:hover h2 {
margin: 0;
display: inline-flex;
font-weight: bold;
color: white;
font-size: 18px;
}
article h2 {
display: none;
}
article span {
display: none;
}
article div {
background-size: contain;
width: 100px;
@ -52,7 +71,6 @@ const icon: string = `background-image: url('/assets/social/${image}.webp')`
transition: transform var(--speed) var(--ease);
height: auto;
width: auto;
line-height: 128px;
}
a:hover {
transform: scale(var(--hover-scale));

33
src/components/taCard.astro
View file

@ -27,7 +27,9 @@ if (user !== undefined) {
<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
<article>
<div style={icon}>
<h2>{title}</h2>
<span>
<h2>{title}</h2>
</span>
</div>
<p>
<span class={hasuser}>
@ -56,7 +58,6 @@ if (user !== undefined) {
transition: transform var(--speed) var(--ease);
height: auto;
width: auto;
line-height: 128px;
}
article:hover {
transform: scale(var(--hover-scale));
@ -68,18 +69,32 @@ if (user !== undefined) {
object-position: 0% 0%;
}
article:hover h2 {
color: white;
article:hover div span {
padding: 0.5rem 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: bottom;
line-height: normal;
height: 90%;
width: 90%;
opacity: 90%;
}
article h2 {
article:hover span h2 {
margin: 0;
display: inline-flex;
font-weight: bold;
color: white;
font-size: 18px;
line-height: 150%;
}
article span h2 {
display: none;
}
article div span {
display: none;
}

35
src/components/technologyCard.astro
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>