A Pen by LukyVJ.

index.html

<!--  

init.css  

-->

<!-- First level h1 : Main title-->
<h1>Title</h1>

<h1>Title level 2</h1>

<p>Banh mi food truck freegan, brunch kogi mixtape Pinterest Thundercats yr butcher blog swag master cleanse jean shorts. Williamsburg <a href="#">link</a> keffiyeh American Apparel selfies Etsy, Vice letterpress. Kale chips beard sartorial next level wayfarers mumblecore. Letterpress Vice fixie 90's single-origin coffee, put a bird on it hashtag <a href="#">an other link</a> High Life Wes Anderson Pinterest fashion axe. PBR&B Pitchfork kogi ethical. Godard try-hard Carles you probably haven't heard of them quinoa readymade, occupy cliche. Gentrify McSweeney's bitters church-key.</p>

<h1>Title level 2</h1>

<p>Banh mi food truck freegan, brunch kogi mixtape Pinterest Thundercats yr butcher blog swag master cleanse jean shorts. Williamsburg keffiyeh American Apparel selfies Etsy, Vice letterpress. Kale chips beard sartorial next level <a href="#">a link</a> wayfarers mumblecore. Letterpress Vice fixie 90's single-origin coffee, put a bird on it hashtag <a href="#">And an other one</a> High Life Wes Anderson Pinterest fashion axe. PBR&B Pitchfork kogi ethical. Godard try-hard Carles you probably haven't heard of them quinoa readymade, occupy cliche. Gentrify McSweeney's bitters church-key.</p>


<!-- Regular text
 
Without a H1 before,  init.css will read it as regular text -->

<p>Letterpress Vice fixie 90's single-origin coffee, put a bird on it hashtag High Life Wes Anderson Pinterest fashion axe. Them Quinoa Readymade, Occupy Cliche. Gentrify McSweeney's Bitters Church-Key.</p>

<p>Them Quinoa Readymade, Occupy Cliche. Gentrify McSweeney's Bitters Church-Key.</p>

<blockquote>Letterpress Vice Fixie 90'S Single-Origin Coffee, Put A Bird On It Hashtag High Life Wes Anderson Pinterest Fashion Axe.</blockquote>

<!-- LINKS -->
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<!-- IMG -->

<!-- One img : 100% -->
<img src="http://d13yacurqjgara.cloudfront.net/users/166931/screenshots/1339246/dribbbleshot.png" alt="" />

<!-- img + img : 50% -->
<img src="http://d13yacurqjgara.cloudfront.net/users/166931/screenshots/1339246/dribbbleshot.png" alt="" />
<img src="http://d13yacurqjgara.cloudfront.net/users/166931/screenshots/1339246/dribbbleshot.png" alt="" />

<!-- img + img + img + img : 25% -->

<img src="http://d13yacurqjgara.cloudfront.net/users/166931/screenshots/1339246/dribbbleshot.png" alt="" />
<img src="http://d13yacurqjgara.cloudfront.net/users/166931/screenshots/1339246/dribbbleshot.png" alt="" />
<img src="http://d13yacurqjgara.cloudfront.net/users/166931/screenshots/1339246/dribbbleshot.png" alt="" />
<img src="http://d13yacurqjgara.cloudfront.net/users/166931/screenshots/1339246/dribbbleshot.png" alt="" />









<!-- -->
<h2>copyright 2013</h2>

init.css.markdown

init.css

A css stylesheet that needs less HTML structure, for better result.

A Pen by LukyVJ on CodePen.

License.

script.js

/*
# init.css
#
# @auhtor : @lukyvj
# 
# A css stylesheet that needs less HTML 
# structure, for better result .
#
# With init.css, you only focus on inline 
# tags. No need to add divs, or any bloc 
# elements. 
*/

style.scss

@import "compass";
/*
# init.css
*/

/* Main */
$c-1:#333;
$c-2:#eff0f2; 
$notwhite:true;


@mixin reset {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

@mixin high{
  -webkit-font-smoothing:antialiased;
  @include box-sizing(border-box);
  @include appearance(none);
}


*{
  @include high();
}
html,body{
  @include reset();
}

*:before,
*:after{ 
  content:'';
  display:block;
  float:left;
} 
body{
  background:$c-2;
  overflow-x:hidden;
  *{  
    @include high();
    &::selection{
      background:$c-1;
      color:$c-2;
    }
  }
  &:before{ // Header
    width:100%;
    height:12em;
    background:$c-1;
    position:absolute;
    z-index:-1;
    float:left;
    top:0;
    &::selection{
      background:$c-2;
      color:$c-1;
    }
  }
  &:after{//Footer
    width:100%;
    height:2em;
    background:$c-1;
    position:fixed;
    margin-bottom:-.15em;
    border-top:.1em solid $c-2;
    z-index:0; 
    float:left;
    bottom:0;
    
  }
  
  > h1:first-child{
    color:$c-2;
    text-align:center;
    line-height:3;
    font-size:3em;
    font-family:Georgia,Cambria,"Times New Roman",Times,serif;
    text-transform:uppercase;
    letter-spacing:.085em;
  }
  > h2:last-of-type{/*
    color:$c-2;
    text-align:center;
    font-size:.9em;
    font-family:Georgia,Cambria,"Times New Roman",Times,serif;
    text-transform:uppercase;
    letter-spacing:.085em;
    position:fixed;
    line-height:0;
    margin-top:-39.3em;
    display:block;
    z-index:9;
    width:100%;*/
  }
  > h1:not(:first-child){
    color:$c-1;
    line-height:3;
    font-size:2em;
    padding:0 .6em;
    margin:1.5em 0 -1em;
    font-family:Georgia,Cambria,"Times New Roman",Times,serif;
    text-transform:Capitalize;
     clear:both; 
}
  h1 + p{
    font-family:Georgia,Cambria,"Times New Roman",Times,serif;
    letter-spacing: .01rem;
    font-weight: 400;
    font-style: normal;
    font-size: 1.375em;
    line-height: 1.5;
    padding:.4em 1em;
    color:$c-1;  
  } 
  
  p,a{
    font-family:Georgia,Cambria,"Times New Roman",Times,serif;
    letter-spacing: .01rem;
    font-weight: 400;
    font-style: normal;
    font-size: 1.15em;
    line-height:24px;
    padding:.4em 1.8em;
    color:$c-1;  

  }
  a{
    padding:.4em 1.5218em ;
    @include box-shadow(0 0 0 .1em lighten($c-1,45%));
    margin-left:.86em;
    margin-top:1em;
    color:lighten($c-1,25%); 
    display:block;
    float:left;
    &:last-child{
     clear:both; 
      
    }
  } 
  p{ 
    &> a{ //Inline <a> tags (in a chain of text, so not a button)
      color:lighten($c-1,30%);
      @include box-shadow(0 0 0);
      padding:0;
      margin:0;
      /**/
      display:inherit;
      float:inherit; 
    }
  }
  /* Quote */
  blockquote{
    line-height: 1.4;
    text-align: center;
    font-size: 1.8em;
    margin: .5em 0;
    border: 0;
    padding: 0;
    font-family: Georgia,Cambria,"Times New Roman",Times,serif;
    letter-spacing: .01rem;
    font-weight: 400;
    font-style: italic;
    padding:0 .5em;
    padding-bottom: 3px;
    text-align:center;
    
    color:lighten($c-1,25%);
    /* &:before,&:after{
    content:'"';
    float:left;
  }*/
  }
  
  img{
    display:block;
    width:100%;
    padding:1em;
    &+img{
      width:50%;
      float:left;
    }
    &+ img + img + img{
      width:25%;
      float:left;
    }
  }
  
  //End (I plan to maybe add margin at the end.. ) 
  *::last-of-type{
    
  }
}

@media all and (max-width:40em){
  body{
    overflow-x:hidden;
    font-size:.785em;
     &:before{ // Header
    height:6em; 
    }
     > h1:first-child{
    line-height:.5;
  }
    
    p{  
      
      text-align:justify;
       &>a{
      display:inline;
      width:auto;
      float:inherit;
      text-align:inherit;
      }
    }
          a{width:93% ;display:block;float:left;text-align:center} 

      img{
        display:block;
        width:100%;
        padding:1em;
        &+img{
          width:50%;
          float:left;
        }
        &+ img + img + img{
          width:50% ;
          float:left; 
        }
      }
    }
  }



// I just tried some things.. keep it or not.. I said with true/false if the background is white or not. If it is, set the value to true, and you'll (maybe) get a better experience of reading due to the text-shadow. 
@if($notwhite==true){
  p,h1:not(:first-child), blockquote{
  text-shadow:0 -.05em 0 white;
} 
}