YouHaveTrouble/youhavetrouble.github.io
1
0
Fork 0
mirror of https://github.com/YouHaveTrouble/youhavetrouble.github.io.git synced 2026-05-11 22:06:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

style touch-up

Browse Source
This commit is contained in:
YouHaveTrouble
2025-06-25 17:12:49 +02:00
parent c2223928f9
commit f7bbb67347
2 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ProjectsFeature.astro
+9 -2
View File
@@ -84,11 +84,9 @@ projects.sort((a, b) => a.data.name.localeCompare(b.data.name));
.showcase { .showcase {
display: grid; display: grid;
flex-direction: row;
grid-template-columns: repeat(auto-fill, 10rem); grid-template-columns: repeat(auto-fill, 10rem);
max-width: 100%; max-width: 100%;
gap: 0.75rem; gap: 0.75rem;
scroll-snap-type: x mandatory;
padding-block: 1.5rem; padding-block: 1.5rem;
justify-content: center; justify-content: center;
padding-inline: 0.5rem; padding-inline: 0.5rem;
@@ -119,6 +117,14 @@ projects.sort((a, b) => a.data.name.localeCompare(b.data.name));
&:focus-visible { &:focus-visible {
outline: none; outline: none;
} }
&:hover {
.icon {
color: var(--text-main);
img {
transform: translateY(-0.1rem);
}
}
}
} }
.icon { .icon {
@@ -130,6 +136,7 @@ projects.sort((a, b) => a.data.name.localeCompare(b.data.name));
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 0.25rem; border-radius: 0.25rem;
transition: transform 0.2s ease;
} }
} }
src/components/SocialsWidget.astro
+11 -11
View File
@@ -36,6 +36,7 @@
<a href="https://x.com/YouHaveTrouble" class="social-link" target="_blank" rel="external"> <a href="https://x.com/YouHaveTrouble" class="social-link" target="_blank" rel="external">
<img src="/assets/icons/x.svg" alt="" aria-hidden="true" draggable="false" loading="eager"> <img src="/assets/icons/x.svg" alt="" aria-hidden="true" draggable="false" loading="eager">
<span>X</span> <span>X</span>
</a>
<a href="https://bsky.app/profile/youhavetrouble.bsky.social" class="social-link" target="_blank" <a href="https://bsky.app/profile/youhavetrouble.bsky.social" class="social-link" target="_blank"
rel="external"> rel="external">
<img src="/assets/icons/bsky.svg" alt="" aria-hidden="true" draggable="false" loading="eager"> <img src="/assets/icons/bsky.svg" alt="" aria-hidden="true" draggable="false" loading="eager">
@@ -58,23 +59,25 @@
gap: 1.5rem; gap: 1.5rem;
.grid { .grid {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(auto-fill, 8rem);
max-width: 100%;
justify-content: center; justify-content: center;
align-items: center;
width: 100%; width: 100%;
gap: 1rem; gap: 1rem;
padding-block: 1rem;
a { a {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
width: 5.5rem; width: 100%;
height: 5.5rem; height: 5.5rem;
text-decoration: none; text-decoration: none;
padding: 0.5rem; padding: 0.5rem;
gap: 0.25rem; gap: 0.25rem;
border-radius: 0.25rem;
span { span {
color: var(--text-secondary); color: var(--text-secondary);
@@ -103,17 +106,14 @@
&:hover { &:hover {
color: var(--text-main); color: var(--text-main);
img { img {
transform: translateY(-0.2rem); transform: translateY(-0.1rem);
} }
} }
&:focus-within {
background-color: #548e9b;
}
&:focus-visible { &:focus-visible {
outline: none; outline: none;
span {
color: var(--primary-color);
&::after {
width: 100%;
}
}
} }
} }
} }