dante-editor 0.0.1

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

@@ -0,0 +1,3 @@
+@import "dante/fonts";
+@import "dante/base";
+@import "dante/editor";

data/source/assets/stylesheets/dante/base.css.scss

@@ -0,0 +1,57 @@
+@charset "utf-8";
+
+$serif: 'freight-text-pro', 'Merriweather',Georgia,Cambria,"Times New Roman",Times,serif;
+$sans: 'jaf-bernino-sans', 'Open Sans' ,"Lucida Grande","Lucida Sans Unicode","Lucida Sans", Geneva, Verdana, sans-serif;
+
+
+body {
+  //background: #d4d4d4 image-url("background.png");
+  font-family: $serif;
+  color: rgba(0,0,0,0.8);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+
+#welcome{
+
+}
+
+header{
+  width: 100%;
+  border-top: 3px solid #1abf89;
+  margin-bottom: 40px;
+
+  img{
+    display: block;
+    float: left;
+    margin: -34px 7px 11px 25px;
+    position: absolute;
+    left: 0;
+    top: 28px;
+  }
+  h1 {
+    font-family: $sans;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 300;
+    letter-spacing: -0.04em;
+    line-height: 1;
+    margin-bottom: 8px;
+    margin-right: 91px;
+    margin-top: 25px;
+    padding-top: 0;
+    text-align: right;
+  }
+}
+
+
+#editor{
+  margin: 0 auto;
+  //width: 70%;
+  width: 700px;
+}
+
+
+

data/source/assets/stylesheets/dante/editor.css.scss

@@ -0,0 +1,662 @@
+$serif: 'freight-text-pro', 'Merriweather',Georgia,Cambria,"Times New Roman",Times,serif;
+$sans: 'jaf-bernino-sans', 'Open Sans' ,"Lucida Grande","Lucida Sans Unicode","Lucida Sans", Geneva, Verdana, sans-serif;
+
+
+.postField--body:before, .postField--body:after {
+    content: " ";
+    display: table;
+}
+.postField--body:after {
+    clear: both;
+}
+
+.postField, .postField:focus {
+    outline: 0 none;
+    word-wrap: break-word;
+}
+.postField--body {
+    margin-bottom: 30px;
+}
+.postContent, .notesSource {
+    font-family: $serif;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: 0.01rem;
+    //line-height: 1.5; //used for medium fonts
+    //font-size: 22px; // used for medium fonts
+    font-size: 19px;
+    line-height: 1.79;
+}
+
+/*MENU*/
+.dante-menu {
+    background: linear-gradient(to bottom, #222, #333) repeat scroll 0 0 #333;
+    border: 1px solid #333;
+    border-radius: 3px;
+    box-shadow: 1px 2px 3px -2px #222;
+    display: none;
+    height: 36px;
+    opacity: 0.9;
+    position: absolute;
+    white-space: nowrap;
+    z-index: 1000;
+    display:block;
+
+    -webkit-transition: opacity 0.2s ease-in-out;
+    -moz-transition: opacity 0.2s ease-in-out;
+    transition: opacity 0.2s ease-in-out;
+
+    &:after {
+
+        border-left: 6px solid transparent;
+        border-right: 9px solid transparent;
+        border-top: 7px solid #333;
+        border-color: #333 rgba(51, 51, 51, 0) rgba(51, 51, 51, 0);
+        content: " ";
+        height: 0;
+        left: 50%;
+        margin-left: -6px;
+        position: absolute;
+        top: 99%;
+        width: 0;
+        pointer-events: none;
+
+    }
+}
+
+.dante-menu, .dante-input {
+    color: #331;
+    font: 400 1.16em/1.45 Palatino,Optima,Georgia,serif;
+}
+
+.dante-input{
+    background: none repeat scroll 0 0 #333;
+    border: medium none;
+    color: #fff;
+    display: none;
+    font-family: arial,sans-serif;
+    height: 36px;
+    left: 0;
+    line-height: 20px;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 100%;
+}
+
+.dante-menu, .dante-input {
+    font-size: 14px;
+    line-height: 1;
+}
+
+.dante-menu [class^="icon-"]:before, .dante-menu [class*=" icon-"]:before {
+    display: inline-block;
+    font-family: "dante";
+    font-style: normal;
+    font-variant: normal;
+    font-weight: normal;
+    line-height: 1em;
+    margin-left: 0.2em;
+    margin-right: 0.2em;
+    text-align: center;
+    text-decoration: inherit;
+    text-transform: none;
+    width: 1em;
+}
+
+.dante-icon:first-of-type {
+    border-bottom-left-radius: 3px;
+    border-top-left-radius: 3px;
+}
+
+.dante-icon{
+    font:normal 900 16px/40px Georgia serif;
+    min-width:20px;display:inline-block;
+    padding:0 10px;
+    height:36px;
+    overflow:hidden;color:#fff;
+    text-align:center;
+    cursor:pointer;
+    -moz-user-select:none;
+    -webkit-user-select:none;
+    -ms-user-select:none;user-select:none;
+}
+.dante-icon:first-of-type{
+    border-top-left-radius:3px;
+    border-bottom-left-radius:3px;
+}
+.dante-icon:last-of-type{
+    border-top-right-radius:3px;
+    border-bottom-right-radius:3px;
+}
+.dante-icon:hover{
+    background:#000;
+}
+.dante-icon.active{
+    color:#1abf89;background:#000;
+    box-shadow:inset 2px 2px 4px #000;
+}
+.pen-input{position:absolute;
+    width:100%;left:0;
+    top:0;height:36px;
+    line-height:20px;
+    background:#333;
+    color:#fff;
+    border:none;
+    text-align:center;
+    display:none;
+    font-family:arial, sans-serif;
+}
+.pen-input:focus{
+    outline:none;
+}
+
+.dante-menu [class^="icon-"], .dante-menu [class*=" icon-"] {
+    background: none repeat scroll 0 0 transparent;
+}
+
+.dante-icon {
+    -moz-user-select: none;
+    color: #fff;
+    cursor: pointer;
+    display: inline-block;
+    font: 900 16px/40px Georgia serif;
+    height: 36px;
+    min-width: 20px;
+    overflow: hidden;
+    padding: 0 10px;
+    text-align: center;
+
+    &.icon-h2:before {
+        content: "H2";
+    }
+    &.icon-h3:before {
+        content: "H3";
+    }
+    &.icon-p:before {
+        content: "P";
+    }
+    &.icon-code:before {
+        content: "";
+    }
+    &.icon-insertorderedlist:before {
+        content: "";
+    }
+    &.icon-insertunorderedlist:before {
+        content: "";
+    }
+    &.icon-inserthorizontalrule:before {
+        content: "";
+    }
+    &.icon-indent:before {
+        content: "";
+    }
+    &.icon-outdent:before {
+        content: "";
+    }
+    &.icon-bold:before {
+        content: "";
+    }
+    &.icon-italic:before {
+        content: "";
+    }
+    &.icon-underline:before {
+        content: "";
+    }
+    &.icon-createlink:before {
+        content: "";
+    }
+
+    &.icon-blockquote:before {
+        content: "";
+    }
+}
+
+/*TOOLTIP*/
+.inlineTooltip2.is-active {
+    opacity: 1;
+    pointer-events: auto;
+    width:auto !important;
+}
+
+.notesSource .inlineTooltip2 {
+    height: 40px;
+    margin-left: -58px;
+    margin-top: 5px;
+    //opacity: 0;
+    overflow: hidden;
+    padding: 0;
+    //pointer-events: none;
+    position: absolute;
+    width: 40px;
+    z-index: 900;
+}
+
+.button--small.button--circle {
+    height: 32px;
+    padding: 0;
+    width: 32px;
+}
+.button--inlineTooltipControl {
+    transform: rotate(0deg);
+    transition: transform 0.1s ease 0s;
+}
+.button--small, .button--small.button--link, .button--small.button--chromeless {
+    font-size: 12px;
+}
+
+.button--small {
+    height: 32px;
+    line-height: 31px;
+    padding: 0 14px;
+}
+
+.button--neutral {
+    border-color: rgba(0, 0, 0, 0.44);
+    color: rgba(0, 0, 0, 0.44);
+}
+
+.button--circle {
+    padding: 0;
+    text-align: center;
+    width: 38px;
+}
+
+.button {
+    -moz-osx-font-smoothing: grayscale;
+    -moz-user-select: none;
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 999em;
+    box-sizing: border-box;
+    color: rgba(0, 0, 0, 0.44);
+    cursor: pointer;
+    display: inline-block;
+    font-family: $sans;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    height: 38px;
+    letter-spacing: -0.02em;
+    line-height: 31px;
+    outline: 0 none;
+    padding: 0 16px;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+    text-rendering: optimizelegibility;
+    transition: background-color 0.1s ease 0s, border-color 0.1s ease 0s, color 0.1s ease 0s;
+    vertical-align: bottom;
+    white-space: nowrap;
+}
+
+button, html input[type="button"], input[type="reset"], input[type="submit"] {
+    cursor: pointer;
+}
+
+.button-scalableGroup .icon.icon--addMediaPlus:before, .button-scalableGroup .icon.icon--addMediaImage:before, .button-scalableGroup .icon.icon--addMediaVideo:before, .button-scalableGroup .icon.icon--addMediaEmbed:before, .button-scalableGroup .icon.icon--addMediaPart:before {
+    font-size: 39px;
+    top: 13px;
+}
+
+.button--neutral > .icon:before {
+    color: rgba(0, 0, 0, 0.44);
+}
+
+.button .icon.is-pulledRight:before, .button--circle .icon:before, .button--expandable .icon:before {
+    margin-right: 0;
+}
+
+.button .icon:before {
+    color: rgba(0, 0, 0, 0.3);
+    font-size: 20px;
+    line-height: 0;
+    margin-right: 8px;
+    position: relative;
+    top: 1px;
+}
+
+.icon--addMediaPlus:before {
+    content: "";
+}
+.button--small .icon {
+    font-size: 18px;
+}
+.button .icon {
+    line-height: 100%;
+}
+
+.icon {
+    -moz-osx-font-smoothing: grayscale;
+    font-family: "medium-icons";
+    font-style: normal;
+    font-weight: normal;
+    text-decoration: none;
+    text-rendering: optimizelegibility;
+    text-transform: none;
+}
+
+.inlineTooltip2.is-scaled > .button--inlineTooltipControl {
+  -webkit-transition: -webkit-transform .25s;
+  transition: transform .25s;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.inlineTooltip2-menu {
+    display: inline-block;
+    padding-left: 22px;
+}
+
+.inlineTooltip2-menu .button {
+margin-right: 9px;
+}
+
+.button-scalableGroup.is-scaled .button--scale {
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  -webkit-transition-duration: 200ms;
+  transition-duration: 200ms;
+}
+
+.button--scale {
+  -webkit-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition-property: -webkit-transform;
+  transition-property: transform;
+  -webkit-transition-duration: 100ms;
+  transition-duration: 100ms;
+}
+
+.u-transitionSeries:nth-child(2) {
+-webkit-transition-delay: 30ms;
+transition-delay: 30ms;
+}
+
+.graf--p, .graf--blockquote, .graf--pullquote {
+    margin-bottom: 30px;
+}
+
+
+//DEBUG AWARE CSS
+.debug {
+    .section-inner {
+      .is-selected{
+        outline-color: rgb(85, 182, 179);
+        outline-width: thin;
+        outline-style: dotted;
+      }
+    }
+}
+
+
+// elements styles
+.graf--h2 {
+    font-family: $sans;
+    font-size: 60px;
+    font-style: normal;
+    font-weight: 700;
+    letter-spacing: -0.04em;
+    line-height: 1;
+    margin-bottom: 8px;
+    margin-left: -3px;
+    margin-top: 40px;
+    padding-top: 0;
+}
+
+.graf--h4 {
+    color: rgba(0, 0, 0, 0.44);
+    font-family: $sans;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 300;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+    margin-bottom: 2px;
+    margin-left: -1.5px;
+    margin-top: 40px;
+}
+
+.graf--pre + .graf--pre {
+    margin-top: -20px;
+}
+
+.graf--pre {
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
+    font-family: Monaco,"Courier New","Courier",monospace;
+    font-size: 16px;
+    margin-bottom: 20px;
+    padding: 20px;
+    white-space: pre-wrap;
+}
+
+.graf--blockquote + .graf--blockquote {
+    margin-top: -30px;
+    padding-top: 30px;
+}
+
+.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--p, .graf--blockquote, .graf--pullquote {
+    margin-bottom: 30px;
+}
+
+.markup--anchor, .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;
+    background-repeat: repeat-x;
+    background-size: 2px 2px;
+    text-decoration: none;
+    color: rgba(0, 0, 0, 1);
+}
+
+.graf--pre {
+    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
+    font-family: Monaco,"Courier New","Courier",monospace;
+    font-size: 16px;
+    margin-bottom: 20px;
+    padding: 20px;
+    white-space: pre-wrap;
+}
+
+.graf--figure {
+    box-sizing: border-box;
+    clear: both;
+    margin-bottom: 30px;
+    outline: medium none;
+    position: relative;
+}
+
+.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);
+}
+
+.graf--mixtapeEmbed {
+    border-color: rgba(0, 0, 0, 0.15);
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    color: rgba(0, 0, 0, 0.6);
+    font-family: $sans;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 300;
+    letter-spacing: -0.02em;
+    margin-bottom: 40px;
+    margin-top: 40px;
+    max-height: 310px;
+    max-width: 700px;
+    overflow: hidden;
+    padding: 30px;
+    position: relative;
+}
+
+.mixtapeImage {
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    float: right;
+    height: 310px;
+    margin: -30px -30px 0 25px;
+    width: 310px;
+}
+
+.mixtapeImage--empty {
+    height: 0;
+    width: 0;
+}
+
+.graf--mixtapeEmbed {
+    color: rgba(0, 0, 0, 0.6);
+    font-family: $sans;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 300;
+    letter-spacing: -0.02em;
+}
+
+.markup--mixtapeEmbed-strong {
+    color: #000;
+    display: block;
+    font-family: $sans;
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 300;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+    margin-bottom: 0px;
+}
+
+.markup--mixtapeEmbed-em {
+    display: block;
+    font-size: 16px;
+    font-style: normal;
+    margin-bottom: 10px;
+    max-height: 120px;
+    overflow: hidden;
+}
+
+/*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;
+}
+
+.section-content:before, .section-content:after{
+    content: " ";
+    display: table;
+}
+
+.editor a {
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+.defaultValue {
+  color: rgba(0,0,0,0.3);
+}
+
+section:first-child > .section-divider, section.is-backgrounded + section > .section-divider {
+    display: none;
+}
+.postArticle .layoutSingleColumn, .postFooter--loggedOut .layoutSingleColumn {
+    width: 700px;
+}
+
+.layoutSingleColumn {
+    margin: 0 auto;
+    width: 640px;
+}
+
+.defaultValue--prompt {
+    font-family: $sans;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: -0.02em;
+}