diff --git a/assets/InterVariable.ttf b/assets/InterVariable.ttf new file mode 100644 index 0000000..4ab79e0 Binary files /dev/null and b/assets/InterVariable.ttf differ diff --git a/assets/links/codestats.svg b/assets/links/codestats.svg new file mode 100644 index 0000000..173cbe0 --- /dev/null +++ b/assets/links/codestats.svg @@ -0,0 +1,31 @@ + + + + + + + diff --git a/assets/links/gitgay.svg b/assets/links/gitgay.svg new file mode 100644 index 0000000..585fb28 --- /dev/null +++ b/assets/links/gitgay.svg @@ -0,0 +1 @@ + diff --git a/index.html b/index.html index 472e591..81080b3 100644 --- a/index.html +++ b/index.html @@ -32,6 +32,28 @@
+ + - +
diff --git a/styles.css b/styles.css index f344b63..16dc9da 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,8 @@ +@font-face { + font-family: 'Inter'; + src: url('/assets/InterVariable.ttf'); +} + :root { --color-text: #cdd6f4; --color-subtext-1: #bac2de; @@ -15,11 +20,12 @@ --color-lavender: #b4befe; --color-mauve: #cba6f7; --color-yellow: #f9e2af; + + font-family: Inter, sans-serif; } html { color: var(--color-text); - font-family: sans-serif; background: var(--color-surface-2); &:before { @@ -37,7 +43,8 @@ html { #container { margin: 6rem auto; - max-width: 900px; + padding: 0 1rem; + max-width: 500px; position: relative; z-index: 1; @@ -49,24 +56,37 @@ html { gap: 1rem; } + footer { + margin-top: 5rem; + text-align: center; + + a { + color: var(--color-text); + } + } + .headline { background: radial-gradient(circle at center, var(--color-surface-0), 90%, transparent); - padding: 0.6rem 1.5rem; + padding: 0.6rem 1.5rem 1.2rem; display: inline-flex; flex-direction: column; gap: 0.2rem; h1 { - font-size: 2rem; + font-size: 3rem; + font-weight: 200; } h2 { font-size: 1.4rem; - color: var(--color-text) + color: var(--color-text); + font-weight: 300; } small { color: var(--color-lavender); text-transform: uppercase; + font-size: 2.3rem; + font-weight: 400; } } } @@ -120,23 +140,51 @@ main { } .links { + display: flex; + flex-direction: column; + gap: 1rem; + a { - border-radius: 1rem; - background: var(--color-base); + border-radius: 0 0.5rem 0.5rem 0; + background: var(--color-text); display: block; text-decoration: none; position: relative; height: 5rem; + line-height: 5rem; + transition: background 100ms ease-out; + + &:before { + content: ''; + background: var(--color-surface-0); + position: absolute; + top: 0.3rem; + right: -0.3rem; + bottom: -0.3rem; + left: 0.3rem; + z-index: -1; + border-radius: 0 0.5rem 0.5rem 0; + border: 2px solid var(--color-surface-1); + } + + &:hover, &:focus { + background: var(--color-yellow); + } + + &:active { + background: var(--color-subtext-1); + } img { position: absolute; height: 5rem; + background: var(--color-surface-0); } span { - color: var(--color-text); - padding: 1rem; - font-size: 3rem; + color: var(--color-base); + font-weight: 300; + font-size: 1.5rem; text-align: center; display: block; width: 100%;