diff --git a/.glitch-assets b/.glitch-assets index 34c065d..ee89b45 100644 --- a/.glitch-assets +++ b/.glitch-assets @@ -5,3 +5,7 @@ {"uuid":"adSBq97hhhpFNUnb","deleted":true} {"uuid":"adSBq97hhhpFNUnc","deleted":true} {"name":"Logo_Color.svg","date":"2020-10-15T17:02:08.576Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg","type":"image/svg+xml","size":25537,"imageWidth":19,"imageHeight":14,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg","thumbnailWidth":19,"thumbnailHeight":14,"uuid":"XPQ2UUJettC9yQ6L"} +{"name":"HKGrotesk-Medium.otf","date":"2020-10-15T17:19:39.944Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Medium.otf","type":"","size":69888,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-Medium.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"mSnvx5eJut7fimxB"} +{"name":"HKGrotesk-Regular.otf","date":"2020-10-15T17:19:40.076Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Regular.otf","type":"","size":67768,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-Regular.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"VY2dLeOvcf8ffuEw"} +{"name":"HKGrotesk-SemiBold.otf","date":"2020-10-15T17:20:42.442Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-SemiBold.otf","type":"","size":69948,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-SemiBold.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"yEDZsSX7I7P2NlF1"} +{"name":"HKGrotesk-Bold.otf","date":"2020-10-15T17:21:24.249Z","url":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Bold.otf","type":"","size":68144,"thumbnail":"https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2Fthumbnails%2FHKGrotesk-Bold.otf","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"aHiG7zYivg7tnSDH"} diff --git a/index.html b/index.html index 5e2e1eb..dc83913 100644 --- a/index.html +++ b/index.html @@ -16,16 +16,20 @@
-

Hello world!

+ Hello world! + +
+
+
+
+
-
- diff --git a/style.css b/style.css index b3e08d7..736c02a 100644 --- a/style.css +++ b/style.css @@ -4,14 +4,29 @@ --main-text-color: #373fff; } +@font-face { + font-family: HK Grotesk; + src: url("https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Regular.otf?v=1602782380076") format("opentype"); +} + +@font-face { + font-family: HK Grotesk; + font-weight: bold; + src: url("https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Bold.otf?v=1602782484249") format("opentype"); +} + body { - font-family: helvetica, arial, sans-serif; + font-family: HK Grotesk; background-color: var(--main-bg-color); } .title { color: var(--main-text-color); - font-size: 164pt; + font-family: HK Grotesk; + font-style: normal; + font-weight: bold; + font-size: 164px; + line-height: 105%; } .wrapper { @@ -21,12 +36,17 @@ body { } .content { - width: clamp(23ch, 50%, 46ch); display: flex; flex-direction: column; padding: 1rem; } +/* Our remix on glitch button + grid for other actions */ +.remix { + display: grid; + place-items: end; +} + .btn--remix { padding-left: .75rem; padding-right: .75rem; @@ -49,6 +69,5 @@ body { } .illustration { - position: relative; - bottom: 10em; + }