dante-editor 0.0.4 → 0.0.5

data/app/assets/stylesheets/dante/_graf.scss

@@ -13,6 +13,12 @@
   margin: 0;
 }
 
+.graf--p,
+.graf--blockquote,
+.graf--pullquote {
+  margin-bottom: 30px;
+}
+
 .graf--h2 {
   font-family: $sans;
   font-size: 60px;
@@ -49,6 +55,17 @@
   margin-bottom: 2px;
 }
 
+.section--first .graf--h2.graf--first,
+.section--first .graf--h3.graf--first,
+.section--first .graf--h4.graf--first {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.graf--h2 + .graf--h2 {
+  margin-top: -8px;
+}
+
 .graf--h2 + .graf--h3,
 .graf--h2 + .graf--h4 {
   margin-top: -6px;
@@ -64,29 +81,68 @@
   margin-top: -2px;
 }
 
+.graf--h2 + .postList,
+.graf--h3 + .postList,
+.graf--h4 + .postList {
+  margin-top: 10px;
+}
+
+.graf--h2 + .graf--p.graf--empty,
+.graf--h3 + .graf--p.graf--empty,
+.graf--h4 + .graf--p.graf--empty {
+  margin-bottom: -7px;
+  margin-top: -7px;
+}
+
+.graf--h2 + .graf--p.graf--empty + .graf--h2,
+.graf--h3 + .graf--p.graf--empty + .graf--h2,
+.graf--h4 + .graf--p.graf--empty + .graf--h2 {
+  margin-top: -5px;
+}
+
 .graf--h2 + .graf--p.graf--empty + .graf--h3,
 .graf--h3 + .graf--p.graf--empty + .graf--h3,
+.graf--h4 + .graf--p.graf--empty + .graf--h3,
 .graf--h2 + .graf--p.graf--empty + .graf--h4,
 .graf--h3 + .graf--p.graf--empty + .graf--h4,
 .graf--h4 + .graf--p.graf--empty + .graf--h4 {
   margin-top: -8px;
 }
 
-.graf--h4 + .graf--figure,
-.graf--h3 + .graf--figure,
-.graf--h2 + .graf--figure {
-  margin-top: 15px;
+
+.graf--blockquote {
+  font-family: $font-family-serif;
+  border-left: 3px solid rgba(0, 0, 0, 0.8);
+  font-style: italic;
+  font-weight: 400;
+  letter-spacing: 0.01rem;
+  margin-left: -23px;
+  padding-bottom: 3px;
+  padding-left: 20px;
+}
+.graf--blockquote + .graf--blockquote {
+  margin-top: -30px;
+  padding-top: 30px;
 }
 
-.graf--p,
-.graf--blockquote,
 .graf--pullquote {
-  margin-bottom: 30px;
+  line-height: 1.4;
+  text-align: center;
+  font-size: 32px;
+  margin: 48px -160px;
+  border: none;
+  padding: 0;
+  font-family: $font-family-serif;
+  letter-spacing: 0.01rem;
+  font-weight: 400;
+  font-style: italic;
+  -webkit-transition: margin 100ms;
+  transition: margin 100ms;
 }
 
 .graf--pre {
   background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
-  font-family: Monaco,"Courier New","Courier",monospace;
+  font-family: $font-family-mono;
   font-size: 16px;
   margin-bottom: 20px;
   padding: 20px;
@@ -96,36 +152,52 @@
   margin-top: -20px;
 }
 
-.graf--blockquote {
-  border-left: 3px solid rgba(0, 0, 0, 0.8);
-  font-family: $serif;
-  font-style: italic;
-  font-weight: 400;
-  letter-spacing: 0.01rem;
-  margin-left: -23px;
-  padding-bottom: 3px;
-  padding-left: 20px;
+.graf--figure {
+  & {
+    box-sizing: border-box;
+    clear: both;
+    margin-bottom: 30px;
+    outline: medium none;
+    position: relative;
+  }
+  &.is-mediaFocused .graf-image,
+  &.is-mediaFocused iframe {
+    box-shadow: 0 0 0 3px #57ad68;
+  }
 }
-.graf--blockquote + .graf--blockquote {
-  margin-top: -30px;
-  padding-top: 30px;
+
+.graf--mixtapeEmbed {
+  a {
+    text-decoration: none;
+  }
 }
 
-.graf--figure {
-  box-sizing: border-box;
-  clear: both;
-  margin-bottom: 30px;
-  outline: medium none;
-  position: relative;
+.graf--h4 + .graf--figure,
+.graf--h3 + .graf--figure,
+.graf--h2 + .graf--figure {
+  margin-top: 15px;
 }
 
 .graf--first {
   margin-top: 0;
   padding-top: 0;
 }
-.graf--empty {
-  margin-bottom: -7px;
-  margin-top: -7px;
+
+p[data-align="center"],
+.graf--h2[data-align="center"],
+.graf--h3[data-align="center"],
+.graf--h4[data-align="center"],
+.graf--blockquote[data-align="center"] {
+  text-align: center;
+}
+
+.markup--anchor,
+.graf--sectionCaption {
+    cursor: text;
+}
+.markup--anchor {
+  text-decoration: underline;
+  color: inherit;
 }
 
 @media (max-width: 500px) {

data/app/assets/stylesheets/dante/_media.scss

@@ -0,0 +1,39 @@
+.aspectRatioPlaceholder {
+    margin: 0 auto;
+    position: relative;
+    width: 100%;
+}
+
+.graf-image:before,
+.iframeContainer:before {
+  .is-postEditMode & {
+    bottom: 0;
+    content: "";
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 500;
+  }
+}
+
+.graf-image,
+.graf-imageAnchor {
+  .aspectRatioPlaceholder.is-locked & {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}
+
+.graf-image,
+.graf-imageAnchor,
+.iframeContainer > iframe,
+.iframeContainer {
+  box-sizing: border-box;
+  display: block;
+  margin: auto;
+  max-width: 100%;
+}

data/app/assets/stylesheets/dante/_needsorder.scss

@@ -1,9 +1,10 @@
 
-.markup--anchor,
-.graf--sectionCaption {
+.editable .markup--anchor,
+.editable .graf--sectionCaption {
     cursor: text;
 }
 
+/*
 .markup--anchor {
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 50%);
     //background-position: 0 24px;
@@ -18,49 +19,49 @@
 h4 .markup--anchor {
     background-position: 0 34px;
 }
-
-
-
-.aspectRatioPlaceholder {
-    margin: 0 auto;
-    position: relative;
-    width: 100%;
-}
-
-.is-postEditMode .graf-image:before,
-.is-postEditMode .iframeContainer:before {
-    bottom: 0;
-    content: "";
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 500;
-}
-
-.graf--figure.is-mediaFocused .graf-image,
-.graf--figure.is-mediaFocused iframe {
-    box-shadow: 0 0 0 3px #57ad68;
-}
-
-.aspectRatioPlaceholder.is-locked .graf-image,
-.aspectRatioPlaceholder.is-locked .graf-imageAnchor {
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-}
-
-.graf-image,
-.graf-imageAnchor,
-.iframeContainer > iframe,
-.iframeContainer {
-    box-sizing: border-box;
-    display: block;
-    margin: auto;
-    max-width: 100%;
-}
+*/
+
+
+// .aspectRatioPlaceholder {
+//     margin: 0 auto;
+//     position: relative;
+//     width: 100%;
+// }
+
+// .is-postEditMode .graf-image:before,
+// .is-postEditMode .iframeContainer:before {
+//     bottom: 0;
+//     content: "";
+//     left: 0;
+//     position: absolute;
+//     right: 0;
+//     top: 0;
+//     z-index: 500;
+// }
+
+// .graf--figure.is-mediaFocused .graf-image,
+// .graf--figure.is-mediaFocused iframe {
+//     box-shadow: 0 0 0 3px #57ad68;
+// }
+
+// .aspectRatioPlaceholder.is-locked .graf-image,
+// .aspectRatioPlaceholder.is-locked .graf-imageAnchor {
+//     height: 100%;
+//     left: 0;
+//     position: absolute;
+//     top: 0;
+//     width: 100%;
+// }
+
+// .graf-image,
+// .graf-imageAnchor,
+// .iframeContainer > iframe,
+// .iframeContainer {
+//     box-sizing: border-box;
+//     display: block;
+//     margin: auto;
+//     max-width: 100%;
+// }
 
 .is-postEditMode iframe {
     border: 3px solid rgba(255, 255, 255, 0);
@@ -134,44 +135,45 @@ h4 .markup--anchor {
 
 /*CAPTION*/
 
-.imageCaption:before {
-    border-top: 1px solid rgba(0, 0, 0, 0.15);
-    content: "";
-    display: block;
-    margin-bottom: 10px;
-    margin-left: 75%;
-    width: 25%;
-}
-
-.imageCaption {
-    color: rgba(0, 0, 0, 0.6);
-    font-family: $serif;
-    font-size: 14px;
-    font-style: italic;
-    font-weight: 400;
-    left: -172px;
-    letter-spacing: 0.01rem;
-    line-height: 1.4;
-    margin-top: 0;
-    outline: 0 none;
-    position: absolute;
-    text-align: right;
-    top: 0;
-    width: 150px;
-    z-index: 300;
-}
 
-.graf--figure.is-mediaFocused .imageCaption,
-.graf--figure.is-defaultValue.is-selected .imageCaption,
-section.is-mediaFocused .graf--sectionCaption,
-.graf--sectionCaption.is-defaultValue.is-selected {
-    display: block;
-}
-
-figure.is-defaultValue .imageCaption,
-.graf--sectionCaption.is-defaultValue {
-    display: none;
-}
+// .imageCaption:before {
+//     border-top: 1px solid rgba(0, 0, 0, 0.15);
+//     content: "";
+//     display: block;
+//     margin-bottom: 10px;
+//     margin-left: 75%;
+//     width: 25%;
+// }
+
+// .imageCaption {
+//     color: rgba(0, 0, 0, 0.6);
+//     font-family: $serif;
+//     font-size: 14px;
+//     font-style: italic;
+//     font-weight: 400;
+//     left: -172px;
+//     letter-spacing: 0.01rem;
+//     line-height: 1.4;
+//     margin-top: 0;
+//     outline: 0 none;
+//     position: absolute;
+//     text-align: right;
+//     top: 0;
+//     width: 150px;
+//     z-index: 300;
+// }
+
+// .graf--figure.is-mediaFocused .imageCaption,
+// .graf--figure.is-defaultValue.is-selected .imageCaption,
+// section.is-mediaFocused .graf--sectionCaption,
+// .graf--sectionCaption.is-defaultValue.is-selected {
+//     display: block;
+// }
+
+// figure.is-defaultValue .imageCaption,
+// .graf--sectionCaption.is-defaultValue {
+//     display: none;
+// }
 
 .editor a {
   a {
@@ -188,15 +190,15 @@ section:first-child > .section-divider,
 section.is-backgrounded + section > .section-divider {
     display: none;
 }
-.postArticle .layoutSingleColumn,
-.postFooter--loggedOut .layoutSingleColumn {
-    width: 700px;
-}
+// .postArticle .layoutSingleColumn,
+// .postFooter--loggedOut .layoutSingleColumn {
+//     width: 700px;
+// }
 
-.layoutSingleColumn {
-    margin: 0 auto;
-    width: 640px;
-}
+// .layoutSingleColumn {
+//     margin: 0 auto;
+//     width: 640px;
+// }
 
 .defaultValue--prompt {
     font-family: $sans;

data/app/assets/stylesheets/dante/_popover.scss

@@ -0,0 +1,134 @@
+.popover {
+  overflow: hidden;
+  position: absolute;
+  z-index: 900;
+  visibility: visible;
+  font-size: 12px;
+  text-align: center;
+  opacity: 0;
+  pointer-events: auto;
+  padding: 15px;
+
+  font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
+  letter-spacing: -0.02em;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.4;
+  &.is-active {
+    opacity: 1;
+  }
+}
+
+.popover-inner {
+  position: relative;
+  max-width: 280px;
+  border-radius: 4px;
+  padding: 8px;
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+.popover--tooltip {
+  pointer-events: none;
+}
+
+.popover--linkTooltip {
+  pointer-events: auto;
+  z-index: 300;
+  word-break: break-word;
+  word-wrap: break-word;
+}
+
+
+/*
+.popover.is-withTransition {
+  -webkit-transition:opacity 100ms ease;
+  transition:opacity 100ms ease;
+}
+
+.is-resizing .popover {
+  opacity:0;
+  -webkit-transition:opacity 0 ease;
+  transition:opacity 0 ease;
+}
+*/
+
+.popover-inner {
+  background-color: rgba(0,0,0,0.8);
+  color: #fff;
+}
+.popover-arrow {
+  position: absolute;
+}
+.popover-arrow:after {
+  background-color: rgba(0,0,0,0.8);
+}
+
+.popover--top .popover-arrow,
+.popover--bottom .popover-arrow {
+  left: 50%;
+  margin-left: -7px;
+}
+
+.popover--left .popover-arrow,
+.popover--right .popover-arrow {
+  top: 50%;
+  margin-top: -7px;
+}
+
+.popover--top .popover-arrow {
+  bottom: 1px;
+  clip: rect(0 18px 18px 4px);
+}
+
+.popover--right .popover-arrow {
+  left: 1px;
+  clip: rect(-4px 14px 18px 0);
+}
+
+.popover--bottom .popover-arrow {
+  top: 1px;
+  clip: rect(0 18px 14px -1px);
+}
+
+.popover--left .popover-arrow {
+  right: 1px;
+  clip: rect(-4px 14px 18px 0);
+}
+
+.popover-arrow:after {
+  content: '';
+  display: block;
+  width: 14px;
+  height: 14px;
+}
+
+.popover--top .popover-arrow:after {
+  -webkit-transform: rotate(45deg) translate(-5px,-5px);
+  -ms-transform: rotate(45deg) translate(-5px,-5px);
+  transform: rotate(45deg) translate(-5px,-5px);
+  box-shadow: 1px 1px 1px -1px rgba(0,0,0,0.8);
+}
+
+.popover--right .popover-arrow:after {
+  -webkit-transform: rotate(45deg) translate(6px,-6px);
+  -ms-transform: rotate(45deg) translate(6px,-6px);
+  transform: rotate(45deg) translate(6px,-6px);
+  box-shadow: -1px 1px 1px -1px rgba(0,0,0,0.8);
+}
+
+.popover--bottom .popover-arrow:after {
+  -webkit-transform: rotate(45deg) translate(6px,6px);
+  -ms-transform: rotate(45deg) translate(6px,6px);
+  transform: rotate(45deg) translate(6px,6px);
+  box-shadow: -1px -1px 1px -1px rgba(0,0,0,0.44);
+}
+
+.popover--left .popover-arrow:after {
+  -webkit-transform: rotate(45deg) translate(-6px,6px);
+  -ms-transform: rotate(45deg) translate(-6px,6px);
+  transform: rotate(45deg) translate(-6px,6px);
+  box-shadow: 1px -1px 1px -1px rgba(0,0,0,0.8);
+}

data/app/assets/stylesheets/dante/_post.scss

@@ -1,12 +1,45 @@
+.postArticle {
+  position: relative;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  .layoutSingleColumn {
+    & {
+      width: 700px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    @media (max-width: 800px) {
+      width: 640px;
+    }
+    @media (max-width: 680px) {
+      width: auto;
+      margin-left: 20px;
+      margin-right: 20px;
+    }
+  }
+}
+
+.postWrapper,
+.postWrapper-inner {
+  position: relative;
+  @include clearfix;
+}
+
+.postWrapper {
+  overflow: hidden;
+
+  .is-postEditMode &            { display: none; }
+  .is-postEditModeInitialized & { display: block; }
+}
+
 .postContent {
   font-family: $font-family-serif;
   letter-spacing: 0.01rem;
   font-weight: 400;
   font-style: normal;
   //font-size: 22px;
+  //line-height: 1.5;
   font-size: 19px;
-  //line-height: 1.4;
-  letter-spacing: 0.01rem;
   line-height: 1.69;
 }
 
@@ -23,6 +56,14 @@
   margin-bottom: 30px;
 }
 
+.section--last {
+  padding-bottom: 5px;
+}
+
 .section-content {
   @include clearfix;
 }
+
+.section-inner {
+  position: relative;
+}

data/app/assets/stylesheets/dante/_scaffold.scss

@@ -8,6 +8,7 @@
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    -moz-font-feature-settings: liga on;
   }
 
   *,

data/app/assets/stylesheets/dante/_variables.scss

@@ -1,12 +1,14 @@
 $font-family-sans:        'jaf-bernino-sans', 'Open Sans', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
 $font-family-serif:       'freight-text-pro', 'Merriweather', Georgia,Cambria, "Times New Roman", Times,serif;
-$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+$font-family-mono:        Menlo, Monaco, Consolas, "Courier New", "Courier", monospace;
 
 $font-family-base:        $font-family-sans;
 $font-size-base:          14px;
 $line-height-base:        1.428571429; // 20/14
 //$line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
 
+$active-color:       #57AD68;
+
 $debugger:           false;
 
 $menu-height:        45px;

data/app/assets/stylesheets/dante.css.scss

@@ -9,7 +9,10 @@
 @import "dante/icons";
 @import "dante/menu";
 @import "dante/tooltip";
+@import "dante/popover";
 @import "dante/graf";
+@import "dante/media";
+@import "dante/caption";
 @import "dante/needsorder";
 
 @import "dante/debug";

data/lib/dante-editor/version.rb

@@ -1,5 +1,5 @@
 require "dante-editor/version"
 
 module DanteEditor
-  VERSION = "0.0.4"
+  VERSION = "0.0.5"
 end

data/source/assets/stylesheets/_scaffold.scss

@@ -5,8 +5,4 @@
   box-sizing: border-box;
 }
 
-html,
-body {
-  font-size: 100%;
-  height: 100%; // Must be 100% for off canvas to work
-}
+

data/source/assets/stylesheets/_tooltips.scss

@@ -69,12 +69,12 @@ $tooltip-arrow-height: $tooltip-arrow-size * 2;
 [data-tooltip]:after {
   white-space: nowrap;
   z-index: 1000;
-  padding: 8px;
+  padding: 7px 8px;
   background-color: #000;
   background-color: hsla(0, 0%, 20%, 0.9);
   color: #fff;
   content: attr(data-tooltip);
-  font-size: 14px;
+  font-size: 12px;
   line-height: 1.2;
   border-radius: 3px;
 }