jekyll-theme-opposition 0.1.0

data/_sass/home/_partners.scss

@@ -0,0 +1,136 @@
+#partners {
+  background: #f6f6f6;
+  header {
+    background: #202020;
+    div {
+      @include center;
+      display: block;
+      padding: 30px 0;
+    }
+    h2, p {
+      width: 90%;
+      padding: 0 5%;
+    }
+    h2 {
+      font-size: 2em;
+      font-weight: 600;
+      line-height: 1em;
+    }
+    p {
+      color: $accentFontColor;
+      font-size: .9em;
+      line-height: 1.4em;
+      font-weight: 200;
+      padding-top: 15px;
+    }
+  }
+  ul {
+    @include center;
+    width: 100%;
+    padding: 0;
+    figure {
+      float: left;
+      display: inline-block;
+      vertical-align: middle;
+      width: 100%;
+      height: 450px;
+    }
+    dl {
+      display: inline-block;
+      width: 90%;
+      margin: 0 5% 30px 5%;
+      vertical-align: middle;
+      text-align: center;
+    }
+    dt {
+      @include title;
+      font-size: 3em;
+    }
+    dd {
+      font-size: .9em;
+      line-height: 2em;
+    }
+    .description {
+      padding: 20px 0 40px 0;
+    }
+    .social-media {
+      li {
+        margin: 0;
+        margin-right: 10px;
+      }
+      span {
+        line-height: 2.5em;
+      }
+    }
+    .savage {
+      figure {
+        background: url("../../assets/img/21savage.jpg") center top / cover no-repeat;
+      }
+    }
+    .logic {
+      text-align: left;
+      figure {
+        background: url("../../assets/img/logic.jpg") center top / cover no-repeat;
+        float: right;
+      }
+    }
+    .meechie {
+      figure {
+        background: url("../../assets/img/meechie.jpg") center top / cover no-repeat;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: $windowSize) {
+  #partners {
+    header {
+      padding: 60px 0;
+      div {
+        @include center;
+        display: flex;
+        align-items: center;
+      }
+      h2, p {
+        padding: 0;
+      }
+      h2 {
+        flex: 1 20%;
+        font-size: 2.5em;
+        padding: 0 30% 0 0;
+      }
+      p {
+        flex: 1 70%;
+        line-height: 1.8em;
+        padding-top: 0;
+      }
+    }
+    ul {
+      max-width: 1200px;
+      li {
+        overflow: auto;
+        margin-bottom: -150px;
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+      figure {
+        width: 50%;
+        height: 700px;
+      }
+      dl {
+        width: 23%;
+        margin: 200px 3% 0 3%;
+        text-align: left;
+      }
+      .savage {
+        dl {
+          margin-top: 100px;
+        }
+      }
+      .logic {
+        text-align: right;
+      }
+    }
+  }
+}

data/_sass/home/_services.scss

@@ -0,0 +1,100 @@
+#services {
+  background: url("../../assets/img/services-bg.jpg") center top / cover fixed no-repeat;
+  text-align: center;
+  padding: 40px 0;
+  .services-list {
+    @include center;
+    position: relative;
+    overflow: auto;
+    margin: 30px auto 0 auto;
+    &:after {
+      content: '';
+      background: $accentFontColor;
+      display: none;
+      position: absolute;
+      top: 15px;
+      left: 50%;
+      height: 98%;
+      width: 1px;
+    }
+    li {
+      position: relative;
+      width: 100%;
+      clear: both;
+      margin: 0 0 30px 0;
+      h3 {
+        display: inline-block;
+        vertical-align: middle;
+        letter-spacing: .2em;
+      }
+      span {
+        color: $accentFontColor;
+        font-size: 2em;
+        vertical-align: middle;
+      }
+      p {
+        color: white;
+        font-size: .9em;
+        font-weight: 200;
+        line-height: 1.8em;
+      }
+      &:before {
+        content: '';
+        background: $accentFontColor;
+        display: none;
+        position: absolute;
+        top: 5px;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+      &:nth-child(odd) {
+        float: left;
+        text-align: right;
+        padding: 0;
+        span {
+          display: inline-block;
+        }
+      }
+      &:nth-child(even) {
+        float: left;
+        text-align: left;
+        padding: 0;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: $windowSize) {
+  #services {
+    padding: 80px 0 40px 0;
+    .services-list {
+      &:after {
+        display: block;
+      }
+      li {
+        width: 38%;
+        &:before {
+          display: block;
+        }
+        &:nth-child(odd) {
+          float: left;
+          padding: 0 2% 0 10%;
+          span {
+            display: inline-block;
+          }
+          &:before {
+            right: -8px;
+          }
+        }
+        &:nth-child(even) {
+          float: right;
+          padding: 0 10% 0 2%;
+          &:before {
+            left: -6px;
+          }
+        }
+      }
+    }
+  }
+}

data/_sass/home/_testimonial.scss

@@ -0,0 +1,61 @@
+#platform {
+  background: $accentFontColor;
+  padding: 30px 0;
+  ul {
+    @include center;
+    width: 100%;
+    padding: 0%;
+    display: block;
+  }
+  li {
+    flex: 1 auto;
+    width: 90%;
+    padding: 0 5%;
+    &:nth-child(2) {
+      img {
+        max-width: 70px;
+      }
+    }
+  }
+  h3 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    float: none;
+    background: #2e2e2e;
+    width: 130px;
+    height: 130px;
+    margin: 0 auto;
+    border-radius: 50%;
+    img {
+      flex: 1 auto;
+      max-width: 100px;
+      // max-height: 80px;
+      // max-width: 90px;
+    }
+  }
+  p {
+    font-size: .75em;
+    line-height: 2em;
+    text-align: left;
+    margin: 20px 0 0 0;
+
+  }
+}
+
+@media only screen and (min-width: $windowSize) {
+  #platform {
+    padding: 0;
+    ul {
+      display: flex;
+      border-right: 1px solid black;
+    }
+    li {
+      padding: 5%;
+      border-left: 1px solid black;
+    }
+    p {
+      text-align: justify;
+    }
+  }
+}

data/_sass/opposition.scss

@@ -0,0 +1,139 @@
+@charset "utf-8";
+
+// Define defaults for each variable.
+$titleFont: "ff-good-headline-web-pro-con",sans-serif;
+$base-font-family: "acumin-pro-condensed", sans-serif !default;
+$base-font-size:   16px !default;
+$base-font-weight: 400 !default;
+$small-font-size:  $base-font-size * 0.875 !default;
+$base-line-height: 1.5 !default;
+
+$spacing-unit:     30px !default;
+
+$accentFontColor: #c1a468;
+$mainFontColor: #2e2e2e;
+
+// Width of the content area
+$windowSize: 940px;
+$maxWidth: 720px;
+
+// $content-width:    800px !default;
+
+// $on-palm:          600px !default;
+// $on-laptop:        800px !default;
+
+
+@mixin button {
+  color: $accentFontColor;
+  padding: 5px 20px;
+  border: 1px solid $accentFontColor;
+  &:hover {
+    color: lighten($accentFontColor, 20%);
+    border: 1px solid lighten($accentFontColor, 20%);
+  }
+}
+@mixin center {
+  float: none;
+  max-width: $maxWidth;
+  width: 90%;
+  padding: 0 5%;
+  margin: 0 auto;
+  @media only screen and (min-width: $windowSize) {
+    width: 100%;
+    padding: 0;
+  }
+}
+@mixin title {
+  font-weight: 400;
+  color: $accentFontColor;
+  text-transform: uppercase;
+}
+@mixin link-border {
+  color: $accentFontColor;
+  border: 1px solid $accentFontColor;
+  &:hover {
+    color: lighten($accentFontColor, 20%);
+    border: 1px solid lighten($accentFontColor, 20%);
+  }
+}
+
+@mixin submit-button {
+  background: $accentFontColor;
+  color: #2e2e2e;
+  text-transform: uppercase;
+  font-size: 1em;
+  padding: 0 15px;
+  border: none;
+  cursor: pointer;
+  &.disabled {
+    background: #ccc;
+    pointer-events: none;
+    cursor: no-drop;
+  }
+}
+
+@mixin media-query($device) {
+  @media screen and (min-width: $device) {
+    @content;
+  }
+}
+
+@mixin relative-font-size($ratio) {
+  font-size: $base-font-size * $ratio;
+}
+
+.page-header {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+  height: 485px;
+  width: 100%;
+  overflow: hidden;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  .header-title {
+    @include center;
+    flex: 1 auto;
+    max-width: 980px;
+    margin-bottom: 30px;
+    text-align: left;
+    h2 {
+      font-size: 3em;
+      font-weight: 600;
+      letter-spacing: 0;
+      text-transform: none;
+      color: white;
+    }
+  }
+}
+
+.category {
+  display: inline-block;
+  color: white;
+  margin-right: 10px;
+  i {
+    &:before {
+      color: $accentFontColor;
+      vertical-align: middle;
+    }
+  }
+}
+
+// Import partials.
+@import
+  "base/reset",
+  "base/header",
+  "base/footer",
+  "base/sidebar",
+  "home/about",
+  "home/contact",
+  "home/home",
+  "home/partners",
+  "home/services",
+  "home/testimonial",
+  "page/news",
+  "post/post"
+;

data/_sass/page/_news.scss

@@ -0,0 +1,91 @@
+.page {
+  @include center;
+  max-width: 980px;
+  text-align: center;
+  .post-list {
+    display: inline-block;
+    vertical-align: top;
+    width: 70%;
+    max-width: 585px;
+    text-align: left;
+    li {
+      padding-bottom: 50px;
+    }
+    figure, img {
+      width: 100%;
+    }
+    figure {
+      position: relative;
+      overflow: hidden;
+      height: 280px;
+      margin-bottom: 20px;
+    }
+    img {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translate(-50%, 0);
+    }
+    .post-details, h2 {
+      display: inline-block;
+      vertical-align: middle;
+      max-width: 75%;
+    }
+    h2 {
+      text-transform: none;
+      font-size: 2.5em;
+      letter-spacing: 0;
+      line-height: 1.1em;
+      margin-left: 5%;
+    }
+    header {
+      position: relative;
+      background: $accentFontColor;
+      display: inline-block;
+      width: 105%;
+      padding: 2.5%;
+      margin: 0 0 -20px -13%;
+      z-index: 2;
+      a {
+        font-weight: 500 !important;
+      }
+      .month, .day, a {
+        color: $mainFontColor;
+        font-weight: 700;
+      }
+      .month {
+        font-size: .9em;
+      }
+      .day {
+        font-size: 1.4em;
+        line-height: .9em;
+      }
+      .social-media {
+        display: flex;
+        clear: both;
+      }
+      .social-media-button {
+        text-align: center;
+        flex: 1 auto;
+        border: 2px solid $mainFontColor;
+        border-top: none;
+        padding: 3px 0;
+        font-size: .8em;
+      }
+      .twitter-button {
+        border-right: none;
+      }
+    }
+    time {
+      float: left;
+      text-align: center;
+      padding: 5px 15px 10px 15px;
+      border: 2px solid $mainFontColor;
+    }
+    .post-description {
+      a {
+        color: $mainFontColor !important;
+      }
+    }
+  }
+}