vbax-template_go 0.1.0

data/lib/vbax/sass/template_go/layout/_project.scss

@@ -0,0 +1,172 @@
+/* Colors
+------------------------ */
+    /* Main Colors
+    ------------------------ */
+    $aqua:#4be1ce;
+    $blue:#23abc4;
+    $darkblue:#0011f3;
+    $gold:#cba173;
+    $green:#1abcb0;
+    $indigo:#2a83e8;
+    $mint:#27e6c3;
+    $orange:#e48343;
+    $pink:#f01831;
+    $red:#e95e49;
+    $violet:#6060d9;
+    $yellow:#f1b243;
+
+    /* Main Colors
+    ------------------------ */
+    $hhgb12-color: #353535;
+    $white: #fff;
+    $date-color: #999999;
+    $text-color: #6c6c6c;
+    $heading-color: #111111;
+    $subheading-color: #acacac;
+    $bg-light: #f9fbfc;
+    $bg-dark: #181821;
+    $dark-grey: #424242;
+    $light-grey: #a3a3a3;
+    $border-color: #e5e9ec;
+
+    // opacity
+    $white-opacity:rgba(255, 255, 255, 0.85);
+    $dark-opacity:rgba(0,0,0,.5);
+    $dark-opacity-3:rgba(0,0,0,.3);
+
+/* 🍦 ⚠️
+
+.btn-aqua-vibrant {
+    background-color: #4be1ce;
+    box-shadow: 0 2px 2px 0 rgba(75, 225, 206, 0.14), 0 3px 1px -2px rgba(75, 225, 206, 0.2), 0 1px 5px 0 rgba(75, 225, 206, 0.12);
+    transition: all 0.3s ease-in-out;
+}
+/*-------------------------------------------------------*/
+/* Single Project
+/*-------------------------------------------------------*/
+
+@mixin product_meta{
+  display: flex;
+  .product_meta_col{
+    width: 50%;
+  }
+  .detail-wrap {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  .detail-label,
+  .detail-value {
+    display: table-cell;
+    line-height: 23px;
+    font-size: 12px;
+    font-weight: bolder;
+    width: 50%;
+  }
+
+  .detail-label {
+    min-width: 110px;
+    color: $heading-color;
+  }
+  span {
+  // font-family: $alt-font;
+  font-style: italic;
+  color: $light-grey;
+}
+}
+.product_meta {
+  @include product_meta
+}
+@mixin storyStyle{
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+@mixin storylogoBg{
+  border-radius: 50%;
+  width: 60px;
+  border: 1px solid;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  img{
+    padding: 19%;
+  }
+}
+.Story__wrapper{
+  @include storyStyle;
+  width:100%;
+  .Story__image{
+    @include storylogoBg;
+    width: 65px;
+    height: 65px;
+    border: 1px solid $pink;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+  }
+  .Story__tittle{
+
+  }
+}
+
+.project-description {
+  // padding-left: 5%;TODO
+  &#inside_productionSow{
+    .mt-30 {
+      margin: 0px 0px;
+      hr {
+        margin: 11px 0;
+      }
+      .product_meta {
+        @include product_meta;
+        .detail-label,
+        .detail-value {
+          line-height: 20px;
+        }
+      }
+      .entry-author-box {
+        padding: 10px 10px;
+        background-color: #f9fbfc;
+        position: relative;
+        // margin-top: 30px;
+        margin-bottom: 0px;
+        img{
+          display: block;
+          border-radius: 50%;
+          position: absolute;
+          top: 10px;
+          right: 10px;
+          width: 40px;
+        }
+        .author-info {
+          padding: 0px;
+        }
+      }
+      .entry-partnership-box {
+        position: relative;
+        // margin-top: 30px;
+        margin-bottom: 0px;
+        .projet-colaborators{
+          display: flex;
+          width: 100%;
+          .projet-colaborator{
+          @include storyStyle;
+          }
+          .projet-colaborator-logo{
+            @include storylogoBg;
+          }
+        }
+        .author-info {
+          padding: 0px;
+        }
+      }
+    }
+  }
+}

data/lib/vbax/sass/template_go/layout/_sidebar.scss

@@ -0,0 +1,12 @@
+//
+// sidebar
+//
+//
+
+.sidebar {
+	> * {
+		&:not(:first-child) {
+			margin-top: 30px;
+		}
+	}
+}

data/lib/vbax/sass/template_go/layout/_sizing.scss

@@ -0,0 +1,114 @@
+//
+// Sizing
+//
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @each $prop, $abbrev in (margin: m, padding: p) {
+      @each $size, $length in $sizes {
+
+        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
+        .#{$abbrev}t#{$infix}-#{$size},
+        .#{$abbrev}y#{$infix}-#{$size} {
+          #{$prop}-top: $length !important;
+        }
+        .#{$abbrev}r#{$infix}-#{$size},
+        .#{$abbrev}x#{$infix}-#{$size} {
+          #{$prop}-right: $length !important;
+        }
+        .#{$abbrev}b#{$infix}-#{$size},
+        .#{$abbrev}y#{$infix}-#{$size} {
+          #{$prop}-bottom: $length !important;
+        }
+        .#{$abbrev}l#{$infix}-#{$size},
+        .#{$abbrev}x#{$infix}-#{$size} {
+          #{$prop}-left: $length !important;
+        }
+      }
+    }
+  }
+}
+
+
+// Vertical Height
+$height-list: ( 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100);
+
+@each $value in $height-list {
+	.vh-#{$value} {
+    height: #{$value}vh;
+		min-height: #{$value}vh;
+	}
+}
+
+@each $value in $height-list {
+  .vh-max-#{$value} {
+    max-height: #{$value}vh;
+  }
+}
+
+@include media-breakpoint-down(sm) { 
+  [class*="vh-"] {
+    height: auto;
+  }
+}
+
+
+
+
+
+// Gutter
+$gutter-list: ();
+$gutter-list: map-merge((
+  1: 10,
+  2: 20,
+  3: 30,
+  4: 40,
+  5: 50,
+), $gutter-list);
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @each $name, $value in $gutter-list {
+      .gutter#{$infix}-#{$name} {
+        margin: -#{$value/2}px;
+
+        > * {
+          margin-bottom: 0!important;
+          padding: #{$value/2}px;
+        }
+      }
+    }
+
+  }
+}
+
+
+
+.gutter-0 {
+  padding: 1px 1px 0 0;
+  margin-left: 0;
+  margin-right: 0;
+  
+  > * {
+    padding: 0;
+    margin: -1px -1px 0 0!important;
+  }
+}
+
+.gutter-1 [class*="-double"]::before { padding-top: calc(200% + 10px); }
+.gutter-2 [class*="-double"]::before { padding-top: calc(200% + 20px); }
+.gutter-3 [class*="-double"]::before { padding-top: calc(200% + 30px); }
+
+
+
+// Flex Width
+@each $size, $length in $sizes {
+  .fw-#{$size} {
+    flex: 0 0 $length!important;
+    width: $length!important;
+  }
+}

data/lib/vbax/sass/template_go/layout/_typography.scss

@@ -0,0 +1,197 @@
+// Typography
+//
+//
+//
+//
+
+
+
+//
+// Spacing
+//
+h1, h2, h3, h4, h5,
+.h1, .h2, .h3, .h4, .h5 {
+	margin-bottom: .5em;
+
+	&:last-child { margin-bottom: 0; }
+}
+
+p, span, b, ul, ol,
+blockquote {
+	&:last-child { margin-bottom: 0; }
+}
+
+
+
+//
+// Global
+//
+figure {
+    margin: 0;
+}
+
+strong, b {
+	color: $black;
+	font-weight: $font-weight-bold;
+}
+
+code {
+	display: inline-block;
+	margin-bottom: 1rem;
+}
+
+p {
+	line-height: 1.75em;
+	color: $gray-300;
+}
+
+small {
+	color: $gray-300;
+}
+
+a:hover {
+	text-decoration: none;
+}
+
+hr {
+	margin-top: 1.875rem;
+	margin-bottom: 1.875rem;
+}
+
+blockquote {
+	p {
+		color: $black;
+	}
+}
+
+
+
+//
+// Decorated
+//
+.text-decorated {
+	position: relative;
+
+	&::after {
+		content: "";
+		position: absolute;
+		left: 0;
+		top: .6em;
+		width: 5rem; // 80px
+		height: $border-width;
+		background: $black;
+		@include translate(-140%,0);
+	}
+
+	&[class*="padding"] {
+		padding-left: 6.875rem;
+
+		&::after {
+			@include translate(0,0);
+		}
+	}
+}
+
+%text-decorated-text-white {
+	&::after {
+		background: $white;
+	}
+}
+
+
+
+//
+// Text Shadow
+//
+%text-shadow {
+	h1, h2, h3, h4, h5,
+	.h1, .h2, .h3, .h4, .h5,
+	p, span, b, i {
+		@include text-shadow();
+	}
+}
+
+.text-shadow {
+	@include text-shadow();
+}
+
+
+
+//
+// Styled link
+//
+%link {
+	display: inline-block;
+	position: relative;
+
+	@include hover-focus {
+		&::before {
+			@include transition();
+			top: calc(100% + 2px);
+			opacity: 1;
+		}
+	}
+
+	&::before {
+		@include transition();
+		content: "";
+		position: absolute;
+		top: 100%;
+		display: block;
+		width: calc(100% - 2px);
+		height: $border-width;
+		background: currentColor;
+		opacity: 0;
+	}
+}
+
+.link {
+	@extend %link;
+}
+
+
+
+// Eyebrow
+%eyebrow {
+	display: inline-block;
+	font-size: $font-size-sm;
+	font-weight: 400;
+	text-transform: uppercase;
+	letter-spacing: $letter-spacing;
+}
+
+.eyebrow {
+	@extend %eyebrow;
+}
+
+
+// Error text
+.error-text {
+	font-size: 10rem;
+	font-weight: 700;
+	line-height: 10rem;
+	margin-bottom: .25em;
+}
+
+
+.letter-spacing {
+	letter-spacing: $letter-spacing;
+}
+
+
+
+// Responsive
+//
+//
+
+@include media-breakpoint-down(md) {
+	.display-1 { font-size: ($display1-size * .65) }
+	.display-2 { font-size: ($display2-size * .65) }
+	.display-3 { font-size: ($display3-size * .65) }
+	.display-4 { font-size: ($display4-size * .65) }
+	h1, .h1 { font-size: ($h1-font-size * .75) }
+	h2, .h2 { font-size: ($h2-font-size * .75) }
+	h3, .h3 { font-size: ($h3-font-size * .75) }
+	h4, .h4 { font-size: ($h4-font-size * .75) }
+	h5, .h5 { font-size: ($h5-font-size * .75) }
+}