ecrire 0.20.0

data/lib/ecrire/app/assets/stylesheets/admin/documentation.css.scss

@@ -0,0 +1,28 @@
+#Documentation {
+  section {
+    margin: 1em;
+
+    h3 {
+      font-weight: bold;
+    }
+
+    picture {
+      display: block;
+      background: rgba(245, 242, 240, 0.5);
+      div {
+        height: 230px;
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+      }
+      em {
+        display: block;
+        padding: 1em 0.6em;
+        background: rgba(197, 197, 197, 0.5);
+      }
+    }
+
+    & > pre, & > div, & > p, & > picture, & > ul, & > ol {
+      margin: 1em;
+    }
+  }
+}

data/lib/ecrire/app/assets/stylesheets/admin/editor/base.css.scss

@@ -0,0 +1,41 @@
+body.posts nav#Menu {
+  margin-top: -4em;
+  @include transition(margin-top 0.2s);
+}
+
+body.posts > main {
+  @include flex-direction(column);
+}
+
+
+body.posts > main > header {
+  @include flex(0 auto);
+  padding: 1em 0;
+
+}
+
+body.posts > main > section {
+  @include flex(1);
+  @include display(flex);
+  padding-top: 1em;
+
+  & > div {
+    @include flex(0 180px);
+    margin: 0 auto;
+    padding: 1em;
+  }
+
+  & > article {
+    @include display(flex);
+    @include flex-direction(column);
+    width: 960px;
+  }
+
+  div.configuration.missing {
+    padding: 3em 0;
+    line-height: 1.3em;
+    a {
+      @include animation(flash 1s infinite alternate);
+    }
+  }
+}

data/lib/ecrire/app/assets/stylesheets/admin/editor/content.css.scss

@@ -0,0 +1,57 @@
+body.edit.posts > main > section {
+  div.content {
+    @include flex(1);
+    outline: none;
+    font-size: 1.2em;
+
+    & > *, & > ul > li, & > ol > li {
+      white-space: pre-wrap;
+      min-height: 1.6em;
+      line-height: 1.6em;
+      margin: 0.3em 0;
+    }
+
+    & > ul, & > ol {
+      margin-left: 2em;
+    }
+
+    & > picture {
+      @include display(flex);
+      @include flex-direction(column);
+      @include transition(background-color 0.3s);
+      height: 480px;
+      background-color: #EEE;
+
+      &:hover {
+        background-color: #CCC;
+      }
+
+      &.dropping {
+        background-color: #CCC;
+      }
+
+      & > em {
+        background-color: #EEE;
+        padding: 1em;
+      }
+
+      & > div {
+        @include display(flex);
+        @include align-items(center);
+        @include justify-content(center);
+        @include flex(1);
+        cursor: pointer;
+        width: 100%;
+        background-size: cover;
+
+        & > p {
+          text-align: center;
+        }
+
+        & > input[type=file] {
+          display: none;
+        }
+      }
+    }
+  }
+}

data/lib/ecrire/app/assets/stylesheets/admin/editor/header.css.scss

@@ -0,0 +1,62 @@
+body.edit.posts > main > header {
+  @include display(flex);
+  @include flex-direction(column);
+}
+
+body.edit.posts > main > header form.title {
+  @include display(flex);
+  @include flex(0 auto);
+  position: relative;
+  margin: auto 0;
+
+  &:after {
+    position: absolute;
+    width: 1em;
+    content: '↵';
+    right: 1em;
+    top: 1.1em;
+    color: #FAFAFA;
+    font-size: 1.4em;
+  }
+
+  input.title {
+    width: 100%;
+    min-height: 60px;
+    font-size: 2em;
+    cursor: pointer;
+    text-decoration: underline;
+    text-align: center;
+    background: none;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+    resize: none;
+    outline: none;
+    color: inherit;
+
+    &:focus {
+      cursor: text;
+      text-decoration: none;
+      background: rgb(239, 239, 239);
+      box-shadow: 0 0 2px #FFF;
+
+    }
+  }
+}
+
+body.posts > main [as='Navigation.Toggle'] {
+  @include flex(0 auto);
+  @include transition(transform 0.2s, color 0.2s);
+  width: 2em;
+  height: auto;
+  cursor: pointer;
+  fill: rgba(212, 228, 237, 1);
+  margin: 0 auto;
+  &:hover {
+    fill: #73CDFF;
+  }
+  &.active {
+    @include transform(rotate(180deg));
+    fill: #1A5371;
+  }
+}

data/lib/ecrire/app/assets/stylesheets/admin/editor/image.css.scss

@@ -0,0 +1,58 @@
+[as='Post.Header'] {
+  @include display(flex);
+  @include flex-direction(column);
+  @include align-items(center);
+  @include justify-content(center);
+
+  height: 320px;
+  margin-bottom: 4em;
+  cursor: pointer;
+  background-color: rgb(232, 232, 232);
+  background-size: cover;
+  position: relative;
+
+  &.dropping div.drop.zone {
+    border: 7px dashed #FAFAFA;
+  }
+  &.dropping div.wrapper {
+    background-blend-mode: darken;
+  }
+
+  &:hover {
+    background-color: rgb(200, 200, 200);
+  }
+
+  input {
+    visibility: hidden;
+    position: absolute;
+  }
+
+  div.drop.zone {
+    border-radius: 3px;
+    @include transition(border 0.3s);
+    border: 7px dashed transparent;
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    right: 8px;
+    bottom: 8px;
+  }
+
+  p {
+    text-align: center;
+  }
+
+  form.clear {
+    position: absolute;
+    right: 0;
+    bottom: -2em;
+
+    button {
+      color: rgb(145, 4, 4);
+      text-decoration: underline;
+      &:active {
+        color: #E80000;
+      }
+    }
+  }
+}

data/lib/ecrire/app/assets/stylesheets/admin/editor/publish.css.scss

@@ -0,0 +1,40 @@
+body.posts > main > section > div.publish {
+  @include display(flex);
+  @include flex-direction(column);
+
+  button {
+    @include display(flex);
+    @include align-items(center);
+    @include transition(color 0.2s, background-color 0.2s);
+    padding: 4px 8px;
+    border-radius: 2px;
+    border: none;
+    color: #FFF;
+    background: #688EB2;
+  }
+
+  form {
+    @include display(flex);
+    @include justify-content(center);
+    margin: 1em 0;
+
+    &.publish button:hover {
+      background: #68B2A7;
+    }
+
+    &.destroy button {
+      background: #A35858;
+      color: #FFF;
+      padding: 6px 6px;
+
+      input {
+        margin: 0 6px 2px 0;
+      }
+
+      &[disabled] {
+        background: #ddc0c0;
+        color: #B57272;
+      }
+    }
+  }
+}

data/lib/ecrire/app/assets/stylesheets/admin/editor/save.css.scss

@@ -0,0 +1,44 @@
+body.posts > main > section > div.save {
+  text-align: center;
+
+  a.help {
+     text-transform: uppercase;
+     font-size: 0.6em;
+  }
+
+  form {
+    margin: 1em 0;
+  }
+
+  button {
+    @include transition(color 0.2s, background-color 0.2s);
+    border-radius: 2px;
+    padding: 4px 8px;
+    margin: 0 0 2em 0;
+    border: 1px solid transparent;
+    color: #FFF;
+    background: #688EB2;
+
+    &[disabled] {
+      border: 1px solid #DDE8F2;
+      color: #DDE8F2;
+      background: transparent;
+      cursor: default;
+    }
+
+    &:hover:not([disabled]) {
+      background: #68B2A7;
+    }
+  }
+
+  div.update {
+    text-transform: uppercase;
+    font-size: 0.7em;
+    font-weight: bold;
+    color: #BABABA;
+    p {
+      color: $text-color;
+    }
+  }
+}
+

data/lib/ecrire/app/assets/stylesheets/admin/images.css.scss

@@ -0,0 +1,64 @@
+body.images > main {
+  @include flex-direction(column);
+
+  section.configure, section.complete {
+    @include display(flex);
+    margin-top: 10em;
+
+    h1 {
+      text-align: center;
+      @include align-self(center);
+    }
+  }
+
+  section.configure {
+
+    h1, form {
+      @include flex(1);
+    }
+
+    h1 {
+      &.error {
+        color: $warning;
+      }
+    }
+
+    form {
+      margin: 0 3em;
+      font-size: 1.0em;
+      @include display(flex);
+      @include flex-wrap(wrap);
+
+      input {
+        width: 100%;
+        margin: 1em 0;
+        font-size: inherit;
+      }
+      button {
+        font-size: inherit;
+        margin-left: auto;
+        @include transition(color 0.2s, background-color 0.2s);
+        border-radius: 2px;
+        padding: 4px 8px;
+        margin: 0 0 2em 0;
+        border: 1px solid transparent;
+        color: #FFF;
+        background: #688EB2;
+
+        &:hover:not([disabled]) {
+          background: #68B2A7;
+        }
+      }
+    }
+  }
+}
+
+body.images > main {
+  section.complete {
+    @include flex-direction(column);
+
+    p {
+      text-align: center;
+    }
+  }
+}

data/lib/ecrire/app/assets/stylesheets/admin/loading.css.scss

@@ -0,0 +1,48 @@
+.loading {
+  background: #BABABA;
+  &:before {
+    display: block;
+
+    width: 22px;
+    height: 22px;
+    margin: 4px;
+    
+    border-top: 2px solid #92B8D1;
+    border-right: 2px solid transparent;
+
+    content: "";
+
+    @include animation(spin 1s ease infinite);
+    border-radius: 100%;
+  }
+}
+
+@-webkit-keyframes spin {
+  to {
+    @include transform(rotate( 360deg ));
+  }
+}
+
+@-o-keyframes spin {
+  to {
+    @include transform(rotate( 360deg ));
+  }
+}
+
+@-ms-keyframes spin {
+  to {
+    @include transform(rotate( 360deg ));
+  }
+}
+
+@-moz-keyframes spin {
+  to {
+    @include transform(rotate( 360deg ));
+  }
+}
+
+@keyframes spin {
+  to {
+    @include transform(rotate( 360deg ));
+  }
+}

data/lib/ecrire/app/assets/stylesheets/admin/mixins/animations.css.scss

@@ -0,0 +1,30 @@
+@-webkit-keyframes flash {
+  to {
+    color: #E78932;
+  }
+}
+
+@-o-keyframes flash {
+  to {
+    color: #E78932;
+  }
+}
+
+@-ms-keyframes flash {
+  to {
+    color: #E78932;
+  }
+}
+
+@-moz-keyframes flash {
+  to {
+    color: #E78932;
+  }
+}
+
+@keyframes flash {
+  to {
+    color: #E78932;
+  }
+}
+

data/lib/ecrire/app/assets/stylesheets/admin/mixins/form.css.scss

@@ -0,0 +1,22 @@
+@mixin textfield {
+  border: 1px solid #BABABA;
+  background: #FFF;
+  padding: 0.7em;
+}
+
+@mixin button {
+  padding: 4px 8px;
+  border: 1px solid #176417;
+  background: #1C9E2B;
+  border-radius: 2px;
+  box-shadow: inset 0 1px #50C250;
+  color: #E7FAE7;
+  text-shadow: 0 1px #126812;
+  cursor: pointer;
+  outline: none;
+
+  &:active {
+    text-shadow: none;
+    box-shadow: inset 0 0 2px 0 #218021;
+  }
+}

data/lib/ecrire/app/assets/stylesheets/admin/navigation.css.scss

@@ -0,0 +1,96 @@
+nav#Menu.admin {
+  @include display(flex);
+  @include align-content(flex-start);
+  @include align-items(center);
+  @include justify-content(space-between);
+  @include flex-wrap(wrap);
+
+  height: 4em;
+  z-index: 50;
+  font-size: 14px;
+  font-family: Helvetica, sans-serif;
+  font-weight: lighter;
+
+  background-color: rgba(212, 228, 237, 1);
+  color: #1A5371;
+  border-bottom: 1px solid rgb(168, 178, 190);
+  box-shadow: 0 2px 3px 0 rgba(43, 69, 82, 0.25);
+
+  & > section {
+    @include display(flex);
+    height: 100%;
+  }
+
+  & > section > div {
+    @include display(flex);
+    @include flex(0 auto);
+    @include align-items(center);
+    height: 100%;
+    padding: 0 1em;
+    border-right: 1px solid rgba(43, 82, 71, 0.4);
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+    font-size: inherit;
+    font-weight: inherit;
+    font-family: inherit;
+  }
+
+  div.posts {
+    h4 {
+      margin: 0 1em;
+      a:hover {
+        text-decoration: underline;
+      }
+    }
+
+    a {
+      @include display(flex);
+      @include flex-wrap(flex);
+      @include flex-direction(column);
+      @include align-items(center);
+      padding: 8px;
+
+      &:hover span.count {
+        text-decoration: underline;
+      }
+
+      &.new.button {
+        margin: 0 1em;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      span {
+        @include flex(1);
+        margin: 4px 0;
+
+        &.type {
+          text-transform: uppercase;
+          font-weight: bold;
+          font-size: 0.7em;
+        }
+
+      }
+    }
+  }
+}
+
+nav#Menu.admin .logout {
+  border: none;
+  background: none;
+  margin: 0 8px;
+  padding: 0;
+  cursor: pointer;
+  outline: none;
+
+  svg.logout {
+    margin: 0;
+    width: 1em;
+    height: 1em;
+    fill: rgb(128, 41, 41);
+  }
+}

data/lib/ecrire/app/assets/stylesheets/admin/posts.css.scss

@@ -0,0 +1,46 @@
+@import 'mixins/form';
+
+form.post.new.title {
+  @include display(flex);
+  @include flex-direction(column);
+  @include flex(1);
+  @include justify-content(center);
+  @include align-content(center);
+
+  fieldset, p {
+    opacity: 1;
+    @include transition(opacity 1s);
+  }
+
+  .transparent {
+    opacity: 0;
+  }
+
+  fieldset {
+    @include textfield;
+    margin: -30vh 10vw 0;
+    position: relative;
+    input {
+      font-size: 1.1em;
+      border: none;
+      background: none;
+      margin: 0;
+      padding: 0 2em 0 0;
+      outline: none;
+      width: 100%;
+    }
+    &:after {
+      position: absolute;
+      width: 1em;
+      content: '↵';
+      right: 0.5em;
+      top: 0.5em;
+      color: #BABABA;
+      font-size: 1.4em;
+    }
+  }
+
+  p {
+    text-align: center;
+  }
+}

data/lib/ecrire/app/assets/stylesheets/admin/variables.css.scss

@@ -0,0 +1,7 @@
+$fonts: Helvetica, sans-serif;
+
+$text-color: #15191B;
+$shadow-color: #374C64;
+
+$warning: #F0BC6F;
+$dropping-color: #EDFFED;

data/lib/ecrire/app/assets/stylesheets/admin.css.scss

@@ -0,0 +1,5 @@
+@import 'bourbon';
+@import 'admin/mixins/**/*';
+@import 'admin/**/*';
+@import 'vendor/**/*';
+@import 'shared/**/*';

data/lib/ecrire/app/assets/stylesheets/application.css.scss

@@ -0,0 +1,12 @@
+@import 'bourbon';
+@import 'vendor/**/*';
+@import 'shared/**/*';
+@import 'admin/navigation';
+@import 'sessions';
+
+ol, ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+