diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/PortfolioProject.astro | 38 | ||||
| -rw-r--r-- | src/components/TechnologyBadge.astro | 21 |
2 files changed, 43 insertions, 16 deletions
diff --git a/src/components/PortfolioProject.astro b/src/components/PortfolioProject.astro index b3483e9..c583325 100644 --- a/src/components/PortfolioProject.astro +++ b/src/components/PortfolioProject.astro @@ -58,20 +58,46 @@ const { title, summary, tags, detailsLink, githubLink, onlineLink } = justify-content: start; gap: 0.75rem; - padding: 1.5rem 1rem; - border-radius: 0.5rem; + padding: 1.5rem; + border-radius: 10px; - background-color: white; - border: 1px solid $accent; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + background-color: #fcfcfc; + border: 1px solid #ccd6e0; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), inset 0 1px 0 #fff; + + h3 { + color: $accent; + text-shadow: 1px 1px 0 #fff; + margin-bottom: 0.25rem; + border-bottom: 1px solid #eee; + padding-bottom: 0.25rem; + } } a { display: inline-flex; align-items: center; gap: 0.5rem; - color: var(--text); + color: white; text-decoration: none; + background: $accent; + padding: 0.4rem 0.8rem; + border-radius: 6px; + font-size: 0.9rem; + font-weight: bold; + border: 1px solid $accentDark; + box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3); + text-shadow: 0 -1px 0 rgba(0,0,0,0.3); + + &:hover { + filter: brightness(1.1); + transform: translateY(-1px); + } + + &:active { + box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); + transform: translateY(0); + } } div *:not(:last-child) { diff --git a/src/components/TechnologyBadge.astro b/src/components/TechnologyBadge.astro index 204bef6..ad32c6e 100644 --- a/src/components/TechnologyBadge.astro +++ b/src/components/TechnologyBadge.astro @@ -112,20 +112,24 @@ const tech = technologies[code] as Technology; <style define:vars={{ colour: tech.colour }}> span { - /*display: inline-block;*/ background-color: var(--colour); + background-image: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.15) 100%); font-weight: bold; text-transform: uppercase; - border-radius: 0.5em; + border-radius: 20px; padding: 0.5em 1em; + border: 1px solid rgba(0,0,0,0.2); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.2); display: inline-flex; align-items: center; gap: 0.5rem; + text-shadow: 0 1px 1px rgba(0,0,0,0.3); } .text-dark { color: #000; + text-shadow: 0 1px 0 rgba(255,255,255,0.5); } .text-light { @@ -133,16 +137,13 @@ const tech = technologies[code] as Technology; } .pill-small { - padding: 0.35em 0.5em; - border-radius: 0.25em; - - font-size: 0.75em; + padding: 2px 8px; + font-size: 0.7rem; + letter-spacing: 0.05em; } .pill-large { - padding: 0.35 0.75em; - border-radius: 0.5em; - - font-size: 0.75em; + padding: 4px 12px; + font-size: 0.85rem; } </style> |