CodePen

HTML

            
              #star
#site
  header Blurb ★ Herd
  article#content
    section November 14 2012
    header My Thoughts On Adapting Early
    p The web changes super fast these days, especially on the mobile side of the equation. One of the big questions web companies face, from start-up to established corporations is when and how they should adopt new technologies, workflows and design concepts.
    p I think, for the most part, larger companies that claim to be early adopters are really just have a “let’s wait and see what everyone else does” attitude then when it looks promising they can throw the influence and money behind it to build something with it. Start-ups are risky ventures anyway so they really are the new adopters, they are the ones that in some cases drive the new tech forward.
    p In either case, there are some pretty big risks and rewards for early adoption. As I see it, for any tech company the reward of early adoption does outweigh the risk – even in large companies.
    a href="http://www.blurbherd.com/2012/11/14/my-thoughts-on-adopting-early/" full article
            
          
!

CSS

            
              body{font: 15px 'Helvetica Neue', sans-serf;}
#star{
  .star(325, px, #f4f4f4, -15);
  position: fixed;
  z-index: -1;
}
#site{
 padding: 1% 15%; 
}
header{
  text-align: center;
  color: #333;
  font-size: 72px;
  font-family: 'LeagueGothic', 'Arial Narrow', Impact, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(256, 256, 256, 0.1), 0 2px 0 #AAA, 0 3px 0 #AAA, 0 3px 5px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid #CCC;
  margin: 0 0 20px;
  padding: 0 0 20px;
}
article section{
  line-height: 12px;
  text-transform: uppercase;
  color: #A61010;
}
a{
  color: #A61010;
  &:hover{
    color: #730A0A;
  }
}
article header{
  font-size: 48px;
  margin: 0 0 20px;
  text-shadow: 0 1px 0 rgba(256, 256, 256, 0.7), 0 1px 3px rgba(0, 0, 0, 0.4);
  text-align: left;
  border: none;
}


/*begin mixin*/
.star(@starSize: 1, @units: em, @starColor: red, @starRotation: 0){
   // to make the star be right side up at 0 we add 35 to the rotation.
   @realStarRotation: @starRotation + 35;
   @star-105: @starSize * -1.05;
   @star80: @starSize * 0.8;
   @star70: @starSize * 0.7;
   @star-65: @starSize * -0.65;
   @star60: @starSize * 0.6;
   @star-45: @starSize * -0.45;
   @star30: @starSize * 0.3;
   @star3: @starSize * 0.03;

   margin: ~"@{star60}@{units}" 0;
   display: block;
   color: @starColor;
   width: 0px;
   height: 0px;
  border-right: ~"@{starSize}@{units}" solid transparent;
   border-bottom: ~"@{star70}@{units}"  solid @starColor;
   border-left: ~"@{starSize}@{units}" solid transparent;
   transform: rotate(~"@{realStarRotation}deg");
  
  &:before {
   border-bottom: ~"@{star80}@{units}" solid @starColor;
   border-left: ~"@{star30}@{units}" solid transparent;
   border-right: ~"@{star30}@{units}" solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: ~"@{star-45}@{units}";
   left: ~"@{star-65}@{units}";
   display: block;
   content: '';
   transform: rotate(-35deg);
  }
  
  &:after {
   position: absolute;
   display: block;
   color: red;
   top: ~"@{star3}@{units}";
   left: ~"@{star-105}@{units}";
   width: 0px;
   height: 0px;
   border-right: ~"@{starSize}@{units}" solid transparent;
   border-bottom: ~"@{star70}@{units}" solid @starColor;
   border-left: ~"@{starSize}@{units}" solid transparent;
   transform: rotate(-70deg);
   content: '';
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................