514 GitHub issue page

_config.yml

@@ -18,6 +18,8 @@ collections:
     output: true
   sponsors:
   testimonials:
+  guide-pages:
+    output: true
 
 defaults:
   - scope:

_guide-pages/github-issues.md

@@ -0,0 +1,11 @@
+---
+title: Getting the Most Out of GitHub Issues
+description: Each of Hack for LA’s GitHub project repositories (repos) use [issues](https://guides.github.com/features/issues/) to track and organize ideas, enhancements, and tasks. All team members will use GitHub issues to communicate in our multifunctional teams.
+
+#  When creating a new GitHub issue, the following tips will help you provide consistent formatting, a clear and concise overview, actionable tasks, explanatory resources, and resumé items to add value for all volunteers. <br/><br/>
+#  <em>All GitHub Issues use <strong>markdown</strong> for formatting. View GitHub’s <a href="https://guides.github.com/features/mastering-markdown/">Mastering Markdown</a> for a simple guide.</em>
+# in-this-guide: 
+#     - name: Example of a Good End-to-End Issue
+#       link: "#example-issue"
+
+---

_layouts/guide-pages.html

@@ -0,0 +1,28 @@
+---
+layout: default
+---
+
+<img class='page-hero' src="assets/images/guides/github-issue-hero.png">
+
+<div class="header-content">
+    <div class="left-col"> 
+        <h2>{{ page.title }}</h2>
+        <p>
+            {{ page.description }}
+        </p>
+    </div>
+    <div class="border-right"></div>
+    <br>
+    <div class="right-col">
+        <h3><strong>In This Guide</strong></h3>
+        <ul>
+            <li><a href="#example-issue">Example of a Good End-to-End Issue</a>
+            <li><a href="#issue-sections">Issue Sections: Description and Tips</a></li>
+            <li><a href="#issue-template">Issue Template <em>(Copy & Paste)</em></a></li>
+            <li><a href="#member-analytics">Member Analytics</a></li>
+        </ul>
+
+    </div>
+</div>
+
+{{ content | markdownify }}

_sass/_main.scss

@@ -44,6 +44,7 @@
 @import 'components/home-getting-started';
 @import 'components/getting-started-page.scss';
 @import 'components/project-meetings.scss';
+@import 'components/github-issue-guide.scss';
 
 // /**
 //  * Layouts

_sass/components/github-issue-guide.scss

@@ -0,0 +1,329 @@
+//CSS FOR Pink Arrows/Pointers
+// .left {
+//   width: 5px;
+//   height: 5px;
+//   background: $color-red;
+//   border-radius: 50%;
+// }
+
+// .arrow {
+//   border-top: 2px solid $color-red;
+// }
+
+// VARIABLES FOR OVERLAY LINKS
+@mixin right-overlay {
+  position: absolute;
+  left: 93%;
+  width: 7%;
+}
+@mixin right-text-overlay {
+  position: absolute;
+  left: 100.5%;
+}
+
+@mixin left-overlay {
+  position: absolute;
+  right: 93%;
+  width: 7%;
+}
+@mixin left-text-overlay {
+  position: absolute;
+  right: 92%;
+  width: 10%;
+  direction: rtl;
+  text-align: start;
+}
+
+body {
+  background-color: $color-pink;
+}
+
+.page-hero {
+    background-size: cover !important;
+    background-color: $color-white;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    position: relative;
+    margin-top: 29px;
+    width: 100vw;  
+
+    &::after {
+      @include position(absolute, 0 0 0 0);
+      background: linear-gradient(
+        to bottom,
+        rgba($color-blue-dark, 0.3) 0%,
+        rgba($color-blue-dark, 1) 100%
+      );
+      content: "";
+      display: block;
+      z-index: 1;
+
+      @media #{$bp-tablet-up} {
+        background: linear-gradient(
+          to bottom,
+          rgba($color-blue-dark, 0) 30%,
+          rgba($color-blue-dark, 1) 100%
+        );
+        opacity: 1;
+      }
+
+      // NEW MOBILE FRIENDLY RULES
+      @media #{$bp-below-mobile} {
+        background: linear-gradient(to bottom, rgba(3,13,45,0.3) 30%, #030d2d 100%);
+      }
+    }
+}
+
+.header-content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    width: 100%;
+    padding: 5%;
+    background-color: $color-white;
+
+    .left-col {
+        width: 50%;
+        margin-left: 5%;
+    }
+    .right-col {
+        width: 30%;
+    }
+
+    @media #{$bp-below-mobile} {
+      .left-col {
+          width: 100%;
+          margin: 5%;
+      }
+      .right-col {
+          margin: 5%;
+          width: 100%;
+      }
+    }
+}
+
+//only show header divider if screen is bigger than mobile
+@media #{$bp-mobile-up} {
+  .border-right {
+    border-right: 1px solid rgba(0,0,0, 0.3);
+    max-height: 330px;
+    height: 300px;
+    margin: 5%;
+    justify-content: center;
+  }
+}
+
+h5 {
+    font-size: 1.2em;
+    font-weight: normal;
+}
+
+h4 {
+  text-align: left;
+}
+
+p {
+  text-align: left;
+}
+
+img {
+  display: table-cell;
+  vertical-align: top;
+}
+
+.subheading {
+  text-align: center;
+}
+
+.black-font {
+  color: black;
+}
+
+.img-and-caption {
+  display: inline-block;
+}
+
+.img-caption {
+  font-style: italic;
+  font-size: 0.9em;
+  margin-top: -1.0%;
+  text-align: left;
+  padding-left: 5%;
+}
+
+.inline-text-with-title {
+  display: flex;
+}
+
+.section-container {
+  background: $color-white;
+  box-shadow: 0px 4px 8px rgba(51, 51, 51, 0.2);
+  border-radius: 10px;
+  margin: 5%;
+  padding: 5% 12.5%;
+  text-align: center;
+}
+
+.issue-template-code {
+  border: 1px solid $color-pink;
+  background-color: $color-pink;
+  font-family: monospace;
+  text-align: left;
+}
+
+//
+// STYLING FOR Example of a Good End-to-End Issue OVERLAY LINKS
+//
+.overlay-links {
+  position: relative;
+
+  h4 {
+    font-size: 0.85em;
+  }
+}
+
+.link-section p {
+  text-align: center;
+}
+
+.screenshot {
+  max-width: none;
+  width: 100%;
+}
+
+//INDIVIDUAL PLACEMENTS OF OVERLAY LINKS 
+//RIGHT SIDE LINKS
+.assignees {
+  @include right-overlay;
+  top: 17.5%;
+
+  + h4 {
+    @include right-text-overlay;
+    top: 17.5%;
+  }
+}
+
+.labels {
+  @include right-overlay;
+  top: 21%;
+
+  + h4 {
+    @include right-text-overlay;
+    top: 21%;
+  }
+}
+
+.project-board {
+  @include right-overlay;
+  top: 27.5%;
+
+  + h4 {
+    @include right-text-overlay;
+    top: 27.5%;
+  }
+}
+
+.milestones {
+  @include right-overlay;
+  top: 36%;
+
+  + h4 {
+    @include right-text-overlay;
+    top: 36%;
+  }
+} 
+
+//LEFT SIDE LINKS 
+.left-pointer {
+  transform: rotate(180deg);
+}
+
+.title {
+  @include left-overlay;
+  right: 99%;
+  top: 9%;
+
+  + h4 {
+    @include left-text-overlay;
+    top: 9%;
+    right: 98%;
+  }
+} 
+
+.overview {
+  @include left-overlay;
+  top: 19%;
+
+  + h4 {
+    @include left-text-overlay;
+    top: 19%;
+  }
+}
+
+.dependency {
+  @include left-overlay;
+  top: 25.5%;
+
+  + h4 {
+    @include left-text-overlay;
+    top: 25.5%;
+  }
+}
+
+.action-items {
+  @include left-overlay;
+  top: 30.5%;
+
+  + h4 {
+    @include left-text-overlay;
+    top: 30.5%;
+  }
+}
+
+.resources {
+  @include left-overlay;
+  top: 54.5%;
+
+  + h4 {
+    @include left-text-overlay;
+    top: 54.5%;
+  }
+}
+
+.resume {
+  @include left-overlay;
+  top: 62.4%;
+
+  + h4 {
+    @include left-text-overlay;
+    top: 62.4%;
+  }
+}
+
+
+//Scale overlay-text down on smaller screens
+@media #{$bp-below-tablet} {
+  .overlay-links h4 {
+    font-size: 0.4em;
+  }
+  img {
+    width: 85%;
+  }
+
+  #title {
+    @include left-overlay;
+    top: 9%;
+
+    + h4 {
+      @include left-text-overlay;
+      top: 9%;
+    }
+  } 
+}
+
+.grayarrow {
+  //height: 20px;
+  width: 20px;
+  max-width: none;
+}