theorangeone.net-legacy/static/src/less/style.less

@import "node_modules/bootstrap/less/bootstrap";
@import "node_modules/bootstrap/less/theme";
@import "node_modules/ionicons-pre/less/ionicons";
// @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,700);
@import (inline) "node_modules/animate.css/animate.css";
@import (inline) "node_modules/normalize.css/normalize.css";

/* @group Mixins */
.transition(@value) {
    -webkit-transition: @value;
    -moz-transition: @value;
    -o-transition: @value;
    -ms-transition: @value;
    transition: @value;
}

.box-shadow(@value) {
  -webkit-box-shadow: @value;
  -moz-box-shadow: @value;
  box-shadow: @value;
}
/* @end Mixins */


/* @group Global */
.btn {
  .transition(~"ease-in-out .2s background-color");
}

html, body{
  font-family: 'Roboto', sans-serif;
}

p {

}

ol , ul{
  font-size: inherit;
  & > li {
    font-size: inherit
  }
}

a.no-color-change {
  color: inherit;
  &:hover {
    color: inherit;
  }
}
/* @end Global */

/* @group Homepage */
.index {
  #header {
    height: 100vh;
    background: #232323;
    background-size: cover;
    background-position: fixed;
    .jumbotron {
      margin-top: 5vh; 
      text-align: center; 
      background-color: transparent; 
      color: white; 
      padding-bottom: 0; 
      margin-bottom: 0;
      h1 {
        margin-bottom: 15px;
      }
      .icon {
        cursor: pointer;
        .transition(color 0.4s);
        &:hover {
          color: #ff7f00;
        }
      }
    }
  }
  #intro-text {
    background-color: #333;
    .container {
      text-align: center; 
      margin-top: 35px; 
      margin-bottom: 35px; 
      color: white; 
      font-size: 17px;
    }
  }


  #project-images {
    background: url(http://catesmechanical.com/images/blueprint-background1.jpg);
    background-size: cover;
    .container {
      text-align: center; 
      margin-top: 35px; 
      margin-bottom: 35px;
      font-size: 16px;
      @media screen and (max-width: @screen-xs-max) {
        .wrapper,
        .wrapper .project {
          height: 275px;
          width: 275px;
        }          
      }

      @media screen and (min-width: @screen-sm-min) {
        .wrapper,
        .wrapper .project {
          height: 200px;
          width: 200px;
        }
      }
      @media screen and (min-width: @screen-md-min) {
        .wrapper,
        .wrapper .project {
          height: 280px;
          width: 280px;
        }
      }
      & > div {
        margin: 10px 0;
      }

      .wrapper {
        color: white;
        margin: 0 auto;
        cursor: pointer;
        background-size: cover;
        background-position: center;
        .box-shadow(0px 4px 5px 2px rgba(0,0,0,0.7));

        &:hover .project {
          opacity: 1;
        } 

        &.college {
          background-image: url(http://cdn.ttgtmedia.com/rms/computerweekly/39826_college-of-richard-collyer.gif);
        }
        &.personal {
          background-image: url(http://www.inzeed.com/kaleidoscope/wp-content/uploads/2014/11/stock-footage-computer-code-background1.jpg);
        }
        &.work {
          background-image: url(http://www.recommendedagencies.com/images/logos/dabapps-logo-1432733278.jpg);
        }

        & .project {
          padding: 25px;
          .transition(~"opacity 0.5s ease-in");
          opacity: 0;
          background-color: rgba(0,0,0,0.6);

          p, a.btn {
            font-size: 12px;
          }
          h4 {
            font-size: 23px;
          }
        }
      }
    }
  }
}
/* @end Homepage*/