A Pen by dale hudson.

Flex-Projects.markdown

Flex Projects

Forked from Mark Murray's Pen Flex Projects.

Forked from dale hudson's Pen Flex Projects.

Forked from Secret Sam's Pen Flex Projects.

A Pen by dale hudson on CodePen.

License.

index.haml

.container
  %section
    .info
      %h1 Project Title
      %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias vero perferendis tenetur quaerat illo ex iste velit similique mollitia harum tempora inventore omnis architecto perspiciatis laboriosam ducimus optio repudiandae ipsum.
    .images
      %figure.large{"style"=>"background-image: url(http://www.markmurray.co/images/stock/65.jpg)"}
      %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/64.jpg)"}
      %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/63.jpg)"}
      %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/62.jpg)"}
      
  %section
    .info
      %h1 Project Title
      %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias vero perferendis tenetur quaerat illo ex iste velit similique mollitia harum tempora inventore omnis architecto perspiciatis laboriosam ducimus optio repudiandae ipsum.
    .images
      %figure.large{"style"=>"background-image: url(http://www.markmurray.co/images/stock/30.jpg)"}
      %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/31.jpg)"}>
      %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/32.jpg)"}>
      %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/33.jpg)"}>

  %section
    .info
      %h1 Project Title
      %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias vero perferendis tenetur quaerat illo ex iste velit similique mollitia harum tempora inventore omnis architecto perspiciatis laboriosam ducimus optio repudiandae ipsum.
    .images
      %figure.large{"style"=>"background-image: url(http://www.markmurray.co/images/stock/69.jpg)"}
      %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/70.jpg)"}
      %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/71.jpg)"}
      %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/72.jpg)"}
  %section
    .info
      %h1 Project Title
      %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias vero perferendis tenetur quaerat illo ex iste velit similique mollitia harum tempora inventore omnis architecto perspiciatis laboriosam ducimus optio repudiandae ipsum.
    .images
      %figure.large{"style"=>"background-image: url(http://www.markmurray.co/images/stock/73.jpg)"}
      %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/74.jpg)"}
      %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/75.jpg)"}
      %figure.small{"style"=>"background-image: url(http://www.markmurray.co/images/stock/76.jpg)"}

        

script.js

$('.small').click(function(){
  $(this).css({
    flex-grow: 1,
    order: 0
  });
  $('.large').css(
    
  );
  clicked_image_url = $(this).css('background-image').replace('url(','').replace(')','');
  lrg_image_url = $('.large').css('background-image').replace('url(','').replace(')','');
  //alert(clicked_image_url);
  //alert(lrg_image_url);
	
  

});

style.scss

@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,800|Satisfy);

*, *:before, *:after { @include box-sizing(border-box) }

html, body {
  background: #eff0f1;
  font-family: Source Sans Pro, sans-serif;
  counter-reset: section;  
  margin:0;padding:0;
}

span.name {
  text-align: center;
  display: inline-block;
  margin: 3em auto;
  font-family: Satisfy, cursive;
  color: #9f9f9f;
  background: #eff0f1;
  font-size: 2em;
  @include transform(rotate(-10deg));
  position: relative;
  z-index: 10;
  display: none;
  
  &:before {
    content: '';
    position: absolute;
    width: 120px; height: 120px;
    background: transparent;
    border: 4px solid #9f9f9f;
    border-radius: 50%;
    top: -100%; left: 0;
    z-index: 1;
  }
}

.container {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  max-width: 90vw;
  margin: 0 auto;
}

section {
  background: white;
  display:flex;
  flex:1;
  margin-top:1em;
  @include box-shadow(1px 1px 1px 0px rgba(black, 0.1));
  
  &:hover:before { background: rgba(#1abc9c, 1); transition: background-color  0.5s linear; }
  
  &:before {
      counter-increment: section;
      content: counter(section); 
      background: rgba(#1abc9c, 0.3);
      color: white;
      padding: 1em;
      line-height: 2;
    }
  
  &:nth-child(2n):before{ 
    background: rgba(#e74c3c, 0.3);  
  }
  
  &:nth-child(2n):hover:before {
    background: rgba(#e74c3c, 1)!important; 
  }
  
  .info {
    flex: 1;
    padding: 1em;
    
    h1 {
      font-weight: 700;
      margin-bottom: 1em;
      font-size: 2em;
    }
    
    p {
      font-weight: 300;
      font-style: italic;
      color: #555;
      line-height: 1.5;
      font-size: 0.9em;
    }
  }
  
  .images {
    display:flex;
    flex-direction:row;
	  flex-wrap:wrap;
		justify-content:space-between;
    flex: 3;
    padding: 1em;
    
    figure {
      @include background-size(cover);
      background-position: center center;
      cursor: pointer;
      @include transition(all 300ms ease);
      min-height:100px;
      &:hover {
        @include filter(grayscale(1));
      }
    }
    
    .large {
      flex-basis:100%;
      margin-bottom: 0.75em;
      height:66vh;
    }
    
    .small {
      //flex: 1;
      min-width:calc(100% / 3 - 0.5em);
      max-height:33vh;
    }
  }
}

@media (max-width: 600px) {
  section {
    flex-direction: column!important;
  }
}
@media (max-width: 480px) {
  section {
    flex-direction: column!important;
  }
  
}