inherentlee/fedizinefest
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rewound to commit 34487b8267 + 0 edits

Browse Source
This commit is contained in:
Glitch (wiry-plaid-valley)
2020-10-16 17:58:14 +00:00
parent dd77ae8cfe
commit 5127b012fb
2 changed files with 22 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -20,7 +20,7 @@
</div> </div>
<img src="/illustration.svg" class="illustration" /> <img src="/illustration.svg" class="illustration" />
</div> </div>
<div class="navigation"> <div class="remix">
<div> <div>
<button class="btn--remix"> <button class="btn--remix">
<img <img

69
style.css
View File

@ -1,60 +1,36 @@
/* Our default values set for mobile */ /* Our CSS values that we'll use in the rest of our styling */
:root { :root {
--color-bg: #69F7BE; --main-bg-color: #69F7BE;
--color-text-main: #373fff; --main-text-color: #373fff;
--wrapper-height: 120vh;
}
/* Tablet portrait */
@media (min-width: 768px) {
:root {
--wrapper-hight: 80vh;
}
}
/* Tablet Landscape */
@media (min-width: 1024px) {
:root {
--wrapper-height: 80vh;
}
}
/* Desktop */
@media (min-width: 1280px) {
:root {
--wrapper-height: 90vh;
}
} }
@font-face { @font-face {
font-family: HK Grotesk; font-family: HK Grotesk;
src: url("https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Regular.otf?v=1602782380076") src: url("https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Regular.otf?v=1602782380076") format("opentype");
format("opentype");
} }
@font-face { @font-face {
font-family: HK Grotesk; font-family: HK Grotesk;
font-weight: bold; font-weight: bold;
src: url("https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Bold.otf?v=1602782484249") src: url("https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FHKGrotesk-Bold.otf?v=1602782484249") format("opentype");
format("opentype");
} }
body { body {
font-family: HK Grotesk; font-family: HK Grotesk;
background-color: var(--color-bg); background-color: var(--main-bg-color);
} }
.title { .title {
color: var(--color-text-main); color: var(--main-text-color);
font-family: HK Grotesk; font-family: HK Grotesk;
font-style: normal; font-style: normal;
font-weight: bold; font-weight: bold;
font-size: 134px; font-size: 164px;
line-height: 105%; line-height: 105%;
} }
.wrapper { .wrapper {
min-height: var(--wrapper-height); min-height: 95vh;
display: grid; display: grid;
place-items: center; place-items: center;
} }
@ -65,20 +41,18 @@ body {
padding: 1rem; padding: 1rem;
} }
/* Navigation grid */ /* Our remix on glitch button + grid for other actions */
.navigation { .remix {
display: grid; display: grid;
place-items: end; place-items: end;
} }
/* Our remix on glitch button + grid for other actions */
.btn--remix { .btn--remix {
font-family: HK Grotesk; font-family: HK Grotesk;
padding-left: 0.75rem; padding-left: .75rem;
padding-right: 0.75rem; padding-right: .75rem;
padding-top: 0.5rem; padding-top: .5rem;
padding-bottom: 0.5rem; padding-bottom: .5rem;
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1rem; line-height: 1rem;
font-weight: 500; font-weight: 500;
@ -92,11 +66,10 @@ body {
} }
.btn--remix img { .btn--remix img {
margin-right: 0.75rem; margin-right: .75rem;
} }
/* Very light scaling for our illustration */
.illustration { .illustration {
max-width: 70%; max-width: 80%;
max-height: 400px;
} }