style.scss

/*
 * Theme Name:OSURoboticsClub
 * Theme URI: https://github.com/OSURoboticsClub/Website
 * Author: OSU Robotics Club
 * Author URI: http://osourobotics.club
 * Description: A wordpress theme for the OSU Robotics Club!
 * Version: 0.2
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * /

// Guidelines
// ------------------------------------------------------------------------------------------------
// 1. Do not use .wrapper for anything. This tag is used as a dummy class for greater precision w/
//    container selectors.
// 2. Do not leave superfluous styling/elements anywhere. They will be misinterpreted for being
//    essential and will aggregate over time into a web tumor.
// 3. When you make a change any new task you run into must be completed before implimenting the new
//    change.
// 4. You cannot apply "bandaids" or use "quick fixes".
// 5. Bootstrap is your friend. Use it.
// 6. Look into SASS nesting and use it when appropriate.
// 7. SASS will automatically remove comments starting w/ "//".
// 8. The only time the style tag can be used is for elements loaded through wordpress, i.e., pages.
//    This is because there is no other way to style these individually.
// ---

//  General Layout
// -------------------------------------------------------------------------------------------------
// The general layout of content is as follows:
// [wrapper]
//   [...]
//   [section]
//     [row]
//       [col-sz-xx]
//         [element][/element]
//         [...]
//         [element][/element]
//       [/col-sz-xx]
//     [/row]
//   [/section]
//   [...]
// [/wrapper]
// ---

/* Settings
--------------------------------------------------------------------------------------------------*/
@import 'settings';

/* Global Elements
--------------------------------------------------------------------------------------------------*/
html {
  min-height: 100%;
  position: relative;
  font-size: 16px;
}

body {
  height: 100%;
  background-color: $offwhite;
  color: $offwhite !important;
  font-family: $font-stack-sans;
}

a {
  padding: 0;
  color: $darkorange;
  text-decoration: none;

  &:hover {
    color: $darkorange;
  }
}

h1, h2, h3, h4 {
  font-family: $font-stack-sans;
  color: $offwhite;
  line-height:1em;
}

h1 { // TODO: Revist these possibly
  padding: 16px 0 29px 0;
  margin-bottom: 10px;
  background-color: $darkorange;
  font-family: $font-stack-title;
  font-size: 62px;
  font-weight: 700;
  text-transform: uppercase;
}

h2 {
  font-size: 48px;
}

h3 {
  margin-bottom:10px;
  padding-bottom: 6px;
  font-size: 24px;
  border-bottom: 2px solid $offwhite;
}

h4 {
  font-size: 18px;
}

input, textarea {
  color: $black;
}

ul {
  list-style: none;
}

nav { margin: 0; }

img.border { // TODO: These should go in a style.css and move everything else to $(page).css
  border: 5px solid $offwhite;
}

.container.wrapper {
  margin: 0 auto;
}

h1.banner {
  width: 150%;
  margin-left: -39%;
  padding-left: 39%;
  margin-bottom: 0;
  background-color: transparent !important;
  background-image: url($banner-img);
  background-repeat: no-repeat;
  background-position: right center;
}

@media (max-width: $screen-md-min) {
  h1.banner {
    font-size: 44px;
  }
}

#site {
  background-image: url($bg-tile-img);
  background-repeat: repeat;
}

.title { // TODO: Unused
  color: $darkorange;
  font-family: $font-stack-title;
  font-weight: bold;
  text-transform: uppercase;
}

/* @Override Bootstrap
--------------------------------------------------------------------------------------------------*/
.container-fullwidth {
  overflow: hidden;
}

/* Header/Navigation
--------------------------------------------------------------------------------------------------*/
.socialmedia-buttons img {
  padding: 0; margin: 0px 5px 10px 5px !important;
}

header {
  position: relative;
  z-index: 100;
  box-shadow: 0px 3px 1px rgba(0,0,0,0.2);
}

.navbar {
  margin: 0px; // @Override Bootstrap
  background-color: $offwhite;
  border-radius: 0px;
  border-top: 10px solid $darkorange;

  .navbar-nav {
    display: inline-block;
    width: 100%;
    padding: 6px 0px 4px 0px;
    font-family: $font-stack-sans;
    font-size: 1em;
    font-weight: 400;

    #logo {
      float: left;

      a {
        width: 256px;
        height: 80px;
        padding: 0;
        background: url($logo-img-lrg) no-repeat center center local;
        -webkit-background-size: contain;
           -moz-background-size: contain;
             -o-background-size: contain;
                background-size: contain;
        }
    }

    .dropdown-menu {
      li {
        float: none;
      }

      li a {
        padding-top: 0;
        font-weight: 400;
        line-height: 40px;
        height: 40px;
      }
    }
  }
}

.navbar .navbar-collapse {
  text-align: center;
}

.navbar-default .navbar-nav>li>a {
  color: $gray !important;
}

@media (max-width: 1051px) {
  .navbar .navbar-nav #logo {
    display: none;
  }
}

@media (min-width: $screen-sm-min) {
  .navbar-nav {
    li {
      float: right;
    }
    li a {
      width: auto;
      line-height: 80px;
      height: 80px;
      padding-top: 0;
    }
  }

  .dropdown:hover .dropdown-menu {
    display: block;
  }
}

@media (max-width: $screen-sm-min) {
  .navbar { border-top: 4px solid $darkorange !important; }
}

/* Content
--------------------------------------------------------------------------------------------------*/
#content {
  position: relative;
  padding-bottom: 20px;
  background: rgba(0,0,0,0.5);
}

.content {
  position: relative;
  padding-bottom: 20px;
  background: rgba(0,0,0,0.5);
}

.header {
  padding: 8px;
  font-size: 46px;
  line-height: 46px;

  .welcome {
    color: $darkorange;
    font-family: $font-stack-title;
    font-weight: bold;
    text-transform: uppercase;
  }

  .to {
    margin: 0;
    color: $offwhite;
    font-family: $font-stack-sans;
  }
}

#splash {
  position: relative;
  height: 420px;
  background: url($splash-img) no-repeat center top local;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;

  span#credit {
    position: absolute;
    bottom: 2px;
    right: 2px;
    padding: 2px;
    background-color: rgba(0,0,0,0.4);
    color: #FFF;
    font-family: $font-stack-sans;
    font-size: 12px;
    font-weight: 200;
    line-height: 12px;
    border-radius: 1px;
  }
}

.splash {
  padding-bottom: 12px;
}

@media (max-width: $screen-sm-min) {
  #splash { display: none; }
  .to { display: none; }
}

.widget-area {
  height: 32px;
  float: right;
  margin-top: 15px;
}

.posts {
  font-family: $font-stack-sans;
  font-size: 1em;
  line-height: 1.7em;

  a { color: $orange; }
  h3 {
    font-family: $font-stack-title;
    text-transform: uppercase;
  }
  ol {
    counter-reset: item;
    padding-left: 22px;
  }
  ol li { display: block }
  ol li:before {
      content: counter(item) ".";
      padding-right: 8px;
      counter-increment: item;
      font-family: $font-stack-sans;
      font-weight: bold;
  }
  ul { list-style-type: disc; }
  p  { margin: 0; }
}


/* Projects
--------------------------------------------------------------------------------------------------*/
#projects {
  position: relative;
  padding: 20px 0;
  color: $offwhite;

  .image {
    padding-bottom: 40px;

    a {
      display: block;
      margin: 0 auto;
      height: 200px;
      width: 270px;
      background-position: 0 -199px;
      background-repeat: no-repeat;
    }
  }

  .aerial.image > a{
    background-image: url($projects-aerial-img);
    &:hover, &:focus { background-position:0 -1px; }
  }

  .rover.image > a {
    background-image: url($projects-rover-img);
    &:hover, &:focus { background-position:0 0; }
  }

  .underwater.image > a {
    background-image: url($projects-water-img);
    &:hover, &:focus { background-position: 0 -2px; }
   }

  .lquote {
    position: absolute;
    margin-left: -16px;
    margin-top: -16px;
    font-size: 36px;
    font-family: Arial, sans-serif;
    line-height: 36px;
    color: $orange;
  }

  .rquote {
    float: right;
    font-size: 36px;
    font-family: $font-stack-sans;
    line-height: 36px;
    vertical-align: bottom;
    color: $orange;
  }

  .text {
    padding-left: 16px;
    font-style: italic;
  }

  .ellipsis {
    font-style: normal;
  }
}

@media (max-width: $screen-lg-min) {
  #projects {
    .blurbs {
      display: none;
    }

    .links {
      display: none;
    }
  }
}

/* Footer
--------------------------------------------------------------------------------------------------*/
@import 'scss/footer';

/* Pages
--------------------------------------------------------------------------------------------------*/
@import 'scss/404';
@import 'scss/about';
@import 'scss/store';