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
  }
}

/* @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;
      }
    }
  }
  #intro-text {
    background-color: #232323;
    .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;
      .panel-body {
        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;
          background-color: red;

          &:hover .project {
            opacity: 1;
          } 

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

            h2 {
              margin-top: 0;
            }
          }
        }
      }
    }
  }
}
/* @end Homepage*/