jekyll-theme-hydejack 6.0.0.pre.alpha

data/_sass/hydejack/_base.scss

@@ -0,0 +1,132 @@
+/*
+ * Global resets
+ *
+ * Update the foundational and global aspects of the page.
+ */
+
+body, main {
+  /* Prevent side-scrolling on mobile */
+  // position: relative;
+  // overflow-x: hidden;
+
+  -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+}
+
+// @media screen {
+//   main {
+//     min-height: 100vh;
+//     border-left: 0.5rem solid #ddd;
+//   }
+// }
+
+.shadow-main {
+  // position: fixed;
+  top: 0;
+  left: 0.5rem;
+  opacity: 0;
+  will-change: opacity;
+  width: calc(100% - 0.5rem);
+  z-index: 2;
+  // pointer-events: none;
+}
+
+.loading {
+  // display:none;
+  position: fixed;
+  top: 1rem;
+  right: 0;
+  transform-origin: top left;
+  transform: scale(0.33);
+}
+
+@media screen and (min-width: $break-point-font-1) {
+  // html {
+  //   font-size: 18px;
+  // }
+}
+
+@media screen and (min-width: $break-point-1) {
+  // html {
+  //   font-size: 16px;
+  // }
+  //
+  // main {
+  //   border-left: none;
+  // }
+  //
+  .shadow-main {
+    left: 0;
+    width: 100%;
+  }
+}
+
+@media screen and (min-width: $break-point-font-2) {
+  // html {
+  //   font-size: 18px;
+  // }
+}
+
+@media print {
+  html {
+    font-size: 16px;
+  }
+}
+
+.sr-only {
+  // will be properly styled in the non-essential part
+  // display: none;
+  display: unset;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+// .sixteen-nine {
+//   @include aspect-ratio(16, 9);
+// }
+
+.faded {
+  color: #9a9a9a;
+}
+
+a, .a {
+  // position: relative;
+  // padding-bottom: 0.15rem;
+  // border-bottom: 3px solid transparent;
+
+  &:hover, &:focus {
+    text-decoration: none;
+    border-bottom: 3px solid;
+  }
+
+  &.no-hover {
+    border-bottom: none;
+    padding-bottom: none;
+  }
+}
+
+.content a {
+  transition: color 300ms;
+}
+
+.img {
+  // overflow: hidden;
+  // background-color: #f9f9f9;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTYwIiBoZWlnaHQ9IjkwIiB2aWV3Qm94PSIwIDAgMTYwIDkwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMDQ4ODI4LCAwLCAwLCAwLjA0Nzk5MSwgNTQuOTk5OTczLCAyMC40MjgxNDgpIj4KICAgIDxwYXRoIGQ9Ik05NTkuODg0IDEyOGMwLjA0MCAwLjAzNCAwLjA4MiAwLjA3NiAwLjExNiAwLjExNnY3NjcuNzdjLTAuMDM0IDAuMDQwLTAuMDc2IDAuMDgyLTAuMTE2IDAuMTE2aC04OTUuNzdjLTAuMDQwLTAuMDM0LTAuMDgyLTAuMDc2LTAuMTE0LTAuMTE2di03NjcuNzcyYzAuMDM0LTAuMDQwIDAuMDc2LTAuMDgyIDAuMTE0LTAuMTE0aDg5NS43N3pNOTYwIDY0aC04OTZjLTM1LjIgMC02NCAyOC44LTY0IDY0djc2OGMwIDM1LjIgMjguOCA2NCA2NCA2NGg4OTZjMzUuMiAwIDY0LTI4LjggNjQtNjR2LTc2OGMwLTM1LjItMjguOC02NC02NC02NHYweiIgc3R5bGU9ImZpbGw6IHJnYigyMjEsIDIyMSwgMjIxKTsiLz4KICAgIDxwYXRoIGQ9Ik04MzIgMjg4YzAgNTMuMDIwLTQyLjk4IDk2LTk2IDk2cy05Ni00Mi45OC05Ni05NiA0Mi45OC05NiA5Ni05NiA5NiA0Mi45OCA5NiA5NnoiIHN0eWxlPSJmaWxsOiByZ2IoMjIxLCAyMjEsIDIyMSk7Ii8+CiAgICA8cGF0aCBkPSJNODk2IDgzMmgtNzY4di0xMjhsMjI0LTM4NCAyNTYgMzIwaDY0bDIyNC0xOTJ6IiBzdHlsZT0iZmlsbDogcmdiKDIyMSwgMjIxLCAyMjEpOyIvPgogIDwvZz4KPC9zdmc+');
+
+  > img {
+    // margin: 0;
+    // width: 100%;
+    // height: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+}

data/_sass/hydejack/_content-inline.scss

@@ -0,0 +1,26 @@
+/* Container
+ *
+ * Align the contents of the site above the proper threshold with some margin-fu
+ * with a 25%-wide `.sidebar`.
+ */
+
+.content {
+  padding-top: 5rem;
+  padding-bottom: 10rem;
+
+  @media screen and (min-width: $break-point-1) {
+    padding-top: 4rem;
+    max-width: 48rem;
+    margin-left: 20rem;
+    margin-right: 2rem;
+  }
+
+  @media screen and (min-width: $break-point-font-2) {
+    margin-left: 22rem;
+    margin-right: 4rem;
+  }
+
+  @media screen and (min-width: $break-point-dynamic) {
+    margin: auto;
+  }
+}

data/_sass/hydejack/_drawer-inline.scss

@@ -0,0 +1,19 @@
+@media screen {
+  .y-drawer-scrim {
+    z-index: 2;
+  }
+
+  .y-drawer-content {
+    width: 18rem;
+    left: -17.5rem;
+    z-index: 3;
+
+    @media (min-width: $break-point-dynamic) {
+      width: $dynamic-width;
+    }
+  }
+
+  // header, body::before {
+  //   backface-visibility: hidden;
+  // }
+}

data/_sass/hydejack/_drawer.scss

@@ -0,0 +1,19 @@
+@media screen {
+  // .y-drawer-scrim {
+  //   z-index: 2;
+  // }
+  //
+  // .y-drawer-content {
+  //   width: 18rem;
+  //   left: -17.5rem;
+  //   z-index: 3;
+  //
+  //   @media (min-width: $break-point-dynamic) {
+  //     width: $dynamic-width;
+  //   }
+  // }
+
+  header, body::before {
+    backface-visibility: hidden;
+  }
+}

data/_sass/hydejack/_footer-inline.scss

@@ -0,0 +1,14 @@
+main > footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0 1rem;
+  color: #9a9a9a;
+  font-size: smaller;
+  text-align: center;
+
+  a::after {
+    display: none;
+  }
+}

data/_sass/hydejack/_katex.scss

@@ -0,0 +1,28 @@
+article {
+  .katex-display, div.MathJax_Preview {
+    @include figure();
+
+    /* Prevent code linebreaks and allow side-scrolling (much better readability on mobile) */
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+
+    backface-visibility: hidden; // wat?
+  }
+
+  div.MathJax_Preview {
+    font-family: $code-font-family;
+    font-size: 0.75rem;
+    line-height: 1.4;
+    white-space: pre;
+  }
+
+  span.MathJax_Preview {
+    font-family: $code-font-family;
+    font-size: 0.85rem;
+  }
+}
+
+.MathJax_Preview:empty {
+  display:none;
+  visibility: hidden;
+}

data/_sass/hydejack/_me-inline.scss

@@ -0,0 +1,22 @@
+.me {
+  float: right;
+  width: 6.5rem;
+  height: 6.5rem;
+  margin-left: 1rem;
+  border-radius: 100%;
+  position: relative;
+
+  @media screen and (min-width: $break-point-font-1) {
+    width: 7rem;
+    height: 7rem;
+  }
+  @media screen and (min-width: $break-point-1) {
+    width: 6.5rem;
+    height: 6.5rem;
+    margin-top: 0;
+  }
+  @media screen and (min-width: $break-point-font-2) {
+    width: 7rem;
+    height: 7rem;
+  }
+}

data/_sass/hydejack/_menu-inline.scss

@@ -0,0 +1,35 @@
+.menu {
+  display: block;
+  padding: 1.25rem 1.5rem;
+  color: #9a9a9a;
+  border-bottom: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+
+  @media (min-width: $break-point-1) {
+    position: absolute;
+    left: -9999px;
+
+    &:focus {
+      left: 19.5rem;
+    }
+  }
+
+  @media (min-width: $break-point-2) {
+    &:focus {
+      left: 21.5rem;
+    }
+  }
+
+  @media (min-width: $break-point-dynamic) {
+    &:focus {
+      left: calc(50% - 24.5rem);
+    }
+  }
+
+  // @media print {
+  //   display: none;
+  // }
+}

data/_sass/hydejack/_menu.scss

@@ -0,0 +1,35 @@
+.menu {
+  // display: block;
+  // padding: 1.25rem 1.5rem;
+  // color: #9a9a9a;
+  // border-bottom: none;
+  // position: fixed;
+  // top: 0;
+  // left: 0;
+  // z-index: 1;
+  //
+  // @media (min-width: $break-point-1) {
+  //   position: absolute;
+  //   left: -9999px;
+  //
+  //   &:focus {
+  //     left: 19.5rem;
+  //   }
+  // }
+  //
+  // @media (min-width: $break-point-2) {
+  //   &:focus {
+  //     left: 21.5rem;
+  //   }
+  // }
+  //
+  // @media (min-width: $break-point-dynamic) {
+  //   &:focus {
+  //     left: calc(50% - 24.5rem);
+  //   }
+  // }
+
+  @media print {
+    display: none;
+  }
+}

data/_sass/hydejack/_sidebar-inline.scss

@@ -0,0 +1,121 @@
+/*
+ * Sidebar
+ *
+ * Flexible banner for housing site name, intro, and "footer" content. Starts
+ * out above content in mobile and later moves to the side with wider viewports.
+ */
+
+.sidebar {
+  color: rgba(255,255,255,.75);
+  text-align: left;
+
+  &::before {
+    /* make sidebar slightly darker to increase text readability (when using a background image) */
+    content: "";
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    // /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#202020+0,202020+100&0+0,0.5+100 */
+    // background: -moz-linear-gradient(top, rgba(32,32,32,0) 0%, rgba(32,32,32,0.5) 100%); /* FF3.6-15 */
+    // background: -webkit-linear-gradient(top, rgba(32,32,32,0) 0%,rgba(32,32,32,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom, rgba(32,32,32,0) 0%,rgba(32,32,32,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00202020', endColorstr='#80202020',GradientType=0 ); /* IE6-9 */
+  }
+
+  /* Sidebar links */
+  a {
+    color: #fff;
+  }
+}
+
+#_yDrawer {
+  position: relative;
+
+  @media screen {
+    padding: 2rem 1rem;
+    min-height: 640px; // fallback
+    min-height: 100vh;
+  }
+
+  @media screen and (min-width: $break-point-1) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 18rem; // duplicate!
+    margin-left: 0;
+  }
+
+  @media screen and (min-width: $break-point-dynamic) {
+    width: $dynamic-width;
+  }
+
+  &.loaded {
+    min-height: 0;
+    padding: 0;
+  }
+}
+
+.sidebar-bg {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: #202020 center / cover;
+}
+
+.sidebar-sticky {
+  position: relative;
+  z-index: 3;
+
+  @media screen {
+    position: absolute;
+    right:  1rem;
+    bottom: 1rem;
+    left:   1rem;
+  }
+}
+
+/* About section */
+.sidebar-about > h1 {
+  color: #fff;
+  font-size: 2rem;
+}
+
+.sidebar-nav > ul {
+  list-style: none;
+  padding-left: 0;
+
+  > li:last-child > .sidebar-nav-item {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  }
+}
+
+.sidebar-nav-item {
+  font-weight: bold;
+  display: block;
+  line-height: 1.75;
+  margin: 0 -2rem;
+  padding: .25rem 2rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  border-bottom: none;
+
+  // &:hover, &:focus {
+  //   border-bottom: none;
+  //   background-color: rgba(255, 255, 255, 0.1);
+  // }
+}
+
+// @media print {
+//   .sidebar {
+//     page-break-inside: avoid;
+//   }
+//
+//   .sidebar-nav, .sidebar-social {
+//     display: none;
+//   }
+// }