2
\$\begingroup\$

I have this blade template with a main.scss file:

include "layout.blade"
replace block page
    ul.brand(data-orbit data-options="animation:slide;\
         pause_on_hover:true;\
         animation_speed:500;\
         slide_number:false;\
         navigation_arrows:false;\
         bullets:false;\
         swipe:true;")
        li.cta
            .row.slide
                .large-5.columns
                    i.icon-continental-logo
                    h1="Continental Collection"
                    h2="Quality Garments, Responsibly Sourced"
                    a(href="/")="Discover Continental"
                .large-7.columns
                    img.shadow(src="/images/slider/continental_duo_shadow.jpg")
                    img.figure(src="/images/slider/continental_duo.png")
        li.salvage
            .row.slide
                .large-5.columns
                    i.icon-salvage-logo
                    h1="Salvage Collection"
                    h2="A new range of clothing, 100% Recycled"
                    a(href="/")="Discover Salvage"
                .large-7.columns
                    img.shadow(src="/images/slider/salvage_duo_shadow.jpg")
                    img.figure(src="/images/slider/salvage_duo.png")

main.scss

$header-font-family: "Roboto Condensed", "Arial", "sans-serif";
// Primary colors
$ccc-color-ccc            : rgb(137,0,0); // #89000, darkbrown
$ccc-color-continental    : rgb(60,113,145); // #3C7191, blue
$ccc-color-earthpositive  : rgb(0,151,95);  // #00975F, green
$ccc-color-salvage        : rgb(205,113,38);  // #CD7126, brown

@mixin collection($main-color) {
  color: $main-color;
}

h1, h2, h3 {
  font-family: $header-font-family;
  margin-bottom: 20px;
}

ul.brand {
  i {
    font-size: 50px;
  }
  a {
    display: table;
    padding: 10px 15px;
    min-width: 230px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    margin: 20px auto;
    text-align: center;
    cursor: pointer;
    @include single-transition($ease:0.2s) {
      transition-delay: $ease;
    };
    &:hover {
      -webkit-box-shadow: 0px 0px 0px 10px #BCBCBC;
      -moz-box-shadow:    0px 0px 0px 10px #BCBCBC;
      box-shadow:         0px 0px 0px 10px #BCBCBC;
      color: #FFF;
      }
    }
  li.cta {
    i, h1, h2, a {
      @include collection($ccc-color-continental)
    }
    a {
      border: 1px solid $ccc-color-continental;
      &:hover {
        background-color: $ccc-color-continental;
        color: #FFF;
      }
    }
  }
  li.salvage {
    i, h1, h2, a {
      @include collection($ccc-color-salvage)
    }
    a {
      border: 1px solid $ccc-color-salvage;
      &:hover {
        background-color: $ccc-color-salvage;
        color: #FFF;
      }
    }
  }
}

I am trying to figure out how best to deal with the a, h1, h2 and i block within the li.

\$\endgroup\$
3
  • \$\begingroup\$ is your Jade correct? I just glanced at the jade-lang website and it looks like your syntax is off a bit \$\endgroup\$
    – Malachi
    May 1, 2014 at 19:44
  • \$\begingroup\$ i am using github.com/bminer/node-blade which is very similar to jade \$\endgroup\$
    – khinester
    May 2, 2014 at 8:42
  • \$\begingroup\$ You should mention that in your post because the syntax is different, and probably change the title as well. You should also Add the CSS tag and the HTML tag(I only say this because it is an HTML/CSS building Template system) \$\endgroup\$
    – Malachi
    May 2, 2014 at 13:11

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.