Close

Delight is a demo style kit for the Layers framework and is intended as a teaching tool.


License

This kit may be used privately or on sites you own provided you keep the attribution intact.

CSS and json are ©2016 and may not be used to create a theme or kit for sale.

Images and copy are courtesey of death to stock

Documentation

Visit the Layers Help website for detail tutorials:

Details

This kit uses Layers Pro for most of the customization, and the following Layers Settings:

Site Settings

  • Logo & Title: No Logo with text option checked
  • Fonts: Montserrat for the Heading and Body, and Cabin for the buttons.

Header

  • Boxed
  • Logo Left
  • Sticky, Transparent
  • Background Color – white

Footer

  • Boxed
  • Widget Areas: None
  • Text & Link Color: #FFF
  • Background Color: #141414


Suggested Plugins

Helpful Tutorials

DevKit CSS

/* Invert Heading on Scroll */
.sitetitle a{
color: #FFF;
font-size: 3rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 4px;
}
.is_stuck_show .sitetitle a{
color: #000;
}
.nav-horizontal li a{
font-size: 1.3rem;
font-weight: bold;
}
.is_stuck_show .nav-horizontal li a{
color: #000 !important;
}
.l-search{color: #FFF;}
.is_stuck_show .l-search{color: #000;}
.nav-horizontal li a{
border-bottom: 2px solid transparent;
}
.nav-horizontal li a:hover,
.nav-horizontal .current_page_item a{
border-bottom: 2px solid #FFF;
}
.is_stuck_show li a:hover,
.is_stuck_show .nav-horizontal .current_page_item a{
border-bottom: 2px solid #dbc54c;
}

/* Global */
.heading{
font-weight: 700;
text-transform: uppercase;
letter-spacing: 4px;
}
/* WIDGET ADVANCED STYLES */
/* jumbo */
.jumbo .section-title.large .heading{
font-size: 6rem;
font-weight: 900;
letter-spacing: 6px;
}
.jumbo .copy-container{
margin-top: -100px;
letter-spacing: 6px;
z-index: 999;
}
.jumbo .excerpt p{
text-transform: uppercase;
font-size: 1.6rem;
}

/* feature */
.feature .media-body{
margin-top: -30px;
padding-bottom: 30px;
}


.feature .excerpt p, .feature .excerpt li{
font-size: 1.6rem;
line-height: 1.8;
}
.feature .btn-medium{
border-bottom: 2px solid #f1ca43 !important;
}
/* wide-feature: when content is one 12/12 column */
.wide-feature .media-body{
margin-top: -60px;
padding-bottom: 30px;
}

.wide-feature .excerpt p {
margin-top: 0px;
font-size: 1.6rem;
line-height: 1.8;
}
.wide-feature .btn-medium{
border-bottom: 2px solid #f1ca43 !important;
}