Skip to content

Latest commit

 

History

History
73 lines (54 loc) · 1.62 KB

content-support.mdown

File metadata and controls

73 lines (54 loc) · 1.62 KB
Raw

Content support

The following additional features are available for you as you write content.

Lists

What different list types are available

Check List

%ul.check
  %li
    Buy groceries
  %li
    Cook food

Code List

%ul.code
  %li
    HTML is cool
  %li
    CSS is also cool

Flag List

A list with a flag title

.flag-list
  :markdown
    ### <span>Main text</span> some less prominent text

  %ul.code
    %li
      %a{ :href => 'http://example.com', :target => '_blank' }
        Some link text

Image in article content

Image appropriate for an article

  • The class 'content-example' renders the style
  • The class 'viewable-image' attaches the javascript gallery (lightbox-ish) functionality
%a{ :href => '/path/to/full-img.png', :class => 'content-example viewable-image' }
  %img{ :alt => 'some alt', :src => '/path/to/small-img.png' }

Large image in article with overlay

Full size image in article that may have overlay with title

  • The class 'img-container' should be applied to wrapper.
  • To have an overlay, add an element with class '.img-container-inner'. It will be bright, if you want it dark you need to add the class 'darken'.
  • The 'img.logo' element is a logo that will reside on top of the overlay.
  • The 'img.box.full-size' element is the large full size image.
  • The 'h2' element is an optional lower label.
.img-container
  .img-container-inner.darken
  %img.logo{ :src => '/attachments/img/x-team/x-team.logo.white.png' }
  %img.box.full-size{ :src => '/attachments/img/x-team/LA_sunset.jpg' }
  %h2
    Learning to work remotely