jekyll-theme-opposition 0.1.0

data/_sass/base/_footer.scss

@@ -0,0 +1,54 @@
+.main-footer {
+  background: #202020;
+  position: relative;
+  text-align: right;
+  padding: 10px 0;
+  div {
+    text-align: center;
+  }
+  .inquiries {
+    color: white;
+    font-weight: 200;
+    font-size: .7em;
+    a {
+      text-transform: uppercase;
+    }
+  }
+  ul {
+    padding: 30px 0;
+  }
+  li {
+    display: inline-block;
+    color: $accentFontColor;
+    padding: 0 10px;
+    border-right: 1px solid $accentFontColor;
+    &:last-child {
+      border: none;
+    }
+  }
+  .icon-YouTube-certified {
+    font-size: 4em;
+  }
+  .opposition-logo {
+    width: 70px;
+  }
+}
+
+@media only screen and (min-width: $windowSize) {
+  .main-footer {
+    .inquiries {
+      font-size: .85em;
+    }
+    ul {
+      padding: 0;
+    }
+    li {
+      padding: 0 10px;
+    }
+    .opposition-logo {
+      position: absolute;
+      top: 20px;
+      right: 30px;
+    }
+  }
+}

data/_sass/base/_header.scss

@@ -0,0 +1,64 @@
+.main-header {
+  background: black;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 30px 0;
+  z-index: 5;
+  nav {
+    text-align: center;
+    padding: 10px 0;
+  }
+  li {
+    display: none;
+    vertical-align: middle;
+    margin: 15px 25px 0 25px;
+  }
+  a {
+    font-family: $titleFont;
+    color: $accentFontColor;
+    text-transform: uppercase;
+  }
+  .logo {
+    display: inline-block;
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    margin: 0;
+  }
+  .icon-Oppositionn-Logo {
+    font-size: 4em;
+    color: $accentFontColor;
+  }
+  .home {
+    margin-left: 0;
+  }
+  .partners {
+    margin-right: 80px;
+  }
+  .contact {
+    a {
+      @include button;
+    }
+  }
+}
+
+@media only screen and (min-width: $windowSize) {
+  .main-header {
+    display: inline-block;
+    padding: 0;
+    nav {
+      padding: 20px 0;
+    }
+    li {
+      display: inline-block;
+    }
+    .logo {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}

data/_sass/base/_reset.scss

@@ -0,0 +1,65 @@
+* {
+  margin: 0;
+  padding: 0;
+  color: $mainFontColor;
+  font-family: $base-font-family;
+}
+h1, h2, h3, h4, h5 {
+  @include title;
+}
+h2 {
+  font-size: 2em;
+  letter-spacing: .1em;
+}
+p {
+  letter-spacing: .06em;
+  font-weight: 300;
+}
+a {
+  text-decoration: none;
+  color: $accentFontColor;
+  transition: .3s all;
+  &:hover {
+    color: lighten($accentFontColor, 30%);
+    transition: .3s all;
+    &:before {
+      color: lighten($accentFontColor, 30%);
+      transition: .3s all;
+    }
+    span {
+      color: lighten($accentFontColor, 30%);
+      transition: .3s all;
+    }
+  }
+}
+li {
+  list-style: none;
+}
+
+.social-media {
+  li {
+    display: inline-block;
+  }
+  a {
+    display: inline-block;
+  }
+  span {
+    @include link-border;
+    font-size: 1em;
+    padding: 8px;
+    border-radius: 50%;
+  }
+}
+
+.grecaptcha-badge {
+  display: none;
+}
+
+@media only screen and (min-width: $windowSize) {
+  h1, h2, h3, h4, h5 {
+    @include title;
+  }
+  h2 {
+    font-size: 2em;
+  }
+}

data/_sass/base/_sidebar.scss

@@ -0,0 +1,29 @@
+.sidebar {
+	display: inline-block;
+	width: 30%;
+	max-width: 265px;
+	padding-left: 40px;
+	text-align: left;
+	vertical-align: top;
+	.block {
+		border-top: 5px solid $mainFontColor;
+		padding: 5%;
+		width: 90%;
+		margin: 0 0 5% 0;
+	}
+	.category {
+		color: $mainFontColor;
+		text-transform: capitalize;
+		font-size: 1.1em;
+	}
+	h3 {
+		color: $mainFontColor;
+		font-size: 1.8em;
+		text-transform: uppercase;
+		font-weight: 600;
+		padding-bottom: 20px;
+	}
+	.submit {
+		@include submit-button;
+	}
+}

data/_sass/home/_about.scss

@@ -0,0 +1,125 @@
+#about {
+  position: relative;
+  background: $accentFontColor;
+  padding: 40px 0 0 0;
+  h2 {
+    background: url("../../assets/img/about.jpg");
+    background-attachment: fixed;
+    -webkit-text-fill-color: transparent;
+    -webkit-background-clip: text;
+    float: none;
+    max-width: 90%;
+    padding: 0 5%;
+    color: black;
+    font-size: 4em;
+    font-weight: 600;
+    line-height: .9em;
+    letter-spacing: 0;
+    margin: 0 auto;
+  }
+  .icon-Phoenix {
+    font-size: 1em;
+    vertical-align: middle;
+    line-height: .5em;
+  }
+  p {
+    @include center;
+    text-align: justify;
+    line-height: 2em;
+    margin: 40px auto;
+  }
+  li {
+    flex: 1 auto;
+    text-align: center;
+    margin: 0 0 30px 0;
+    &:nth-child(2) {
+      flex: 40 auto;
+      h4 {
+        width: 40%;
+      }
+    }
+    &:last-child {
+      h4 {
+        width: 80%;
+      }
+    }
+  }
+  h3, h4 {
+    color: $mainFontColor;
+  }
+  h3 {
+    font-size: 2em;
+    font-weight: 700;
+  }
+  h4 {
+    font-size: 1.3em;
+    display: inline-block;
+    width: 100%;
+    font-weight: 300;
+  }
+  h5 {
+    position: absolute;
+    top: 120px;
+    left: 40px;
+    display: none;
+    color: black;
+    letter-spacing: .7em;
+    transform: rotate(-90deg)
+  }
+  span {
+    font-size: 3em;
+  }
+  .bbtv-data {
+    @include center;
+    display: inline-block;
+  }
+  #views-counter {
+    @include center;
+    position: relative;
+    font-size: .9em;
+    letter-spacing: .45em;
+    text-transform: uppercase;
+    span {
+      position: static;
+      top: -160px;
+      right: -110px;
+      transform: rotate(-90deg);
+      font-size: 1em;
+      &:after {
+        content: '';
+        background: black;
+        display: block;
+        width: 120px;
+        height: 1px;
+        margin-left: 90px;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: $windowSize) {
+  #about {
+    padding: 80px 0;
+    h2 {
+      max-width: $maxWidth - 200px;
+      padding: 0;
+      padding-right: 200px;
+      font-size: 7em;
+    }
+    h5 {
+      display: inline-block;
+    }
+    li {
+      margin: 0;
+    }
+    .bbtv-data {
+      display: flex;
+      width: $maxWidth;
+    }
+    #views-counter {
+      span {
+        position: absolute;
+      }
+    }
+  }
+}

data/_sass/home/_contact.scss

@@ -0,0 +1,70 @@
+#contact {
+  background: url("../../assets/img/contact.png") center top / cover no-repeat;
+  padding: 30px 0;
+  form {
+    @include center;
+  }
+  h2 {
+    @include center;
+  }
+  div {
+    display: block;
+  }
+  fieldset {
+    flex: 1 auto;
+    width: 100%;
+    border: none;
+    padding: 20px 0;
+  }
+  .required {
+    background: #ff0033;
+    border: 1px solid darken(#ff0033, 20%);
+  }
+  .rightcol {
+    text-align: left;
+  }
+  input[type=text], input[type=email], textarea {
+    width: 90%;
+    font-size: 1.2em;
+    padding: 0 10px;
+  }
+  input[type=text], input[type=email] {
+    float: left;
+    clear: both;
+    margin: 20px 0 0 0;
+    &:first-child {
+      margin: 0;
+    }
+  }
+  textarea {
+    height: 100%;
+  }
+  footer {
+    @include center;
+    text-align: right;
+  }
+  .submit {
+    @include submit-button;
+  }
+  .thanks {
+    display: none;
+    text-align: center;
+  }
+}
+
+@media only screen and (min-width: $windowSize) {
+  #contact {
+    div {
+      display: flex;
+    }
+    fieldset {
+      width: 50%;
+    }
+    input[type=text], input[type=email], textarea {
+      width: 70%;
+    }
+    .rightcol {
+      text-align: right;
+    }
+  }
+}

data/_sass/home/_home.scss

@@ -0,0 +1,102 @@
+#home {
+  background: url("../../assets/img/bird.jpg") center / cover fixed no-repeat;
+  position: relative;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 600px;
+  h1, h2 {
+    position: relative;
+    font-size: 1.4em;
+    font-weight: 300;
+    z-index: 2;
+  }
+  h1 {
+    font-size: 2em;
+    letter-spacing: .3em;
+    margin: 0 0 30px 0;
+  }
+  .cta {
+    @include button;
+    text-transform: uppercase;
+    font-size: 1.5em;
+    letter-spacing: .1em;
+    padding: 0 10px;
+    border-radius: 5px;
+    z-index: 2;
+  }
+  .social-media {
+    text-align: center;
+    z-index: 2;
+    li {
+      float: none;
+      clear: none;
+      margin: 60px 10px;
+    }
+  }
+  .bird {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 1;
+    img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: none !important;
+      height: 100%;
+    }
+  }
+}
+.arrow-down {
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  margin-left: -4px;
+  z-index: 2;
+  width: 0; 
+  height: 0; 
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid $accentFontColor;
+}
+
+@media only screen and (min-width: $windowSize) {
+  #home {
+    background: url("../../assets/img/bird/bg.png") #252525 center / cover fixed no-repeat;
+    h2 {
+      font-size: 2em;
+    }
+    h1 {
+      font-size: 3.8em;
+      letter-spacing: .5em;
+    }
+    .cta {
+      font-size: 2.2em;
+    }
+    .social-media {
+      position: absolute;
+      top: 50%;
+      left: 10%;
+      transform: translate(0, -50%);
+      li {
+        float: left;
+        clear: both;
+        margin: 30px 0;
+        a {
+          font-size: 1.2em;
+        }
+      }
+    }
+    .bird {
+      img {
+        display: block !important;
+      }
+    }
+  }
+}