lozandier

.main
  Main 
  .a
    A
  .b
    B
  .c
    C
    .n1
      N1

lozandier

.main
  Main 
  .a
    A
  .b
    B
  .c
    C
    .n1
      N1

lozandier

%h1 
  Test Header With More Content 
%p 
  You can also use the modular scale to adjust text at different breakpoints. A level 2 heading on a desktop may be set at 28px, but at a smaller mobile breakpoint, 28px may appear too large. Therefore, you can adjust to 21px or another measurement in the scale.

%p 
  You can also use the modular scale to adjust text at different breakpoints. A level 2 heading on a desktop may be set at 28px, but at a smaller mobile breakpoint, 28px may appear too large. Therefore, you can adjust to 21px or another measurement in the scale.

%p.special 
  You can also use the modular scale to adjust text at different breakpoints. A level 2 heading on a desktop may be set at 28px, but at a smaller mobile breakpoint, 28px may appear too large. Therefore, you can adjust to 21px or another measurement in the scale.

lozandier

%main
  .promoBox
    .photo 
      %img{src: "http://placehold.it/250x250"}
      
    .primary
      %h1 Primary Header  
      %p A few HTML elements don’t play nice with responsive layouts. One of these is the good ol' iframe, which you may need to use when embedding content from external sources such as YouTube 

lozandier

%main
  .promoBox
    .photo 
      %img{src: "http://placehold.it/500x500"}
      
    .primary
      %h1 Primary Header  
      %p A few HTML elements don’t play nice with responsive layouts. One of these is the good ol' iframe, which you may need to use when embedding content from external sources such as YouTube 

lozandier

%main 
  %nav
    %input{type:"checkbox", id: "menu"}
    %label{for: "menu", onclick: 'onclick'}
    %ul 
      %li
        %a{href:"#"} 
          Item 1
      %li
        %a{href:"#"} 

lozandier

%h1 
  Test Header With More Content 
%p 
  You can also use the modular scale to adjust text at different breakpoints. A level 2 heading on a desktop may be set at 28px, but at a smaller mobile breakpoint, 28px may appear too large. Therefore, you can adjust to 21px or another measurement in the scale.

%p 
  You can also use the modular scale to adjust text at different breakpoints. A level 2 heading on a desktop may be set at 28px, but at a smaller mobile breakpoint, 28px may appear too large. Therefore, you can adjust to 21px or another measurement in the scale.

%p.special 
  You can also use the modular scale to adjust text at different breakpoints. A level 2 heading on a desktop may be set at 28px, but at a smaller mobile breakpoint, 28px may appear too large. Therefore, you can adjust to 21px or another measurement in the scale.

lozandier

%p USC Women Leadership Board

lozandier

<input type="checkbox" id="menu">
<label for="menu" onclick></label>

<nav role="">
  <ul>
    <li><a href="#">Stream</a></li>
    <li><a href="#">Lab</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>

lozandier

%button.lines-button.arrow.close.arrow-left{type: "button", role: "button", aria: {label: "Toggle Navigation"}}
  %span.lines