Ch01

components/sass/_base.scss

@@ -0,0 +1,22 @@
+// _base.scss
+// ==============
+body {
+  font: $mainFont;
+  background: $backgroundColor;
+  color: $typeDefault;
+}
+
+#{headings()} {
+  font: $headFont;
+  color: $headColor;
+  font-weight: $bold;
+}
+
+strong {
+  font-weight: $bold;
+}
+
+p {
+  font-weight: $thin;
+  padding-bottom: 10px;
+}

components/sass/_layout.scss

@@ -0,0 +1,24 @@
+body {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.scene {
+  position: relative;
+  padding: 20px 0;
+
+  article {
+    @include container(95%);
+  } //article
+
+  @include breakpoint($wide) {
+    padding: 40px 0;
+  } //wide
+
+  @include breakpoint($medium) {
+    article {
+      @include container;
+    } //article
+  } //medium
+} //scene

components/sass/_mixins.scss

@@ -0,0 +1,32 @@
+// _mixins
+// ========
+@mixin backImage(
+    $image,
+    $grDir: to bottom,
+    $opStart:0,
+    $opEnd:0,
+    $bgPos: center center
+  ) {
+  background:  linear-gradient(
+      $grDir,
+      rgba(0, 0, 0, $opStart),
+      rgba(0, 0, 0, $opEnd)
+    ), url($image);
+  background-repeat: no-repeat;
+  background-position: $bgPos;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+@mixin clearfix {
+  &:before,
+  &:after {
+    content: "";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}

components/sass/_variables.scss

@@ -0,0 +1,51 @@
+// _variables.scss
+// =================
+@import "http://fonts.googleapis.com/css?family=Exo+2:200,400,600,800";
+@include border-box-sizing; //uses border box sizing like the old IE...sweet.
+
+//Susy Global Settings
+$susy: (
+  columns: 12,
+  container: 60em,
+  gutters: 1/4,
+  gutter-position: inside
+);
+
+
+$blue   : #063642;
+$green  : #45B29D;
+$yellow : #EFC94C;
+$orange : #E27A3F;
+$red    : #DF4848;
+$pink   : #CD0069;
+$purple : #6C71C4;
+$dark   : #000000;
+$light  : #FFFFFF;
+
+$backgroundColor : $light;
+$typeDefault     : $dark;
+$navBackground   : $blue;
+$navForeground   : $light;
+$navHover        : $yellow;
+$navBrandBg      : $red;
+$headersubbg     : $dark;
+
+//Font variables
+
+$fontfamily : 'Exo 2', 'Helvetica Neue', Helvetica, Arial,  sans-serif;
+
+$thin : 200;
+$normal : 400;
+$bold : 600;
+$heavy : 800;
+
+
+$headFont : $thin 1.5em/1.5em $fontfamily;
+$mainFont : $thin 1em/1.5em $fontfamily;
+$headColor: lighten($blue,20);
+
+//Breakpoint variables
+$narrow: 400px;
+$small: 650px;
+$medium: 960px;
+$wide: 1200px;

components/sass/modules/_dining.scss

@@ -0,0 +1,56 @@
+#dining {
+  background: $light;
+
+  h1, h2 {
+    color: $red;
+    padding: 10px 0;
+  } //h1
+
+  img {
+    width: 100%;
+    margin: 0 auto;
+    @include border-radius(10px);
+  } //img
+
+  #roomservice {
+    margin-top:20px;
+    @include background-image(linear-gradient(top, $light, lighten($yellow, 35)));
+    @include pad(1,1);
+    text-align: center;
+    border-top: 1px solid $red;
+    border-bottom: 1px solid $red;
+  }
+
+
+
+  @include breakpoint($small) {
+    #areadining {
+      margin-bottom: 30px;
+        h1 {
+          font-weight: $thin;
+          font-size: 2.5em;
+        }
+        p {
+          font-size: 1.5em;
+          line-height: 140%;
+        }
+      } //area dining
+
+    section {
+      @include span(4 of 12);
+
+      h2 {
+        font-size: 1.2em;
+        line-height: 120%;
+        color: $pink;
+      }
+
+      p {
+        padding-top: 10px; 
+        font-size: 1em;
+        line-height: 130%;
+      } //p
+    } //section
+  } //breakpoint
+
+} //dining

components/sass/modules/_events.scss

@@ -0,0 +1,61 @@
+#events {
+  padding: 0;
+  position: relative;
+  @include clearfix;
+
+  .event {
+      padding-top: 600px;
+      @include container(100%);
+      @include breakpoint($small) {
+        @include span(6 of 12 0);
+      } //breakpoint
+
+      .content {
+        position: absolute;
+        bottom: 0;
+        background: rgba($dark, .7);
+        padding: 30px;
+        color: $light;
+        font-weight: $thin;
+        line-height: 130%;
+
+        h2 {
+          color: $light;
+          line-height: 1em;
+          @include breakpoint($small) {
+            font-size: 2em;
+            padding-bottom: 10px;
+          } // breakpoint
+        } //h2
+
+        p {
+          padding: 5px 0;
+        } //p
+      } // content
+  } //event 
+
+  #weddings {
+    @include backImage('../images/hotel/events_wedding.jpg', to right, 0, 0, 40% top);
+  } //weddings
+
+  #businessmeetings {
+    h2 {
+      @include breakpoint($small) {
+        font-size: 3em;
+      }
+    }
+
+    @include backImage('../images/hotel/events_conference.jpg', to left, 0, 0, 65% top);
+  } //businessmeetings
+} //events
+
+
+
+
+  .event {
+
+  position: relative;
+
+   .content {
+    } //content
+  } //event

components/sass/modules/_footer.scss

@@ -0,0 +1,19 @@
+footer {
+  @include container(100%);
+  background: lighten($dark, 20);
+  padding: 30px 0;
+  #socialmedia {
+    text-align: center;
+    ul {
+      list-style: none;
+      li {
+        display: inline-block;
+        padding: 0 10px;
+        img {
+          width: 30px;
+          @include border-radius(50%);
+        } //img
+      } //li
+    } //ul
+  } //social media
+} //footer

components/sass/modules/_hotelinfo.scss

@@ -0,0 +1,89 @@
+#hotelinfo {
+
+  @include background-image(linear-gradient(top, darken($purple, 20), $green ));
+  color: $light;
+
+  #{headings()} {
+    color: $light;
+  }
+
+  .heading {
+    h1 {
+      font-size:  3em;
+      font-weight: $thin;
+    }
+  }
+
+  #usefulinfo {
+    section {
+      @include breakpoint($small) {
+        @include span(1 of 3);
+      }
+
+      @include breakpoint(450px $small) {
+        &.checklist {
+          @include span(1 of 2);
+        }
+      }
+
+      h2 {
+        color: lighten($purple, 20);
+        font-size: 1.3em;
+        line-height: 110%;
+        padding: 10px 0;
+      } //section
+
+      p {
+        font-size: 1em;
+        line-height: 130%;
+      } //p
+
+      ul {
+        li {
+          list-style: square;
+          margin-left: 10%;
+          line-height: 115%;
+          margin-bottom: 5px;
+        } //ul
+      } //ul
+    } //section
+
+    section#arrivalinfo {
+      ul {
+        margin: 0;
+
+        li {
+          list-style: none;
+          border-top: 1px solid $light;
+          padding: 15px 0;
+          margin-left: 0;
+
+          strong {
+            color: $yellow;
+          }
+
+          &:first-child {
+            border-top: none;
+          }
+        }
+      } //ul
+    }
+
+  } //article
+
+  #greenprogram {
+    background-color: rgba(darken($green, 30), .5);
+    margin-top: 20px;
+
+    @include breakpoint($wide) {
+      @include background-image(url('../images/misc/greenplanet.png'));
+      background-size: 400px;
+      background-repeat: no-repeat;
+      background-position: 120% center;
+      padding-right: 300px;
+    }
+    border: 1px solid $light;
+    padding: 20px;
+    @include border-radius(20px);
+  }
+} //hotelinfo