rawfeed 0.0.1 → 0.1.0

data/_sass/layouts/_error.scss

@@ -0,0 +1,18 @@
+@use "../components/index";
+
+.error {
+  &-image {
+    @extend %gif_border;
+    margin-bottom: 50px;
+  }
+
+  &-title {
+    color: red;
+    font-weight: bold;
+  }
+
+  &-description {
+    font-size: 1.3rem;
+    opacity: .6;
+  }
+}

data/_sass/layouts/_home.scss

@@ -0,0 +1,19 @@
+.home {
+  &-terminal {
+    display: block;
+  }
+
+  &-text {
+    display: none;
+  }
+
+  @media (max-width: 767px) {
+    &-terminal {
+      display: none !important;
+    }
+
+    &-text {
+      display: block !important;
+    }
+  }
+}

data/_sass/layouts/_index.scss

@@ -0,0 +1,10 @@
+@use "default";
+@use "home";
+@use "blog";
+@use "page";
+@use "post";
+@use "tag";
+@use "tag-posts";
+@use "contact";
+@use "error";
+@use "resume";

data/_sass/layouts/_page.scss

@@ -0,0 +1,5 @@
+@use "../components/index";
+
+.page {
+  @extend %markdown;
+}

data/_sass/layouts/_post.scss

@@ -0,0 +1,109 @@
+@use "../components/index";
+
+.post {
+  // TODO: version: 0.2.0 - Create background light
+  // box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+  // border: 1px solid #ddd;
+  // background-color: white;
+  // padding: 10px 30px;
+
+  @extend %markdown;
+  margin-bottom: 50px;
+
+  li {
+    list-style: disc;
+  }
+
+  &-title {
+    font-size: 1.3rem !important;
+    font-weight: bold;
+    margin-bottom: 40px !important;
+  }
+
+  &-meta,
+  &-modified {
+    margin-bottom: 12px;
+    color: var(--text-muted-color);
+  }
+
+  &-modified {
+    margin-top: 30px;
+  }
+
+  .dt-published,
+  .dt-modified {
+    font-weight: normal !important;
+    font-family: "SUSE Mono", sans-serif;
+    color: var(--text-muted-color);
+  }
+
+  &-content {
+    p::first-letter {
+      text-transform: uppercase;
+    }
+  }
+
+  .related-posts {
+    margin-bottom: 80px;
+
+    &-title {
+      font-size: 1.05rem;
+      font-weight: bold;
+      margin: 35px 0px 10px 0px;
+    }
+
+    &-list {
+      &__item {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        .draft-badge {
+          @extend %draft-badge;
+        }
+      }
+
+      &__meta {
+        display: inline-block;
+        min-width: 100px;
+        font-family: "SUSE Mono", sans-serif;
+        font-optical-sizing: auto;
+        font-style: normal;
+        line-height: 1rem;
+        color: var(--text-muted-color);
+      }
+
+      &__link {
+        font-weight: bold;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  /* reset table values in <pre> */
+  pre {
+    code {
+
+      table,
+      tbody {
+        all: unset !important;
+      }
+
+      table {
+        tbody {
+
+          td,
+          tr {
+            border: none !important;
+            background-color: transparent !important;
+          }
+        }
+      }
+    }
+  }
+
+  &-end {
+    margin: 40px 0px;
+    font-size: 1.2rem;
+  }
+}

data/_sass/layouts/_resume.scss

@@ -0,0 +1,330 @@
+@use "../components/index";
+
+// mode print
+@media print {
+  @page {
+    size: A4 portrait;
+    margin: 1.5cm;
+  }
+
+  #btn-print,
+  .resume-header__btn-print,
+  button {
+    display: none !important;
+  }
+
+  body,
+  .resume,
+  .container-fluid {
+    background: #fff !important;
+    box-shadow: none !important;
+    border: none !important;
+  }
+
+  body * {
+    visibility: hidden;
+  }
+
+  #print-this,
+  #print-this * {
+    visibility: visible;
+  }
+
+  #print-this {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  .resume {
+    font-size: 11pt;
+    line-height: 1.5;
+    color: #000;
+
+    a {
+      small {
+        display: block !important;
+      }
+    }
+
+    .section {
+      page-break-inside: avoid;
+
+      &-title {
+        font-size: 12pt;
+        font-weight: 700;
+      }
+
+      &-item {
+        font-size: 10.5pt;
+        margin-bottom: 0.4em;
+        page-break-inside: avoid;
+
+        a {
+          color: black;
+          text-decoration: none;
+          font-weight: normal;
+        }
+      }
+    }
+
+    &-content {
+
+      .title {
+        a {
+          color: black;
+          font-weight: bold;
+          text-decoration: none;
+        }
+      }
+
+      // TWO-COLUMN LAYOUT
+      &__sidebar {
+        display: inline-block;
+        vertical-align: top;
+        width: 35%;
+        padding-right: 1cm;
+        box-sizing: border-box;
+        // border-right: 1px solid #ddd;
+      }
+
+      &__body {
+        display: inline-block;
+        vertical-align: top;
+        width: 65%;
+        padding-left: 1cm;
+        box-sizing: border-box;
+      }
+
+      &__name {
+        font-size: 20pt;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+// page resume
+.resume {
+  font-family: "Helvetica", Arial, sans-serif !important;
+  color: var(--resume-content-text-color);
+  background-color: var(--resume-bg-color);
+  padding: 20px;
+  max-width: 900px;
+  margin: 0 auto;
+  line-height: 1.5;
+  font-size: 11pt;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+  border: 1px solid var(--resume-border-color);
+  margin-bottom: 50px;
+
+  .role-company {
+
+    .role,
+    .company {
+      font-weight: 600;
+    }
+
+    .description {
+      font-style: italic;
+      font-size: 12px;
+      margin-left: 12px;
+    }
+  }
+
+  .details {
+    margin-top: 15px;
+    margin-left: 12px;
+
+    ul {
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+
+    li {
+      margin-bottom: 10px;
+    }
+  }
+
+  .section-title {
+    color: var(--resume-title-text-color);
+    font-weight: 700;
+    margin: 0 !important;
+    font-size: 12pt !important;
+    text-transform: uppercase;
+    // border-bottom: 1px solid #ccc !important;
+    text-decoration: underline;
+    margin-bottom: 12px !important;
+    padding-bottom: 0.2em;
+  }
+
+  .section-item {
+    font-size: 10.5pt;
+    margin-bottom: 0.3em;
+
+    &__title {
+      font-weight: 600;
+    }
+  }
+
+  .time {
+    font-size: 9.5pt;
+    color: var(--resume-text-muted-color);
+  }
+
+  &-header {
+    margin-bottom: 1rem;
+
+    &__btn-print {
+      @extend %button;
+      width: 100px;
+      min-width: 80px;
+      margin-right: 15px;
+    }
+  }
+
+  &-content {
+
+    &__name {
+      font-size: 20pt !important;
+      font-weight: 700 !important;
+      margin-bottom: 1em !important;
+    }
+
+    &__sidebar {
+      .photo {
+        width: 110px;
+        height: 140px;
+        border-radius: .5rem;
+        margin-bottom: 1em;
+        // border: 1px solid black;
+        // float: right;
+      }
+
+      .section {
+        margin-bottom: 1.5em;
+
+        &-title {
+          width: 180px;
+        }
+      }
+
+
+      .personal_details {
+        .section-item__title {
+          font-weight: 600;
+        }
+      }
+
+      .skills {
+        .section-item {
+          .group {
+            font-weight: 600;
+          }
+
+          .tools {
+            margin-left: 12px;
+            display: flex;
+            flex-wrap: wrap;
+            max-width: 250px;
+            gap: 4px;
+
+            .tool {
+              white-space: nowrap;
+            }
+          }
+        }
+      }
+    }
+
+    &__body {
+      .section {
+
+        &-item {
+          margin-bottom: 12px;
+        }
+      }
+
+      .sumary {
+        text-align: justify !important;
+
+      }
+
+      .publications {
+        .section-item {
+          .row {
+            p {
+              margin: 0 !important;
+            }
+          }
+
+          .authors {
+            margin-left: 12px;
+          }
+        }
+
+        .conference {
+          font-size: 9.5pt;
+          margin-left: 12px;
+          color: var(--resume-text-muted-color);
+        }
+      }
+
+      .projects {
+        margin-top: 12px;
+
+        .section-item {
+          margin-bottom: 0 !important;
+        }
+
+        .details {
+          margin-top: 8px;
+        }
+
+        .row {
+          p {
+            margin: 0 !important;
+          }
+        }
+      }
+
+      .volunteering {
+        margin-top: 12px;
+
+        .details {
+          margin-top: 12px;
+        }
+      }
+    }
+
+    a {
+      small {
+        font-size: 8pt;
+        display: block;
+        color: var(--resume-text-muted-color);
+        text-decoration: none !important;
+        font-weight: normal;
+        margin-left: 15px;
+        margin-top: -2px;
+        display: none;
+      }
+    }
+
+    .section-item {
+      .title {
+        p {
+          span {
+            font-weight: 600 !important;
+          }
+        }
+      }
+    }
+  }
+
+  .marker {
+    font-size: 1.3rem !important;
+    font-weight: bold;
+  }
+}

data/_sass/layouts/_tag-posts.scss

@@ -0,0 +1,48 @@
+@use "../components/index";
+
+.tag-posts {
+  margin-top: -.1rem !important;
+
+  &-title {
+    font-size: 1.05rem !important;
+    font-weight: bold;
+    font-style: italic;
+    margin: 0px 0px 10px 0px !important;
+
+    span {
+      font-style: normal !important;
+    }
+  }
+
+  &-list {
+    list-style: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+
+    &__item {
+      .draft-badge {
+        @extend %draft-badge;
+      }
+    }
+
+    li {
+      margin: 5px 0px;
+    }
+
+    &__meta {
+      display: inline-block;
+      min-width: 100px;
+      font-family: "SUSE Mono", sans-serif;
+      font-optical-sizing: auto;
+      font-style: normal;
+      line-height: 1rem;
+      color: var(--text-muted-color);
+    }
+
+    &__link {
+      text-transform: none !important;
+      font-weight: bold;
+      text-decoration: underline;
+    }
+  }
+}

data/_sass/layouts/_tag.scss

@@ -0,0 +1,22 @@
+@use "../components/index";
+
+.tag {
+  // box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+  // border: 1px solid #ddd;
+  // background-color: white;
+  // padding: 20px;
+  @extend %markdown;
+
+  &-title {
+    font-size: 1.05rem !important;
+    font-weight: bold;
+    margin: 0px 0px 10px 0px !important;
+  }
+
+  &-list {
+    &__item {
+      display: inline-block;
+      margin-bottom: 12px;
+    }
+  }
+}

data/_sass/main.scss

@@ -0,0 +1,128 @@
+/* by: William C. Canin */
+
+@use "theme" as theme;
+@use "base";
+@use "components";
+@use "layouts";
+@use "includes";
+
+/* TODO: version 0.2.0:
+1 - create other dark and light themes for compilation, and have the option in
+"_config.yml" for example:
+layout:
+     # Available dark themes: default | hacking | grovbox
+     # Available light themes: default | cloud | grovbox
+     theme:
+       light: "cloud"
+       dark: "hacking"
+*/
+:root[data-theme="light"] {
+  --bg-color: #{theme.theme-color(bg, light)};
+  --text-color: #{theme.theme-color(text, light)};
+  --text-muted-color: #{theme.theme-color(text-muted, light)};
+  --primary-color: #{theme.theme-color(primary, light)};
+  --shadow-color: #{theme.theme-color(shadow-color, light)};
+  --code-block-header-color: #{theme.theme-color(code-block-header-color, light)};
+  --code-color: #{theme.theme-color(code-color, light)};
+  --border-color: #{theme.theme-color(border-color, light)};
+  --scrollbar-color: #{theme.theme-color(scrollbar-color, light)};
+  --blockquote-bg-color: #{theme.theme-color(blockquote-bg-color, light)};
+  --footer-border-color: #{theme.theme-color(footer-border-color, light)};
+  --footer-bg-color: #{theme.theme-color(footer-bg-color, light)};
+  --terminal-shadow: #{theme.theme-color(terminal-shadow, light)};
+  --sumary-bg-color: #{theme.theme-color(sumary-bg-color, light)};
+  --checkbox-border-color: #{theme.theme-color(checkbox-border-color, light)};
+  --checkbox-border-color-after: #{theme.theme-color(checkbox-border-color-after, light)};
+  --table-border-color: #{theme.theme-color(table-border-color, light)};
+  --table-color: #{theme.theme-color(table-color, light)};
+  --table-tr-bg-color: #{theme.theme-color(table-tr-bg-color, light)};
+  --table-tr-border-color: #{theme.theme-color(table-tr-border-color, light)};
+  --table-td-border-color: #{theme.theme-color(table-td-border-color, light)};
+  --table-tr-odd-bg-color: #{theme.theme-color(table-tr-odd-bg-color, light)};
+  --table-tr-even-bg-color: #{theme.theme-color(table-tr-even-bg-color, light)};
+  --terminal-color: #{theme.theme-color(terminal-color, light)};
+  --terminal-bg-color: #{theme.theme-color(terminal-bg-color, light)};
+  --terminal-border-color: #{theme.theme-color(terminal-border-color, light)};
+  --terminal-btn-close-bg-color: #{theme.theme-color(terminal-btn-close-bg-color, light)};
+  --terminal-btn-min-bg-color: #{theme.theme-color(terminal-btn-min-bg-color, light)};
+  --terminal-btn-max-bg-color: #{theme.theme-color(terminal-btn-max-bg-color, light)};
+  --terminal-title-color: #{theme.theme-color(terminal-title-color, light)};
+  --terminal-screen-text-shadow: #{theme.theme-color(terminal-screen-text-shadow, light)};
+  --terminal-screen-after-bg-color: #{theme.theme-color(terminal-screen-after-bg-color, light)};
+  --terminal-header-border-bottom-color: #{theme.theme-color(terminal-header-border-bottom-color, light)};
+  --terminal-prompt-text-color: #{theme.theme-color(terminal-prompt-text-color, light)};
+  --terminal-screen-text-transform: #{theme.theme-color(terminal-screen-text-transform, light)};
+  --terminal-cursor-color: #{theme.theme-color(terminal-cursor-color, light)};
+  --terminal-screen-link-color: #{theme.theme-color(terminal-screen-link-color, light)};
+  --details-bg-color: #{theme.theme-color(details-bg-color, light)};
+  --video-border-color: #{theme.theme-color(video-border-color, light)};
+  --chart-bg-color: #{theme.theme-color(chart-bg-color, light)};
+  --chart-box-shadow-color: #{theme.theme-color(chart-box-shadow-color, light)};
+  --tabs-bg-color: #{theme.theme-color(tabs-bg-color, light)};
+  --tabs-color: #{theme.theme-color(tabs-color, light)};
+  --tabs-border-color: #{theme.theme-color(tabs-border-color, light)};
+  --tabs-nav-border-color: #{theme.theme-color(tabs-nav-border-color, light)};
+  --tab-btn-color: #{theme.theme-color(tab-btn-color, light)};
+  --tab-btn-color-hover: #{theme.theme-color(tab-btn-color-hover, light)};
+  --tab-btn-color-active: #{theme.theme-color(tab-btn-color-active, light)};
+  --resume-bg-color: #{theme.theme-color(resume-bg-color, light)};
+  --resume-title-text-color: #{theme.theme-color(resume-title-text-color, light)};
+  --resume-content-text-color: #{theme.theme-color(resume-content-text-color, light)};
+  --resume-text-muted-color: #{theme.theme-color(resume-text-muted-color, light)};
+  --resume-border-color: #{theme.theme-color(resume-border-color, light)};
+}
+
+:root[data-theme="dark"] {
+  --bg-color: #{theme.theme-color(bg, dark)};
+  --text-color: #{theme.theme-color(text, dark)};
+  --text-muted-color: #{theme.theme-color(text-muted, dark)};
+  --primary-color: #{theme.theme-color(primary, dark)};
+  --shadow-color: #{theme.theme-color(shadow-color, dark)};
+  --code-color: #{theme.theme-color(code-color, dark)};
+  --code-block-header-color: #{theme.theme-color(code-block-header-color, dark)};
+  --border-color: #{theme.theme-color(border-color, dark)};
+  --scrollbar-color: #{theme.theme-color(scrollbar-color, dark)};
+  --blockquote-bg-color: #{theme.theme-color(blockquote-bg-color, dark)};
+  --footer-border-color: #{theme.theme-color(footer-border-color, dark)};
+  --footer-bg-color: #{theme.theme-color(footer-bg-color, dark)};
+  --terminal-shadow: #{theme.theme-color(terminal-shadow, dark)};
+  --sumary-bg-color: #{theme.theme-color(sumary-bg-color, dark)};
+  --checkbox-border-color: #{theme.theme-color(checkbox-border-color, dark)};
+  --checkbox-border-color-after: #{theme.theme-color(checkbox-border-color-after, dark)};
+  --table-color: #{theme.theme-color(table-color, dark)};
+  --table-tr-bg-color: #{theme.theme-color(table-tr-bg-color, dark)};
+  --table-tr-border-color: #{theme.theme-color(table-tr-border-color, dark)};
+  --table-td-border-color: #{theme.theme-color(table-td-border-color, dark)};
+  --table-tr-odd-bg-color: #{theme.theme-color(table-tr-odd-bg-color, dark)};
+  --table-tr-even-bg-color: #{theme.theme-color(table-tr-even-bg-color, dark)};
+  --terminal-color: #{theme.theme-color(terminal-color, dark)};
+  --terminal-bg-color: #{theme.theme-color(terminal-bg-color, dark)};
+  --terminal-border-color: #{theme.theme-color(terminal-border-color, dark)};
+  --terminal-btn-close-bg-color: #{theme.theme-color(terminal-btn-close-bg-color, dark)};
+  --terminal-btn-min-bg-color: #{theme.theme-color(terminal-btn-min-bg-color, dark)};
+  --terminal-btn-max-bg-color: #{theme.theme-color(terminal-btn-max-bg-color, dark)};
+  --terminal-title-color: #{theme.theme-color(terminal-title-color, dark)};
+  --terminal-screen-text-shadow: #{theme.theme-color(terminal-screen-text-shadow, dark)};
+  --terminal-screen-after-bg-color: #{theme.theme-color(terminal-screen-after-bg-color, dark)};
+  --terminal-header-border-bottom-color: #{theme.theme-color(terminal-header-border-bottom-color, dark)};
+  --terminal-prompt-text-color: #{theme.theme-color(terminal-prompt-text-color, dark)};
+  --terminal-screen-text-transform: #{theme.theme-color(terminal-screen-text-transform, dark)};
+  --terminal-cursor-color: #{theme.theme-color(terminal-cursor-color, dark)};
+  --terminal-screen-link-color: #{theme.theme-color(terminal-screen-link-color, dark)};
+  --details-bg-color: #{theme.theme-color(details-bg-color, dark)};
+  --video-border-color: #{theme.theme-color(video-border-color, dark)};
+  --chart-bg-color: #{theme.theme-color(chart-bg-color, dark)};
+  --chart-box-shadow-color: #{theme.theme-color(chart-box-shadow-color, dark)};
+  --tabs-bg-color: #{theme.theme-color(tabs-bg-color, dark)};
+  --tabs-color: #{theme.theme-color(tabs-color, dark)};
+  --tabs-border-color: #{theme.theme-color(tabs-border-color, dark)};
+  --tabs-nav-border-color: #{theme.theme-color(tabs-nav-border-color, dark)};
+  --tab-btn-color: #{theme.theme-color(tab-btn-color, dark)};
+  --tab-btn-color-hover: #{theme.theme-color(tab-btn-color-hover, dark)};
+  --tab-btn-color-active: #{theme.theme-color(tab-btn-color-active, dark)};
+  --resume-bg-color: #{theme.theme-color(resume-bg-color, dark)};
+  --resume-title-text-color: #{theme.theme-color(resume-title-text-color, dark)};
+  --resume-content-text-color: #{theme.theme-color(resume-content-text-color, dark)};
+  --resume-text-muted-color: #{theme.theme-color(resume-text-muted-color, dark)};
+  --resume-border-color: #{theme.theme-color(resume-border-color, dark)};
+}