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%;