diff --git a/index.html b/index.html index 0bf8de8..ad41300 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,7 @@ diff --git a/styles/style.css b/styles/style.css index b571ae8..71b6a36 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,13 +1,16 @@ * { margin: 0; - padding: 0; } + padding: 0; +} body, html { box-sizing: border-box; - height: 100%; } + height: 100%; +} *, *:before, *:after { - box-sizing: inherit; } + box-sizing: inherit; +} body { background-color: #000; @@ -16,9 +19,10 @@ body { background-repeat: no-repeat; color: #fff; font-family: Abel; - font-size: 24px; + font-size: 18px; text-rendering: optimizeLegibility; - text-align: center; } + text-align: center; +} section#teaser { height: 100%; @@ -79,14 +83,14 @@ section#teaser { section#teaser h1 { display: inline-block; margin-bottom: 1rem; - font-size: 96px; + font-size: 4rem; font-family: Raleway; font-weight: 300; text-transform: uppercase; } section#teaser h2 { margin-bottom: 4rem; font-weight: 300; - font-size: 32px; } + font-size: 1.6rem; } section#teaser p { margin-bottom: 2rem; } section#teaser nav { @@ -158,9 +162,9 @@ section#teaser { section#teaser nav ul li a { display: block; margin: 0 8px; - height: 48px; - line-height: 48px; - font-size: 24px; + height: 2.4rem; + line-height: 2.4rem; + font-size: 1.2rem; font-weight: 300; text-decoration: none; color: #fff; @@ -173,17 +177,22 @@ section#teaser { background: rgba(255, 255, 255, 0.2); -webkit-transition: all linear 150ms; -moz-transition: all linear 150ms; - transition: all linear 150ms; } + transition: all linear 150ms; + } footer { position: absolute; bottom: 8px; right: 8px; - font-size: 12px; } - footer p { - display: inline-block; - opacity: 0.7; } + font-size: 12px; +} +footer p { + display: inline-block; + opacity: 0.7; +} @media screen and (max-width: 600px) { section#teaser h1 { - font-size: 72px; } } + font-size: 72px; + } +}