diff --git a/src/app.css b/src/app.css index 4c66762..b331611 100644 --- a/src/app.css +++ b/src/app.css @@ -54,7 +54,6 @@ body { ::selection { background-color: var(--accent-low-opacity); - color: var(--accent-color); } /*-----headings-----*/ @@ -64,14 +63,14 @@ h1 { line-height: 1em; font-size: 3rem; font-weight: 700; - letter-spacing: -0.04em; + letter-spacing: -0.03em; } h2 { color: var(--grey-five); line-height: 1em; font-size: 2.25rem; - letter-spacing: -0.075rem; + letter-spacing: -0.05rem; font-weight: 600; } diff --git a/src/lib/components/atoms/ContributorPerson.svelte b/src/lib/components/atoms/ContributorPerson.svelte index 343fcd5..9a449c9 100644 --- a/src/lib/components/atoms/ContributorPerson.svelte +++ b/src/lib/components/atoms/ContributorPerson.svelte @@ -16,7 +16,7 @@ text-decoration: none; padding: 0.5rem; width: 100%; - transition: all 0.3s var(--bezier-one); + transition: background-color 0.3s var(--bezier-one); border-radius: 4px; display: flex; gap: 1rem; @@ -47,4 +47,22 @@ transition: transform 0.4s var(--bezier-one); user-select: none; } + + @media (max-width: 768px) { + h5 { + display: none; + } + + img { + height: 48px; + width: 48px; + } + a { + border-radius: 16px; + width: max-content; + background-color: transparent; + border: none; + } + + } diff --git a/src/lib/components/molecules/ContributorHost.svelte b/src/lib/components/molecules/ContributorHost.svelte index 09b3070..8bb33f8 100644 --- a/src/lib/components/molecules/ContributorHost.svelte +++ b/src/lib/components/molecules/ContributorHost.svelte @@ -76,4 +76,11 @@ justify-items: center; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } + + @media (max-width: 768px) { + .contrib-host { + gap: 0.25rem; + grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); + } + }