diff --git a/index.html b/index.html index 7d1ef15..af925e2 100644 --- a/index.html +++ b/index.html @@ -3,43 +3,51 @@ + Hello World! + + + + + + + + + + - - - - - - - - - - -
-
- Hello World! - Editor illustration -
+
+

Hello World!

+ Editor illustration
- +
+ diff --git a/style.css b/style.css index a403147..75b3d7c 100644 --- a/style.css +++ b/style.css @@ -1,44 +1,37 @@ -/* Our default values set for mobile */ +/****************************************************************************** +START Glitch hello-app default styles + +The styles in this section do some minimal CSS resets, set default fonts and +colors, and handle the layout for our footer and "Remix on Glitch" button. If +you're new to CSS they may seem a little complicated, but you can scroll down +to this section's matching END comment to see page-specific styles. +******************************************************************************/ +/* Our default values set as CSS variables */ :root { --color-bg: #69F7BE; --color-text-main: #2800FF; + --color-primary: #FFFF00; --wrapper-height: 87vh; --image-max-width: 300px; --image-margin: 3rem; - + --font-family: "HK Grotesk"; + --font-family-header: "HK Grotesk"; } -/* Tablet portrait */ -@media (min-width: 768px) { - :root { - --wrapper-height: 87vh; - --image-max-width: 400px; - --image-margin: 5rem; - } -} - -/* Tablet Landscape */ -@media (min-width: 1024px) { - :root { - --wrapper-height: 87vh; - --image-max-width: 500px; - } -} - -/* Desktop */ -@media (min-width: 1280px) { - :root { - --wrapper-height: 87vh; - --image-max-width: 500px; - } +/* Basic page style resets */ +* { + box-sizing: border-box; +} +[hidden] { + display: none !important; } +/* Import fonts */ @font-face { font-family: HK Grotesk; src: url("https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027") format("opentype"); } - @font-face { font-family: HK Grotesk; font-weight: bold; @@ -46,28 +39,79 @@ format("opentype"); } +/* Our remix on glitch button */ +.btn--remix { + font-family: HK Grotesk; + padding: 0.75rem 1rem; + font-size: 1.1rem; + line-height: 1rem; + font-weight: 500; + height: 2.75rem; + align-items: center; + cursor: pointer; + background: #FFFFFF; + border: 1px solid #000000; + box-sizing: border-box; + border-radius: 4px; + text-decoration: none; + color: #000; + white-space: nowrap; +} +.btn--remix img { + margin-right: 0.5rem; +} +.btn--remix:hover { + background-color: #D0FFF1; +} + +/* Navigation grid */ +.footer { + display: flex; + justify-content: space-between; + margin: 1rem auto 0; + padding: 1rem 0 0.75rem 0; + width: 100%; + border-top: 4px solid #fff; +} + +.footer a:not(.btn--remix):link, +a:not(.btn--remix):visited { + font-family: HK Grotesk; + font-style: normal; + font-weight: normal; + font-size: 1.1rem; + color: #000; + text-decoration: none; + border-style: none; +} +.footer a:hover { + background: var(--color-primary); +} + +.footer .links { + padding: 0.5rem 1rem; +} + +.divider { + padding: 0 1rem; +} +/****************************************************************************** +END Glitch hello-app default styles +******************************************************************************/ + body { font-family: HK Grotesk; background-color: var(--color-bg); } -.title { - color: var(--color-text-main); - font-family: HK Grotesk; - font-style: normal; - font-weight: bold; - font-size: 120px; - line-height: 105%; -} - +/* Page structure */ .wrapper { min-height: var(--wrapper-height); display: grid; place-items: center; margin-left: 2rem; - margin-top: 3rem; + margin-top: 0; } - .content { display: flex; flex-direction: column; @@ -75,43 +119,15 @@ body { justify-content: center; } -/* Navigation grid */ -.navigation { - display: flex; - justify-content: flex-end; -} - -/* Our remix on glitch button + grid for other actions */ -.btn--remix { +/* Very light scaling for our illustration */ +.title { + color: var(--color-text-main); font-family: HK Grotesk; - padding-left: 1rem; - padding-right: 1rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - font-size: 1.1rem; - line-height: 1rem; - font-weight: 500; - align-items: center; - display: inline-flex; - cursor: pointer; - background: #FFFFFF; - border: 1px solid #000000; - box-sizing: border-box; - border-radius: 4px; - color: #000; - text-decoration: none; -} - -.btn--remix:hover { - background-color: #D0FFF1; -} - -.btn--remix img { - margin-right: 0.5rem; -} - -.btn--remix { - margin-right: 1rem; + font-style: normal; + font-weight: bold; + font-size: 120px; + line-height: 105%; + margin: 0; } /* Very light scaling for our illustration */ @@ -119,9 +135,4 @@ body { max-width: 100%; max-height: var(--image-max-width); margin-top: var(--image-margin); -} - - -/* - Add hover state to the buttons!! oops -*/ \ No newline at end of file +} \ No newline at end of file