Merge pull request #4 from yanzhen0610/patch-2

Fix content being wider than screen on mobile devices

diff --combined assets/main/sass/layout/_ghost.scss
index 8a6e1e5612195c540c65a696526b4db399245854,937146e0a4f8702ebf0e99a2c4713da72c70c05d..ded64902c24a93d9639630c2ad1c58c3b35e6217
--- 1/assets/main/sass/layout/_ghost.scss
--- 2/assets/main/sass/layout/_ghost.scss
+++ b/assets/main/sass/layout/_ghost.scss
@@@ -125,7 -125,7 +125,7 @@@
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
-     margin: 0 -40px;
+     margin: 0 -24px;
  }
  
  .author-box  {
@@@ -186,11 -186,6 +186,11 @@@
  // Content
  // --------------------------------------------
  
 +// Markdown images and videos
 +.content p > img, .content p > video {
 +    max-width: 100%;
 +}
 +
  .kg-card {
      margin: 0 0 2rem 0;
  }
@@@ -203,7 -198,7 +203,7 @@@
  }
  
  .kg-image {
 -    max-width: 100%;
 +    width: 100%;
  }
  
  .kg-card figcaption {
@@@ -239,7 -234,7 +239,7 @@@
      position: relative;
      margin-left: -14.1rem;
      margin-right: -14.1rem;
 -    width: calc(100% + 28.2rem);
 +    width: calc(100% + 28.25rem);
  
      @include breakpoint('<=large') {
          margin-left: -8rem;
@@@ -310,120 -305,6 +310,120 @@@
      margin: -2.25em 0 3em;
  }
  
 +.kg-bookmark-card {
 +    background: #fff;
 +    width: 100%;
 +}
 +
 +.kg-bookmark-container {
 +    display: flex;
 +    text-decoration: none;
 +    min-height: 148px;
 +    border: 1px solid rgba(210, 215, 217, 0.75);
 +    border-radius: .375em;
 +    box-sizing: border-box;
 +
 +    @include breakpoint('<=xsmall') {
 +        flex-direction: column;
 +    }
 +}
 +
 +.kg-bookmark-container:hover {
 +    border-bottom-color: rgba(210, 215, 217, 0.75);
 +}
 +
 +.kg-bookmark-content {
 +    display: flex;
 +    flex-direction: column;
 +    flex-grow: 1;
 +    align-items: flex-start;
 +    justify-content: start;
 +    padding: 1.2rem;
 +
 +    @include breakpoint('<=xsmall') {
 +        order: 2;
 +    }
 +}
 +
 +.kg-bookmark-title {
 +    font-weight: 600;
 +    line-height: 1.5em;
 +    color: #3d4449;
 +}
 +
 +.kg-bookmark-container:hover .kg-bookmark-title {
 +    color: #f56a6a;
 +}
 +
 +.kg-bookmark-description {
 +    display: -webkit-box;
 +    font-size: 90%;
 +    font-weight: 400;
 +    line-height: 1.6em;
 +    color: #7f888f;
 +    margin-top: 0.8rem;
 +    max-height: 2.6rem;
 +    overflow-y: hidden;
 +    -webkit-line-clamp: 2;
 +    -webkit-box-orient: vertical;
 +}
 +
 +.kg-bookmark-thumbnail {
 +    position: relative;
 +    min-width: 33%;
 +    max-height: 100%;
 +    margin: -1px -1px -1px 0;
 +
 +    @include breakpoint('<=xsmall') {
 +        order: 1;
 +        min-height: 10.6rem;
 +        margin: -1px -1px 0px -1px;
 +    }
 +}
 +
 +.kg-bookmark-thumbnail img {
 +    position: absolute;
 +    top: 0;
 +    left: 0;
 +    width: 100%;
 +    height: 100%;
 +    object-fit: cover;
 +    border-radius: 0 .375em .375em 0;
 +
 +    @include breakpoint('<=xsmall') {
 +        border-radius: .375em .375em 0 0;
 +    }
 +}
 +
 +.kg-bookmark-metadata {
 +    display: flex;
 +    align-items: center;
 +    font-size: 90%;
 +    line-height: 1.6em;
 +    color: #7f888f;
 +    margin-top: 1rem;
 +    flex-wrap: wrap;
 +}
 +
 +.kg-bookmark-icon {
 +    width: 20px;
 +    height: 20px;
 +    margin-right: 0.4rem;
 +}
 +
 +.kg-bookmark-author:after {
 +    content: "•";
 +    margin: 0 0.4rem;
 +}
 +
 +.kg-bookmark-publisher {
 +    overflow: hidden;
 +    line-height: 1.5em;
 +    text-overflow: ellipsis;
 +    white-space: nowrap;
 +    max-width: 14rem;
 +}
 +
  // Error Pages
  // --------------------------------------------