content.css

@charset "UTF-8";


body,html {
  padding: 0;
  margin: 0 auto;
}


.content {
  margin: 4rem 0 2rem 0;
  box-sizing: border-box;
  transition: filter 0.6s;
}

.content [unselectable="on"] {
  -webkit-user-select: none; 
   -moz-user-select: none; 
    -ms-user-select: none; 
        user-select: none;

}
/*
.content.moving {
  transition: height 0.3s, filter 0.6s;
}*/


.content picture {
  overflow: hidden;
  display: block;
  max-width: 100%;
  position: relative;
  vertical-align: top;
  margin: 0 auto;
}

.content a.picture {
  display: block;
}

.content picture img {
  margin: 0 auto;
  height: auto !important;
}
.content section[pattern*="two-"] picture img{
  max-width: 400%;
}

.content picture.added.loading {
  height: 2rem !important;
  width: 2rem !important;
  background:currentColor;
  border-radius: 50%;;
}

.content picture.added.loading img {
  visibility: hidden;
}

.content ul, .content ol, .content blockquote {
  padding-left: 2rem;
}

.content picture {
  width: 100%;
}

.content > a {
  max-width: 100%;
  display: block;
}

.content section[pattern*="two-"] picture:not(.loading) {
  /*padding-top: 100%;
}
.content section[pattern*="two-"] picture img{
  position: absolute;
  top: 0;
  left: 0;
  transition: top 0.3s, left 0.3s;*/
}

.meta picture {
  width: 3rem;
  height: 3rem;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: 0.3rem;
}

.content ul.meta {
  padding: 0;
}

.meta > li {
  display: inline-block;
  white-space: nowrap;
}
.meta > p {
  display: inline-block;
}
.meta > li + li {
  margin-left: 1rem;
}

#image-cropper {
  position: absolute;
  background: rgba(0,50,0,0.5);
  z-index: 2000;
}

section {
  padding: 3rem 0;
  position: relative;
}

section picture img{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
}

.toolbar:hover {
  opacity: 1;
  transition: none;
}

section picture img {
  display: block;
}

section .toolbar {

}

section.forced:before {
  border-color: #aaa;
}
section > .kx.foreground {
  border-color: #aaa;
  background: #fff;
   -moz-user-select: none; 
    -ms-user-select: none; 
        user-select: none;

}

.content section {
  background: #f1f1f1;
}


.content * {
  top: 0;
  left: 0;
}
.content h1 {
  font-size: 2em;
  margin: 0 auto;
}
.content h2 {
  font-size: 1.5em;
  margin: 0 auto;
}
.content h3 {
  font-size: 1.25em;
  margin: 0 auto;
}
.content p {
  margin-top: 0;
  padding: 0;
  margin-bottom: 0;
}
.content * + p {
  margin-top: 14px;
}

.content * + h1, .content * + h2, .content * + h3, .content * + blockquote, .content * + picture, .content * + a {
  margin-top: 14px;
}

.content .kx + * {
  margin-top: 0;
}
.content h1 + * {
  margin-top: 14px;
}
.content h2 + * {
  margin-top: 14px;
}
.content h3 + * {
  margin-top: 14px;
}
.content img + * {
  margin-top: 14px;
}
.content picture + * {
  margin-top: 14px;
}
.content blockquote + * {
  margin-top: 14px;
}
section > a {
  display: block;
}
section > a + * {
  margin-top: 14px;
}
.content section:not(:hover):not(.focused) > .kx.foreground {
  border-color: transparent;
}

section.clone {
  pointer-events: none;
}

.content picture {
  cursor: pointer;
}
.content img {
  width: 100%;
  display: inline-block;
  height: auto;
  cursor: pointer;
}

.content .below-the-fold {
  z-index: 1;
}



.content {
  position: relative;
}

.content * {
  box-sizing: border-box;
  font-size: 1em;
}
.content section p,
.content section li,
.content section h1,
.content section h2,
.content section h3,
.content section svg {
  transition: color .3s, background-color .3s; 
  -webkit-transition: color .3s , background-color .3s
}
.content section,
.content section .foreground {
  transition: background-color .3s, opacity .3s; 
  -webkit-transition: background-color .3s, opacity .3s;

}



.content {
  outline: none;
}


.content .unobserved {
  visibility: hidden;

}
/*
.content section.new {
  opacity: 0.1;
}*/

.content img[crop-x]:hover {
  width: attr(crop-x px) !important;
}

.splitting:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -0.5rem;
  height: 0.3rem;
  left: 0;
  right: 0;
  background: currentColor;;
  z-index: 222;

}
blockquote:before {
  content: '“';
  position: absolute;
  font-size: 3em;
  margin-left: -0.45em;
  width: 0.5em;
  line-height: 0.6em;
}
blockquote {
  margin: 0 0 0 1.5rem;
  padding: 0;
}
section:first-child:not([pattern*=two]) {
  margin-top: 0;
}

section[pattern="one-quote"] {
  font-size: 1.5em;
}

section[pattern="one-quote"] > *:not(.toolbar) {
  width: 500px;

}


.content section > .kx.foreground {
  content: '';
  pointer-events: none;
  z-index: -1;
  position: absolute;
  width: 100vw;
  border: 1px solid transparent;
  margin-top: -1px;
  margin-left: -1px;

  top: 2rem;
  height: calc(100% - 4rem);
  max-width: calc(800px + 2rem);
  left: calc(50% - 400px - 1rem);
  z-index: 1;
}

section.large:not(.has-long-text) {
  font-size: 1.5rem;
}

@media (min-width: 800px) {

  section.large.has-long-text:not(.has-picture) {
    display: block;
    columns: 2 calc(400px - 2rem);
    -moz-columns: 2 calc(400px - 2rem);
    -webkit-columns: 2 calc(400px - 2rem);
    column-gap: 4rem;
    -moz-column-gap: 4rem;
    -webkit-column-gap: 4rem;

    padding-left: calc(50vw - 400px);
    padding-right: calc(50vw - 400px);
  }
  section.large.has-long-text:not(.has-picture) > *:not(.kx) {
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    width: 100%;
    margin: 0;
    padding: 0 0 14px 0;
  }
  section.large.has-long-text:not(.has-picture) > .splitting:after {
    bottom: 0.5rem;
  }
  section.large.has-long-text:not(.has-picture) > h1,
  section.large.has-long-text:not(.has-picture) > h2,
  section.large.has-long-text:not(.has-picture) > h3 {
    column-span: all;
    -webkit-column-span: all;
    -moz-column-span: all;
  }
  section.large.large.has-long-text:not(.has-picture) > ul,
  section.large.large.has-long-text:not(.has-picture) > ol,
  section.large.large.has-long-text:not(.has-picture) > blockquote {
    padding-left: 2rem;
    padding-top: 0.5rem;
  }
}


@media(max-width: 800px) {
  .content section > .kx.foreground {
    left: 0;
    right: 0;
    max-width: 100%;
  }
}

@media (min-width: 800px) {
  .content section.small > .kx.foreground {
    width: 400px;
    left: calc(50% - 200px);
  }

  .content section[pattern*="two-"][index="0"] {
    padding-right: 2rem;
  }
  .content section[pattern*="two-"][index="0"] > .kx.toolbar {
    right: 200px;
    left: auto;
    margin-left: 0;
  }
  .content section[pattern*="two-"][index="0"] > .kx.foreground {
    left: calc(100% - 400px - 1rem);
  }
  .content section[pattern*="two-"][index="1"] {
    padding-left: 2rem;
  }
  .content section[pattern*="two-"][index="1"] > .kx.toolbar {
    left: 200px;
    margin-left: 0;
  }
  .content section[pattern*="two-"][index="1"] > .kx.foreground {
    left: 1rem;
  }






  section:not(.small):not(.large).has-portrait-image.has-text {
    min-height: calc(502px + 6rem);
    justify-content: center;
    -webkit-justify-content: center;
  }

  section:not(.small):not(.large).has-portrait-image.has-text picture{
    height: calc(502px + 6rem);
    justify-content: center;
    -webkit-justify-content: center;
  }

  section:not(.small):not(.large).has-portrait-image.has-text > a,
  section:not(.small):not(.large).has-portrait-image.has-text > picture{
    margin-right: 0;
    margin-top: 0;
    width: calc(400px - 1rem);
    max-height: 500px;
    position: absolute;
    top: 3rem;
    right: calc(50vw - 400px); 
  }
  section:not(.small):not(.large).has-portrait-image.has-text picture img{
    max-height: 500px;
    width: auto;
    display: block;
    margin-right: 0;
  }

  section:not(.small):not(.large).has-portrait-image.has-text > *:not(a):not(picture):not(.kx){
    margin-right: calc(50vw + 1rem); 
    width: calc(400px - 1rem);
  }
}

.content section.small > picture {
  height: calc(400px - 2rem);
}
.content section.small > a > picture {
  height: calc(400px - 2rem);
}
.content section.small picture:not(.processed) img{
  min-width: 100%;
  max-height: 1440px !important;
  max-width: 1440px !important;
  height: 100%;
  width: auto;
}
.content section.small picture.portrait:not(.processed) img{
  width: 100%;
  height: auto;
}
.content section.small picture.processed img{
  max-height: 1440px !important;
  max-width: 1440px !important;
}
.content section > * {
  position: relative;
  z-index: 3;
}

/*
body.dragging .content section:not(.above-the-fold):not(.below-the-fold) {
  z-index: 10;
}*/

body.dragging .content section.below-the-fold > .toolbar {
  z-index: 200;
}


section.growing .foreground {
  opacity: 0.65;
}
.content section.growing {
  z-index: 2;
}

.content {
  background: #f1f1f1;
}

.content > section > *:not(a):not(picture):not(.toolbar) {
  max-width: calc(100vw - 3rem);
  width: 800px;
}
.content > section > * {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 600px) {
  .content > section.small > *:not(.toolbar) {
    width: calc(400px - 2rem);
  }
}

.content > section:not(.large):not(.small) > picture,
.content > section:not(.large):not(.small) > a {
  width: 800px;
  max-width: 100%;
}

@media (max-width: 830px) {
  .content > section > *:not(.kx):not(a):not(picture) {
    margin-left: 2rem;
  }

  .content > section:not(.large):not(.small) > picture,
  .content > section:not(.large):not(.small) > a {
    width: 100%;
  }
}