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\$
  • \$\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 '14 at 19:44
  • \$\begingroup\$ i am using github.com/bminer/node-blade which is very similar to jade \$\endgroup\$ – khinester May 2 '14 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 '14 at 13:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.