diff options
author | Barry Clark <barry@barryclark.co> | 2014-05-17 19:35:15 -0400 |
---|---|---|
committer | Barry Clark <barry@barryclark.co> | 2014-05-17 19:35:15 -0400 |
commit | 84e10c22fa9c055658e0684a33ff258b7f78cf7a (patch) | |
tree | f4c03078af197c4d2a0d02ef845eabb1a6c03124 | |
parent | 6de8b05f67b89e5aeddc1911006fac6fe862a8f3 (diff) | |
download | kompetenzbolzen.github.io-84e10c22fa9c055658e0684a33ff258b7f78cf7a.tar.gz |
Mobile breakpoint pass -- header especially
-rw-r--r-- | _layouts/default.html | 3 | ||||
-rwxr-xr-x | scss/style.scss | 48 | ||||
-rw-r--r-- | style.css | 41 |
3 files changed, 59 insertions, 33 deletions
diff --git a/_layouts/default.html b/_layouts/default.html index 958a017..0774b08 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -23,9 +23,8 @@ <div class="wrapper-masthead"> <div class="container"> <header class="masthead"> - <a href="/" class="site-name"><img src="{{ site.avatar }}" class="avatar" /></a> + <a href="/" class="avatar"><img src="{{ site.avatar }}" /></a> <a href="/" class="site-name">{{ site.name }}</a> - <br><br> <p class="site-description">{{ site.description }}</p> <nav> diff --git a/scss/style.scss b/scss/style.scss index 0bcd0ed..286027d 100755 --- a/scss/style.scss +++ b/scss/style.scss @@ -17,8 +17,6 @@ html { } body { - margin: 0 auto; - background: $white; font: 18px/1.4 $helvetica; color: $darkGray; @@ -27,7 +25,7 @@ body { .container { margin: 0 auto; max-width: 740px; - padding: 0 20px; + //padding: 0 20px; width: 100%; } @@ -44,9 +42,6 @@ h1, h2, h3, h4, h5, h6 { h1 { font-weight: 400; font-size: 32px; - @include mobile { - font-size: 32px; - } a { color: inherit; } @@ -54,16 +49,10 @@ h1 { h2 { font-size: 26px; - @include mobile { - font-size: 24px; - } } h3 { font-size: 22px; - @include mobile { - font-size: 20px; - } } h4 { @@ -154,14 +143,25 @@ img { .masthead { padding: 25px 0; + @include mobile { + text-align: center; + } } .avatar { float: left; width: 70px; - margin-right: 15px; - border-radius: 5px; + + @include mobile { + float: none; + display: block; + margin: 0 auto; + } + + img { + border-radius: 5px; + } } .site-name { @@ -172,7 +172,8 @@ img { font-size: 28px; letter-spacing: 1px; @include mobile { - font-size: 22px; + float: none; + display: block; } text-decoration: none; @@ -180,6 +181,7 @@ img { color: $darkGray; &:hover, &:active { text-decoration: none; + } } @@ -189,6 +191,12 @@ img { margin: 0; margin-top: -5px; color: $darkGray; + + @include mobile { + float: none; + display: block; + margin: 3px 0; + } } nav { @@ -198,7 +206,10 @@ nav { font-family: $helveticaNeue; font-size: 18px; @include mobile { - font-size: 18px; + float: none; + display: block; + margin-top: 15px; + font-size: 16px; } // nav has it's own link highlighting @@ -214,6 +225,10 @@ nav { cursor: pointer; color: $darkGray; } + + @include mobile { + margin: 0 10px; + } } } @@ -250,6 +265,7 @@ nav { } .wrapper-footer { + margin-top: 50px; background-color: #eee; border-top: 1px solid #ddd; } @@ -318,7 +318,6 @@ html { font-size: 100%; } body { - margin: 0 auto; background: white; font: 18px/1.4 Helvetica, Arial, sans-serif; color: #333333; } @@ -326,7 +325,6 @@ body { .container { margin: 0 auto; max-width: 740px; - padding: 0 20px; width: 100%; } h1, h2, h3, h4, h5, h6 { @@ -340,23 +338,14 @@ h1, h2, h3, h4, h5, h6 { h1 { font-weight: 400; font-size: 32px; } - @media screen and (max-width: 520px) { - h1 { - font-size: 32px; } } h1 a { color: inherit; } h2 { font-size: 26px; } - @media screen and (max-width: 520px) { - h2 { - font-size: 24px; } } h3 { font-size: 22px; } - @media screen and (max-width: 520px) { - h3 { - font-size: 20px; } } h4 { font-size: 18px; @@ -420,12 +409,21 @@ img { .masthead { padding: 25px 0; } + @media screen and (max-width: 520px) { + .masthead { + text-align: center; } } .avatar { float: left; width: 70px; - margin-right: 15px; - border-radius: 5px; } + margin-right: 15px; } + @media screen and (max-width: 520px) { + .avatar { + float: none; + display: block; + margin: 0 auto; } } + .avatar img { + border-radius: 5px; } .site-name { float: left; @@ -438,7 +436,8 @@ img { color: #333333; } @media screen and (max-width: 520px) { .site-name { - font-size: 22px; } } + float: none; + display: block; } } .site-name:hover, .site-name:active { text-decoration: none; } @@ -448,6 +447,11 @@ img { margin: 0; margin-top: -5px; color: #333333; } + @media screen and (max-width: 520px) { + .site-description { + float: none; + display: block; + margin: 3px 0; } } nav { float: right; @@ -456,7 +460,10 @@ nav { font-size: 18px; } @media screen and (max-width: 520px) { nav { - font-size: 18px; } } + float: none; + display: block; + margin-top: 15px; + font-size: 16px; } } nav a { margin-left: 25px; text-align: right; @@ -467,6 +474,9 @@ nav { text-decoration: none; cursor: pointer; color: #333333; } + @media screen and (max-width: 520px) { + nav a { + margin: 0 10px; } } @media screen and (max-width: 520px) { .logo, nav { @@ -488,6 +498,7 @@ nav { color: #666666; } .wrapper-footer { + margin-top: 50px; background-color: #eeeeee; border-top: 1px solid #dddddd; } |