Quantcast
Channel: Squarespace Answers - latest questions
Viewing all articles
Browse latest Browse all 21023

Wells: How can I center my main content?

$
0
0

I recently switched to the Wells template from Avenue because I wanted a sidebar. Above Avalon turned me on to Wells.

My site is basically a Daring Fireball -ish type of thing.

What I would like to accomplish is to bring my content to the center. I did see this post, last updated in October of 2014. The problem with the solutions listed there is that it assumes I am okay having a super wide "content" block (where all my text goes). In fact, landofnoms has a site with an @siteWidth of ~1000px. That's too much for me.

Here is a screenshot of what my site looks like now:

alt text

I basically just want to move all that over so that it is centered, regardless of the size of the desktop display

(On mobile everything looks as it should, with the sidebar disappearing and #mobileNav doing it's thing.)

Here is the stylesheet governing the appearance of the site:


/* COLORS & BACKGROUNDS 
***********************************************/

body { background-color: @siteBackground; color: @bodyTextColor; }
a, a:visited { color: @bodyLinkColor; }
a:hover { color: @bodyLinkHoverColor; }
.main-nav {
  a, a:active, .folder li a { color: @navColor; }
  .active-link a, .folder li.active-link a { color: @navActiveColor; }
  a:hover, .folder li a:hover { color: @navHoverColor; }
  &#secondaryNavigation {
    a, .folder li a { color: @secondaryNavColor; }
    .active-link a, .folder li.active-link a { color: @navActiveColor; }
    a:hover, .folder li a:hover { color: @navHoverColor; }
  }
}

h1,h2,h3,h4,.comment-count { color: @headingsColor;
  a, a:visited { color: @headingsColor; }
  a:hover { color: @bodyLinkHoverColor; }
} 
pre {
    white-space: pre-wrap;
    width: 96%;
    margin-bottom: 24px;
    overflow: hidden;
    padding: 3px 10px;
    -webkit-border-radius: 3px;
    background-color: #eee;
    border: 1px solid #ddd;
}
code {
    white-space: nowrap;
    font-size: 1.0em;
    padding: 2px;
    -webkit-border-radius: 3px;
    background-color: #eee;
    border: 1px solid #ddd;
}
pre code {
    white-space: pre;
    border: none;
    padding: 0;
    background-color: transparent;
    -webkit-border-radius: 0;
}



/* FONTS & VERTICAL GRID
***********************************************/


// VERTICAL GRID

body { .body-font; font-size: @bodyTextSize; 
    }
h1, h2, h3, h4, h5, h6 { .headings-font; margin: 1em 0; }
h1 { font-size: @headingsSize; }
h2, .comment-count { font-size: @headingsSize*0.8; }
h3 { .headings-font; font-size: @headingsSize*0.6; }
.comment-count { font-size: 16px !important; }
p { .body-font; margin: 0 0 1em; }
blockquote {  margin: 10px 10px 18px 10px; color: #a1a1a1; padding-left: 10px; border-left:3.5px solid #dbdbdb; }
pre, ul, ol, dl { .body-font; margin: 1em 0; }
nav ul, nav ol { margin: 0; }

/* navigation */
.main-nav { font-size: @navSize;
  a { .nav-font; font-size: @navSize; display: block; padding: 0.2em; }
  &#secondaryNavigation { font-size: @secondaryNavSize;
    a { .secondary-nav-font; font-size: @secondaryNavSize; }
    .subnav {
      a { line-height: 1.2em; }
    }
  }
}

.main-nav + .main-nav { margin-top: 20px; }

/* dropdown menus */
.main-nav {
  li.folder .subnav { height: 0; overflow: hidden; opacity: 1; }
  li.active-folder .subnav { height: auto; }
  li.folder > a { cursor: pointer; }
  .subnav {
    ul { padding: 0.5em 0 1em; }
    li { margin-left: 0.5em; }
    a { line-height: 1.2em; }
  }
}

#mobileMenuLink { display: none; margin: 15px 0 0; }
#mobileNav { height: 0; overflow: hidden; }


// HEADER
#logo { margin-bottom: 30px;
  .logo.site-title { margin: 0; font-size: @siteTitleSize; display: inline-block; }
  .logo.site-title a { color: @siteTitleColor; }

  .logo.image { line-height: 0; margin: 0; display: block; width:@logoSize; max-width: @sidebarWidth; }

  .logo.image img { width:@logoSize; max-width: @sidebarWidth; }

  .logo-subtitle { .subtitle-font; font-size: @subtitleSize; color: @subtitleColor; margin-top: 0.5em; }
}

#logo .logo.site-title {
  .site-title-font;
}

#categoryNav,
.category-nav-toggle-label {
  display: none;
  visibility: hidden;
}

.show-category-navigation #categoryNav {
  display: block;
  visibility: visible;
}

#categoryNav {
  ul {
    margin: 0 0 @outerPadding;
    .category-nav-font;
    line-height: 1em;
    li {
      display: inline-block;
      margin: 0 2em 1em 0;
      &.filter {
        display: none;
      }
      a,
      a:visited {
        color: @categoryNavColor;
      }
      &.active-link:not(.all) {
        a,
        a:visited {
          color: @categoryNavActiveColor;
        }
      }
    }
  }
}

// keeps ALL from being active color on item view
.view-list #categoryNav ul li.active-link.all {
  a,
  a:visited {
    color: @categoryNavActiveColor;
  }
}




/* LAYOUT (WIDTHS & PADDING)
************************************************/

#canvasWrapper { 
    max-width: @siteWidth; 
    }
#canvas { padding: @outerPadding; min-width: 900px; }
#headerWrapper { position: relative; z-index: 999; }
#header, #page, #footer { padding: 0; }
#page { position: relative; }
#sidebarWrapper { display: none; }
#topNav { margin-bottom: 20px; }

.sidebar-text-alignment-center #headerWrapper { text-align: center; }
.sidebar-text-alignment-right #headerWrapper { text-align: right; }


/* header options */

body.sidebar-fixed {
  &.sidebar-position-left {
    #headerWrapper { position: fixed; }
  }
  &.sidebar-position-right {
    #headerWrapper { position: fixed; right: @outerPadding; }
  }
  #headerWrapper.absolute{
    position: absolute;
  }
}


body.sidebar-position-left {
  #headerWrapper { position: absolute; top: @outerPadding; left: @outerPadding; width: @sidebarWidth; }
  #pageWrapper, #footerWrapper { width: auto; margin-left: @sidebarWidth + @sidebarPadding + 20; }
}

body.sidebar-position-right {
  #canvasWrapper {  }
  #headerWrapper { position: absolute; top: @outerPadding; right: @outerPadding;  width: @sidebarWidth; }
  #pageWrapper, #footerWrapper { width: auto; margin-right: @sidebarWidth + @sidebarPadding + 20; }
}


@folderBackground: hsl(hue(@navActiveColor), saturation(@navActiveColor), lightness(@navActiveColor));
@folderNavColor: hsl(hue(@siteBackground), saturation(@siteBackground), lightness(@siteBackground));



/* COLLECTIONS / PAGES
***********************************************/

/* Blog */

.collection-type-blog {

  &.blog-sidebar-right {
    #sidebarWrapper { display: block; width: @blogSidebarWidth; position: absolute; top: 0; right: 0; }
    .main-content { margin-right: @blogSidebarWidth + @blogSidebarPadding; }
  }

  &.blog-sidebar-left {
    #sidebarWrapper { display: block; width: @blogSidebarWidth; position: absolute; top: 0; left: 0; }
    .main-content { margin-left: @blogSidebarWidth + @blogSidebarPadding; }
  }

  .category-filter span:before { 
    content: 'Articles in '; 
    display: none
    }
  .tag-filter span:before { 
    content: 'Articles tagged '; 
    display: none
    }
  .author-filter span:before { 
    content: 'Articles written by '; 
    display: none
    }

  article {

    .engagement {
      span, a { color: @metaColor; }
      .sqs-simple-like .like-count,
      .sqs-simple-like .like-count:hover,
      .ss-social-button,
      .ss-social-button:hover {
        color: @metaColor;
      }
    }

    .entry-info {
      &, a { color: @metaColor;  }
    }

    .special-content { margin-bottom: 1em; }

    // header
    header { margin: 0 0 1em; }
    h1.entry-title { margin: 0 0 10px; }


    // body
    .entry-content { margin: 1em 0; }
    .read-more { display: block; }
    .main-image img { width: 100%; }

    // meta
    .comments-wrapper { margin-top: @postPadding; }

    &.promoted-block-quote .special-content {
      blockquote { .quote-font; color: @headingsColor; font-size: @quoteSize * 1.4; margin: 0; }
      .source { font-size: @bodyTextSize; }
    }

  }
  .post-divider { margin: @postPadding/2 0; height: 1px; }
}

.engagement { margin-top: 10px; font-size: 0.9em; font-style: italic;

  .squarespace-social-buttons.inline-style:hover .ss-social-button,
  .squarespace-social-buttons .ss-social-list-wrapper .ss-social-button-list {
    text-align: left;
  }

  .comment-link {
    display: inline-block;
    margin-right: 1.2em;
    .sqs-ui-font(bubble);

    &:before {
      font-size: 1.2em; // overrides sqs-ui-font
      width: auto; // overrides sqs-ui-font
      height: auto; // overrides sqs-ui-font
      line-height: inherit; // overrides sqs-ui-font
      text-align: left; // overrides sqs-ui-font
      vertical-align: initial; // overrides sqs-ui-font
      margin-right: 0.2em;
      position: relative;
      top: 0.12em;
    }

  }

  @import 'sqs-ui-font';

  .sqs-simple-like {
    line-height: inherit; // overrides sqs-simple-like
    margin-right: 1.2em;

    &:hover .like-icon {
      -webkit-animation: initial;
      -webkit-animation-timing-function: initial; }

    .like-icon {
      margin-right: 1.2em;
      .sqs-ui-font(heart-2);
      background: none;
      -webkit-transition: initial;
      transition: initial;
      float: none;
      display: inline-block;
      margin-right: 0.2em;
      // height: auto;
      // width: auto;

      &:before {
        font-size: 1.2em; // overrides sqs-ui-font
        width: auto; // overrides sqs-ui-font
        height: auto; // overrides sqs-ui-font
        line-height: inherit; // overrides sqs-ui-font
        text-align: left; // overrides sqs-ui-font
        vertical-align: initial; // overrides sqs-ui-font
        margin-right: 0.3em;
        position: relative;
        top: 0;
        left: 0;
      }

    }
  }

  .ss-social-button {
    .sqs-ui-font(share);

    &:before {
      font-size: 0.85em; // overrides sqs-ui-font
      width: auto; // overrides sqs-ui-font
      height: auto; // overrides sqs-ui-font
      line-height: inherit; // overrides sqs-ui-font
      text-align: left; // overrides sqs-ui-font
      vertical-align: initial; // overrides sqs-ui-font
      margin-right: 0.4em;
    }

    div {
      display: inline-block; // sets div with no class names
    }
  }

  .ss-social-button-icon {
    display: none!important;
  }

}

.pagination {
  margin-top: @postPadding*2;
}

body.sidebar-position-top.collection-type-blog article {
  .slideshow { height: @siteWidth * 0.66; }
}


/* Gallery Collections */

@-webkit-keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.collection-type-gallery { height: 100%;

  &.sidebar-position-left {
    #pageWrapper, #footerWrapper { margin-left: @sidebarWidth + @sidebarPadding; }
  }

  &.sidebar-position-right {
    #pageWrapper, #footerWrapper {margin-right: @sidebarWidth + @sidebarPadding; }
  }

  &.sidebar-fixed:not(.enable-gallery-thumbnails) { overflow: hidden; }

  #canvasWrapper { height: 100%; }
  #page { position: static; }

  #galleryWrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
  }

  .meta {
    position: absolute;
    left: @outerPadding;
    bottom: @outerPadding;
    width: @sidebarWidth;
    z-index: 999;
    opacity: 0;

    .slide {
      height: 0;
      overflow: hidden;
    }

    .slide.sqs-active-slide {
      height: auto;
    }

    .image-title {
      color: @headingsColor;
    }

    .image-desc {
      color: @bodyTextColor; padding: 15px 0 0;

      p {
        padding:0 15px 15px;
        margin:0;
      }
    }

    .image-title + .image-desc { padding-top: 10px; }
    .image-desc p { padding-left: 0; padding-right: 0; }
    .image-desc :last-child { padding-bottom: 0; }

    .thumbnail-toggle { .gallery-controls-font; font-size: @galleryControlsSize; margin-top: 15px; }

    .gallery-controls {
      display:block;
      font-size: @galleryControlsSize;
      padding-top: 15px;

      .gallery-controls-font;

      &#simpleControls {
        display: none;
        color: @galleryControls;

        .control {
          cursor: pointer;
          color: @galleryControlsActive;
        }
      }

      &#numberControls {
        display: none;
        margin-left: -.25em;
        // word-wrap: break-word;

        .number {
          color: @galleryControls;
          cursor: pointer;
          padding: 0 0.25em 0 0 ;

          &:hover,
          &:focus {
            color: @galleryControlsActive;
          }

          &.sqs-active-slide {
            color: @galleryControlsActive;
            font-weight: bold;
          }
        }
      }

      &#dotControls {
        display: none;
        margin-left: -.2em;
        margin-left: -.2rem;

        .dot {
          color: @galleryControls;
          font-size: @galleryControlsSize*2;
          cursor: pointer;
          margin-right: 0;
          font-family: georgia, serif;
          font-weight: bold;
          line-height: .6em;
          display: inline-block;
          padding: 0 .2em;
          padding: 0 .2rem;

          &:hover,
          &:focus {
            color: @galleryControlsActive;
          }

          &.sqs-active-slide {
            color: @galleryControlsActive;
          }
        }
      }
    }

  }

  #slideshowWrapper {
    &::selection { background-color: transparent; }
  }

  .overlay-controls {

    position: absolute;
    top: 0;
    height: 100%;
    z-index: 998;

    &.left-control {
      left: 0;
      width: 50%;
      cursor: w-resize;
    }

    &.right-control {
      left: 50%;
      width: 50%;
      cursor: e-resize;
    }

  }

  .single-image {
    #slideshow .slide { cursor: default; }
    .overlay-controls { display: none !important; }
  }


  // hide if active slide is video slide
  .sqs-active-slide.video-slide { z-index: 1000 !important; }


  .thumbnail-toggle { display: none; }

  &.enable-gallery-thumbnails .thumbnail-toggle { display: block; cursor: pointer; }


  #thumbnails { display:none; }

  &.enable-gallery-thumbnails {
    #thumbnails { display: none; }
    #slideshow { display: block; }
    .overlay-controls {
      &.left-control { width: 40%;}
      &.center-control { left: 40%; width: 20%;  cursor: n-resize; }
      &.right-control { left: 60%; width: 40%; }
    }
  }

  &.enable-gallery-thumbnails.thumbnail-view {
    #thumbnails { display: block; }
    #slideshow, .meta { display: none !important; }
    .overlay-controls { display: none; }
  }



  &.hide-meta .meta { right: 30px; left: auto; width: auto; background: @siteBackground; bottom: 30px; max-width: @sidebarWidth + 30px; z-index: 9999;
    .gallery-controls { margin: 0; padding: 15px; }
    #numberControls, #dotControls {
      display: none !important;
    }
    #simpleControls {
      display: block !important;
    }
    .image-title { padding: 15px 15px 0; }

    .image-desc { padding: 15px 15px 0; }
    .image-desc p { margin: 0; }

    .thumbnail-toggle { padding: 0 15px; margin: 0; }

    .image-desc + .gallery-controls { padding-top: 0; }

  }
  &.gallery-controls-hide .meta .image-desc { padding-bottom: 15px; }

  &.gallery-controls-simple .meta #simpleControls, &.gallery-controls-numbers .meta #numberControls, &.gallery-controls-bullets .meta #dotControls { display: block; }

    #slideshowWrapper { height: 100%; margin: @galleryPadding; margin-left: @sidebarWidth + @sidebarPadding + @outerPadding; position: relative; }
    #slideshow { height: 100%; overflow: hidden;
      .slide { width: 100%; height: 100%; cursor: pointer;
        &.video-slide {  }
        .image-title-mobile { display:none; margin:0.5em 0 0 0;}
        .image-desc-mobile { display:none; margin:0.5em 0 0 0;}
        .sqs-video-wrapper.video-none { height:auto !important; width: auto !important; left: auto !important; right: auto !important; }
      }
    }
    #thumbnails { margin: 10px; padding-bottom: @outerPadding;
      .thumb { cursor: pointer; transition: top 50ms ease-out, left 50ms ease-out; width: 300px;  background-color: rgba(175,175,175,0.1);  }
      .thumb img { width: 100%; height: 100%; }
      .thumb img:hover { opacity: 0.9; }
    }

&.sidebar-position-top #slideshowWrapper { margin: 0; }

&.sidebar-position-right {
  
#galleryWrapper { right: auto; left: 0; }
  #slideshowWrapper { margin: @galleryPadding; margin-right: @sidebarWidth + @sidebarPadding + @outerPadding; }
.meta { left: auto; right: @outerPadding; } &.hide-meta .meta { right: auto; left: 30px; width: auto; background: @siteBackground; } } } // Gallery Controls .gallery-controls { display:none; .arrow-icon { background: url(/assets/left_icon.png) no-repeat center left; width: 13px; height: 10px; display: inline-block; cursor: pointer; &.next-slide { background: url(/assets/right_icon.png) no-repeat center right; } } .slide-count { color: @bodyTextColor; font-style: italic; margin-left: 10px; font-size: 12px; } .grid-icon { display: inline-block; background: url(/assets/grid_icon.png) no-repeat center center; width: 12px; height: 10px; cursor: pointer; } } .grid-visible .gallery-controls { .arrow-icon, .slide-count, .grid-icon { display: none; } } body.icons-light, body.blog-gallery-icons-light { .gallery-controls { .arrow-icon { background-image: url(/assets/left_icon_light.png); } .arrow-icon.next-slide { background-image: url(/assets/right_icon_light.png); } .grid-icon { background-image: url(/assets/grid_icon_light.png); } } } .collection-type-gallery.gallery-controls-hide { .meta { #simpleControls, #numberControls, #dotControls, .thumbnail-toggle { display:none !important; } } } /* Forms */
#page .form-wrapper { font-size: @bodyTextSize;
  input[type="submit"] { .border-radius(0); text-shadow: none; background: @buttonColor; border: none; padding: 5px 20px; .box-shadow(none); }
.field-list .field { margin-bottom: 2em; } .field-list .field .field-element { .border-radius(2px); box-shadow: none; } .field-list .title { font-size: 1em; font-weight: normal; color: @headingsColor; } .field-list .caption { font-size: 0.8em; } } /* EXTRAS **********************************************/ /* ++++++++++++++++ ++++ SOCIAL ++++ ++++++++++++++++ */ .social-links { text-align:left; margin-top: 30px; &:before, &:after { content: ""; display:table; } &:after { clear:both; } a, a:visited { display:inline-block; *zoom:1; *display:inline; width:@socialIconSize; height:@socialIconSize; margin:0 10px 10px 0; color:@socialIconColor; text-decoration:none!important; &:before { font-size:@socialIconSize; } &:hover { color:@bodyLinkHoverColor; } } } .hide-social-icons .social-links { display:none; } /* ICOMOON SOCIAL FONT */ @import 'social-icon-font'; .social-links .service-label { display: none; } // Social Icons .social-icons-light #sqs-header-social a { color: #fff; } .social-icons-dark #sqs-header-social { color: #111; } .social-icons-hide #sqs-header-social { display:none; } .sqs-style-mode.sidebar-fixed.sidebar-position-left { #headerWrapper { left:70px; position:absolute; } } html { height: 100%; } // Loose floats, sink boats #headerWrapper, #pageWrapper, #footerWrapper { &:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } } .main-nav { overflow: hidden; } /* anims for tweakbar */ body.sqs-style-mode { position: relative; } .comments-content { clear: none !important; } // MIXINS // Border Radius .border-radius (@a: 5px) { -moz-border-radius: @arguments; border-radius: @arguments; } // Box Shadow, only allows a single value .box-shadow (@shadow: none) { box-shadow: @shadow; } .hidden { display: none; visibility: hidden; } /* SUMMARY BLOCK **********************************************/ .summary-metadata-item { a, a:visited { color: @bodyTextColor; } }


Viewing all articles
Browse latest Browse all 21023

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>