mirror of
https://github.com/jimeh/jimeh.github.io.git
synced 2026-02-19 09:06:40 +00:00
Various updates including responsiveness
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
38
index.html
38
index.html
@@ -2,30 +2,26 @@
|
||||
layout: default
|
||||
---
|
||||
<header class="site-header">
|
||||
<div class="content">
|
||||
<div class="site-header-container">
|
||||
<img class="site-avatar" src="{{ "/img/jimeh-4.0.jpg" | prepend: site.baseurl }}">
|
||||
<span class="header-content">
|
||||
<span class="site-name">{{ site.name }}</span>
|
||||
<span class="site-nickname">({{ site.nickname }})</span>
|
||||
<p class="site-description">{{ site.description }}</p>
|
||||
<span class="content">
|
||||
<span class="site-title">
|
||||
<span class="site-name">{{ site.name }}</span>
|
||||
<span class="site-nickname">({{ site.nickname }})</span>
|
||||
<span class="site-description">{{ site.description }}</span>
|
||||
</span>
|
||||
<div class="site-links">
|
||||
<script type="text/javascript">
|
||||
document.write("<n uers=\"znvygb:{{ site.email }}\"><v pynff=\"sn sn-rairybcr\"><\057v><fcna pynff=\"yvax-grkg\">pbagnpg\100wvzru\056zr<\057fcna><\057n>".replace(/[a-zA-Z]/g, function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}));
|
||||
</script><a href="https://twitter.com/{{ site.twitter_username }}">
|
||||
<i class="fa fa-twitter"></i><span class="link-text">twitter</span>
|
||||
</a><a href="https://github.com/{{ site.github_username }}">
|
||||
<i class="fa fa-github"></i><span class="link-text">github</span>
|
||||
</a><a href="http://www.linkedin.com/in/{{ site.linkedin_username }}">
|
||||
<i class="fa fa-linkedin"></i><span class="link-text">linkedin</span>
|
||||
</a><a href="https://facebook.com/{{ site.facebook_username }}">
|
||||
<i class="fa fa-facebook-square"></i><span class="link-text">facebook</span>
|
||||
</a><a href="https://last.fm/user/{{ site.lastfm_username }}">
|
||||
<i class="fa fa-lastfm"></i><span class="link-text">last.fm</span>
|
||||
</a><a href="https://flickr.com/photos/{{ site.flickr_username }}/">
|
||||
<i class="fa fa-flickr"></i><span class="link-text">flickr</span>
|
||||
</a><a href="{{ site.cv_url }}">
|
||||
<i class="fa fa-file-text-o"></i><span class="link-text">cv</span>
|
||||
</a>
|
||||
document.write("<n uers=\"{{ site.mailto }}\" bapyvpx=\"_tnd\056chfu(['_genpxRirag', 'yvaxGb', 'rznvy', guvf\056uers]);\"><v pynff=\"sn sn-rairybcr\"><\057v><fcna pynff=\"yvax-grkg\">{{ 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);}));
|
||||
</script>
|
||||
<a href="https://twitter.com/{{ site.twitter_username }}" onclick="_gaq.push(['_trackEvent', 'linkTo', 'twitter', this.href]);"><i class="fa fa-twitter"></i><span class="link-text">twitter</span></a>
|
||||
<a href="https://github.com/{{ site.github_username }}" onclick="_gaq.push(['_trackEvent', 'linkTo', 'github', this.href]);"><i class="fa fa-github"></i><span class="link-text">github</span></a>
|
||||
<a href="{{ site.blog_url }}" onclick="_gaq.push(['_trackEvent', 'linkTo', 'blog', this.href]);"><i class="fa fa-medium"></i><span class="link-text">blog</span></a>
|
||||
<a href="http://www.linkedin.com/in/{{ site.linkedin_username }}" onclick="_gaq.push(['_trackEvent', 'linkTo', 'linkedin', this.href]);"><i class="fa fa-linkedin"></i><span class="link-text">linkedin</span></a>
|
||||
<a href="https://last.fm/user/{{ site.lastfm_username }}" onclick="_gaq.push(['_trackEvent', 'linkTo', 'last.fm', this.href]);"><i class="fa fa-lastfm"></i><span class="link-text">last.fm</span></a>
|
||||
<a href="https://flickr.com/photos/{{ site.flickr_username }}/" onclick="_gaq.push(['_trackEvent', 'linkTo', 'flickr', this.href]);"><i class="fa fa-flickr"></i><span class="link-text">flickr</span></a>
|
||||
<a href="{{ site.vcard_url }}" onclick="_gaq.push(['_trackEvent', 'download', 'resume', this.href]);"><i class="fa fa-user"></i><span class="link-text">vcard</span></a>
|
||||
<a href="{{ site.cv_url }}" onclick="_gaq.push(['_trackEvent', 'download', 'vcard', this.href]);"><i class="fa fa-file-text-o"></i><span class="link-text">cv (pdf)</span></a>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user