jekyll-theme-persephone 0.1.0

data/_sass/persephone/_blog.scss

@@ -0,0 +1,190 @@
+.post__top_navs {
+  margin-bottom: 2rem;
+}
+.post__archive__header {
+  margin: 5rem 0 5rem 0;
+  @include flex();
+  flex-direction: column;
+  align-items: center;
+  h1 {
+    font-weight: 300;
+    display: inline-block;
+    margin: 0 auto;
+    position: relative;
+    text-transform: capitalize;
+    &:before, &:after {
+      @include pseudo();
+      width: 30px;
+      height: 1px;
+      top: 50%;
+      background-color: var(--gray);
+    }
+    &:before {
+      left: -40px;
+    }
+    &:after {
+      right: -40px;
+    }
+  }
+  p {
+    color: var(--gray);
+  }
+}
+.post__entry {
+  margin: 0 0 3rem 0;
+  .post__link {
+    display: block;
+  }
+  h2 {
+    margin-bottom: 0.75rem;
+  }
+  .post__meta {
+    font-size: 0.875rem;
+    color: var(--gray);
+    margin: 0.5rem 0 1rem 0;
+  }
+  .post__excerpt {
+    color: var(--gray);
+    margin: 0.5rem 0 0 0;
+    p {
+      line-height: 1.5rem;
+    }
+  }
+  .post__more_arrow {
+    margin-top: 2rem;
+    width: 30%;
+    height: 1px;
+    background-color: var(--light);
+    position: relative;
+    transition: all 0.35s ease-out;
+    display: inline-block;
+    &:after, &:before {
+      content: "";
+      position: absolute;
+      width: 15px;
+      height: 1px;
+      background-color: var(--light);
+      right: -2.5px;
+      opacity: 0;
+      transition: all 0.35s ease-out;
+    }
+    &:after {
+      transform: rotate(45deg);
+      top: -5px;
+    }
+    &:before {
+      transform: rotate(-45deg);
+      top: 5px;
+    }
+  }
+  .post__entry__link {
+    display: block;
+  }
+  .post__entry__link:hover {
+    .post__more_arrow {
+      width: 30px;
+      background-color: var(--gray);
+      &:before, &:after {
+        opacity: 1;
+        background-color: var(--gray);
+      }
+    }
+  }
+  .post-link.emit {
+    .more-arrow {
+      margin-left: 30%;
+      opacity:  0;
+    }
+  }
+}
+.paginiation {
+  text-align: center;
+  li {
+    list-style: none;
+    display: inline-block;
+    margin: 0 5px;
+    .pagi__link, .pagi__icon {
+      width: 40px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      vertical-align: bottom;
+      display: inline-block;
+      position: relative;
+    }
+    .pagi__link {
+      &:after {
+        @include pseudo();
+        left: 0;
+        bottom: -1px;
+        width: 0;
+        height: 1px;
+        transition: all 0.35s ease-out;
+        background-color: var(--gray);
+      }
+      &.active {
+        color: var(--gray);
+        border-color: var(--gray);
+      }
+      &:hover {
+        border-color: var(--gray-light);
+        &:after {
+          width: 100%;
+        }
+      }
+    }
+    .pagi__icon {
+      border-radius: 50%;
+      .circle-progress {
+        stroke: var(--gray);
+        stroke-width: 1;
+      }
+      &:hover .circle-progress {
+        stroke-dasharray: 120 120;
+      }
+      .pagi__icon_arrow {
+        position: absolute;
+        width: 60%;
+        height: 1px;
+        top: calc(50% - 1px);
+        left: 20%;
+        background-color: var(--gray);
+        transition: all 0.25s ease-in;
+        &:before, &:after {
+          @include pseudo();
+          width: 50%;
+          height: 1px;
+          background-color: var(--gray);
+        }
+      }
+      &.next .pagi__icon_arrow {
+        &:before, &:after {
+          right: 0;
+          top: 0;
+        }  
+        &:before {
+          transform-origin: bottom right;
+          transform: rotate(45deg);
+        }
+        &:after {
+          transform-origin: top right;
+          transform: rotate(-45deg);
+        }
+      }
+      &.prev .pagi__icon_arrow {
+        &:before, &:after {
+          left: 0;
+          top: 0;
+        }  
+        &:before {
+          transform-origin: bottom left;
+          transform: rotate(45deg);
+        }
+        &:after {
+          transform-origin: top left;
+          transform: rotate(-45deg);
+        }
+      }
+    }
+  }
+}

data/_sass/persephone/_book.scss

@@ -0,0 +1,120 @@
+.book {
+  margin-left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+.book__cover {
+  height: 100vh;
+  width: 40%;
+  overflow: hidden;
+  position: fixed;
+  left: 0;
+  top: 0;
+}
+.book__img {
+  height: 100vh;
+  width: auto;
+}
+.book__content {
+  width: 60%;
+  min-height: 100%;
+  margin-left: 40%;
+  @include flex();
+  @include flex-column();
+  //justify-content: center;
+  flex-wrap: nowrap;
+}
+.book__content_inner {
+  padding: 2.5rem 10%;
+  width: 100%;
+  flex: 1;
+  @include flex();
+  @include flex-column();
+  justify-content: center;
+  flex-wrap: nowrap;
+}
+.book__title {
+  margin: 2.5rem 0;
+  color: var(--dark);
+  font-size: 2.85rem;
+}
+.book__desc {
+  color: var(--dark-light);
+  line-height: 2rem;
+}
+.book__meta {
+  margin: 0 0 1.5rem 0;
+  color: var(--gray);
+  font-size: 0.875rem;
+}
+.book__icon {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  position: relative;
+  cursor: pointer;
+  margin: 1.5rem 0;
+}
+.book__icon .circle-progress {
+  stroke-dasharray: 0 226;
+}
+.book__icon:hover .circle-progress {
+  stroke-dasharray: 226 226;
+}
+.book__icon_arrow {
+  position: absolute;
+  width: 60%;
+  height: 2px;
+  top: calc(50% - 1px);
+  left: 20%;
+  background-color: var(--gray-light);
+  transition: all 0.25s ease-in;
+  &:before, &:after {
+    @include pseudo();
+    width: 50%;
+    height: 2px;
+    background-color: var(--gray-light);
+    right: 0;
+    top: 0;
+  }
+  &:before {
+    transform-origin: bottom right;
+    transform: rotate(45deg);
+  }
+  &:after {
+    transform-origin: top right;
+    transform: rotate(-45deg);
+  }
+}
+
+@media screen and (max-width: 750px) {
+  .book {
+    @include flex-column;
+    height: auto;
+    min-height: 100vh;
+    position: relative;
+  }
+  .book__cover, .book__content {
+    width: 100%;
+  }
+  .book__cover {
+    height: 35%;
+    position: static;
+    .book__img {
+      width: 100%;
+      height: auto;
+      margin-top: -35%;
+    }
+  }
+  .book__content {
+    margin-left: 0;
+  }
+  .book__content_inner {
+    padding: 1rem 10%;
+  }
+  .book__more {
+    display: block;
+    text-align: center;
+  }
+}

data/_sass/persephone/_chapter.scss

@@ -0,0 +1,192 @@
+.book__wrapper {
+  position: relative;
+  min-height: 100vh;
+  width: 100%;
+}
+.book-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  z-index: 7;
+}
+.with-summary .book-header {
+  width: calc(100% - 300px);
+}
+.book-header h1 {
+  margin: 0px;
+  font-size: 20px;
+  font-weight: 200;
+  text-align: center;
+  opacity: 0;
+  padding-left: 200px;
+  padding-right: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-top: 1.5rem;
+  @include transition(opacity ease 0.4s);
+}
+.book-header h1 a,
+.book-header h1 a:hover {
+  color: inherit;
+  text-decoration: none;
+}
+.summary__toggler {
+  position: absolute;
+  top: 1.5rem;
+  left: 3rem;
+  width: 30px;
+  height: 30px;
+  z-index: 8;
+  transition: transform 0.25s linear;
+  transform-origin: top left;
+  color: var(--gray);
+}
+.summary__toggler.active {
+  transform: rotate(90deg);
+}
+@media (max-width: 1000px) {
+  .book-header h1 {
+    display: none;
+  }
+}
+.book-header h1 i {
+  display: none;
+}
+.book-header:hover h1 {
+  opacity: 1;
+}
+/*SUMMARY*/
+.book__body {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  left: 0px;
+  bottom: 0px;
+  overflow-y: auto;
+  @include transition(left 250ms ease);
+}
+.book__body .body__inner {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  left: 0px;
+  bottom: 0px;
+  overflow-y: auto;
+}
+.book__wrapper.with-summary .book-summary {
+  left: 0px;
+}
+.book__wrapper.with-summary .book__body {
+  left: 300px;
+}
+@media (max-width: 1240px) {
+  .book__body {
+    @include transition(transform 250ms ease);
+    padding-bottom: 20px;
+  }
+  .book__body .body__inner {
+    position: static;
+    min-height: calc(100% - 50px);
+  }
+}
+@media (max-width: 600px) {
+  .book__wrapper.with-summary {
+    overflow: hidden;
+  }
+  .book__wrapper.with-summary .book__body {
+    left: calc(100% - 60px);
+    right: calc(60px - 100%); 
+  }
+  .book__wrapper.with-summary .sidebar__toggler {
+    display: none;
+  }
+}
+.chapter__wrapper {
+  position: relative;
+  outline: none;
+  padding-top: 5rem;
+  min-height: 100vh;
+  @include flex();
+  @include flex-column();
+  .site-footer {
+    margin-top: 2.5rem;
+  }
+}
+.chapter__inner {
+  position: relative;
+  max-width: 800px;
+  margin: 0px auto;
+  padding: 1.5rem 1rem;
+  max-width: var(--content-width);
+  flex: 1;
+}
+/*
+    Right/Left buttons to change page
+*/
+.navigation {
+  position: absolute;
+  top: 50px;
+  bottom: 0px;
+  margin: 0;
+  max-width: 150px;
+  min-width: 90px;
+  @include flex();
+  @include flex-column();
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  font-size: 40px;
+  color: var(--gray-light);
+  text-align: center;
+  @include transition(all 0.35s ease);
+}
+.navigation:hover {
+  text-decoration: none;
+  color: var(--gray);
+}
+.navigation.navigation-next {
+  right: 20px;
+}
+.navigation.navigation-prev {
+  left: 0px;
+}
+@media (max-width: 1240px) {
+  .navigation {
+    position: static;
+    top: auto;
+    max-width: 50%;
+    width: 50%;
+    display: inline-block;
+    float: left;
+  }
+  .navigation.navigation-unique {
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .book__wrapper.sidebar-right .logo, .book_wrapper.sidebar-right.logo {
+    left: 50%;
+    margin-left: -20px;
+  }
+  .book-summary {
+    z-index: 12;
+  }
+  .summary__toggler {
+    left: 1.5rem;
+    top: 2rem;
+    position: absolute;
+  }
+}
+@media screen and (max-width: 600px) {
+  .summary__toggler.active {
+    left: 45px;
+  }
+  .book-header {
+    right: auto;
+  }
+
+}