jekyll-theme-persephone 0.1.0

data/_sass/persephone/_error.scss

@@ -0,0 +1,16 @@
+.error-container {
+	display: flex;
+	width: 100vw;
+	height: 100vh;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
+.error-title {
+	font-size: 4rem;
+}
+.error-hint {
+	margin: 0.5rem 0 1.5rem 0;
+	font-size: 1.35rem;
+	text-decoration: none;
+}

data/_sass/persephone/_header.scss

@@ -0,0 +1,140 @@
+.logo {
+  position: fixed;
+  left: 3rem;
+  top: 2rem;
+  z-index: 11;
+  display: block;
+  color: var(--gray);
+  h1 {
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 30px;
+  }
+  img + h1 {
+    margin: 0;
+    transform: translateX(-20px);
+    opacity: 0;
+    position: absolute;
+    left: calc(30px + 1rem);
+    top: 0;
+    width: 100px;
+  }
+  &:hover img + h1 {
+    opacity: 1;
+    transform: none;
+    transition: transform 0.3s, opacity 0.3s;
+  }
+}
+.sidebar__toggler {
+  width: 40px;
+  height: 40px;
+  margin: 10px;
+  position: fixed;
+  left: 3rem;
+  bottom: 2rem;
+  margin-top: -20px;
+  z-index: 11;
+}
+.logo, .sidebar__toggler {
+  @include transition(all 0.35s ease-out);
+}
+.sidebar-right .logo, .sidebar-right .sidebar__toggler {
+  right: 3rem;
+  left: auto;
+}
+.sidebar-right .logo h1 {
+  left: auto;
+  right: calc(30px + 1rem);
+  transform: translateX(20px);
+  text-align: right;
+}
+.sidebar-right .logo:hover h1 {
+  transform: none;
+}
+.sidebar__toggler span {
+  display: inline-block;
+  position: absolute;
+  background-color: var(--gray);
+  height: 2px;
+  left: 5%;
+  transition: all 0.25s linear;
+	border-radius: 2px;
+}
+.sidebar__toggler_top {
+  width: 40%;
+  top: 7.5px;
+}
+.sidebar__toggler_middle {
+  width: 70%;
+  top: 19px;
+}
+.sidebar__toggler_bottom {
+  width: 90%;
+  bottom: 7.5px;
+}
+.sidebar__toggler:hover .sidebar__toggler_top {
+  width: 90%;
+}
+.sidebar__toggler:hover .sidebar__toggler_bottom {
+  width: 40%;
+}
+.sidebar__toggler.active .sidebar__toggler_top {
+  transform-origin: 5% 5%;
+  width: 90%;
+  transform: rotate(45deg);
+}
+.sidebar__toggler.active .sidebar__toggler_middle {
+  opacity: 0;
+}
+.sidebar__toggler.active .sidebar__toggler_bottom {
+  width: 90%;
+  transform-origin: 5% 95%;
+  transform: rotate(-45deg);
+}
+a.nav-link {
+  display: inline-block;
+  padding: 5px 0.25rem;
+  position: relative;
+  &:after {
+    @include pseudo();
+    left: 0;
+    bottom: 0;
+    height: 1px;
+    background-color: var(--light-gray);
+    width: 0;
+    transition: width 0.25s ease-out;
+  }
+  &:hover:after {
+    width: 100%;
+  }
+  &.active:after {
+    background-color: var(--gray);
+    width: 100%;
+  }
+}
+.top-nav {
+  margin: -2.45rem 0 3.45rem 0;
+  text-align: right;
+  a {
+    margin: 0 0 0 1rem;
+  }
+}
+@media screen and (max-width: 768px) {
+  .logo, .logo.active, .sidebar-right .logo, .sidebar-right .logo.active {
+    position: absolute;
+    left: 1.5rem;
+    top: 2rem;
+    margin: 0;
+  }
+  .sidebar__toggler, .sidebar__toggler.active, .sidebar-right .sidebar__toggler, .sidebar-right .sidebar__toggler.active {
+    position: absolute;
+    bottom: auto;
+    top: 2rem;
+    right: 1rem;
+    margin: -10px 0 0 0;
+    left: auto;
+  }
+  .top-nav {
+    padding-left: 40px
+  }
+}

data/_sass/persephone/_keyframes.scss

@@ -0,0 +1,11 @@
+/*loading*/
+@keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    tranform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    tranform: rotate(360deg);
+  }
+}

data/_sass/persephone/_list.scss

@@ -0,0 +1,105 @@
+.post__archive {
+  max-width: var(--content-width);
+  width: 100%;
+  margin: 3rem auto;
+  padding: 1.5rem 1rem;
+}
+.blog__categories {
+  margin: 1rem 0 0.75rem 0;
+  a {
+    margin: 0 2.75rem 0.75rem 0; 
+  }
+}
+.post__list_title {
+  margin: 4.5rem 0 1.5rem 0;
+}
+.post__list_item {
+  list-style: none;
+  padding: 0;
+  width: 100%;
+  margin: 0.875rem 0;
+  position: relative;
+  a {
+    display: block;
+    width: 100%;
+    padding: 0.5rem 0;
+  }
+  .archive__arrow {
+    display: inline-block;
+    position: absolute;
+    width: 0;
+    height: 1px;
+    left: 0;
+    top: 50%;
+    background-color: var(--light-gray);
+    transition: width 0.25s ease-in;
+    &:after, &:before {
+      content: "";
+      position: absolute;
+      width: 9px;
+      height: 1px;
+      background-color: var(--light-gray);
+      right: -2.5px;
+      opacity: 0;
+      transition: all 0.25s ease-in;
+    }
+    &:after {
+      transform: rotate(45deg);
+      top: -3px;
+    }
+    &:before {
+      transform: rotate(-45deg);
+      top: 3px;
+    }
+  }
+  .archive__time {
+    display: inline-block;
+    width: 135px;
+    font-size: 0.9rem;
+    color: var(--gray);
+  }
+  a, .archive__time {
+    transition: color 0.125s ease-in;
+  }
+  &.fade {
+    a, .archive__time {
+      color: var(--light-gray);
+    }
+  }
+}
+@media screen and (max-width: 700px) {
+  .post__list_item .archive__time {
+    display: block;
+    margin-bottom: 0.35rem;
+  }
+}
+.hover-reveal {
+	position: fixed;
+	width: 250px;
+	height: 175px;
+	top: 0;
+	left: 0;
+	pointer-events: none;
+	opacity: 0;
+}
+
+.hover-reveal__inner,
+.hover-reveal__img {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+.hover-reveal__deco {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	background-color: #181314;
+}
+
+.hover-reveal__img {
+	background-size: cover;
+	background-position: 50% 50%;
+}

data/_sass/persephone/_minxins.scss

@@ -0,0 +1,68 @@
+@mixin pseudo() {
+  content: "";
+  position: absolute;
+  display: inline-block; 
+}
+
+@mixin flex() {
+  display: flex!important;
+  display: -webkit-box;
+  display: -ms-flexbox;
+}
+
+@mixin flex-middle() {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+@mixin flex-reverse() {
+  -webkit-box-direction: reverse;
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+  -webkit-box-orient: horizontal;
+}
+
+@mixin flex-row() {
+  -webkit-box-orient: row;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+@mixin flex-column() {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+@mixin column($count, $gap) {
+  -moz-column-count: $count;
+  -webkit-column-count: $count;
+  column-count: $count;
+  -moz-column-gap: $gap;
+  -webkit-column-gap: $gap;
+  column-gap: $gap;
+}
+
+@mixin transition($val) {
+  -webkit-transition: $val;
+  -moz-transition: $val;
+  -o-transition: $val;
+  transition: $val;
+}
+
+@mixin transform($val) {
+  -webkit-transform: $val;
+  -moz-transform: $val;
+  -ms-transform: $val;
+  -o-transform: $val;
+  transform: $val;
+}
+@mixin text_size_adjust($val) {
+  text-size-adjust: $val;
+  -ms-text-size-adjust: $val;
+  -webkit-text-size-adjust: $val;
+  -moz-text-size-adjust: $val;
+}

data/_sass/persephone/_post.scss

@@ -0,0 +1,169 @@
+.post__wrapper {
+  max-width: var(--content-width);
+  width: 100%;
+  margin: 3rem auto 1.5rem auto;
+  padding: 1.5rem 1rem;
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+}
+.post__archive_path {
+  float: left;
+  .post__archive_icon {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    float: left;
+    margin-right: 10px;
+    position: relative;
+    .circle-progress {
+      stroke: var(--gray);
+      fill: none;
+      stroke-width: 1;
+      stroke-dasharray: 0 120;
+      transition: all 0.45s ease-in;
+    }
+    .post__archive_icon {
+      position: absolute;
+      width: 60%;
+      left: 20%;
+      top: 50%;
+      height: 1px;
+      background-color: var(--gray);
+      transition: all 0.25s ease-in;
+      &:after, &:before {
+        @include pseudo();
+        height: 1px;
+        width: 50%;
+        background-color: var(--gray);
+        top: 0;
+        left: 0;
+      }
+      &:before {
+        transform-origin: left bottom;
+        transform: rotate(-45deg);
+      }
+      &:after {
+        transform-origin: left top;
+        transform: rotate(45deg);
+      }
+      &.emit {
+        left: -110%;
+      }
+    }
+  }
+  a {
+    display: block;
+    font-size: 1.2rem;
+    line-height: 40px;
+    text-transform: capitalize;
+    &:hover {
+      .circle-progress {
+        stroke-dasharray: 120 120;
+      }
+    }
+    &.emit {
+      .post__archive_icon {
+        left: -150%;
+        opacity: 0;
+      }
+    }
+  }
+}
+.post__langs {
+  float: right;
+  line-height: 40px;
+}
+.post__header {
+  margin-bottom: 1rem;
+  .post__title {
+    margin: 3rem 0 1.3rem 0;
+  }
+  .page__title {
+    margin-top: 1rem;
+  }
+  .post__meta {
+    color: var(--gray);
+    font-size: 0.935rem;
+  }
+}
+.post__relative {
+  ul {
+    padding: 0;
+    li {
+      list-style: none;
+    }
+  }
+}
+.post__content {
+  padding: 1.5rem 0;
+  margin-bottom: 4rem;
+}
+
+.post__contact {
+  margin: 0;
+  padding: 1.5rem 0;
+  position: relative;
+  color: var(--gray);
+  width: 100%;
+  text-align: left;
+  &:before {
+    @include pseudo();
+    left: 0;
+    background-color: var(--light);
+    width: 30%;
+    height: 1px;
+    top: 0;
+  }
+  h4 {
+    color: var(--grayer);
+    font-size: 1.15rem;
+    font-weight: 400;
+		margin-bottom: 0.5rem;
+  }
+  p {
+    font-size: 0.875rem;
+    margin: 0 0 1rem 0;
+  }
+  .icon__list {
+    text-align: left;
+  }
+}
+.section-nav {
+  position: fixed;
+  left: 50%;
+  top: 8rem;
+  margin-left: calc(var(--content-width) / 2 + 30px)!important;
+  list-style: none;
+  max-width: calc(100vh / 2 - 60px);
+  li {
+    margin: 10px 0;
+    line-height: 1.35rem;
+  }
+  li > a {
+    color: var(--gray);
+    &:hover {
+      color: var(--blue);
+    }
+  }
+}
+@media screen and (max-width: 1200px) {
+  .section-nav {
+    display: none;
+  }
+}
+@media screen and (max-width: 600px) {
+  .contact, .post__archive_path {
+    width: 100%;
+  }
+  .contact {
+    text-align: left;
+    &:after {
+      left: 0;
+      right: auto;
+    }
+  }
+}