diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 8a05ba8..1d9723a 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,34 +1,22 @@ --- -import { getHTMLIcon } from "./iconsModule"; - -const gitString = getHTMLIcon("git"); -const matrixString = getHTMLIcon("matrix"); +import matrixLogo from "@icons/matrix-logo.svg?raw"; +import gitLogo from "@icons/git-logo.svg?raw"; --- diff --git a/src/components/Header.astro b/src/components/Header.astro index 1b2154f..cda71ab 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -55,8 +55,8 @@ const { headings } = Astro.props;
-
{url.length > 2 ? +
: null}
diff --git a/src/icons/git-logo.svg b/src/icons/git-logo.svg new file mode 100644 index 0000000..622bda8 --- /dev/null +++ b/src/icons/git-logo.svg @@ -0,0 +1 @@ + diff --git a/src/icons/matrix-logo.svg b/src/icons/matrix-logo.svg new file mode 100644 index 0000000..84873f9 --- /dev/null +++ b/src/icons/matrix-logo.svg @@ -0,0 +1 @@ + diff --git a/src/styles/css-config/base.css b/src/styles/css-config/base.css index db54b6b..fb85dc9 100644 --- a/src/styles/css-config/base.css +++ b/src/styles/css-config/base.css @@ -39,6 +39,10 @@ html { --bg-900: var(--white) 12 16; /* docs */ + --text: var(--white) 0 0; + --text-dark: var(--white) 0 18; + --text-darker: var(--white) 0 30; + --link: var(--accent-600); --prop-color: 350 78 70; --prop-link-color: 350 78 60; --func-color: 50 68 50; @@ -82,6 +86,10 @@ html.dark { --bg-900: var(--blue) 82 3; /* docs */ + --text: var(--white) 0 100; + --text-dark: var(--white) 0 70; + --text-darker: var(--white) 0 40; + --link: var(--accent-500); --prop-color: 350 78 70; --prop-link-color: 350 78 60; --func-color: 50 78 70; diff --git a/src/styles/global.css b/src/styles/global.css index a4701a8..3fb5e27 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -24,7 +24,7 @@ } a { - color: hsla(var(--accent-600)); + color: hsl(var(--link)); text-decoration: none; &:hover { @@ -44,10 +44,6 @@ html.dark { background-color: hsl(var(--bg-900)); color: hsl(var(--secondary-400)); } - - & a { - color: hsl(var(--accent-500)); - } } /* layout and positioning */ @@ -115,73 +111,48 @@ html.dark { } footer { - position: sticky; - bottom: -3.5rem; width: 100%; - height: 3.5rem; - font-size: min(1.112rem, max(1svw, 0.8rem)); + font-size: 0.9rem; display: flex; justify-content: space-between; - padding-inline: 1rem; - background: linear-gradient(150deg, - hsla(var(--blue) 60 5 / 1) 10%, - hsla(var(--blue) 75 6 / 1) 25%, - hsla(var(--blue) 80 8 / 1) 55%, - hsla(var(--blue) 77 7 / 1) 80%); + padding: 1rem; + background-color: hsl(var(--overlay-bkg)); + border-top: solid hsl(var(--overlay-bkg-border)) 1px; - & ._credits { + & a { + color: hsl(var(--text-dark)); + transition: color 0.3s ease; + + &:hover { + color: hsl(var(--text)); + } + } + + & .credits { display: flex; flex-direction: column; justify-content: center; gap: 0.127rem; - color: hsl(var(--blue) 10 55); + color: hsl(var(--text-dark)); - & a { - all: unset; + & > p { margin-bottom: 0.2rem } - &:hover { - text-decoration: underline; - cursor: pointer; - } - } + & > a { text-decoration: none } - & em { - all: unset; - } - - & span:first-child { - & em { - color: hsl(var(--green) 44 60); - } - } - - & span:last-child { - & em { - color: hsl(var(--blue) 44 60); - } + & .hint { + color: hsl(var(--text-darker)); } } - & ._socials { - height: 100%; - width: max-content; + & .links { justify-self: flex-end } + + & .socials { display: flex; gap: 0.373rem; - justify-content: center; - align-items: center; + align-items: flex-start; + font-size: 2.5rem; - & span { - font-size: 2rem; - - & a { - all: unset; - display: flex; - height: 100%; - width: 100%; - justify-self: center; - align-self: center; - } - } + & a { display: flex } } } diff --git a/tsconfig.json b/tsconfig.json index ff5dd34..0c8e6d8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,6 +23,9 @@ "@icons": [ "./src/components/icons.tsx" ], + "@icons/*": [ + "./src/icons/*" + ], "@components/*": [ "./src/components/*" ],