chulapa-jekyll 1.0.0

data/_sass/chulapa-classes.scss

@@ -0,0 +1,844 @@
+/*!
+ * Specific classes and formats for chulapa
+ */
+.chulapa {
+    font-family: chulapa, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    // Enable Ligatures
+    -webkit-font-feature-settings: "liga", "dlig";
+    -moz-font-feature-settings: "liga=1, dlig=1";
+    -moz-font-feature-settings: "liga", "dlig";
+    -ms-font-feature-settings: "liga", "dlig";
+    -o-font-feature-settings: "liga", "dlig";
+    font-feature-settings: "liga", "dlig";
+    text-rendering: optimizeLegibility;
+}
+
+.chulapa-bg-transparent{
+  background-color: transparent !important;
+}
+
+.chulapa-rounded-lg{
+  @include border-radius($border-radius-lg);
+}
+
+@each $color,
+$value in $theme-colors {
+    .chulapa-pill-bg-#{$color} {
+        @include badge-variant($value);
+    }
+}
+
+  .chulapa-pill-bg-body {
+    @include badge-variant($body-bg);
+    border-style: solid;
+    border-width: $border-width;
+    border-color: color-contrast($body-bg);
+  }
+
+.chulapa-text-body-color {
+    color: $body-color !important;
+}
+
+.chulapaDateSocial {
+    color: $body-color;
+
+    a {
+        color: $body-color;
+    }
+}
+
+//Not used yet
+.chulapa-headingfont {
+    font-family: $headings-font-family;
+}
+
+.chulapa-links-hover-only {
+    a {
+        color: inherit;
+
+        @include hover() {
+            color: $link-hover-color;
+            text-decoration: $link-hover-decoration;
+        }
+    }
+}
+
+// Navbar
+.navbar-chulapa {
+    background-color: $navbar-chulapa-bg-color;
+
+    .navbar-brand {
+        color: $navbar-chulapa-brand-color;
+        font-weight: bold;
+
+        @include hover-focus() {
+            color: $navbar-chulapa-brand-hover-color;
+        }
+
+    }
+
+    .btn {
+        border-color: $navbar-chulapa-text-color;
+        color: $navbar-chulapa-text-color;
+
+        @include hover-focus() {
+            color: $navbar-chulapa-hover-color;
+        }
+    }
+
+    .navbar-nav {
+        .nav-link {
+            color: $navbar-chulapa-text-color;
+
+            @include hover-focus() {
+                color: $navbar-chulapa-hover-color;
+
+            }
+
+            &.disabled {
+                color: $navbar-chulapa-disabled-color;
+            }
+        }
+
+        .show>.nav-link,
+        .active>.nav-link,
+        .nav-link.show,
+        .nav-link.active {
+            color: $navbar-chulapa-active-color;
+        }
+
+    }
+
+    .navbar-toggler {
+        color: $navbar-chulapa-text-color;
+        border-color: $navbar-chulapa-toggler-border-color;
+        background-color: $navbar-chulapa-toggler-color-bg;
+    }
+
+    .navbar-toggler-icon {
+        background-image: escape-svg($navbar-chulapa-toggler-icon-bg);
+    }
+
+    .navbar-text {
+        color: $navbar-chulapa-text-color;
+
+        a {
+            color: $navbar-chulapa-active-color;
+
+            @include hover-focus() {
+                color: $navbar-chulapa-active-color;
+            }
+        }
+    }
+
+    .dropdown-menu {
+        background-color: $navbar-chulapa-bg-color;
+        border-style: none;
+
+        .dropdown-item {
+            color: $navbar-chulapa-text-color;
+
+            @include hover-focus() {
+                color: $navbar-chulapa-hover-color;
+            }
+
+            &.disabled {
+                color: $navbar-chulapa-disabled-color;
+            }
+        }
+
+        .show>.dropdown-item,
+        .active>.dropdown-item,
+        .dropdown-item.show,
+        .dropdown-item.active {
+            color: $navbar-chulapa-active-color;
+            background-color: $navbar-chulapa-bg-color;
+        }
+    }
+}
+
+// Hero and headers
+.hero-chulapa {
+    font-family: $headings-font-family;
+    background-color: $hero-chulapa-bg-color;
+    text-align: center;
+    min-height: 40vh;
+
+
+    hr {
+        background-color: $hero-chulapa-text-color;
+        width: 15%;
+    }
+
+    h1,
+    p {
+       color: $hero-chulapa-text-color;
+        word-wrap: break-word;
+        -ms-word-wrap: break-word;
+    }
+
+    p {
+        @include fluid-type(font-size, breakpoint-min("md"), breakpoint-min("lg"), 1.5*$font-size-base, 2*$font-size-base);
+    }
+    
+    .chulapa-btn-project{
+      border-color:$hero-chulapa-text-color;
+      color: $hero-chulapa-text-color;
+      @include fluid-type(font-size, breakpoint-min("md"), breakpoint-min("lg"), $font-size-base, $font-size-lg);
+      @include hover-focus() {
+            border-color: $hero-chulapa-text-color;
+            color: $hero-chulapa-bg-color;
+            background-color:  $hero-chulapa-text-color;
+            text-shadow: none;
+        }
+    }
+}
+
+@include media-breakpoint-up(md) {
+    .hero-chulapa h1 {
+        font-size: $display4-size;
+        font-weight: $display4-weight;
+    }
+
+    .hero-chulapa p {
+        font-weight: $display4-weight;
+    }
+}
+
+@include media-breakpoint-up(lg) {
+    .hero-chulapa h1 {
+        font-size: $display3-size;
+    }
+}
+
+.hero-chulapa-image {
+    @extend .hero-chulapa;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: relative;
+
+    h1,p {
+        color: $white;
+    text-shadow: 0.1rem 0.1rem 0.2rem $black;
+    }
+
+    hr {
+        background-color: $white;
+        box-shadow: 0.1rem 0.1rem 0.2rem $black;
+    }
+    
+    .chulapa-btn-project{
+      color: $white;
+      border-color: $white;
+      text-shadow: none;
+      @include hover-focus() {
+            border-color: $light;
+            color: $light;
+            background-color:  $dark;
+            text-shadow: none;
+        }
+    }
+}
+
+.splash-chulapa {
+    @extend .hero-chulapa;
+    min-height: 100vh;
+
+    h1,
+    p {
+        font-weight: $display1-weight;
+    }
+
+    h1 {
+        @include fluid-type(font-size, breakpoint-min("md"), breakpoint-min("lg"), $font-size-base * 3, $display1-size);
+    }
+
+    p {
+        @include fluid-type(font-size, breakpoint-min("md"), breakpoint-min("lg"), $font-size-base * 1.5, $h1-font-size);
+    }
+}
+
+.splash-chulapa-image {
+    @extend .splash-chulapa;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: relative;
+
+    h1,p {
+        color: $white;
+        text-shadow: 0.1rem 0.1rem 0.2rem $black;
+    }
+
+    hr {
+        background-color: $white;
+        box-shadow: 0.1rem 0.1rem 0.2rem $black;
+    }
+    
+    .chulapa-btn-project{
+      color: $white;
+      background-color: transparent;
+      border-color: $white;
+      text-shadow: none;
+      @include hover-focus() {
+            border-color: $light;
+            color: $light;
+            background-color: $dark;
+            text-shadow: none;
+        }
+    }
+}
+
+.header-chulapa {
+    background-color: transparent;
+    color: $body-color;
+
+    h1,
+    p {
+        word-wrap: break-word;
+        -ms-word-wrap: break-word;
+    }
+
+    hr {
+        background-color: color-contrast($body-bg, $hero-chulapa-bg-color, $body-color);
+    }
+
+    .header-chulapa-img {
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        position: relative;
+        height: 20vh;
+    }
+}
+
+@include media-breakpoint-up(md) {
+    .header-chulapa h1 {
+        font-size: $display4-size;
+    }
+}
+
+
+// Footer
+@function chulapa-footertop($color1, $color2, $color3) {
+    @if $color1==$color2 {
+        @return $border-width solid $color3;
+    }
+
+    @else {
+        @return 0;
+    }
+}
+
+.footer-chulapa {
+    background-color: $footer-chulapa-bg-color;
+    color: $footer-chulapa-text-color;
+    border-top: chulapa-footertop($footer-chulapa-bg-color, $body-bg, $footer-chulapa-text-color);
+
+    a {
+        color: $footer-chulapa-text-color;
+        text-decoration: none;
+        font-weight: bold;
+
+        @include hover-focus() {
+            color: $footer-chulapa-hover-color;
+        }
+
+    }
+
+    .chulapa-footer-sociallink {      
+        color: transparent;
+
+        @include hover-focus() {
+            color: $footer-chulapa-hover-color;
+        }
+    }
+
+    .fa-stack {
+        @include hover-focus() {
+            color: $footer-chulapa-icon-hover-color;
+        }
+    }
+
+    .fa-inverse {
+        color: $footer-chulapa-icon-color;
+    }
+}
+
+.chulapa-overlay-img {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.chulapa-min-h-10 {
+    min-height: 10vh;
+}
+
+.chulapa-min-h-20 {
+    min-height: 20vh;
+}
+
+.chulapa-header-image {
+    object-fit: contain;
+    @include fluid-type(height, breakpoint-min("md"), breakpoint-min("lg"), 30vh, 25vh);
+}
+//Not used
+.chulapa-size-base {
+    font-size: $font-size-base;
+}
+
+.chulapa-masonry {
+    column-count: 2;
+    column-gap: map-get($spacers, 1);
+
+    @include media-breakpoint-up(md) {
+        column-count: 3;
+    }
+
+    .chulapa-masonry-brick {
+        @extend .card;
+        margin: 0;
+        border: 0;
+        padding: 0;
+        margin-bottom: map-get($spacers, 1);
+        display: inline-block;
+        max-width: 100%;
+        @include border-radius($border-radius);
+
+    }
+}
+
+.chulapa-gradient {
+    background-color: rgba($primary, 0.3);
+    background-image: linear-gradient(to bottom right, rgba($light, 0.5), rgba($light, 0.65) 65%, rgba($light, 0.8) 100%);
+
+}
+
+.chulapa-avatar-size {
+    border: 1px solid;
+    width: 8vmax;
+    height: 8vmax;
+    @include border-radius(50%,0);
+}
+
+
+
+.chulapa-pagination {
+    .fa-stack {
+        color: transparent;
+
+        @include hover-focus() {
+            color: $pagination-chulapa-bg-hover-color;
+        }
+    }
+
+    .fa-inverse {
+        color: $body-color;
+
+        @include hover-focus() {
+            color: $white;
+        }
+    }
+
+    .chulapa-pagination-inner .page-item {
+        border-radius: 0
+    }
+
+    .page-link {
+        color: $pagination-chulapa-text-color;
+        background-color: transparent;
+
+        &:hover {
+            z-index: 2;
+            color: $pagination-chulapa-text-hover-color;
+            background-color: $pagination-chulapa-bg-hover-color;
+            border-color: $pagination-chulapa-bg-hover-color;
+        }
+
+        &:focus {
+            outline: $pagination-focus-outline;
+            box-shadow: $pagination-focus-box-shadow;
+        }
+    }
+
+    .page-item {
+        &.active .page-link {
+            color: $pagination-chulapa-text-hover-color;
+            background-color: $pagination-chulapa-bg-hover-color;
+            border-color: $pagination-chulapa-bg-hover-color;
+        }
+
+        &.disabled .page-link {
+            color: change-color($pagination-chulapa-text-color, $alpha: 0.7);
+            pointer-events: none;
+            // Opinionated: remove the "hand" cursor set previously for .page-link
+            cursor: auto;
+            background-color: transparent;
+            border-color: transparent;
+        }
+    }
+}
+
+.chulapa-card-img {
+    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
+}
+
+@include media-breakpoint-up(sm) {
+    .chulapa-card-img {
+        @include border-radius($card-inner-border-radius 0 0 $card-inner-border-radius);
+    }
+}
+.chulapa-toc-wrapper{
+
+    .list-group-item {
+      background-color: $light;
+      a {
+        color: color-contrast($light);
+        }
+      &:first-child {
+        @include border-top-radius($border-radius-lg);
+        padding-top: map-get($spacers, 2) !important;
+        }
+        
+      &:last-child {
+        @include border-bottom-radius($border-radius-lg);
+        padding-bottom: map-get($spacers, 2) !important;
+        }
+    }
+}
+
+.chulapa-toc-reset {
+    border:0;
+    ul {
+        padding-left: 0;
+        margin-left: 0;
+        padding-right: 0;
+        margin-right: 0;
+        border: 0;
+
+        li {
+            border-left: 0;
+            border-right: 0;
+            border-bottom: 0;
+            font-size: 0.9 * $font-size-base;
+            font-weight: $font-weight-normal !important;
+            padding-right: 0;
+            margin-right: 0;
+        }
+    }
+}
+
+#markdown-toc {
+  @extend .chulapa-toc-wrapper;
+  @extend .list-group;
+  @extend .mb-5;
+  @extend .mx-3;
+  @extend .mx-lg-5;
+  li {
+    @extend .list-group-item;
+    @extend .font-weight-bold;
+    @extend .py-1;
+    @extend .pr-0;
+    @extend .mr-0;
+    @extend .chulapa-toc-reset;
+  }
+}
+
+.chulapa-text-line-through {
+    text-decoration: line-through;
+}
+
+.chulapa-bg-landingpage {
+  background-color: $landingpage-chulapa-bg-color;
+  header {
+    color: $landingpage-chulapa-text-color;
+    a {
+      color: $landingpage-chulapa-text-color;
+    }
+  }
+}
+
+.chulapa-landingpage-color {
+    color: $landingpage-chulapa-text-color;
+    .breadcrumb {
+    .breadcrumb-item {
+    + .breadcrumb-item {
+      &::before {
+        color: mix($info, $landingpage-chulapa-text-color, 50%);
+        }
+      }
+      &.active {
+      color: $landingpage-chulapa-text-color;
+      }
+    }
+    }
+    
+    a {
+        color: mix($info, $landingpage-chulapa-text-color, 50%);
+    }
+
+    table,
+    .chulapaDateSocial {
+        color: $landingpage-chulapa-text-color;
+
+        a {
+            color: $landingpage-chulapa-text-color;
+        }
+    }
+
+    hr {
+        background-color: $landingpage-chulapa-text-color;
+    }
+
+    .chulapa-pagination {
+        .page-link {
+
+            color: $landingpage-chulapa-text-color;
+
+            &:hover {
+                color: $landingpage-chulapa-bg-color;
+                background-color: $landingpage-chulapa-text-color;
+            }
+        }
+    }
+    
+  @each $color,
+$value in $theme-colors {
+    .chulapa-pill-bg-#{$color} {
+        @include badge-variant($value);
+    }
+}
+}
+
+.chulapa-landingpage-badges {
+    i {
+        color: $landingpage-chulapa-text-color;
+    }
+}
+
+.chulapa-landingpage-tag {
+      a {
+      border: $border-width solid $landingpage-chulapa-text-color;
+      background-color: transparent;
+      color:$landingpage-chulapa-text-color;
+    }
+}
+
+//Navbar modern
+.navbar-chulapa-fab {
+    label {
+        line-height: unset;
+    }
+
+
+    .navbar-toggler {
+        background-color: $navbar-chulapa-bg-color;
+        border-color: $navbar-chulapa-toggler-border-color;
+        height: 56px;
+        width: 56px;
+        position: fixed;
+        @include border-radius(50%);
+        font-size:1.25rem;
+        z-index: 20000;
+        cursor: pointer;
+    }
+
+    &-background {
+        height: 56px;
+        width: 56px;
+        @include border-radius(50%);
+        position: fixed;
+        background-image: radial-gradient($navbar-chulapa-bg-color, $navbar-chulapa-bg-color);
+        z-index: 10000;
+        transition: transform .8s cubic-bezier(0.86, 0, 0.07, 1);
+
+    }
+
+    &-nav {
+        height: 100vh;
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 15000;
+        opacity: 0;
+        width: 0;
+        transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+
+    }
+
+    .navbar-nav {
+        position: absolute;
+        top: 50%;
+        left: -100vw;
+        width: 100%;
+        transform: translate(100%, -50%);
+
+    }
+
+    .dropdown-menu {
+        background-color: $navbar-chulapa-bg-color;
+        border-color: $navbar-chulapa-text-color;
+
+        .dropdown-item {
+            color: $navbar-chulapa-text-color;
+
+            .nav-link {
+                &.disabled {
+                    color: $navbar-chulapa-disabled-color;
+                }
+
+                &.active {
+                    color: $navbar-chulapa-active-color;
+                }
+            }
+        }
+    }
+
+    .navbar-brand {
+        color: $navbar-chulapa-brand-color;
+
+        @include hover-focus() {
+            color: $navbar-chulapa-brand-hover-color;
+        }
+
+
+    }
+
+    .nav-link {
+        color: $navbar-chulapa-text-color;
+
+        &:link,
+        &:visited {
+            display: inline-block;
+            background-image: linear-gradient(120deg, transparent 0%, transparent 50%, $navbar-chulapa-hover-color 50%);
+            background-size: 280%;
+            transition: all .4s;
+
+        }
+
+        &:hover,
+        &:active {
+            background-position: 100%;
+            color: $navbar-chulapa-bg-color;
+            transform: translateX(map-get($spacers, 2));
+        }
+
+        &.disabled {
+            color: $navbar-chulapa-disabled-color;
+        }
+
+        &.active {
+            color: $navbar-chulapa-active-color;
+
+            @include hover-focus() {
+                color: $navbar-chulapa-text-color;
+            }
+        }
+    }
+
+    @include media-breakpoint-down(lg) {
+
+        .navbar-toggler {
+            bottom: 1.05*map-get($spacers, 5);
+            right: map-get($spacers, 4);
+        }
+
+        .navbar-chulapa-fab-background {
+            bottom: 1.05*map-get($spacers, 5);
+            right: map-get($spacers, 4);
+        }
+
+
+    }
+
+    @include media-breakpoint-up(lg) {
+
+
+        .navbar-toggler {
+            top: map-get($spacers, 4);
+            right: 2*map-get($spacers, 5);
+        }
+
+        .navbar-chulapa-fab-background {
+            top: map-get($spacers, 4);
+            right: 2*map-get($spacers, 5);
+        }
+
+
+    }
+
+    &-button:checked~&-background {
+        transform: scale(80);
+    }
+
+    &-button:checked~&-nav {
+        opacity: 1;
+        width: 100%;
+
+        .navbar-nav {
+            transform: translate(100vw, -50%);
+        }
+
+    }
+
+
+
+    .navbar-toggler-icon {
+        position: relative;
+
+        &,
+        &::before,
+        &::after {
+            width: 2rem;
+            height: 2px;
+            background-color: $navbar-chulapa-toggler-color;
+            display: inline-block;
+        }
+
+        &::before,
+        &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            transition: all .2s;
+        }
+
+        &::before {
+            top: -.6rem;
+        }
+
+        &::after {
+            top: .6rem;
+        }
+    }
+
+    &-button:checked+.navbar-toggler .navbar-toggler-icon {
+        background-color: transparent;
+    }
+
+    &-button:checked+.navbar-toggler .navbar-toggler-icon::before {
+        top: 0;
+        transform: rotate(135deg);
+    }
+
+    &-button:checked+.navbar-toggler .navbar-toggler-icon::after {
+        top: 0;
+        transform: rotate(-135deg);
+    }
+}
+
+// Repositioning Clipboard button
+.btn-chulapa-copy-code {
+  position: absolute;
+  right: 30px;
+}
+
+// Normalize carousel
+
+.chulapa-carousel {
+  height: 75vh;
+  object-fit:contain;
+}