Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

small enhancements

  • Loading branch information...
commit 456bbe1a6b19315e752e40b5f29ee027f8a32ef2 1 parent c4b038d
@rodbeh authored
Showing with 63 additions and 15 deletions.
  1. +60 −12 public/css/main.css
  2. +2 −2 views/home.erb
  3. +1 −1  views/layout.erb
View
72 public/css/main.css
@@ -1,4 +1,3 @@
-
html,
body,
button,
@@ -36,7 +35,7 @@ header {
height: 100%;
display: table;
width: 100%;
- overflow: hidden;
+ overflow: hidden
}
header h1 {
display: block;
@@ -44,7 +43,7 @@ header h1 {
text-indent: -999em;
overflow: hidden;
width: 100%;
- height: 100%;
+ height: inherit;
background: url("http://dl.dropboxusercontent.com/u/4343272/rodbeh/letters-background.png") center no-repeat;
background-size: contain
}
@@ -61,22 +60,27 @@ header div {
header a.retina-display {
display: none
}
-header a {
- background: white;
+header span {
+ position: relative;
+ display: block;
+ width: 200px;
+ height: 100px;
+ margin: -100px auto 0
+}
+header span span {
width: 200px;
height: 200px;
- display: none;
- margin-left: auto;
- margin-right: auto;
- margin-top: -100px;
+ display: block;
border-radius: 100px;
line-height: 100px;
font-weight: bold;
background: white url("http://dl.dropboxusercontent.com/u/4343272/rodbeh/header-arrow.png") center 40px no-repeat;
- opacity: 0.2
+ opacity: 0.1
}
-header a:hover {
- opacity: 0.4
+header span span a {
+ width: 200px;
+ height: 200px;
+ display: block;
}
::-moz-selection {
background: #b3d4fc;
@@ -269,6 +273,17 @@ section {
strong.block {
display: block;
}
+ header span {
+ width: 100px;
+ height: 50px;
+ margin: -50px auto 0
+ }
+ header span span {
+ width: 100px;
+ height: 100px;
+ background-position-y: 18px;
+ background-size: 75px
+ }
}
@media only screen and (max-width: 567px) {
h2 {
@@ -325,6 +340,17 @@ section {
display: block;
margin-left: 0
}
+ header span {
+ width: 150px;
+ height: 75px;
+ margin: -75px auto 0
+ }
+ header span span {
+ width: 150px;
+ height: 150px;
+ background-position-y: 32px;
+ background-size: 100px
+ }
}
@media only screen and (min-width: 1024px) {
body {
@@ -343,4 +369,26 @@ section {
header {
background-image: url("http://dl.dropboxusercontent.com/u/4343272/rodbeh/drawings-background.jpg");
}
+ header span span:hover {
+ opacity: 0.2
+ }
+ header span {
+ width: 200px;
+ height: 100px;
+ margin: -100px auto 0
+ }
+ header span span {
+ width: 200px;
+ height: 200px;
+ background-size: 150px;
+ background-position-y: 36px
+ }
+}
+@media only screen and (max-width: 1024px) {
+ header span span:hover {
+ opacity: 0.1
+ }
+ header span span a {
+ display: none
+ }
}
View
4 views/home.erb
@@ -1,8 +1,8 @@
<header>
<h1 class="fullname">Carlos Alberto Rodriguez Behning</h1>
<h2 class="username">Rodbeh!</h2>
- <h3 class="tags">Front-End, HCI, IxD, UI-UX, Git, Et cetera…</h3>
- <a href="#content"></a>
+ <h3 class="tags">Front-End, HCI, IxD, UI-UX, Ruby, Git, Et cetera…</h3>
+ <span><span><a href="#content"></a></span></span>
</header>
<div id="content" class="main-container">
<div class="main wrapper clearfix less-space-between-words">
View
2  views/layout.erb
@@ -23,7 +23,7 @@
var e, n, r, i, s;
i = null, s = null, r = null, n = function() {
return i = 1, r = $(window).height(), $("header").css({height: r})
- }, $(window).resize(n), n(), $("body").css({minHeight: r * 4}), $("header a").click(function() {
+ }, $(window).resize(n), n(), $("body").css({minHeight: r * 2}), $("header a").click(function() {
var e, n;
return n = r, e = "easeOutQuint", t && (n = n / i * 2), $("html, body").animate({scrollTop: n}, {duration: 400, easing: e}), !1
});
Please sign in to comment.
Something went wrong with that request. Please try again.