jekyll-theme-fica 0.2.0 → 0.3.0

data/_sass/base.scss

@@ -0,0 +1,437 @@
+html {
+  overflow-x: hidden;
+  scroll-behavior: smooth;
+
+  ::selection {
+    background-color: $highlight-bg-color;
+    color: $highlight-text-color;
+  }
+}
+
+//
+// Reseting elements
+//
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+hr,
+dl,
+dd,
+ol,
+ul,
+figure {
+  margin: 0;
+  padding: 0;
+}
+
+* {
+  @include horizontal-scroll;
+  margin: 0;
+  padding: 0;
+}
+
+//  set `margin-bottom` to maintain vertical alignment
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+ul,
+ol,
+figure,
+%vertical-rhythm {
+  margin-bottom: 15px;
+}
+
+body {
+  @include body-medium;
+  // font: $font-weight #{$font-size}/#{$line-height} $font-family;
+  color: $text-color;
+  background-color: $primary_color;
+  -webkit-text-size-adjust: 100%;
+  font-kerning: normal;
+  min-height: 100vh;
+  flex-direction: column;
+  overflow-wrap: break-word;
+  display: flex;
+  line-height: 40px;
+}
+
+hr {
+  margin-top: $font-spacing;
+  margin-bottom: $font-spacing;
+  border: 0;
+  border-top: 2px solid $text-mute-color;
+  border-radius: 7px;
+}
+
+p {
+  line-height: 26px;
+}
+//
+// wrapper
+//
+.wrapper {
+  padding: 0 $font-spacing - 5 0 $font-spacing - 5;
+  margin: 0 auto 0 auto;
+  max-width: $content-width + 100;
+}
+
+.footer-wrapper {
+  padding: 0 $font-spacing - 5 0 $font-spacing - 5;
+  margin: 0 auto 0 auto;
+  max-width: 1168px;
+}
+
+.post-content {
+  padding: 30px $font-spacing - 5 0 $font-spacing - 5;
+  margin: 0 auto 0 auto;
+
+  @media screen and (min-width: 1111px) {
+    display: grid;
+    grid-template-columns: 1fr 15em;
+  }
+}
+
+.content {
+  padding: 30px 0 30px;
+  flex: 1 0 auto;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(3rem);
+  animation: 208.898ms linear 0s 1 normal forwards running slide-up;
+  animation-delay: 252.00568990042672ms;
+}
+
+//
+// Headers
+//
+h1 {
+  @include headline-large;
+}
+h2 {
+  @include headline-medium;
+}
+h3 {
+  @include headline-small;
+}
+h4 {
+  @include title-large;
+}
+h5 {
+  @include title-medium;
+}
+h6 {
+  @include title-small;
+}
+
+//
+// Lists
+//
+ul,
+ol {
+  margin-left: $font-spacing;
+}
+
+//
+// Links
+//
+a {
+  text-decoration: none;
+  transition: $transition-links;
+  color: $link-visited-color;
+  font-weight: 700;
+
+  &:hover {
+    color: $link-hover-color;
+    text-decoration: none;
+  }
+}
+
+li {
+  > ul,
+  > ol {
+    margin-bottom: 0;
+  }
+}
+
+//
+// Image
+//
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+//
+// BOLD
+//
+strong {
+  font-weight: 900;
+  font-size: 18px;
+  letter-spacing: 3px;
+}
+
+//
+// Figures
+//
+figure > img {
+  display: block;
+}
+
+figcaption {
+  @include body-small;
+}
+
+//
+//  Blockquotes
+//
+blockquote {
+  color: $blockquote-text-color;
+  border-left: 4px solid $code-background-color;
+  padding-left: $font-spacing / 2;
+  font-style: italic;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  i,
+  em {
+    font-style: normal;
+  }
+}
+
+//
+//  Code format
+//
+pre,
+code {
+  border: 1px solid $code-background-color;
+  border-radius: 4px;
+  font-weight: 700;
+  background-color: $code-background-color;
+  color: $code-text-color;
+  line-height: 1.5rem;
+  padding: 1px 5px;
+
+  @include horizontal-scroll();
+  a {
+    color: inherit !important;
+    border-bottom: none !important;
+    pointer-events: none;
+  }
+}
+pre {
+  overflow-x: auto;
+  border: 0;
+
+  > code {
+    border: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+.rouge-table {
+  width: 0%;
+
+  .rouge-gutter {
+    padding: 0px;
+    border: 0px;
+  }
+
+  td.rouge-code {
+    padding-left: 1rem;
+    border: 0px;
+  }
+
+  border: 0px;
+  margin-bottom: 0px;
+}
+
+.highlight {
+  border-radius: 5px;
+  background: $code-background-color;
+  border: 0px;
+  @extend %vertical-rhythm;
+
+  pre {
+    margin-bottom: 0;
+    font-size: $code-font-family;
+    // line-height: 1.5rem;
+    word-wrap: normal;
+    /* Fixed Safari overflow-x */
+  }
+
+  .lineno {
+    padding-top: 7px;
+    padding-bottom: 7px;
+    padding-left: 7px;
+    padding-right: 0px;
+    width: 1%;
+
+    min-width: 20px;
+    text-align: right;
+    color: $text-mute-color;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+  }
+
+  //  set the dollar sign to non-selectable
+  .gp {
+    user-select: none;
+  }
+
+  table {
+    td pre {
+      overflow: visible; // Fixed iOS safari overflow-x
+      word-break: normal; // Fixed iOS safari linenos code break
+    }
+  }
+
+  .highlighter-rouge & {
+    background: $code-background-color;
+  }
+}
+
+// Removes the line numbers default snippets
+div {
+  &[class^="highlighter-rouge"],
+  &.language-plaintext.highlighter-rouge,
+  &.language-console.highlighter-rouge,
+  &.language-terminal.highlighter-rouge,
+  &.nolineno {
+    pre.lineno {
+      display: none;
+    }
+
+    td.rouge-code {
+      padding: 8px 12px;
+    }
+
+    pre.highlight {
+      padding: 0px;
+      padding-bottom: 0px;
+    }
+  }
+}
+
+//
+//  Icons
+//
+
+// .stackoverflow {
+//   color: #f66a0a;
+// }
+
+// .youtube {
+//   color: #dd0505;
+// }
+
+// .github {
+//   color: $Github;
+
+// }
+
+.svg-icon {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  fill: currentColor;
+  padding: 5px 3px 2px 5px;
+  vertical-align: text-bottom;
+}
+
+.gitlab {
+  color: $Github;
+}
+
+dl {
+  padding: 0;
+
+  dt {
+    padding: 0;
+    margin-top: 1rem;
+    font-size: $font-size;
+    font-weight: 690;
+  }
+
+  dd {
+    margin-inline-start: 40px;
+  }
+}
+
+//
+// 404 page
+//
+.container-404 {
+  margin: 10px auto;
+  max-width: 400px;
+  text-align: center;
+  background-color: $error-div-bg-color;
+  border-radius: 20px;
+  align-content: center;
+  .prompt-404 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .paragraph-404 {
+      > p {
+        margin-bottom: 0px;
+        line-height: 2;
+
+        &:last-child {
+          margin-bottom: 15px;
+        }
+      }
+    }
+
+    .btn-404 {
+      display: inline-block;
+      padding: 17px 16px 16px;
+      color: #e7e7e7;
+      background-color: #2e353e;
+      transition: all 0.2s ease-in-out;
+      width: 92%;
+      border-bottom-left-radius: 20px;
+      border-bottom-right-radius: 20px;
+
+      &,
+      &:visited {
+        color: $text-color;
+      }
+
+      &:hover {
+        color: $btn-text-hover-color;
+        text-decoration: none;
+        background-color: $btn-color-hover;
+        border-color: $btn-color-hover;
+      }
+    }
+    > svg {
+      height: 220px;
+      width: 220px;
+      margin-left: 3px;
+      margin-right: 5px;
+      margin-top: 50px;
+      fill: $error-btn-svg-color;
+    }
+  }
+}