hardpool-flat 0.1.0 → 1.0.0

data/_sass/_var.scss

@@ -6,35 +6,35 @@ $p-img			: unquote("/assets/img/");
 // =============================================================================
 // colors
 // =============================================================================
-$light-teal	:	rgb(80,215,150);
-$teal				:	rgb(0,180,140);
-$blue				:	rgb(0,80,220);
-$red				:	#f45549; //rgb(240,90,65);
-$yellow			:	rgb(255,220,60);
+// $light-teal	:	rgb(80,215,150);
+// $teal				:	rgb(0,180,140);
+// $blue				:	rgb(0,80,220);
+// $red				:	#f45549; //rgb(240,90,65);
+// $yellow			:	rgb(255,220,60);
 
+$dark				: #333;
 $gray				: #ccc;
-$primary		: $blue;
-$secondary	: $teal;
-$success		: $teal/1.2;
-$info				: $gray/1.25;
-$warning		: $yellow;
-$danger			: $red;
+$primary		: #c59871;
+$secondary	: $dark;
+$success		: #02c33d;
+$info				: darken($gray, 12%);
+$warning		: #d9834f;
+$danger			: #d62337;
 $text-muted	: $gray;
-$dark				: #000;
 
-// =============================================================================
-// height-width
-// =============================================================================
-$h-header			: 6.5rem;
-$h-footer			: 24.5rem;
-$h-footer-br	: 19rem;
-$w-mainLogo		: 7.2rem;
+// // =============================================================================
+// // height-width
+// // =============================================================================
+// $h-header			: 6.5rem;
+// $h-footer			: 24.5rem;
+// $h-footer-br	: 19rem;
+// $w-mainLogo		: 7.2rem;
 
-// =============================================================================
-// font-family
-// =============================================================================
-$f-normal			: sourcesans;
-$f-heading		: colaborate;
+// // =============================================================================
+// // font-family
+// // =============================================================================
+// $f-normal			: sourcesans;
+// $f-heading		: colaborate;
 
 // =============================================================================
 // easing

data/_sass/bootstrap/bootstrap.scss

@@ -21,7 +21,7 @@ $h3-font-size: 1.7rem;
 $h4-font-size: 1.4rem;
 $h5-font-size: 1.2rem;
 
-$navbar-light-color: $gray/1.2;;
+$navbar-light-color: darken($gray, 12%);
 $navbar-light-hover-color: $secondary;
 $navbar-light-active-color: $secondary;
 
@@ -73,11 +73,6 @@ $navbar-light-active-color: $secondary;
 
 //========= bootstrap override ==========
 .btn{
-	font-weight: bold;
-	padding: 0.5rem 1rem;
-	border-radius: 0;
-	text-transform: uppercase;
-	font-size: 1rem;
 
 	&:active, &:focus{
 		outline: 0;
@@ -120,7 +115,7 @@ label{
 }
 a {
 	color: $secondary;
-	text-decoration: underline;
+	/* text-decoration: underline; */
 	@include transition;
 	&:hover {
 		text-decoration: none;
@@ -144,6 +139,13 @@ a {
 	padding: .5rem 1.25rem;
 }
 .btn-secondary.disabled, .btn-secondary:disabled{
-	background-color: $gray/1.2;
-	border-color: $gray/1.2;
+	background-color: darken($gray, 12%);
+	border-color: darken($gray, 12%);
+}
+.popover{
+  font-family: inherit;
+  background-color: rgba(255,255,255,0.9);
+  .popover-body{
+    padding: 0;
+  }
 }

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,5 +1,7 @@
-@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);
 
@@ -7,22 +9,18 @@
 html, body {
 	font: {
     size: 16px;
-    family: "muli";
+    family: 'Montserrat', sans-serif;
 	}
+	color: $dark;
+}
+body {
   overflow-x: hidden;
 }
 h1,h2,h3,h4,h5,
-.h1,.h2,.h3,.h4,.h5,{
-	// font-family: "playfair";
-	font-weight: bold;
-}
-app-header {
-	max-height: $h-header;
-	display: block;
-
-	/* @media (max-width: 767px) {
-		max-height: 5rem;
-	} */
+.h1,.h2,.h3,.h4,.h5{
+  font-weight: bold;
+  font-family: 'Playfair Display', serif;
+  color: #000;
 }
 a {
 	outline: none;
@@ -33,13 +31,7 @@ table{
 	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;

data/_sass/theme/_header.scss

@@ -1,12 +1,51 @@
 header {
-	border-top: 0.4rem solid $primary;
-
-	.main-logo{
-		$size: 10rem;
-		height: $size;
-		width: $size;
-		border-radius: 100%;
-		background-color: $gray;
-		display: inline-block;
-	}
+  border-top: 0.4rem solid $primary;
+  
+  .navbar-light .navbar-brand{
+    font-family: 'Dancing Script', cursive;
+    font-size: 3rem;
+    color: $dark;
+  }
+
+  &.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;
+        }
+      }
+    }
+  }
 }

data/_sass/theme/_page.scss

@@ -0,0 +1,263 @@
+p, li {
+  color: darken($color: $gray, $amount: 50%);
+}
+a h1 {
+  color: $dark;
+  @include transition;
+
+  &:hover {
+    color: $primary;
+  }
+}
+img {
+  image-orientation: from-image;
+}
+.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;
+  }
+}
+.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;
+    }
+  }
+}
+.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: center;
+}
+.overlap-right {
+  position: absolute;
+  right: 0;
+}
+.overlap-left {
+  position: absolute;
+  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;
+      }
+    }
+  }
+}
+/* ****************** header ******************* */
+.subnav-item {
+  border-bottom: 1px solid lighten($gray, 10%);
+}

data/_sass/theme.scss

@@ -2,4 +2,6 @@
 @import 'mixins';
 
 @import 'theme/global';
+@import 'theme/animations';
+@import 'theme/page';
 @import 'theme/header';