Latest Update 21 December 2018

This article covers updates that have been made to the design kit to improve its functionality and make it more user friendly.

For Black Ónyx design kit, the update pertains specifically to graphic elements. If you have implemented the design kit before the update release, you can choose to continue using graphics or follow the instructions below to implement these through CSS code and settings inside Site Styles tab in your account.

The Update affects the Homepage top banner graphics. Now you can edit those directly on the page instead of working with Photoshop files. With the help of the CSS code provided below, all the fonts will also be adjusted.

Screen Shot 2019-01-07 at 8.29.07 PM.png

Copy and Paste the code below into the Design tab -> Advanced -> Custom CSS inside your Squarespace account.

@media only screen and (max-width: 640px) {
.BlogItem-title {
    margin-bottom: 0;
    font-size: 25px;
}
.Blog-meta.BlogList-item-meta {
    margin-bottom: 0!important;
}
.BlogList-item {
    margin-top: 40px;
}
.BlogList-item+.BlogList-item:before {
    margin-bottom: 40px!important;
}
}
/*Home slider Text*/
.homepage section:first-child h2 a {
  word-wrap: initial!important;
}
.homepage section:first-child h2 {
    font-family: Lora;
    font-weight: 400;
    letter-spacing: 0.40em;
    font-size: 1rem;
    margin-right: -8px;
position: relative;
  text-transform: uppercase;
  word-wrap: initial!important;
}
.homepage section:first-child h2 a {
position: relative;
}
.homepage section:first-child h2 a:after {
    position: absolute;
    content: '';
    width: calc(100% - 5px);
    height: 1px;
    background: #fff;
    bottom: 0;
    left: 0px;
}
pre, pre code {
    font-family: futura-pt;
    font-weight: 500;
    font-style: normal;
    font-size: 0.5rem;
    letter-spacing: 0.8em;
    white-space: initial;
    line-height: 1.6;
  text-transform: uppercase
}

Update 19th February 2018

The second section of the homepage can now be built easier within Squarespace account rather by editing files in Photoshop.

Screen Shot 2019-01-07 at 8.30.10 PM.png

Below you can find a video with detailed information on how to build the above-mentioned section.

Font settings for title on Poster Image:

Part of Pixieset Family

USeful links