From c88e59f60d51806d963466e1dd1c92c67a28d0b5 Mon Sep 17 00:00:00 2001
From: Ken Kaizu <k.kaizu38@gmail.com>
Date: Sat, 28 Jan 2023 08:02:48 +0900
Subject: [PATCH] docs: apply home dark mode (#3062)

* merge scss into index.scss

* apply darkmode on docs Home using predefined var color

* codeql/labeler github action for handling draft pr

* labeler require pull_requiest_target
---
 .github/workflows/codeql.yml                  |   5 +
 .github/workflows/labeler.yml                 |   5 +
 runatlantis.io/.vuepress/styles/index.scss    | 276 ++++++++++++++---
 .../.vuepress/theme/components/Home.vue       | 290 ------------------
 4 files changed, 249 insertions(+), 327 deletions(-)

diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index 212ef9d444..3698a799e7 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -18,6 +18,11 @@ on:
       - '.github/**'
   pull_request:
     # The branches below must be a subset of the branches above
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - ready_for_review
     branches: [ "main" ]
     paths-ignore:
       - '.github/**'
diff --git a/.github/workflows/labeler.yml b/.github/workflows/labeler.yml
index 480ec9f01b..0ecde30411 100644
--- a/.github/workflows/labeler.yml
+++ b/.github/workflows/labeler.yml
@@ -2,6 +2,11 @@ name: "Pull Request Labeler"
 
 on:
   pull_request_target:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - ready_for_review
 
 jobs:
   triage:
diff --git a/runatlantis.io/.vuepress/styles/index.scss b/runatlantis.io/.vuepress/styles/index.scss
index 64452cd7d1..6daf19f232 100644
--- a/runatlantis.io/.vuepress/styles/index.scss
+++ b/runatlantis.io/.vuepress/styles/index.scss
@@ -1,41 +1,243 @@
+// https://v2.vuepress.vuejs.org/reference/default-theme/styles.html#style-file
+
+// colors
+$textColor: var(--c-text);
+$borderColor: var(--c-border);
+$buttonTextColor: var(--c-badge-danger-text);
+$buttonColor: var(--c-brand);
+$buttonHoverColor: var(--c-brand-light);
+$darkBackground: var(--c-bg-light);
+$darkBackgroundBorder: var(--c-border-dark);
+
+// layout
+$navbarHeight: 3.6rem;
+$sidebarWidth: 20rem;
+$contentWidth: 740px;
+
+// responsive breakpoints
+$MQNarrow: 959px;
+$MQMobile: 719px;
+$MQMobileNarrow: 419px;
+
+$homeWidth: 960px;
+
+.container {
+  padding-top: 3.6rem;
+}
+
+.home {
+  padding: 0 2rem;
+  max-width: $homeWidth;
+  margin: 0px auto 80px;
+  .hero {
+    text-align: center;
+    img {
+      max-height: 280px;
+      display: block;
+      margin: 3rem auto 1.5rem;
+    }
+    h1 {
+      font-size: 3rem;
+    }
+    h1, .description, .action {
+      margin: 1.8rem auto;
+    }
+    .description {
+      max-width: 35rem;
+      font-family: Lato, sans-serif;
+      font-size: 1.9rem;
+      line-height: 1.3;
+    }
+    .action {
+      display: inline;
+    }
+    .action-button {
+      display: inline-block;
+      font-size: 1.2rem;
+      color: $buttonTextColor;
+      cursor: pointer;
+      background-color: $buttonColor;
+      padding: 0.8rem 1.6rem;
+      border-radius: 4px;
+      transition: background-color .1s ease;
+      box-sizing: border-box;
+      margin: 0 10px;
+      &:hover {
+        background-color: $buttonHoverColor;
+      }
+    }
+  }
+  h2 {
+    border-bottom: none;
+  }
+  .features {
+    border-top: 1px solid $borderColor;
+    padding: 1.2rem 0;
+    margin-top: 0;
+  }
+  .footer {
+    padding: 2.5rem;
+    border-top: 1px solid $borderColor;
+    text-align: center;
+  }
+}
+
+.getting-started-footer {
+  padding: 2.5rem 0;
+  margin: 0 auto;
+}
+
+.workflow-container {
+  border-top: 2px solid $borderColor;
+}
+
+.workflow {
+  text-align: center;
+  margin: 80px auto;
+  max-width: $homeWidth;
+  img {
+    width: 100%;
+  }
+  .mobile {
+    display: none;
+  }
+}
+
+.benefits-container {
+   border-top: 1px solid $darkBackgroundBorder;
+  .benefit-container {
+    border-bottom: 1px solid $darkBackgroundBorder;
+    .title {
+      padding-top: 40px;
+      text-align: center;
+    }
+    &.-dark {
+      background-color: $darkBackground;
+    }
+    .benefit {
+      max-width: $homeWidth;
+      margin: 0 auto;
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+      .item {
+        flex-basis: 50%;
+        flex-grow: 1;
+        min-width: 250px;
+        .image {
+          padding: 40px;
+          text-align: center;
+          img {
+            max-height: 200px;
+          }
+        }
+      }
+      .description {
+        padding: 40px;
+        h2 {
+          border: none;
+        }
+        ul {
+          list-style-type: none;
+          padding-left: 0;
+        }
+        li {
+          display: flex;
+          align-items: center;
+          line-height: 25px;
+          margin-bottom: 20px;
+        }
+        .checkmark {
+          width: 20px;
+          margin-right: 10px;
+          vertical-align: middle;
+          align-self: baseline;
+          padding-top: 5px;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: $MQMobile) {
+  .workflow {
+    .mobile {
+      display: block;
+    }
+    .desktop {
+      display: none;
+    }
+  }
+
+  .benefits-container {
+    .benefit-container {
+      .benefit {
+        flex-direction: column;
+        .item {
+          &.image {
+            order: -1;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: $MQMobileNarrow) {
+  .home {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    .hero {
+      img {
+        max-height: 210px;
+        margin: 2rem auto 1.2rem;
+      }
+      h1 {
+        font-size: 2rem;
+      }
+      h1, .description, .action {
+        margin: 1.2rem auto;
+      }
+      .description {
+        font-size: 1.2rem;
+      }
+      .action-button {
+        font-size: 1rem;
+        padding: 0.6rem 1.2rem;
+      }
+    }
+  }
+}
+
 .theme-container {
-	&.home-custom {
-		.hero {
-			h1 {
-				font-size: 64px;
-				font-family: Lato, sans-serif;
-				font-weight: 900;
-				color: #222;
-			}
-			img {
-				height: 200px;
-			}
-		}
-		p {
-			&.description {
-				position: relative;
-				&:before {
-					position: absolute;
-					content: '';
-					width: 40px;
-					height: 3px;
-					top: -19px;
-					left: 50%;
-					margin-left: -20px;
-					background: #f36;
-				}
-			}
-		}
-		.feature {
-			h2 {
-				color: #222;
-			}
-			p {
-				color: #222;
-			}
-		}
-	}
+  &.home-custom {
+    .hero {
+      h1 {
+        font-size: 64px;
+        font-family: Lato, sans-serif;
+        font-weight: 900;
+      }
+      img {
+        height: 200px;
+      }
+    }
+    p {
+      &.description {
+        position: relative;
+        &:before {
+          position: absolute;
+          content: '';
+          width: 40px;
+          height: 3px;
+          top: -19px;
+          left: 50%;
+          margin-left: -20px;
+          background: #f36;
+        }
+      }
+    }
+  }
 }
 .sidebar-heading {
-	font-size: inherit;
+  font-size: inherit;
 }
diff --git a/runatlantis.io/.vuepress/theme/components/Home.vue b/runatlantis.io/.vuepress/theme/components/Home.vue
index 4a17c0e2dd..271a574c85 100644
--- a/runatlantis.io/.vuepress/theme/components/Home.vue
+++ b/runatlantis.io/.vuepress/theme/components/Home.vue
@@ -173,293 +173,3 @@
         }
     }
 </script>
-
-<style lang="scss">
-  // colors
-  $accentColor: #3eaf7c;
-  $textColor: #2c3e50;
-  $borderColor: #eaecef;
-  $codeBgColor: #282c34;
-  $arrowBgColor: #ccc;
-
-  // layout
-  $navbarHeight: 3.6rem;
-  $sidebarWidth: 20rem;
-  $contentWidth: 740px;
-
-  // responsive breakpoints
-  $MQNarrow: 959px;
-  $MQMobile: 719px;
-  $MQMobileNarrow: 419px;
-
-  $homeWidth: 960px;
-  $buttonColor: #34be68;
-  $darkBackground: rgb(250, 250, 250);
-
-  .container {
-    padding-top: 3.6rem;
-  }
-
-  .home {
-    padding: 0 2rem;
-    max-width: $homeWidth;
-    margin: 0px auto 80px;
-    .hero {
-      text-align: center;
-      img {
-        max-height: 280px;
-        display: block;
-        margin: 3rem auto 1.5rem;
-      }
-      h1 {
-        font-size: 3rem;
-      }
-      h1, .description, .action {
-        margin: 1.8rem auto;
-      }
-      .description {
-        max-width: 35rem;
-        font-family: Lato, sans-serif;
-        font-size: 1.9rem;
-        line-height: 1.3;
-        color: lighten($textColor, 20%);
-      }
-      .action {
-        display: inline;
-      }
-      .action-button {
-        display: inline-block;
-        font-size: 1.2rem;
-        color: #fff;
-        background-color: $buttonColor;
-        padding: 0.8rem 1.6rem;
-        border-radius: 4px;
-        transition: background-color .1s ease;
-        box-sizing: border-box;
-        border-bottom: 1px solid darken($buttonColor, 10%);
-        margin: 0 10px;
-        &:hover {
-          background-color: lighten($buttonColor, 10%);
-        }
-        &.-nofill {
-          color: darken($buttonColor, 10%);
-          background-color: white;
-          border: 2px solid darken($buttonColor, 10%);
-          padding: 0.7rem 1.5rem;
-          &:hover {
-            color: #fff;
-            background-color: $buttonColor;
-          }
-        }
-      }
-    }
-    h2 {
-      border-bottom: none;
-    }
-    .companies {
-      text-align: center;
-      margin-top: 40px;
-      h2 {
-        color: lighten($textColor, 20%);
-        font-size: 1.3rem;
-      }
-    }
-    .company-list {
-      display: flex;
-      align-items: center;
-      align-content: stretch;
-      justify-content: space-between;
-    }
-    .company {
-      flex-grow: 1;
-      flex-basis: 25%;
-      max-width: 25%;
-      text-align: center;
-      font-family: Lato, sans-serif;
-      font-size: 1.6rem;
-      line-height: 1.3;
-      color: lighten($textColor, 20%);
-      border-right: 1px solid $borderColor;
-      &.-last {
-        border-right: none;
-      }
-    }
-    .features {
-      border-top: 1px solid $borderColor;
-      padding: 1.2rem 0;
-      margin-top: 0;
-    }
-    .footer {
-      padding: 2.5rem;
-      border-top: 1px solid $borderColor;
-      text-align: center;
-      color: lighten($textColor, 25%);
-    }
-  }
-
-  .getting-started-footer {
-    padding: 2.5rem 0;
-    margin: 0 auto;
-  }
-
-  .workflow-container {
-    border-top: 2px solid $borderColor;
-  }
-
-  .workflow {
-    text-align: center;
-    margin: 80px auto;
-    max-width: $homeWidth;
-    img {
-      width: 100%;
-    }
-    .mobile {
-      display: none;
-    }
-    .steps-container {
-      max-width: $homeWidth;
-      margin: 0 auto;
-      padding: 0 10px;
-      .steps {
-        display: flex;
-        flex-flow: row nowrap;
-        justify-content: flex-start;
-        .step {
-          text-align: center;
-          flex-grow: 0;
-          flex-shrink: 0;
-          flex-basis: 192px;
-          &.-first {
-            padding-right: 10px;
-          }
-        }
-      }
-    }
-  }
-
-  .benefits-container {
-    border-top: 1px solid darken($darkBackground, 10%);
-    .benefit-container {
-      border-bottom: 1px solid darken($darkBackground, 10%);
-      .title {
-        padding-top: 40px;
-        text-align: center;
-      }
-      &.-dark {
-        background-color: rgb(250, 250, 250);
-      }
-      &.-green {
-        background-color: #61c589;
-        color: white;
-      }
-      .benefit {
-        max-width: $homeWidth;
-        margin: 0 auto;
-        display: flex;
-        flex-flow: row wrap;
-        align-items: center;
-        .item {
-          flex-basis: 50%;
-          flex-grow: 1;
-          min-width: 250px;
-          .image {
-            padding: 40px;
-            text-align: center;
-            img {
-              max-height: 200px;
-            }
-          }
-        }
-        .description {
-          padding: 40px;
-          h2 {
-            border: none;
-          }
-          ul {
-            list-style-type: none;
-            padding-left: 0;
-          }
-          li {
-            display: flex;
-            align-items: center;
-            line-height: 25px;
-            margin-bottom: 20px;
-          }
-          .checkmark {
-            width: 20px;
-            margin-right: 10px;
-            vertical-align: middle;
-            align-self: baseline;
-            padding-top: 5px;
-          }
-        }
-      }
-    }
-  }
-
-  @media (max-width: $MQMobile) {
-    .home {
-      .features {
-        flex-direction: column
-      }
-      .feature {
-        max-width: 100%;
-        padding: 0 2.5rem;
-      }
-    }
-
-    .workflow {
-      .mobile {
-        display: block;
-      }
-      .desktop {
-        display: none;
-      }
-    }
-
-    .benefits-container {
-      .benefit-container {
-        .benefit {
-          flex-direction: column;
-          .item {
-            &.image {
-              order: -1;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  @media (max-width: $MQMobileNarrow) {
-    .home {
-      padding-left: 1.5rem;
-      padding-right: 1.5rem;
-      .hero {
-        img {
-          max-height: 210px;
-          margin: 2rem auto 1.2rem;
-        }
-        h1 {
-          font-size: 2rem;
-        }
-        h1, .description, .action {
-          margin: 1.2rem auto;
-        }
-        .description {
-          font-size: 1.2rem;
-        }
-        .action-button {
-          font-size: 1rem;
-          padding: 0.6rem 1.2rem;
-        }
-      }
-      .feature {
-        h2 {
-          font-size: 1.25rem;
-        }
-      }
-    }
-  }
-
-</style>