futuro 0.4.6 → 0.4.7

data/_sass/_area.scss

@@ -1,54 +1,16 @@
 
-%area {
+.area {
 
-  &-page {
-    background-color: white;
+  &.page-artwork {
     position: relative;
-    overflow: hidden;
-    display: grid;
-
-    &:not(.setup-docs) {
-      grid-template-columns: repeat(2,1fr);
-      height: 560px;
-    }
 
     &.setup-docs {
-      padding: 20px;
-    }
-
-    &.tag {
-
-      &-tree {
-        grid-template-rows: 60px 500px;
-        grid-template-columns: auto;
-      }
-
-      &-new {
-        grid-template-columns: 860px 140px;
-      }
-
-      &-custom {
-        grid-template-columns: 860px 140px;
-      }
+      grid-gap: 10px;
+      display: grid;
     }
   }
-}
-
-.area {
 
-  &._page {
-
-    &-artwork {
-      position: relative;
-
-      &.setup-docs {
-        grid-gap: 10px;
-        display: grid;
-      }
-    }
-  }
-
-  &._hero.--demo {
+  &.hero.demo {
     @extend %grid_default;
     justify-content: center;
     padding-bottom: 40px;
@@ -56,25 +18,13 @@
     display: grid;
   }
 
-  &._book {
-    height: 100%;
-  }
-
-  &._topbar {
-    @include zeros;
-    border-bottom: 1px solid darken($smoke,10%);
-    grid-template-columns: 1fr auto 1fr;
-    background-color: white;
-    grid-auto-flow: column;
-    padding-right: 14px;
-    padding-left: 14px;
-    display: grid;
-    bottom: auto;
-    height: 60px;
-    z-index: 4;
+  &.book {
+    @include ib;
+    padding-right: 10px;
+    padding-left: 10px;
   }
 
-  &._scroller {
+  &.scroller {
     @include zeros;
     grid-template-columns: 1fr 26px 1fr;
     place-items: center;
@@ -86,25 +36,22 @@
     left: auto;
   }
 
-  &.type {
-
-    &-page {
-      @extend %area-page;
-    }
+  &.type-page {
+    @extend %area-page;
+  }
 
-    &-chapter {
-      @extend %area-page;
-      background-color: black;
-      color: white;
+  &.type-chapter {
+    @extend %area-page;
+    background-color: black;
+    color: white;
 
-      ul {
-        list-style: none;
-        grid-gap: 10px;
-        display: grid;
+    ul {
+      list-style: none;
+      grid-gap: 10px;
+      display: grid;
 
-        li {
-          @extend h5;
-        }
+      li {
+        @extend h5;
       }
     }
   }

data/_sass/_bar.scss

@@ -1,13 +1,13 @@
 
 .bar {
 
-  &._load {
+  &.load {
     background-color: red;
     height: 20px;
     width: 7%;
   }
 
-  &._mobile {
+  &.mobile {
     background-color: $gun;
     justify-self: center;
     display: grid;

data/_sass/_base.lite.scss

@@ -0,0 +1,4 @@
+
+body {
+  font-family: 'Helvetica Neue', sans-serif;
+}

data/_sass/_base.scss

@@ -8,20 +8,21 @@ html {
   font-size: 62.5%;
   height: 100%;
 
-  &.no- {
-
-    &js, &svg, &inlinesvg, &svgasimg, &fontface, &bgsizecover, &cssgrid, &boxsizing {
-
-      .site, .overlay {
-        &.--open {
-          display: none;
-        }
-      }
-
-      body {
-        background: url('/assets/img/fallback.jpg');
-      }
-
+  &.no-js,
+  &.no-rgba,
+  &.no-backgroundsize,
+  &.no-opacity,
+  &.no-svg,
+  &.no-inlinesvg,
+  &.no-svgasimg,
+  &.no-fontface,
+  &.no-bgsizecover,
+  &.no-cssgrid,
+  &.no-boxsizing {
+    background: url('fallback.jpg');
+
+    body {
+      display: none;
     }
   }
 }
@@ -57,7 +58,7 @@ ul, ol {
   padding-left: 20px;
   margin: 0;
 
-  &.--numbers {
+  &.numbers {
     list-style: decimal;
     padding-left: 30px;
   }

data/_sass/_block.scss

@@ -1,164 +1,32 @@
 
-%util {
-  &-grid {
-    justify-content: flex-start;
-    grid-auto-flow: column;
-    grid-column-gap: 10px;
-    align-items: center;
-    display: grid;
-  }
-}
-
-@mixin ThemeResults($col) {
-  color: $col;
-
-  .block._results-dot {
-    background-color: $col;
-  }
-}
-
 .block {
 
-  &._expand {
-
-    &-title {
-      grid-template-columns: auto 100px;
-      border-bottom: 1px solid $gun;
-      display: grid;
-    }
-
-    &-block {
-      @extend h6;
-      border-right: 1px solid $gun;
-      border-left: 1px solid $gun;
-      border-top: 1px solid $gun;
-      background-color: $smoke;
-      letter-spacing: normal;
-      padding: 9px 9px 6px;
-      text-align: center;
-      user-select: none;
-      cursor: pointer;
-    }
-  }
-
-  &._browse {
-    grid-template-columns: 280px 280px;
-    min-height: 264px;
+  &.expand-title {
+    grid-template-columns: auto 100px;
+    border-bottom: 1px solid $gun;
     display: grid;
-
-    &.setup-library {
-      grid-template-columns: 160px 200px 200px;
-    }
-
-    &:not(.setup-library) {
-      .col._browse.--book {
-        display: none;
-      }
-    }
-
-    a {
-      text-decoration: none;
-    }
-
-    &-label {
-      padding: 8px 10px 6px 10px;
-
-      &.--head {
-        border-bottom: 2px solid $gun;
-      }
-    }
-
-    &-lnk {
-      a {
-        padding: 8px 10px 6px 10px;
-        display: block;
-      }
-    }
   }
 
-  &._page {
-
-    &-info {
-      @include zeros(absolute);
-      place-items: center;
-      display: grid;
-      height: 560px;
-      bottom: auto;
-      width: 140px;
-      left: auto;
-    }
+  &.expand-block {
+    @extend h6;
+    border-right: 1px solid $gun;
+    border-left: 1px solid $gun;
+    border-top: 1px solid $gun;
+    background-color: $smoke;
+    letter-spacing: normal;
+    padding: 9px 9px 6px;
+    text-align: center;
+    user-select: none;
+    cursor: pointer;
   }
 
-  &._util {
-    grid-row-gap: 6px;
+  &.page-info {
+    @include zeros(absolute);
+    place-items: center;
     display: grid;
-
-    &.--chapter {
-      position: absolute;
-      bottom: 56px;
-      right: 56px;
-    }
-
-    &-share {
-      @extend %util-grid;
-      cursor: pointer;
-
-      &.--chapter {
-        justify-content: flex-end;
-        direction: rtl;
-
-        h5 {
-          direction: ltr;
-        }
-      }
-    }
-
-    &-url {
-      display: none;
-    }
-
-    &-update {
-      @extend %util-grid;
-    }
-
-    &-author {
-      @extend %util-grid;
-    }
-  }
-
-  &._results {
-    list-style: none;
-
-    &-entry {
-      cursor: pointer;
-      grid-gap: 5px;
-      padding: 10px;
-      display: grid;
-
-      &:hover {
-        background-color: rgba(black,0.05);
-      }
-
-      &.book-orwell {
-        @include ThemeResults($orwell);
-      }
-    }
-
-    &-info {
-      justify-content: flex-start;
-      grid-auto-flow: column;
-      line-height: 1;
-      grid-gap: 7px;
-      display: grid;
-    }
-
-    &-dot {
-      background-color: $gun;
-      border-radius: 50%;
-      position: relative;
-      height: 15px;
-      width: 15px;
-      top: 1px;
-    }
+    height: 560px;
+    bottom: auto;
+    width: 140px;
+    left: auto;
   }
 }

data/_sass/_box.scss

@@ -1,12 +1,12 @@
 
 .box {
 
-  &._load {
+  &.load {
     border: 3px solid;
     border-color: red;
   }
 
-  &._mobile {
+  &.mobile {
     border: 3px solid $gun;
     display: grid;
     width: 100%;

data/_sass/_btn.scss

@@ -3,7 +3,7 @@
   -webkit-tap-highlight-color: transparent;
   background-color: transparent;
 
-  &._submit {
+  &.submit {
     background-color: $gray;
     border-radius: 2px;
     cursor: pointer;

data/_sass/_col.scss

@@ -1,30 +1,27 @@
 
-.col {
+.col.browse {
 
-  &._browse {
+  &.book {
 
-    &.--book {
-
-      a {
-        @extend %bold;
-        text-transform: capitalize;
-      }
+    a {
+      @extend %bold;
+      text-transform: capitalize;
+    }
 
-      > .block._browse {
+    > .block {
 
-        &-label, &-lnk {
-          border-right: 2px solid $gun;
-        }
+      &.browse-label, &.browse-lnk {
+        border-right: 2px solid $gun;
       }
     }
+  }
 
-    &.--page {
+  &.page {
 
-      > .block._browse {
+    > .block {
 
-        &-label, &-chunk {
-          border-left: 2px solid $gun;
-        }
+      &.browse-label, &.browse-chunk {
+        border-left: 2px solid $gun;
       }
     }
   }

data/_sass/_form.scss

@@ -1,6 +1,6 @@
 
 .form {
-  &._contact {
+  &.contact {
     grid-row-gap: 10px;
     display: grid;
   }

data/_sass/_input.scss

@@ -1,24 +1,23 @@
 
 .input {
 
-  &._text {
+  &.text {
     display: block;
     color: inherit;
     padding: 10px;
     border: none;
     width: 100%;
 
-    &.--search {
+    &.search {
       @extend h4;
-      background: url('../img/search.svg') transparent no-repeat right top 8px;
+      background-color: transparent;
       letter-spacing: -0.03rem;
-      background-size: 42px;
-      padding: 0 60px 0 0;
       line-height: 1;
+      padding: 0;
     }
   }
 
-  &._email {
+  &.email {
     display: block;
     color: inherit;
     padding: 10px;
@@ -26,7 +25,7 @@
     width: 100%;
   }
 
-  &._checkbox {
+  &.checkbox {
     margin-right: 8px;
   }
 }

data/_sass/_lnk.scss

@@ -1,13 +1,13 @@
 
 .lnk {
 
-  &._nav {
+  &.nav {
     text-transform: capitalize;
     border-bottom: 3px solid;
     text-decoration: none;
   }
 
-  &._scroller {
+  &.scroller {
     fill: #666666;
     opacity: 0.5;
 
@@ -16,14 +16,13 @@
     }
   }
 
-  &._browse {
-
-    &-book {
-      &.--draft {
-        pointer-events: none;
-        user-select: none;
-        opacity: 0.5;
-      }
+  &.browse-book {
+    text-transform: capitalize;
+    
+    &.draft {
+      pointer-events: none;
+      user-select: none;
+      opacity: 0.5;
     }
   }
 }

data/_sass/_nav.scss

@@ -6,7 +6,7 @@
     fill: $gray;
   }
 
-  &._left {
+  &.left {
     justify-content: flex-start;
     grid-auto-flow: column;
     align-content: center;
@@ -14,7 +14,7 @@
     display: grid;
   }
 
-  &._main {
+  &.main {
     grid-auto-flow: column;
     align-content: center;
     text-align: center;
@@ -26,7 +26,7 @@
     }
   }
 
-  &._right {
+  &.right {
     justify-content: flex-end;
     grid-auto-flow: column;
     align-content: center;

data/_sass/_site.scss

@@ -1,12 +1,4 @@
 
-%site {
-  &-setup {
-    grid-template-columns: 1fr 1000px 1fr;
-    padding-bottom: 100px;
-    padding-top: 100px;
-  }
-}
-
 .site {
   @extend %siblings;
   background-color: $smoke;
@@ -14,19 +6,15 @@
   display: none;
   z-index: 1;
 
-  &._full {
+  &.full {
     height: 100%;
   }
 
-  &.--open {
-    display: grid;
-  }
-
-  &._feed {
+  &.feed {
     @extend %site-setup;
   }
 
-  &._single {
+  &.single {
     @extend %site-setup;
   }
 }