Skip to content
Browse files

fixed styles issues

  • Loading branch information...
1 parent 9da940a commit c4b038ded3837d9843c0220e3ab14ad10010afa9 @rodbeh committed Feb 4, 2014
Showing with 199 additions and 237 deletions.
  1. +176 −230 public/css/main.css
  2. +22 −6 views/home.erb
  3. +1 −1 views/layout.erb
View
406 public/css/main.css
@@ -5,205 +5,222 @@ button,
input,
select,
textarea {
- color: #222
+ color: #222
}
body {
- text-align: center;
- font-family: 'Noto Serif', Helvetica, 'Helvetica Neue', Arial
+ text-align: center;
+ font-family: 'Noto Serif', Helvetica, 'Helvetica Neue', Arial
}
body * {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box
}
body {
- position: relative;
- background-color: white;
- position: relative
+ position: relative;
+ background-color: white;
+ position: relative
}
html, body, section, div {
- margin: 0;
- padding: 0
+ margin: 0;
+ padding: 0
}
header {
- position: relative;
- z-index: 1000;
- top: 0;
- left: 0;
- background-color: #172331;
- background-image: url("http://dl.dropboxusercontent.com/u/4343272/rodbeh/drawings-background.jpg");
- background-size: 100%;
- height: 100%;
- display: table;
- width: 100%;
- overflow: hidden;
+ position: relative;
+ z-index: 1000;
+ top: 0;
+ left: 0;
+ background-color: #172331;
+ background-image: url("http://dl.dropboxusercontent.com/u/4343272/rodbeh/drawings-background.jpg");
+ background-size: 100%;
+ height: 100%;
+ display: table;
+ width: 100%;
+ overflow: hidden;
}
header h1 {
- display: block;
- margin: 0 auto;
- text-indent: -999em;
- overflow: hidden;
- width: 100%;
- height: 100%;
- background: url("http://dl.dropboxusercontent.com/u/4343272/rodbeh/letters-background.png") center no-repeat;
- background-size: contain
+ display: block;
+ margin: 0 auto;
+ text-indent: -999em;
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ background: url("http://dl.dropboxusercontent.com/u/4343272/rodbeh/letters-background.png") center no-repeat;
+ background-size: contain
}
header h2,
header h3 {
- display: none;
+ display: none;
}
header div {
- display: table-cell;
- vertical-align: middle;
- text-align: center;
- height: 100%
+ display: table-cell;
+ vertical-align: middle;
+ text-align: center;
+ height: 100%
+}
+header a.retina-display {
+ display: none
}
header a {
- background: white;
- width: 200px;
- height: 200px;
- display: block;
- margin-left: auto;
- margin-right: auto;
- margin-top: -100px;
- 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
+ background: white;
+ width: 200px;
+ height: 200px;
+ display: none;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: -100px;
+ 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
+}
+header a:hover {
+ opacity: 0.4
}
::-moz-selection {
- background: #b3d4fc;
- text-shadow: none
+ background: #b3d4fc;
+ text-shadow: none
}
::selection {
- background: #b3d4fc;
- text-shadow: none
+ background: #b3d4fc;
+ text-shadow: none
}
a {
- text-decoration: underline
+ text-decoration: underline
}
a:hover {
- text-decoration: line-through
+ text-decoration: line-through
}
hr {
- display: block;
- height: 1px;
- border: 0;
- border-top: 1px solid #ccc;
- margin: 1em 0;
- padding: 0
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0
}
img {
- vertical-align: middle
+ vertical-align: middle
}
fieldset {
- border: 0;
- margin: 0;
- padding: 0
+ border: 0;
+ margin: 0;
+ padding: 0
}
textarea {
- resize: vertical
+ resize: vertical
}
.chromeframe {
- margin: 0.2em 0;
- background: #ccc;
- color: #000;
- padding: 0.2em 0
+ margin: 0.2em 0;
+ background: #ccc;
+ color: #000;
+ padding: 0.2em 0
}
.sans {
- font-family: "Helvetica", "Arial", Sans;
- font-weight: normal
+ font-family: "Helvetica", "Arial", Sans;
+ font-weight: normal
}
.header-container h1,
.header-container h2 {
- display: none
+ display: none
}
h2 {
font-size: 1.3em;
- margin: 0 0 .2em 0;
+ margin: 1em 0 .2em 0;
line-height: 1.3em;
- font-style: italic
+ font-style: italic;
+ color: white;
+ font-weight: normal
+}
+h2 span {
+ background-color: rgba(243,74,41,1);
+ padding: 2px 10px
+}
+h2 b.block {
+ font-weight: normal;
+ margin: 0.4em auto 1em
}
p {
margin-top: 0;
margin-bottom: 0;
padding: 0 20px
}
.main {
- padding: 15px 0
+ padding: 15px 0
}
footer {
- color: white;
- padding: 0;
- height: 60px;
- margin-top: 60px;
- position: relative;
- background: transparent url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-background.jpg)
+ color: white;
+ padding: 0;
+ height: 60px;
+ margin-top: 60px;
+ position: relative;
+ background: transparent url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-background.jpg)
}
a#dribbble,
a#twitter,
a#github,
a#linkedin,
a#codeschool,
a#domestika {
- width: 132px;
- height: 132px;
- margin: 0 -5px 0 0;
- display: inline-block;
- text-indent: -999em;
- background-repeat: no-repeat;
- background-color: #fff;
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/icos-sprite.png);
- background-size: 792px 264px;
- border-radius: 132px;
+ width: 132px;
+ height: 132px;
+ margin: 0 -5px 0 0;
+ display: inline-block;
+ text-indent: -999em;
+ background-repeat: no-repeat;
+ background-color: #fff;
+ background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/icos-sprite.png);
+ background-size: 792px 264px;
+ border-radius: 132px;
}
a#twitter {
- background-position: 0 -132px
+ background-position: 0 -132px
}
a#twitter:hover {
- background-position: 2px 0px;
- background-color: #000;
+ background-position: 2px 0px;
+ background-color: #000;
}
a#dribbble {
- background-position: -132px -132px
+ background-position: -132px -132px
}
a#dribbble:hover {
- background-position: -132px 0
+ background-position: -132px 0
}
a#github {
- background-position: -264px -132px
+ background-position: -264px -132px
}
a#github:hover {
- background-position: -264px 0
+ background-position: -264px 0
}
a#codeschool {
- background-position: -396px -132px
+ background-position: -396px -132px
}
a#codeschool:hover {
- background-position: -396px 0
+ background-position: -396px 0
}
a#linkedin {
- background-position: -528px -132px
+ background-position: -528px -132px
}
a#linkedin:hover {
- background-position: -528px 0
+ background-position: -528px 0
}
a#domestika {
- background-position: -660px -132px
+ background-position: -660px -132px
}
a#domestika:hover {
- background-position: -660px 0
+ background-position: -660px 0
}
.clearfix:before,
.clearfix:after {
- content: " ";
- display: table
+ content: " ";
+ display: table
}
.clearfix:after {
- clear: both
+ clear: both
}
.clearfix {
- *zoom: 1
+ *zoom: 1
}
.header-container,
.header-container header div {
@@ -224,177 +241,106 @@ section {
margin-top: 0.3em;
margin-bottom: 2em;
}
-
-
-
-
-
@media only screen and (min-width: 320px) {
.wrapper {
- width: 280px;
- margin: 0 auto
+ width: 280px;
+ margin: 0 auto
}
- .header-container {
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/iphone-background.jpg)
+ body {
+ font-size: 1.1em;
+ line-height: 1.4
}
- .header-container header div {
- height: 165px;
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/iphone-lettering-portrait.png)
+ mark {
+ box-shadow: inset 0 -4px 0 rgba(33,194,244,0.3);
}
-}
-
-@media only screen and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
- .header-container,
- .header-container header div {
- background-size: 320px 240px
+ header {
+ background-image: url("http://dl.dropboxusercontent.com/u/4343272/rodbeh/drawings-background-phones.jpg");
}
- .header-container {
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/iphone-background@2x.jpg)
+ p {
+ display: inline;
+ margin-left: -40px
}
- .header-container header div {
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/iphone-lettering-portrait@2x.png)
+ h2 + p {
+ margin-left: 0
}
-}
-
-@media only screen and (max-width: 320px) {
- p, mark, .block {
- display: inline
+ h2 b.block {
+ margin-left: -17px
}
- body {
- font-size: 1.2em;
- line-height: 1.4
+ strong.block {
+ display: block;
}
- mark {
- box-shadow: inset 0 -4px 0 rgba(33,194,244,0.3);
+}
+@media only screen and (max-width: 567px) {
+ h2 {
+ background: rgba(243,74,41,1);
+ padding: 5px;
+ margin-bottom: 1em;
+ line-height: 1.5em
}
- .header-tab {
+ strong.block em {
display: none
}
}
-
@media only screen and (min-width: 568px) {
body {
font-size: 1.4em;
- line-height: 1.5
+ line-height: 1.4
}
.wrapper {
- width: 474px;
- margin: 0 auto
- }
- .header-container {
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/iphone-background.jpg)
+ width: 520px;
+ margin: 0 auto
}
- .header-container header div {
- height: 275px;
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/iphone-lettering-landscape.png)
- }
-}
-
-@media only screen and (device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
- .header-container,
- .header-container header div {
- background-size: 568px 426px
- }
- .header-container {
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/iphone-background@2x.jpg)
+ mark {
+ box-shadow: inset 0 -9px 0 rgba(33,194,244,0.3);
}
- .header-container header div {
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/iphone-lettering-landscape@2x.png)
+ strong.block {
+ display: inline;
}
-}
-
-@media only screen and (max-width: 568px) {
- p strong {
+ h2 b.block {
display: block
}
- mark {
- box-shadow: inset 0 -9px 0 rgba(33,194,244,0.3);
- }
}
-
@media only screen and (min-width: 768px) {
body {
- font-size: 2.0em;
- line-height: 1.5
+ font-size: 1.59em;
+ line-height: 1.5
}
.wrapper {
- width: 682px;
- margin: 0 auto
- }
- .header-tab h1 {
- margin: 0;
- font-size: 1em;
- line-height: 1.2em;
- padding: .5em;
- font-style: italic;
- font-weight: normal
- }
- .header-container {
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-background.jpg)
- }
- .header-container header div {
- height: 245px;
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-lettering-portrait.png)
+ width: 682px;
+ margin: 0 auto
}
.less-space-between-words {
word-spacing: -2px
}
.group {
display: block
}
-}
-
-@media only screen and (device-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
- .header-container,
- .header-container header div {
- background-size: 768px 576px
- }
- .header-container {
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-background@2x.jpg)
+ header {
+ background-image: url("http://dl.dropboxusercontent.com/u/4343272/rodbeh/drawings-background-tablets.jpg");
}
- .header-container header div {
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-lettering-portrait@2x.png)
+ h2 {
+ font-size: 1.2em
}
-}
-
-@media only screen and (max-width: 768px) {
p {
- padding: 0 0 0 0;
- display: inline
- }
- .block {
- display: inline-block
+ display: block;
+ margin-left: 0
}
}
-
@media only screen and (min-width: 1024px) {
- .wrapper {
- width: 862px
- }
- .header-container {
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-background.jpg)
- }
- .header-container header div {
- height: 326px;
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-lettering-landscape.png)
+ body {
+ font-size: 2.0em;
+ line-height: 1.5
}
- h2 b.block {
- display: block
+ .wrapper {
+ width: 862px
}
.group {
display: inline
}
-}
-
-@media only screen and (device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
- .header-container,
- .header-container header div {
- background-size: 1024px 768px
- }
- .header-container {
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-background@2x.jpg)
+ header a {
+ display: block;
}
- .header-container header div {
- background-image: url(https://dl.dropboxusercontent.com/u/4343272/rodbeh/ipad-lettering-landscape@2x.png)
+ header {
+ background-image: url("http://dl.dropboxusercontent.com/u/4343272/rodbeh/drawings-background.jpg");
}
}
View
28 views/home.erb
@@ -7,12 +7,28 @@
<div id="content" class="main-container">
<div class="main wrapper clearfix less-space-between-words">
<section>
- <h2>You might call me a Front-End, UX, <b class="block">or Interaction designer.</b></h2>
- <p>My main mission is to deliver optimal user experience through metaphors and intuitive behaviors.</p>
- <p><mark>I bridge together the users and the <i>Back-End</i></mark>. I live and breathe interaction. <span class="block">I design icons, draw out <i>paper prototypes</i>, and program in <i>Ruby</i> for fun.</span></p>
- <p><mark>I build prototypes just for the buzz of seeing people react to using them</mark>. I love reading <i>Gladwell</i>, and watching <i>Johnathan Ive</i> and <i>Dieter Rams</i> unearthing the close relationship between manufactured objects and their creators. I am dedicated to writing ever better and more clearly marked-up, more readable <i>HTML5</i>, <i>CSS3</i>, and <i>JavaScript</i> code.</p>
- <p><mark>I realise the impossibility of the notion of perfect code, but I strive for it anyway</mark>. <span class="block">I'm a fan of <i>jQuery</i>, <i>Agile</i> and <i>Scrum</i>. The <i>GitHub</i> completely transformed my way of working.</span> I'm at ease working with other developers, clients, marketing, and with other departments.</p>
- <p><mark>I love the stimulation my work provides for both sides of my mind</mark>. <strong class="block"><i>I really love my work</i>!!</strong></p>
+ <h2>
+ <span>You might call me a Front-End, UX, </span><b class="block"><span>or Interaction designer. </span></b>
+ </h2>
+ <p>My main mission is to deliver optimal user experience
+ through metaphors and intuitive behaviors.</p>
+ <p><mark>I bridge together the users and the <i>Back-End</i></mark>.</p>
+ <p>I live and breathe interaction. I design icons, draw out
+ <i>paper prototypes</i>, and program in <i>Ruby</i> for fun.</p>
+ <p><mark>I build prototypes just for the buzz of seeing people
+ react to using them</mark>. I love reading <i>Gladwell</i>, and
+ watching <i>Johnathan Ive</i> and <i>Dieter Rams</i> unearthing
+ the close relationship between manufactured objects
+ and their creators. I am dedicated to writing ever
+ better and more clearly marked-up, more readable
+ <i>HTML5</i>, <i>CSS3</i>, <i>JavaScript</i>… and <i>Ruby</i>, <i>Haml</i>, <i>Sass</i> code.</p>
+ <p><mark>I realise the impossibility of the notion of perfect code,
+ but I strive for it anyway</mark>. I'm a fan of <i>jQuery</i>, <i>Agile</i> and
+ <i>Scrum</i>. The <i>GitHub</i> completely transformed my way of
+ working.</span> I'm at ease working with other developers,
+ clients, marketing, and with other departments.</p>
+ <p><mark>I love the stimulation my work provides for both sides
+ of my mind</mark>… <strong class="block"> – <i>I really <em>really</em> love my work</i>!!</strong></p>
</section>
<section>
<p>
View
2 views/layout.erb
@@ -25,7 +25,7 @@
return i = 1, r = $(window).height(), $("header").css({height: r})
}, $(window).resize(n), n(), $("body").css({minHeight: r * 4}), $("header a").click(function() {
var e, n;
- return n = r, e = "easeOutQuint", t && (n = n / i * 2), $("html, body").animate({scrollTop: n}, {duration: "fast", easing: e}), !1
+ return n = r, e = "easeOutQuint", t && (n = n / i * 2), $("html, body").animate({scrollTop: n}, {duration: 400, easing: e}), !1
});
if (t)
return;

0 comments on commit c4b038d

Please sign in to comment.
Something went wrong with that request. Please try again.