From 9a8ed9b0a5a98750f5c5417ac56c9f683c9bd51b Mon Sep 17 00:00:00 2001 From: Jim Myhrberg Date: Sat, 17 Oct 2015 03:11:35 +0100 Subject: [PATCH] Various updates including responsiveness --- _config.yml | 5 +- _sass/_layout.scss | 155 +++++++++++++++++++++++++++++++++++++-------- _sass/_setup.scss | 3 +- index.html | 38 +++++------ 4 files changed, 151 insertions(+), 50 deletions(-) diff --git a/_config.yml b/_config.yml index c693f41..7e6c6cc 100644 --- a/_config.yml +++ b/_config.yml @@ -3,12 +3,15 @@ title: Jim Myhrberg (jimeh) name: Jim Myhrberg nickname: jimeh email: pbagnpg\100wvzru\056zr +mailto: "mailto:%63%6s%6r%74%61%63%74@%6n%69%6q%65%68.%6q%65" description: Crazy-Ass Software Engineering Mercenary baseurl: "" # the subpath of your site, e.g. /blog/ hostname: jimeh.me # used to determine if google analytics should be triggered url: http://jimeh.me # the base hostname & protocol for your site permalink: /:title/ -cv_url: http://assets.jimeh.me/jim-myhrberg-resume.pdf +blog_url: https://jimeh.io/ +cv_url: http://assets.jimeh.me/jim-myhrberg-cv.pdf +vcard_url: http://assets.jimeh.me/jim-myhrberg.vcf twitter_username: jimeh github_username: jimeh linkedin_username: jimeh diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 76fbd8d..d4ab9f7 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -3,6 +3,7 @@ font-weight: bold; position: fixed; top: 0px; + text-align: center; bottom: 0px; width: 100%; @@ -11,8 +12,7 @@ text-decoration: none; } - .content { - height: 128px; + .site-header-container { width: 595px; position: absolute; top: 50%; @@ -24,68 +24,169 @@ .site-avatar { width: 128px; height: 128px; - margin-bottom: 4px; + float: left; border: 2px solid white; - position: absolute; - top: 0; - left: 0; @include border-radius(400px); @include box-shadow(0px, 0px, 7px, rgba(0, 0, 0, 0.3)); } -.header-content { +.content { display: block; - color: $name-color; + padding: 9px 0px 0px 160px; + position: relative; + text-align: left; +} + +.site-title { font-size: 47px; - line-height: 40px; - margin-bottom: 5px; - position: absolute; - top: 30px; - left: 160px; + position: relative; .site-name { + color: $name-color; text-transform: uppercase; } + .site-nickname { color: $nickname-color; text-transform: lowercase; } -} -.site-description { - font-size: 14px; - margin-bottom: 8px; - color: $sub-title-color; - text-transform: uppercase; - position: absolute; - top: 28px; - left: 11px; + .site-description { + font-size: 14px; + color: $sub-title-color; + text-transform: uppercase; + position: absolute; + top: 49px; + left: 11px; + } } .site-links { - position: absolute; - top: 52px; - left: 7px; font-size: 22px; + padding: 2px 0px 0px 7px; a { color: $link-color; position: relative; padding: 0px 5px; + white-space: nowrap; .link-text { visibility: hidden; font-size: $base-font-size; position: absolute; - top: 20px; + top: 30px; left: 50%; @include transform(translate(-50%, 0%)); } &:hover { - color: $link-hover-color; + color: $brand-color-light; .link-text { visibility: visible; } } } } + +@media screen and (max-width: 768px) { + .site-links { + padding: 1px 0px 0px 0px; + margin-left: -2px; + + a { + line-height: 22px; + padding: 0px; + margin: 0px 10px 0px 0px; + + .link-text { + margin-left: 4px; + visibility: visible; + position: static; + display: inline-block; + @include transform(translate(0%, -11%)); + } + } + } +} + +@media screen and (max-width: 640px) { + .site-header { + .site-header-container { + width: 410px; + } + } + + .site-avatar { + width: 80px; + height: 80px; + } + + .content { + padding: 4px 0px 0px 98px; + } + + .site-title { + font-size: 34px; + + .site-description { + font-size: 10px; + top: 36px; + left: 9px; + } + } + + .site-links { + font-size: 16px; + a { + .link-text { + @include transform(translate(0%, 0%)); + } + } + } +} + +@media screen and (max-width: 419px) { + .site-header { + .site-header-container { + width: 320px; + } + } + + .site-avatar { + width: 80px; + height: 80px; + float: none; + } + + .content { + padding: 0px 10px 0px 10px; + text-align: center + } + + .site-title { + font-size: 30px; + + .site-description { + font-size: 9px; + top: 32px; + left: 7px; + } + } + + .site-links { + font-size: 14px; + padding: 3px 0px 0px 0px; + margin-left: 0px; + text-align: center; + + a { + line-height: 22px; + padding: 0px; + margin: 0px 5px; + + .link-text { + @include transform(translate(0%, 0%)); + } + } + } +} diff --git a/_sass/_setup.scss b/_sass/_setup.scss index f936868..b16d232 100644 --- a/_sass/_setup.scss +++ b/_sass/_setup.scss @@ -9,6 +9,7 @@ $base-line-height: 1.5; $spacing-unit: 30px; +$background-color: #fdfdfd; $text-color: #1a1a1a; $name-color: lighten($text-color, 15.5%); @@ -17,8 +18,8 @@ $sub-title-color: lighten($text-color, 55%); $link-color: lighten($text-color, 65%); $link-hover-color: lighten($text-color, 55%); -$background-color: #fdfdfd; $brand-color: #1193f6; +$brand-color-light: lighten($brand-color, 10%); $brand-color-dark: darken($brand-color, 10%); $grey-color: #828282; diff --git a/index.html b/index.html index 1aa2b10..2fc76a1 100644 --- a/index.html +++ b/index.html @@ -2,30 +2,26 @@ layout: default ---
-
+
- - {{ site.name }} - ({{ site.nickname }}) -

{{ site.description }}

+ + + {{ site.name }} + ({{ site.nickname }}) + {{ site.description }} +
- twitter - - github - - linkedin - - facebook - - last.fm - - flickr - - cv - + document.write("<\057v>{{ site.email }}<\057fcna><\057n>".replace(/[a-zA-Z]/g, function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);})); + + twitter + github + blog + linkedin + last.fm + flickr + vcard + cv (pdf)