Docker and Ghost CMS overhaul

2018-08-18 01:10:09 -04:00
parent 399e5ea342
commit 4dd84332d5
105 changed files with 1289 additions and 337 deletions
--- a/etc/ghost/content/themes/NEWcasper/assets/scss/components/_aside.scss
+++ b/etc/ghost/content/themes/NEWcasper/assets/scss/components/_aside.scss
@@ -0,0 +1,144 @@
+.cover {
+  position: fixed;
+  z-index: 1;
+
+  display: block;
+  width: $aside-width-collapsed;
+  height: 100%;
+  overflow-y: auto;
+
+  border-right: 1px solid $gray;
+  box-shadow: 10.5px -10px 1px -9px $gray-light;
+
+  &.animated {
+    transition: width $aside-animation-time $aside-animation;
+  }
+  &.expanded {
+    width: 100%;
+
+    .navigation.left {
+      margin-top: .85rem;
+      margin-bottom: 1rem;
+    }
+  }
+  &.container {
+    text-align: center;
+
+    color: $gray-lightest;
+
+    @extend %font-shadow;
+    @extend %center-absolute;
+    @extend %background-filter;
+  }
+}
+
+#profile-resume {
+  display: none;
+}
+
+.profile {
+  max-width: 38.75rem;
+  > p {
+    margin: 10px 2rem;
+
+    font-size: .9rem;
+  }
+  > a {
+    > h1 {
+      margin: 10px auto;
+
+      font-family: $sans-font;
+      font-size: $unit * 1.6;
+      font-weight: bold;
+
+      letter-spacing: .05rem;
+
+      color: $gray-lightest;
+    }
+    > h3 {
+      margin: 0;
+
+      color: $gray-lightest;
+    }
+    > img {
+      width: 7rem;
+
+      border: 2px solid rgba($primary-color, .1);
+      box-shadow: 0 0 1px 1px rgba(000, 000, 000, .3);
+    }
+  }
+}
+.navigation {
+  &.left {
+    display: inline-block;
+    .links {
+      margin: 0;
+
+      list-style: none;
+
+      > li {
+        display: block;
+        margin: 0 1px 0 0;
+
+        line-height: 1em;
+
+        &.expanded {
+          display: inline-block;
+          margin: 0 5px;
+
+          border-radius: 20px;
+
+          @extend %btn-cover-with-border;
+
+          > a {
+            padding: .625rem 1.25rem;
+          }
+        }
+
+        > a {
+          display: block;
+          float: none;
+          padding: .5rem 1.25rem;
+
+          opacity: .8;
+          color: $gray-lightest;
+
+          @extend %btn-cover;
+
+          &:hover {
+            color: $hover-color;
+          }
+        }
+      }
+    }
+  }
+  &.right {
+    display: block;
+    margin: .5rem;
+    .social {
+      margin: 0;
+      &.item {
+        display: inline-block;
+        margin: 0 4px 0 0;
+
+        line-height: 1em;
+        a {
+          padding: 6px 8px 6px 9px;
+
+          @extend %btn-cover;
+          .label {
+            display: none;
+          }
+          .icon {
+            display: block;
+
+            font-size: 1.7em;
+          }
+          &:hover {
+            color: $hover-color;
+          }
+        }
+      }
+    }
+  }
+}
--- a/etc/ghost/content/themes/NEWcasper/assets/scss/components/_loading.scss
+++ b/etc/ghost/content/themes/NEWcasper/assets/scss/components/_loading.scss
@@ -0,0 +1,24 @@
+// more in http://github.hubspot.com/pace/docs/welcome/
+
+.pace {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+          pointer-events: none;
+
+  -webkit-pointer-events: none;
+}
+.pace-inactive {
+  display: none;
+}
+.pace .pace-progress {
+  position: fixed;
+  top: 0;
+  right: 100%;
+  z-index: 2000;
+
+  width: 100%;
+  height: 2px;
+
+  background: $primary-color;
+}
--- a/etc/ghost/content/themes/NEWcasper/assets/scss/components/_media-queries.scss
+++ b/etc/ghost/content/themes/NEWcasper/assets/scss/components/_media-queries.scss
@@ -0,0 +1,225 @@
+// ------------------------------
+// MEDIA QUERIES
+// ------------------------------
+
+@media only screen and (min-width:1824px) {
+  main {
+    padding: 2.5rem 11rem;
+  }
+
+  .content {
+    margin: 0 7rem;
+  }
+}
+
+// ------------------------------
+// < 1024px (Tablet)
+// ------------------------------
+
+@media all and (max-width:1024px) {
+  /* disabling element, too much information*/
+
+  .pace,
+  span.post.tags,
+  .post.reading-time,
+  .post.related {
+    display: none;
+  }
+
+  #search-container {
+    display: none !important;
+  }/* Enable element special for little devices */
+
+  #profile-resume {
+    display: inherit;
+  }/* off canvas */
+
+  #menu-button {
+    position: fixed;
+    top: .5rem;
+    left: 13.5rem;
+    z-index: 2;
+    display: block;
+    transition: all $aside-animation-time;
+
+    &.expanded {
+      left: .85rem;
+    }
+
+    > a {
+      > i {
+        color: $hover-color;
+      }
+    }
+  }
+
+  .cover {
+    width: 16rem;
+    transition: width $aside-animation-time $aside-animation,
+                transform $aside-animation-time $aside-animation,
+                border-right $aside-animation-time * 1.8 $aside-animation,
+                box-shadow $aside-animation-time * 1.8 $aside-animation;
+    transform: translate3d(-16rem, 0, 0);
+    border-right: 0;
+    box-shadow: none;
+
+    &.expanded {
+      width: 16rem;
+      transform: translate3d(0, 0, 0);
+      border-right: 1px solid $gray;
+      box-shadow: 11px -10px 1px -9px $gray-light;
+    }
+
+    &.animated {
+      transition: all $aside-animation-time;
+    }
+  }
+
+  .profile {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+
+    &.contact {
+      > nav {
+        padding: 0;
+      }
+    }
+
+    > a {
+      > img {
+        width: 8rem;
+        margin-bottom: 1rem;
+      }
+
+      > h1 {
+        margin: 0
+      }
+    }
+
+    > p {
+      display: none;
+    }
+
+    .divider {
+      display: none;
+    }
+  }
+
+  .navigation {
+    &.left {
+      margin-top: 1.2rem;
+      margin-bottom: 1rem;
+      .links {
+        > li {
+          margin: 0;
+
+          > a {
+            padding: .85rem 1.25rem;
+            font-size: 1rem;
+          }
+        }
+      }
+    }
+  }
+
+  #avatar-link {
+    display: inline-block;
+    margin-top: 4rem;
+  }
+
+  .navigation {
+    width: 100%;
+
+    &.right {
+      margin: 0;
+    }
+
+    &.left {
+      .links.item {
+        width: 100%;
+      }
+    }
+  }
+
+  main {
+    left: 0;
+    transition: all $aside-animation-time;
+    transform: translate3d(0, 0, 0);
+
+    &.expanded {
+      transform: translate3d(14rem, 0, 0);
+    }
+  }
+}
+
+// ------------------------------
+// < 480px (Mobile)
+// ------------------------------
+
+@media all and (max-width:480px) {
+  .post .tags,
+  .post .meta > time,
+  .pagination > span {
+    display: none;
+  }
+
+  main {
+    padding: 1rem 0;
+  }
+
+  .btn {
+    display: block;
+    margin-bottom: .4em;
+  }
+
+  .mayday {
+    width: auto;
+
+    > h2 {
+      font-size: 20px;
+      line-height: 25px;
+    }
+  }
+
+  .astronaut {
+    background-size: 55%;
+  }
+
+  .astro-wrap {
+    margin: -5% auto;
+  }
+
+  .astro-wrap,
+  .astronaut {
+    height: 10rem;
+  }
+
+  #panic-button {
+    margin-bottom: 1rem;
+  }
+
+  .posts.newer,
+  .posts.older {
+    margin: 1rem 0;
+  }
+
+  #posts-list {
+    margin: 3rem 0;
+    text-align: center;
+    > li {
+      margin-bottom: 2rem;
+
+      > time {
+        display: block;
+        float: none;
+        letter-spacing: 1px;
+        padding: 0;
+      }
+    }
+  }
+
+  #post-title {
+    margin: 2.5rem 0;
+  }
+}
--- a/etc/ghost/content/themes/NEWcasper/assets/scss/components/_page-error.scss
+++ b/etc/ghost/content/themes/NEWcasper/assets/scss/components/_page-error.scss
@@ -0,0 +1,43 @@
+body[data-page="error"] {
+  width: 100%;
+  height: 100%;
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: 25px;
+  text-align: center;
+
+  @extend %background-filter;
+  > article {
+    @extend %center-absolute;
+  }
+}
+
+.mayday {
+  width: 500px;
+  margin: 150px auto 20px;
+
+  > h2 {
+    font-size: 24px;
+    line-height: 35px;
+    color: $gray-lightest;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
+  }
+}
+
+.astro-wrap {
+  position: relative;
+  width: $astronaut-size;
+  height: $astronaut-size * 1.6;
+  margin: auto;
+}
+
+.astronaut {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: $astronaut-size;
+  height: $astronaut-size * 1.6;
+  transform: translate(0, 50px);
+  animation: move 10s infinite;
+  background: url('/assets/img/pikachu.jpg') center / cover no-repeat;
+}
--- a/etc/ghost/content/themes/NEWcasper/assets/scss/components/_pagination.scss
+++ b/etc/ghost/content/themes/NEWcasper/assets/scss/components/_pagination.scss
@@ -0,0 +1,19 @@
+.pagination {
+  margin: 0 0 2.5rem;
+}
+
+.posts {
+
+  &.index {
+    font-size: .8rem;
+    color: $gray-dark;
+  }
+
+  &.newer {
+    margin-right: 1rem;
+  }
+
+  &.older {
+    margin-left: 1rem;
+  }
+}
--- a/etc/ghost/content/themes/NEWcasper/assets/scss/components/_post.scss
+++ b/etc/ghost/content/themes/NEWcasper/assets/scss/components/_post.scss
@@ -0,0 +1,138 @@
+#posts-list {
+  padding: 0;
+  margin: 5rem 0;
+  list-style-type: none;
+
+  > li {
+    margin-left: 1rem;
+    margin-bottom: 1.25rem;
+
+    > time {
+      float: right;
+      text-transform: uppercase;
+      color: #777;
+      font-size: 10px;
+      letter-spacing: 2px;
+    }
+
+    > a {
+      @extend %dotted-link;
+    }
+
+    > span > a {
+      bottom: 2px;
+    }
+  }
+}
+
+#post-content {
+
+  a:not(.title-link) {
+    @extend %dotted-link;
+  }
+
+  a.title-link {
+    color: $primary-color;
+  }
+
+  .deep-link a:before {
+    display: inline-block;
+    content: "#";
+    margin-left: -30px;
+    width: 30px;
+    color: $white;
+    transition: all 0.2s;
+    font-family: $quote-font;
+  }
+
+  .deep-link a:hover::before {
+    color: rgba($primary-color, .8);
+  }
+}
+
+.post {
+  > p {
+    > img {
+      border-radius: $border-radius;
+        display: block;
+      margin: 1.5rem auto;
+      max-width: 100%;
+      text-align: center;
+      width: auto;
+    }
+  }
+
+  pre {
+    width: 95%;
+  }
+
+  > header {
+    text-align: center;
+  }
+
+  &.meta {
+    margin: .7em 0;
+    font-size: .85rem;
+    color: $gray;
+  }
+
+  &.tags {
+    > a {
+      &:first-child {
+        margin-left: .2rem;
+      }
+
+      &:last-child {
+        margin-right: .2rem;
+      }
+      padding: .15rem .25rem;
+      font-size: .55rem;
+      transition: all $aside-animation-time;
+      text-transform: uppercase;
+      color: $gray-lightest;
+      border-radius: .25rem;
+      background-color: rgba($primary-color, .45);
+
+      &:hover {
+        background-color: rgba($primary-color, 1);
+      }
+    }
+  }
+
+  &.author {
+    img {
+      display: inline-block;
+      height: 22px;
+      margin: 0 .5rem;
+      vertical-align: middle;
+      border: 0;
+      box-shadow: none;
+    }
+  }
+
+  &.comments {
+    padding: 2rem 0 0;
+  }
+
+  &.related {
+    line-height: 1;
+    display: flex;
+    padding: 4rem 0 2rem;
+    justify-content: space-between;
+  }
+}
+
+#post-image {
+  max-width: 100%;
+  margin-top: 1rem;
+}
+
+#post-title {
+  font-size: $font-title;
+  margin: 3rem 0 2.5rem;
+  transition: all $aside-animation-time;
+
+  &:hover {
+    color: $hover-color;
+  }
+}
--- a/etc/ghost/content/themes/NEWcasper/assets/scss/components/_search.scss
+++ b/etc/ghost/content/themes/NEWcasper/assets/scss/components/_search.scss
@@ -0,0 +1,63 @@
+#search-form {
+  padding: .25rem 0;
+}
+
+#search-field {
+  width: 12.5rem;
+  height: 1rem;
+  padding: 4% 5px 4% 18px;
+  transition: border .3s ease-in;
+  border-radius: 1.68rem;
+
+  &:focus,
+  &:hover {
+    border: 1.5px solid lighten($hover-color, 5%);
+  }
+}
+
+#search-results {
+  text-align: center;
+
+  &.active {
+    margin-top: 3rem;
+    margin-bottom: 9rem;
+  }
+
+  > p {
+    margin-bottom: 3rem;
+    font-size: 1.2rem;
+  }
+}
+
+.result {
+  display: block;
+  padding: 1rem;
+  margin-bottom: 1.3rem;
+  text-decoration: none;
+  word-wrap: break-word;
+  border: 1px solid $primary-color;
+  border-radius: 5px;
+
+  > h2,
+  > h4 {
+    color: $gray-darker;
+  }
+
+  &:hover {
+    transition: .5s;
+
+    > h2,
+    > h4 {
+      transition: .5s;
+      color: $hover-color;
+    }
+  }
+}
+
+.icon-search {
+  position: absolute;
+  top: 31.5rem;
+  left: 16.5rem;
+  color: $gray;
+  text-shadow: 1px 1px 0 $gray;
+}