From fcad84526cf72dab9623b928eb139eecd0788fee Mon Sep 17 00:00:00 2001 From: krrrr38 Date: Fri, 27 Jan 2023 19:50:34 +0900 Subject: [PATCH 1/4] merge scss into index.scss --- runatlantis.io/.vuepress/styles/index.scss | 361 ++++++++++++++++-- .../.vuepress/theme/components/Home.vue | 290 -------------- 2 files changed, 324 insertions(+), 327 deletions(-) diff --git a/runatlantis.io/.vuepress/styles/index.scss b/runatlantis.io/.vuepress/styles/index.scss index 64452cd7d1..2cbf99eb5d 100644 --- a/runatlantis.io/.vuepress/styles/index.scss +++ b/runatlantis.io/.vuepress/styles/index.scss @@ -1,41 +1,328 @@ +// 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; + } + } + } +} + .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; + 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; + } + } + } } .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 @@ } } - - From abf668f96500f85c8b455889d4bccafcf48f5058 Mon Sep 17 00:00:00 2001 From: krrrr38 Date: Sat, 28 Jan 2023 02:54:06 +0900 Subject: [PATCH 2/4] apply darkmode on docs Home using predefined var color --- runatlantis.io/.vuepress/styles/index.scss | 115 +++------------------ 1 file changed, 15 insertions(+), 100 deletions(-) diff --git a/runatlantis.io/.vuepress/styles/index.scss b/runatlantis.io/.vuepress/styles/index.scss index 2cbf99eb5d..6daf19f232 100644 --- a/runatlantis.io/.vuepress/styles/index.scss +++ b/runatlantis.io/.vuepress/styles/index.scss @@ -1,9 +1,13 @@ +// https://v2.vuepress.vuejs.org/reference/default-theme/styles.html#style-file + // colors -$accentColor: #3eaf7c; -$textColor: #2c3e50; -$borderColor: #eaecef; -$codeBgColor: #282c34; -$arrowBgColor: #ccc; +$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; @@ -16,8 +20,6 @@ $MQMobile: 719px; $MQMobileNarrow: 419px; $homeWidth: 960px; -$buttonColor: #34be68; -$darkBackground: rgb(250, 250, 250); .container { padding-top: 3.6rem; @@ -45,7 +47,6 @@ $darkBackground: rgb(250, 250, 250); font-family: Lato, sans-serif; font-size: 1.9rem; line-height: 1.3; - color: lighten($textColor, 20%); } .action { display: inline; @@ -53,60 +54,22 @@ $darkBackground: rgb(250, 250, 250); .action-button { display: inline-block; font-size: 1.2rem; - color: #fff; + color: $buttonTextColor; + cursor: pointer; 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; - } + background-color: $buttonHoverColor; } } } 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; @@ -116,7 +79,6 @@ $darkBackground: rgb(250, 250, 250); padding: 2.5rem; border-top: 1px solid $borderColor; text-align: center; - color: lighten($textColor, 25%); } } @@ -139,41 +101,18 @@ $darkBackground: rgb(250, 250, 250); .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%); + border-top: 1px solid $darkBackgroundBorder; .benefit-container { - border-bottom: 1px solid darken($darkBackground, 10%); + border-bottom: 1px solid $darkBackgroundBorder; .title { padding-top: 40px; text-align: center; } &.-dark { - background-color: rgb(250, 250, 250); - } - &.-green { - background-color: #61c589; - color: white; + background-color: $darkBackground; } .benefit { max-width: $homeWidth; @@ -221,16 +160,6 @@ $darkBackground: rgb(250, 250, 250); } @media (max-width: $MQMobile) { - .home { - .features { - flex-direction: column - } - .feature { - max-width: 100%; - padding: 0 2.5rem; - } - } - .workflow { .mobile { display: block; @@ -277,11 +206,6 @@ $darkBackground: rgb(250, 250, 250); padding: 0.6rem 1.2rem; } } - .feature { - h2 { - font-size: 1.25rem; - } - } } } @@ -292,7 +216,6 @@ $darkBackground: rgb(250, 250, 250); font-size: 64px; font-family: Lato, sans-serif; font-weight: 900; - color: #222; } img { height: 200px; @@ -313,14 +236,6 @@ $darkBackground: rgb(250, 250, 250); } } } - .feature { - h2 { - color: #222; - } - p { - color: #222; - } - } } } .sidebar-heading { From a10130351c95aa96c6fd44fd0d491c076eedcb5e Mon Sep 17 00:00:00 2001 From: krrrr38 Date: Sat, 28 Jan 2023 07:23:30 +0900 Subject: [PATCH 3/4] codeql/labeler github action for handling draft pr --- .github/workflows/codeql.yml | 5 +++++ .github/workflows/labeler.yml | 7 ++++++- 2 files changed, 11 insertions(+), 1 deletion(-) 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..1e395617e9 100644 --- a/.github/workflows/labeler.yml +++ b/.github/workflows/labeler.yml @@ -1,7 +1,12 @@ name: "Pull Request Labeler" on: - pull_request_target: + pull_request: + types: + - opened + - reopened + - synchronize + - ready_for_review jobs: triage: From e9edbd20ede77a908ac0c3c27dfd87cddc4f311d Mon Sep 17 00:00:00 2001 From: krrrr38 Date: Sat, 28 Jan 2023 07:25:22 +0900 Subject: [PATCH 4/4] labeler require pull_requiest_target --- .github/workflows/labeler.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/labeler.yml b/.github/workflows/labeler.yml index 1e395617e9..0ecde30411 100644 --- a/.github/workflows/labeler.yml +++ b/.github/workflows/labeler.yml @@ -1,7 +1,7 @@ name: "Pull Request Labeler" on: - pull_request: + pull_request_target: types: - opened - reopened