hardpool-flat 0.1.0 → 3.0.0

data/_sass/primer/support/variables/misc.scss

@@ -0,0 +1,26 @@
+// Miscellaneous variables
+
+// Border size
+$border-width: 1px !default;
+$border-color: $border-gray !default;
+$border-style: solid !default;
+$border: $border-width $border-color $border-style !default;
+$border-radius: 3px !default;
+
+// Box shadow
+$box-shadow: 0 1px 1px rgba($black, 0.1) !default;
+$box-shadow-medium: 0 1px 5px $black-fade-15 !default;
+$box-shadow-large: 0 1px 15px $black-fade-15 !default;
+$box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default;
+
+// Button and form variables
+$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default;
+$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default;
+$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default;
+
+// Tooltips
+$tooltip-max-width: 250px !default;
+$tooltip-background-color: $black !default;
+$tooltip-text-color: $white !default;
+$tooltip-delay: 0.4s !default;
+$tooltip-duration: 0.1s !default;

data/_sass/primer/support/variables/typography.scss

@@ -0,0 +1,42 @@
+// Typography variables
+
+// Heading sizes - mobile
+// h4-h6 remain the same size on both mobile & desktop
+$h00-size-mobile: 40px !default;
+$h0-size-mobile: 32px !default;
+$h1-size-mobile: 26px !default;
+$h2-size-mobile: 22px !default;
+$h3-size-mobile: 18px !default;
+
+// Heading sizes - desktop
+$h00-size: 48px !default;
+$h0-size: 40px !default;
+$h1-size: 32px !default;
+$h2-size: 24px !default;
+$h3-size: 20px !default;
+$h4-size: 16px !default;
+$h5-size: 14px !default;
+$h6-size: 12px !default;
+
+$font-size-small: 12px !default;
+
+// Font weights
+$font-weight-bold: 600 !default;
+$font-weight-semibold: 500 !default;
+$font-weight-normal: 400 !default;
+$font-weight-light: 300 !default;
+
+// Line heights
+$lh-condensed-ultra: 1 !default;
+$lh-condensed: 1.25 !default;
+$lh-default: 1.5 !default;
+
+// Font stacks
+$body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !default;
+
+// Monospace font stack
+$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !default;
+
+// The base body size
+$body-font-size: 14px !default;
+$body-line-height: $lh-default !default;

data/_sass/theme.scss

@@ -1,5 +1,12 @@
+@import 'var';
+// user theme imports
+@import 'colors';
+
 @import 'bootstrap/bootstrap';
 @import 'mixins';
+@import "primer/markdown/index.scss";
 
 @import 'theme/global';
+@import 'theme/animations';
+@import 'theme/page';
 @import 'theme/header';

data/_sass/theme/_animations.scss

@@ -0,0 +1,14 @@
+.animation-wrapper {
+  overflow: hidden;
+
+  .fade-in {
+    @include transition(all, 1s, $e-easeOutCubic);
+    opacity: 0;
+    transform: translateY(15rem);
+
+    &.in-view {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}

data/_sass/theme/_global.scss

@@ -1,45 +1,45 @@
-@include font-face(muli, "/assets/fonts/muli/Muli-Regular", 300, normal, ttf);
-@include font-face(muli, "/assets/fonts/muli/Muli-Bold", 600, bold, ttf);
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600|Playfair+Display:400,700');
+@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
+// @include font-face(muli, "/assets/fonts/muli/Muli-Regular", 300, normal, ttf);
+// @include font-face(muli, "/assets/fonts/muli/Muli-Bold", 600, bold, ttf);
 // @include font-face(woodford, "/assets/fonts/woodford/woodfordbourne-thin", 100, thin, otf);
 // @include font-face(woodford, "/assets/fonts/woodford/woodfordbourne-thinitalic", 100, italic, otf);
 
 //========= global styles ==========
-html, body {
+html, body.blogger {
 	font: {
     size: 16px;
-    family: "muli";
+    family: 'Montserrat', sans-serif;
 	}
+	color: $dark;
+}
+body {
   overflow-x: hidden;
 }
+.blogger {
 h1,h2,h3,h4,h5,
-.h1,.h2,.h3,.h4,.h5,{
-	// font-family: "playfair";
-	font-weight: bold;
+.h1,.h2,.h3,.h4,.h5{
+  font-weight: bold;
+  font-family: 'Playfair Display', serif;
+  color: #000;
 }
-app-header {
-	max-height: $h-header;
-	display: block;
-
-	/* @media (max-width: 767px) {
-		max-height: 5rem;
-	} */
 }
 a {
 	outline: none;
-	cursor: pointer;
+  cursor: pointer;
+  color: darken($primary, 20%);
+
+  &:hover {
+    color: $primary;
+    text-decoration: underline;
+  }
 }
 table{
 	height: 100%;
 	width: 100%;
 }
 .gray-bg{
-	background: $gray*1.15;
-}
-.main-content {
-	min-height: calc(100vh - #{$h-header} - #{$h-footer});
-	@media (min-width: 768px) { 
-		min-height: calc(100vh - #{$h-header} - #{$h-footer-br});
-	}
+	background: lighten($gray, 12%);
 }
 .error-msg{
   color: $danger;
@@ -47,6 +47,9 @@ table{
 .text-lg{
 	font-size: 1.2rem;
 }
+.text-sm{
+	font-size: 0.9rem;
+}
 .decoration-none{
 	text-decoration: none;
 }

data/_sass/theme/_header.scss

@@ -1,12 +1,198 @@
-header {
-	border-top: 0.4rem solid $primary;
-
-	.main-logo{
-		$size: 10rem;
-		height: $size;
-		width: $size;
-		border-radius: 100%;
-		background-color: $gray;
-		display: inline-block;
-	}
+header.style-1 {
+  border-top: 0.4rem solid $primary;
+  
+  .navbar-light .navbar-brand{
+    font-family: 'Dancing Script', cursive;
+    font-size: 3rem;
+    color: $dark;
+
+    @media (max-width: 767px) {
+      font-size: 2.5rem;
+    }
+  }
+
+  .subnav-item {
+    border-bottom: 1px solid lighten($gray, 10%);
+  }
+
+  &.style-default{
+    .main-logo{
+      $size: 8rem;
+      height: $size;
+      width: $size;
+      border-radius: 100%;
+      background-color: $gray;
+      display: inline-block;
+    }
+
+    .nav-item{
+      margin: 0 0.7rem;
+
+      .nav-link{
+        color: $dark;
+        font-weight: bold;
+        font-size: 1.2rem;
+        padding: 0.1rem 0.2rem;
+
+        &.active {
+          border-bottom: 2px solid $primary;
+        }
+      }
+    }
+  }
+  
+  // &.style-1 {
+    .nav-item{
+      margin: 0 0.7rem;
+  
+      .nav-link{
+        color: $dark;
+        font-size: 1rem;
+        padding: 0.1rem 0.2rem;
+  
+        &.active {
+          color: $primary;
+        }
+        &:hover {
+          color: $primary;
+        }
+      }
+    }
+  // }
+
+  .mobile-nav-handle{
+    font-size: 1.5rem;
+    padding: 0 0.5rem;
+    z-index: 101;
+  }
+
+  @media (max-width: 767px) {
+    .nav-mobile {
+      @include transition(all, 0.4s);
+      display: block;
+      opacity: 0;
+      position: fixed;
+      top: 0;
+      left: 0;
+      background-color: rgba(255,255,255,0.95);
+      width: 100%;
+      height: 0;
+      z-index: 100;
+      padding-top: 5rem;
+      overflow: hidden;
+
+      &.active {
+        // display: block;
+        height: 100%;
+        opacity: 1;
+      }
+      .nav-item{
+        margin: 0 1rem;
+    
+        .nav-link{
+          color: $dark;
+          font-size: 1.3rem;
+          padding: 0.5rem;
+    
+          &.active {
+            color: $primary;
+          }
+        }
+      }
+    }
+    .subnav-item {
+      border-bottom: none;
+      margin-left: 1rem;
+      a {
+        color: lighten($color: #333, $amount: 30%);
+      }
+    }
+  }
+  .btn-icon{
+    background-color: transparent;
+    display: inline-flex;
+    width: 2rem;
+    height: 2rem;
+    color: darken($color: $primary, $amount: 20);
+    &:hover {
+      color: $primary;
+      background-color: transparent;
+    }
+  }
+  .btn-follow {
+    display: flex;
+    svg {
+      font-size: 1.3rem;
+    }
+  }
+  .mobile-link{
+    position: relative;
+    z-index: 10000;
+  }
+}
+
+.subnav-item {
+  a {
+    color: $dark;
+
+    &:hover {
+      text-decoration: none;
+      color: $primary;
+    }
+  }
+}
+
+header.project {
+  position: sticky;
+  background-color: $primary;
+  box-shadow: 0 .5rem 1rem rgba(0,0,0,.05),inset 0 -1px 0 rgba(0,0,0,.1);
+  top: 0;
+  z-index: 1071;
+
+  .navbar-brand {
+    color: #fff;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    font-size: 1.1rem;
+    &:hover {
+      color: $light;
+    }
+  }
+  .nav-item{
+    margin: 0 0.7rem;
+
+    .nav-link{
+      color: #ccc;
+      font-size: 1rem;
+      padding: 0.1rem 0.2rem;
+
+      &.active {
+        color: #fff;
+      }
+      &:hover {
+        color: #fff;
+      }
+    }
+  }
+
+  .btn-follow {
+    padding: 0;
+
+    &:hover {
+      color: $light;
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+}
+footer.project {
+  font-size: 0.875rem;
+  font-weight: 600;
+
+  a {
+    color: #495057;
+    &:hover {
+      color: $primary;
+    }
+  }
 }

data/_sass/theme/_page.scss

@@ -0,0 +1,313 @@
+.blogger {
+p, li {
+  color: darken($color: $gray, $amount: 50%);
+}
+a h1 {
+  color: $dark;
+  @include transition;
+
+  &:hover {
+    color: $primary;
+  }
+}
+img {
+  image-orientation: from-image;
+
+  @extend .img-fluid;
+}
+table {
+  @extend .table;
+
+  height: auto;
+  thead {
+    @extend .thead-dark;
+  }
+}
+.btn {
+  border-radius: 0;
+  font-size: 0.85rem;
+  letter-spacing: 0.1rem;
+  text-transform: uppercase;
+  padding: 0.5rem 1rem;
+
+  &.btn-link {
+    text-transform: uppercase;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+.btn-icon {
+  $size: 2.6rem;
+  width: $size;
+  height: $size;
+  border-radius: 100%;
+  padding: 0;
+  font-size: $size - $size/3;
+  background-color: lighten($color: $gray, $amount: 8%);
+  color: darken($color: $gray, $amount: 20%);
+  border: none;
+  margin: 0 0.3rem;
+
+  &:hover {
+    color: darken($primary, 10%);
+    background-color: lighten($color: $gray, $amount: 8%);
+  }
+}
+.btn-secondary {
+  color: lighten($color: $primary, $amount: 10%);
+  
+  &:hover {
+    background: darken($color: $secondary, $amount: 10%);
+    color: lighten($color: $primary, $amount: 10%);
+  }
+}
+.lh-1{
+  line-height: 1;
+}
+.lh-15{
+  line-height: 1.3;
+}
+.banner-carousel {
+  .carousel-control-prev, .carousel-control-next{
+    position: relative;
+    opacity: 1;
+    // background: $secondary;
+    display: inline-block;
+    width: auto;
+    line-height: 0.9;
+    padding: 0.3rem;
+  }
+  .carousel-control-prev-icon, .carousel-control-next-icon{
+    height: 1.2rem;
+    width: 1.2rem;
+  }
+  .carousel-control-wrapper{
+    position: absolute;
+    right: 0;
+    bottom: calc(10% - 0.9rem);
+  }
+  .carousel-control-prev-icon {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
+  }
+  .carousel-control-next-icon {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
+  }
+}
+.default-carousel {
+  .carousel-control-prev, .carousel-control-next{
+    width: 2rem;
+  }
+  .carousel-control-prev{
+    left: -2rem;
+  }
+  .carousel-control-next{
+    right: -2rem;
+  }
+  .carousel-control-prev-icon {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
+  }
+  .carousel-control-next-icon {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
+  }
+}
+.carousel-indicators li{
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 0.5rem;
+
+  &.active {
+    width: 1rem;
+  }
+}
+.sm-gutters {
+  margin-right: 0;
+  margin-left: 0;
+
+  > .col,
+  > [class*="col-"] {
+    padding-right: 0.05rem;
+    padding-left: 0.05rem;
+  }
+}
+.md-gutters {
+  margin-right: 0;
+  margin-left: 0;
+
+  > .col,
+  > [class*="col-"] {
+    padding-right: 0.4rem;
+    padding-left: 0.4rem;
+  }
+}
+.el-gutters {
+  @extend .no-gutters;
+  @media (min-width: 768px) { 
+    margin-right: 0;
+    margin-left: 0;
+
+    > .col,
+    > [class*="col-"] {
+      padding-right: 0.4rem;
+      padding-left: 0.4rem;
+    }
+  }
+}
+.section-heading{
+  font-weight: 600;
+  color: $primary;
+  text-transform: capitalize;
+  letter-spacing: 0.15rem;
+  margin-bottom: 2rem;
+  text-align: center;
+
+  span {
+    border-bottom: 1px solid;
+    padding: 0.5rem 10rem;
+    max-width: 100%;
+
+    &.sm {
+      padding: 0.5rem;
+    }
+    @media (max-width: 767px) {
+      padding: 0.5rem;
+    }
+  }
+}
+.modal-backdrop {
+  background-color: #fff;
+  &.show{
+    opacity: .95;
+  }
+}
+.modal-content {
+  background: transparent;
+  border: none;
+
+  .modal-header, .modal-footer {
+    border: none;
+  }
+}
+.img-11{
+  @include picture-bg;
+  padding-top: 100%; 
+}
+.img-34{
+  @include picture-bg;
+  padding-top: 133.3333%;
+}
+.img-43{
+  @include picture-bg;
+  padding-top: 75%;
+}
+
+.thumb-post{
+  @include transition(all, 0.3s);
+  @include picture-bg(auto);
+  padding-top: 100%;
+  margin-top: 0.05rem;
+  cursor: pointer;
+  &:hover {
+    opacity: 0.6;
+  }
+}
+}
+
+/* ****************** portfolio ******************* */
+/* .portfolio-item {
+  .picture {
+    @include picture-bg(34rem);
+  }
+} */
+
+/* ****************** portfolio-landing ******************* */
+.bg-grad{
+  background-image: linear-gradient(125deg, desaturate(lighten($primary, 25%), 15%), desaturate(lighten($primary, 25%), 15%));
+  background-size: 100% 80%;
+  background-repeat: no-repeat;
+  background-position: bottom;
+
+  @media (min-width: 768px) {
+    background-position: center;
+  }
+}
+@media (min-width: 768px) {
+.overlap-right {
+  position: absolute!important;
+  right: 0;
+}
+.overlap-left {
+  position: absolute!important;
+  left: 0;
+}
+}
+.bnr-wrapper {
+  background: #fff;
+  width: 100%;
+  max-height: 15rem;
+  overflow: hidden;
+}
+.img-overlap{
+  border: 0.5rem solid #fff;
+  z-index: 2;
+  position: relative;
+}
+.outfits-info {
+  span{
+    border-left: 1px solid $gray;
+    &:first-child{
+      padding-left: 0!important;
+      border-left: none;
+    }
+  }
+}
+/* ****************** footer ******************* */
+.footer-insta-port {
+  .col:first-of-type {
+    padding-left: 0;
+  }
+  .col:last-of-type {
+    padding-right: 0;
+  }
+  .insta-img {
+    .overlay {
+      @include transition(all, 0.3s);
+      opacity: 0;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      font-size: 0.8rem;
+      background-color: rgba(255,255,255,0.8);
+      display: flex;
+      align-items: center;
+      color: $primary;
+      justify-content: center;
+      &:hover{
+        opacity: 1;
+      }
+    }
+  }
+}
+
+/* ****************** project ******************* */
+.project-head {
+  position: relative;
+  padding: 10rem 15px;
+  background: linear-gradient(to right bottom,lighten(desaturate($primary, $desaturate), $lighten) 50%,#fff 50%);
+
+  .btn-lg {
+    padding: .8rem 2rem;
+    font-size: 1.25rem;
+  }
+  h1 {
+    font-size: 4rem;
+  }
+  .lead {
+    font-size: 1.5rem;
+    font-weight: 400;
+    color: #495057;
+  }
+}