Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 119 Packages Wiki Activity Actions

Finishing Touches

Browse source
This commit is contained in:
Firq 2023-07-08 15:02:07 +02:00
parent 4da3f4323c
commit 4aa3865148
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
6 changed files with 76 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/contactCard.astro
View file

@ -24,15 +24,27 @@ const icon: string = `background-image: url('/assets/social/${image}.webp')`
text-decoration: none;
}
article div {
border-radius: 1.25rem;
background-size: contain;
display: flex;
align-items: center;
justify-content: center;
--size-value: 6.25rem;
width: var(--size-value);
height: var(--size-value);
}
article:hover span {
padding: 0.5rem 0.5rem;
border-radius: 1.25rem;
padding: 0 0.5rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--c-darkgray);
height: 85%;
width: 100%;
height: calc(var(--size-value) + 0.1rem);
width: calc(var(--size-value) + 0.1rem);
opacity: 90%;
}
@ -51,16 +63,8 @@ const icon: string = `background-image: url('/assets/social/${image}.webp')`
article span {
display: none;
}
article div {
background-size: contain;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
article {
border-radius: 1.25rem;
display: flex;
align-items: center;
justify-content: center;

2
src/components/navbar.astro
View file

@ -110,7 +110,7 @@
justify-self: top;
}
@media (min-width: 1120px) {
@media (min-width: 1140px) {
.mobile {
display: none;
}

12
src/components/technologyCard.astro
View file

@ -33,28 +33,32 @@ const icon: string = `background-image: url('/assets/technologies/${image}.webp'
height: auto;
width: auto;
line-height: 100px;
border-radius: 1.25rem;
}
article:hover {
transform: scale(var(--hover-scale));
}
article > div {
border-radius: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
background-size: contain;
width: 100px;
height: 100px;
--size-value: 6.25rem;
width: var(--size-value);
height: var(--size-value);
}
article:hover span {
border-radius: 1.25rem;
padding: 0 0.5rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--c-darkgray);
height: 100%;
width: 100%;
height: calc(var(--size-value) + 0.1rem);
width: calc(var(--size-value) + 0.1rem);
opacity: 90%;
}

6
src/layouts/aboutSection.astro
View file

@ -15,11 +15,17 @@ const { title } = Astro.props
<style>
h1 {
font-size: 26px;
line-height: 32px;
letter-spacing: -1px;
color: white;
margin: 0.5rem 0.75rem 0.5rem 0.75rem;
padding: 0.25rem 0.75rem;
width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
div {
row-gap: 1em;

46
src/layouts/blogPost.astro
View file

@ -42,11 +42,17 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
text-decoration: none;
}
h1 {
font-size: 34px;
line-height: 40px;
letter-spacing: -1px;
color: white;
margin: 0.5rem 3rem 0.5rem 3rem;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
p {
color: white;
@ -54,6 +60,8 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-gray);
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
article :global(h2) {
margin-right: 3rem;
@ -62,6 +70,9 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
article :global(h3) {
@ -72,6 +83,9 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
article :global(h4) {
@ -82,6 +96,9 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
article :global(a) {
color: #dcb7ff;
@ -103,18 +120,33 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
color: orange;
}
@media (min-width: 1500px) {
@media (min-width: 1000px) {
article {
margin-left: 15rem;
margin-right: 15rem;
margin-left: 10rem;
margin-right: 10rem;
}
h1 {
margin-left: 15rem;
margin-right: 15rem;
margin-left: 10rem;
margin-right: 10rem;
}
p {
margin-left: 15rem;
margin-right: 15rem;
margin-left: 10rem;
margin-right: 10rem;
}
}
@media (min-width: 1500px) {
article {
margin-left: 20rem;
margin-right: 20rem;
}
h1 {
margin-left: 20rem;
margin-right: 20rem;
}
p {
margin-left: 20rem;
margin-right: 20rem;
}
}
</style>

6
src/layouts/contactSection.astro
View file

@ -16,10 +16,16 @@ const { title } = Astro.props
<style>
h1 {
color: white;
font-size: 26px;
line-height: 32px;
letter-spacing: -1px;
margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem;
width: max-content;
background-color: var(--c-darkgray);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
div {
row-gap: 1em;