How to use Sidecar
Template Manual
Typography
Sidecar uses Inter as the main typeface. Inter is not natively available on Squarespace, so we import it via CSS. If you would like to remove Inter and use a built-in font, access the Custom CSS window and delete this line of code:
//---USE INTER FONT---//
* {font-family:"inter"!important;}
Blog List Summary
This customized summary block gives you a highly simplified way to display blog posts to readers. This block acts as the main Blog feed for the site. It also utilizes some 3rd party code by Ryan Dejaegher to remove the blog post you’re currently on from the “continue reading” section.
If you’d like to use this style of summary on another site, feel free to copy this code to Custom CSS and replicate the settings in the summary block.
//--- LIST_SUMMARY ---//
/*Summary Block*/
.sqs-block-summary-v2 .summary-block-setting-design-list{
max-width:var(--blog-width)!important;
margin-left:auto!important;
margin-right:auto!important;
margin-top:15px;}
/*Remove Block Padding*/
.sqs-block-summary-v2 .summary-block-setting-design-list .summary-item{
padding-bottom:0!important;
margin-bottom:0!important;
margin-top:-20px!important;}
.sqs-gallery-design-list{
/*Summary Item - Remove Margin*/
.summary-item, .summary-title{
padding-bottom:0!important;
margin-bottom:0!important;}
/*Summary Title*/
.summary-title{
width:100%!important;
text-align:left!important;}
/*Summary Title Link*/
.summary-title a{
width:100%!important;
display:flex;
font-weight:500;
font-size:.85rem;
letter-spacing:.005em;
align-items:center;
margin-bottom:0;
min-height:35px;
padding: 15px 0px;
transition:all .3s ease;}
/*Summary Title Arrow*/
.summary-title a:before{
position:absolute;
opacity:0;
margin-left:-10px;
font-family:'inter';
line-height:0;
font-weight:400;
content:"→";
transition:all .3s ease;}
/*Summary Meta Container*/
.summary-metadata-container--below-title{
max-width:25%!important;
@media screen and (max-width:767px){
width:35%!important;}
display:block!important;
padding:12px 0;
cursor:pointer;
text-align:right!important;
line-height:.5!important;
margin-bottom:0px!important;}
/*Remove Meta Below Title*/
.summary-metadata-container--above-title{display:none!important;}
/*Summary Meta*/
.summary-metadata-item{
font-size:.7em;
text-transform:uppercase;
text-align:right;
font-weight:500;}
.summary-metadata-item--cats{
border-radius:4px!important;
background:#f2f2f2;
border:none;
padding:4px 7px;
text-transform:uppercase!important;
font-style:normal;
letter-spacing:.07em!important;
font-size:8px!important;
font-weight:600!important;
transition:all .3s ease;}
/*Meta Tags*/
.summary-metadata-item--tags{
color:#1a1a1a!important;}
/*Hide Meta Divider*/
.summary-metadata-item:after{
display:none!important;}
/*Summary Meta NO CLICK*/
.summary-metadata-item a, a.blog-item-category, .blog-author-name{
pointer-events: none!important;
cursor: default!important;}
/*Summary Text*/
.sqs-gallery-meta-container{
display:flex;
flex-direction: row;
align-items:center;
border-bottom:1px solid #1a1a1a;
transition:all .3s ease;}
/*Summary Container HOVER*/
@media screen and (min-width:767px){
.sqs-gallery-meta-container:hover{
/*Title*/
.summary-title a{
padding-left:17px;
transition:all .3s ease;}
/*Arrow*/
.summary-title a:before{
opacity:1!important;
margin-left:-18px;
transition:opacity .3s ease;}
.summary-metadata-item--cats{
color:#f2f2f2;
background:#1a1a1a;
transition:all .3s ease;}}}}Blog Post Design
We’ve used an extensive amount of CSS to customize the blog post template, which can be located on the individual blog post’s code injection (Blog Page Settings → Advanced → Post Blog Item Code Injection). But, there are a few core settings that live in the Custom CSS window. Adjust the values in blue to make changes.
Custom CSS
body {
--blog-top: 10vh;
--blog-width: 650px;
--blog-header-width: 50rem;
--blog-image-width: 62rem;}
Blog Post Details
On the blog page, you’ll see an unpublished Template Post. To make a new blog post, simply duplicate that post, then change relevant details like:
Author — Select who wrote the post. It’s automatically populated by details in your Squarespace account, but if you’d like to credit a different author, add them as a Guest Poster via the Site Permissions.
Category — Make sure to fill this out so it appears at the top of the post.
Image — The image beneath the title area is not auto-populated, so you’ll have to add that in if you want it. Not required, just a suggestion!
Image Metadata — Every image needs a description.