s.css

/*-------------------------------------------------------------------------------------
  Styles for marciobarrios.com, by @marciobarrios

   _       __     __                                 __          __     __
  | |     / /__  / /________  ____ ___  ___     ____/ /_  ______/ /__  / /
  | | /| / / _ \/ / ___/ __ \/ __ `__ \/ _ \   / __  / / / / __  / _ \/ /
  | |/ |/ /  __/ / /__/ /_/ / / / / / /  __/  / /_/ / /_/ / /_/ /  __/_/
  |__/|__/\___/_/\___/\____/_/ /_/ /_/\___/   \__,_/\__,_/\__,_/\___(_)


  These styles are not minimized because I love to learn and I inspected
  lots of CSS from many sites, so it's fair to let you steal/copy/learn,
  in fact I commented and clarified this css to help you :)

  I'm using a mobile first approach, so I style a very basic version of the site
  and with media queries I add the more css to add value for bigger screens

  Note: I'm using PrefixFree to not write browser prefixes, great! (http://cl.ly/K2vt)

  Ah! and remember: http://dowebsitesneedtolookexactlythesameineverybrowser.com

  Check marciobarrios.com/humans.txt for contact info
  ------------------------------------------------------------------------------------- */

@charset "UTF-8";

/*
  Super minimal Reset :P if you need one for a "real" project,
  use normalize.css (http://cl.ly/K2QO)

  Read this related with "box-sizing" property: http://cl.ly/K1kT
*/
* { padding: 0; margin: 0; box-sizing: border-box; }

/*
  General styles

  1. I use typekit (www.typekit.com) to load webfonts, I recommend it!
  2. Controls how the browser renders text (more info: http://cl.ly/K1pT)
  3. Prevents zoom on mobile browsers, use it carefully (http://cl.ly/K1to, http://cl.ly/K9Xo)
 */
html {
  /*font: 100%/1.5 "proxima-nova-1","proxima-nova-2", sans-serif;*/
  font: 90%/1.6 "Gotham HTF", sans-serif; /* 1 */
  color: rgb(51,51,51);
  -webkit-font-smoothing: antialiased; /* 2 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

/* Loading layer */
.loading { display: none; }
.ready .loading { transition: .5s linear; opacity: 0; z-index: -1; }

/*
  Title block

  1. Use unitless line-height (http://cl.ly/K2Zs)
*/
hgroup { position: relative; text-align: center; line-height: 1.2; } /* 1 */

/*
  Title separator

  1. Only to remember, transition is a shorthand taking advantage of these defaults:
     transition-property: all, transition-timing-function: ease, transition-delay: 0s
*/
hgroup:after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 2.5em;
  background: rgb(221,221,221); background: rgba(0,0,0,.2);
  box-shadow: 0 1px -1px rgba(0,0,0,.05);
}
  h1 { z-index: 1; font-size: 3em; font-weight: 700; transition: .25s; } /* 1 */
    h1 b { display: none; }
      h1 b em:before { content: "B"; }
      h1 b em:first-child:before { content: "M"; }
    h1 i { display: inline-block; font-style: normal; }

  h2 {
    font-size: .9em;
    letter-spacing: .4em;
    text-transform: uppercase;
    padding-left: .4em;
    font-weight: 400;
  }

/*
  Other elements

  1. I recommend to use hyphens for your paragraphs (http://cl.ly/K36M)
*/
p { margin-top: 1.2em; font-size: 1.2em; hyphens: auto; } /* 1 */

/*
  Quote

  1. Using unicode characters (in this case for quotes), a great resource here: http://unicodinator.com
  2. Remember, in HTML5 footer is not only the page footer (http://cl.ly/K2ei)
*/
blockquote { margin: 2em 0; }
blockquote p {
  /*font: italic 2.2em/1.2 "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2", serif;*/
  font: 2.2em/1.2 "Sentinel Book", serif;
  margin: 0;
}
blockquote p:before { content: "\201C"; } /* 1 */
blockquote p:after  { content: "\201D"; }
blockquote footer { display: block; text-align: right; font-style: normal; margin-right: 2.2em; } /* 2 */
blockquote footer:before { content: "\2014  "; }

/* Generic links */
a { color: #369BCA; text-decoration: none; font-weight: 700; transition: .5s; }
a:hover { color: inherit; }
a:active, a:hover { outline: 0; }

/* Main section (well... the only section) */
section { width: auto; max-width: 34em; margin: 0 auto; padding: 2em; }

/*
  Social icons using web fonts

  1. This letter-spacing is to remove white space between inline-block elements,
     but there are other ways to do it: http://cl.ly/K2wS
  2. I use to write rgb/hex fallbacks for rgba for <IE9
*/
.social { letter-spacing: -.2em; margin-left: -1em; } /* 1 */
  .social > li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    letter-spacing: 0;
    line-height: 1.1;
    margin: 1em 0 0 1em;
  }
    .ss-icon {
      font-size: 2.5em;
      color: rgb(0,0,0); color: rgba(0,0,0,.25); /* 2 */
      /*text-shadow: 0 0 10px rgba(255,255,255,.5);*/
      transition: .5s;
    }
    .ss-icon:hover {
      color: #369BCA;
      text-shadow: 0 0 1px rgba(255,255,255,.75);
    }

    /* Tooltip to show transitioned on hover for every item */
    .hint {
      position: absolute; top: -3.5em; left: 50%;
      width: 6.5em;
      margin-left: -3em;
      padding: .2em .4em;
      text-align: center;
      border-radius: 3px;
      background: rgb(0,0,0); background: rgba(0,0,0,.8);
      border: 1px solid black;
      color: white;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
      opacity: 0; filter: alpha(opacity=0);
      transition: .25s;
    }
    /* Making a triangle with borders, more info: http://cl.ly/K2yS */
    .hint:before {
      content: "";
      position: absolute; bottom: -11px; left: 50%;
      width: 0;
      height: 0;
      margin-left: -5px;
      border: 5px solid transparent;
      border-top-color: black;
    }
    li:hover > .hint { top: -2.5em; opacity: 1; filter: none; }


/* ICON FONT (http://symbolset.com)
   ------------------------------------------------------------------------------------- */

@font-face {
  font-family: "SSSocial";
  src: url('webfont/ss-social-circle.eot');
  src: url('webfont/ss-social-circle.eot?#iefix')         format('embedded-opentype'),
       url('webfont/ss-social-circle.woff')               format('woff'),
       url('webfont/ss-social-circle.ttf')                format('truetype'),
       url('webfont/ss-social-circle.svg#SSSocialCircle') format('svg');
  font-weight: normal;
  font-style: normal;
}

.ss-icon, [class^="ss-"]:before {
  font-family: "SSSocial";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings   : "liga=1";
  -moz-font-feature-settings   : "liga";
  -ms-font-feature-settings    : "liga" 1;
  -o-font-feature-settings     : "liga";
  font-feature-settings        : "liga";
}


/* WEB FONTS
   ------------------------------------------------------------------------------------- */
@font-face {
  font-family: 'Gotham HTF';
  src: url('GothamHTF-Bold.eot'); /* IE9 Compat Modes */
  src: url('GothamHTF-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('GothamHTF-Bold.woff') format('woff'), /* Modern Browsers */
       url('GothamHTF-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('GothamHTF-Bold.svg#030251e5701d786046d51ed2261d4a74') format('svg'); /* Legacy iOS */

  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: 'Gotham HTF Book';
  src: url('GothamHTF-Book.eot'); /* IE9 Compat Modes */
  src: url('GothamHTF-Book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('GothamHTF-Book.woff') format('woff'), /* Modern Browsers */
       url('GothamHTF-Book.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('GothamHTF-Book.svg#8815e0559e42d2bb6d63fb542f63fc99') format('svg'); /* Legacy iOS */

  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Sentinel Book';
  src: url('webfont/Sentinel-Book.eot'); /* IE9 Compat Modes */
  src: url('webfont/Sentinel-Book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont/Sentinel-Book.woff') format('woff'), /* Modern Browsers */
       url('webfont/Sentinel-Book.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont/Sentinel-Book.svg#fb7f01513910e38bdb2e628a3e62faf5') format('svg'); /* Legacy iOS */

  font-style: normal;
  font-weight: 400;
}


/* MEDIA QUERIES
   -------------------------------------------------------------------------------------

   Summary of mediaqueries based on a mobile first approach:

   * Adjust font size for small screens
   * Add some styles (background, content, text animations) to big screens
   * Adjust background and sizes for iPad

*/

/* Smaller than iPad. Due to a mobile first approach, I only change font sizes here */
@media only screen and (max-width: 767px) {

  h1 { font-size: 2.5em; }
  h2 { font-size: .7em; }
  blockquote p { font-size: 1.5em; }

}

/* iPad or bigger ---------------------------------------------- */
@media only screen and (min-width: 768px) {

  html { color: rgba(0,0,0,.7); }

  /*
    Right white semi-transparent block

    1. This is to create a full-height column, it would be simper w/ gradients in <body>:
       background: linear-gradient(right,rgba(255,255,255,.5) 34em, rgba(255,255,255,0) 35em),
       but w/ border works in IE
  */
  body:before {
    content: "";
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;
    border: 0 solid rgba(255,255,255,.25);
    border-right-width: 34em;
  }

  /*
    Background layer

    1. Easy way to make the background to cover all the viewport (http://cl.ly/K2UL)
    2. Webkit filters to create a nice effect: if you move out your
       cursor from the viewport it will desaturate the background, more info
       about webkit filters: http://cl.ly/K1ls
  */
  .bg {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    background: url(img/bg.jpg) no-repeat center center fixed;
    background-size: cover; /* 1 */
    -webkit-filter: grayscale(100%); /* 2 */
    transition: 1s;
  }
  html:hover .bg { -webkit-filter: grayscale(50%); }

  /*
    Title w/ fade-in animation

    1. letter-spacing specifies spacing behavior between text characters (http://cl.ly/K2I2),
       the padding-right is to compensate this space
  */
  h1 { position: relative; }
  .ready h1 { animation: fadeInDown 1s 1s backwards ease-in-out; }
    h1 b {
      display: inline-block;
      letter-spacing: -.3em; /* 1 */
      padding-right: .3em;
      font-weight: 700;
      color: rgba(0,0,0, .7);
    }
    h1 i, h2 { opacity: 0; }
    h1 i { position: absolute; top: 0; left: 0; right: 0; }

  h2 { color: rgba(0,0,0,.5); }
  .ready h2 { opacity: 1; animation: fadeInUp 1s 1s backwards ease-in-out; }

  /*
    Text effect on hover

    1. Trick to mantain states w/ "infinite" transition delays (http://cl.ly/K2IR)
  */
  h1 b em { position: relative; font-style: normal; }
  h1:hover b em { left: 5px; opacity: 0; transition: .2s; }
  h1:hover b em:first-child { left: -130px; }
  h1:hover i { opacity: 1; transition: .4s .2s; }
  h1 b, h1 b em, h1 i { transition: 1s; }
  /*h1 b, h1 b em, h1 i { transition: 0 9999999s; }*/ /* 1 */

  /* Main section */
  section {
    position: relative; z-index: 2;
    float: right;
    margin: 0;
    width: 34em;
    padding: 2em;
  }

  /* Loading layer */
  .loading {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3;
    display: block;
    background: white;
    opacity: 1;
  }

  /*
    Spinner

    1. An image replacement techique to hide the text (http://cl.ly/K2dF)
    2. It uses CSS Animations with steps, check this example to understand how it works:
       http://dabblet.com/gist/1953867
  */
  .spinner {
    position: fixed; top: 50%; left: 50%; z-index: 4;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    font: 0/0 a; color: transparent; /* 1 */
    background: url(img/spinner.gif) no-repeat center center; /* Old versions of modern browsers (without animations) */
    background: url(img/spinner.png) no-repeat center center;
    background: url(img/spinner.gif) no-repeat center center\0; /* IE8/9 */
    animation: spinner .7s steps(8) infinite; /* 2 */
  }

  /*
    CSS Animations

    More info: http://cl.ly/K2L6
  */

  /* Animations to fade in an element */
  @keyframes fadeInDown {
    0%    { opacity: 0; transform: translateY(-20px); }
    100%  { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeInUp {
    0%    { opacity: 0; transform: translateY(20px); }
    100%  { opacity: 1; transform: translateY(0); }
  }

  /* Spinner animation (based on 8 different steps) */
  @keyframes spinner { from { background-position: 0 0; } to { background-position: -384px 0; } }

}

/* Tablets (portrait) ------------------------------------------- */
@media only screen and (orientation: portrait) {

  section { padding: 2em 1em 1em; }

 .social { margin-left: -1.2em; text-align: center; }
  .social > li { margin: 1.2em 0 0 1.2em; }
    .ss-icon { font-size: 2.8em; }
}

/* iPad (portrait & landscape) ---------------------------------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {

  h2 { font-size: .83em; }

   /* Text effect w/ a delay */
  .ready h1 b em { left: 20px; opacity: 0; transition: .2s 5s; }
  .ready h1 b em:first-child { left: -120px; }
  .ready h1 i { opacity: 1; transition: .4s 5.2s; }

  .ss-icon { font-size: 2.8em; }

  .bg { display: none; }

}

/* iPad (portrait) ---------------------------------------------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {

  html { background: url(img/bg.jpg) no-repeat -270px -50px fixed; background-size: 200%; }
  body:before { border-right-width: 24em; }

  section { width: 24em; padding: 2em; }

  .social { margin-left: -1.6em; text-align: center; }
    .social > li { margin: 1.2em 0 0 1.6em; }

}

/* iPad (landscape) -------------------------------------------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {

  html { background: url(img/bg.jpg) no-repeat -120px -100px fixed; background-size: 120%; }

  hgroup { margin-top: -1em; }
  hgroup:after { margin-top: 1.7em; }

  .social { margin-left: -1em; text-align: left; }
    .social > li { margin: 1.2em 0 0 1em; }

}