Skip to content

Commit c88e59f

Browse files
krrrr38ddumitrache
krrrr38
authored and
ddumitrache
committed
docs: apply home dark mode (runatlantis#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
1 parent 65286b0 commit c88e59f

File tree

4 files changed

+249
-327
lines changed

4 files changed

+249
-327
lines changed

‎.github/workflows/codeql.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ on:
1818
- '.github/**'
1919
pull_request:
2020
# The branches below must be a subset of the branches above
21+
types:
22+
- opened
23+
- reopened
24+
- synchronize
25+
- ready_for_review
2126
branches: [ "main" ]
2227
paths-ignore:
2328
- '.github/**'

‎.github/workflows/labeler.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ name: "Pull Request Labeler"
22

33
on:
44
pull_request_target:
5+
types:
6+
- opened
7+
- reopened
8+
- synchronize
9+
- ready_for_review
510

611
jobs:
712
triage:

‎runatlantis.io/.vuepress/styles/index.scss

Lines changed: 239 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,243 @@
1+
// https://v2.vuepress.vuejs.org/reference/default-theme/styles.html#style-file
2+
3+
// colors
4+
$textColor: var(--c-text);
5+
$borderColor: var(--c-border);
6+
$buttonTextColor: var(--c-badge-danger-text);
7+
$buttonColor: var(--c-brand);
8+
$buttonHoverColor: var(--c-brand-light);
9+
$darkBackground: var(--c-bg-light);
10+
$darkBackgroundBorder: var(--c-border-dark);
11+
12+
// layout
13+
$navbarHeight: 3.6rem;
14+
$sidebarWidth: 20rem;
15+
$contentWidth: 740px;
16+
17+
// responsive breakpoints
18+
$MQNarrow: 959px;
19+
$MQMobile: 719px;
20+
$MQMobileNarrow: 419px;
21+
22+
$homeWidth: 960px;
23+
24+
.container {
25+
padding-top: 3.6rem;
26+
}
27+
28+
.home {
29+
padding: 0 2rem;
30+
max-width: $homeWidth;
31+
margin: 0px auto 80px;
32+
.hero {
33+
text-align: center;
34+
img {
35+
max-height: 280px;
36+
display: block;
37+
margin: 3rem auto 1.5rem;
38+
}
39+
h1 {
40+
font-size: 3rem;
41+
}
42+
h1, .description, .action {
43+
margin: 1.8rem auto;
44+
}
45+
.description {
46+
max-width: 35rem;
47+
font-family: Lato, sans-serif;
48+
font-size: 1.9rem;
49+
line-height: 1.3;
50+
}
51+
.action {
52+
display: inline;
53+
}
54+
.action-button {
55+
display: inline-block;
56+
font-size: 1.2rem;
57+
color: $buttonTextColor;
58+
cursor: pointer;
59+
background-color: $buttonColor;
60+
padding: 0.8rem 1.6rem;
61+
border-radius: 4px;
62+
transition: background-color .1s ease;
63+
box-sizing: border-box;
64+
margin: 0 10px;
65+
&:hover {
66+
background-color: $buttonHoverColor;
67+
}
68+
}
69+
}
70+
h2 {
71+
border-bottom: none;
72+
}
73+
.features {
74+
border-top: 1px solid $borderColor;
75+
padding: 1.2rem 0;
76+
margin-top: 0;
77+
}
78+
.footer {
79+
padding: 2.5rem;
80+
border-top: 1px solid $borderColor;
81+
text-align: center;
82+
}
83+
}
84+
85+
.getting-started-footer {
86+
padding: 2.5rem 0;
87+
margin: 0 auto;
88+
}
89+
90+
.workflow-container {
91+
border-top: 2px solid $borderColor;
92+
}
93+
94+
.workflow {
95+
text-align: center;
96+
margin: 80px auto;
97+
max-width: $homeWidth;
98+
img {
99+
width: 100%;
100+
}
101+
.mobile {
102+
display: none;
103+
}
104+
}
105+
106+
.benefits-container {
107+
border-top: 1px solid $darkBackgroundBorder;
108+
.benefit-container {
109+
border-bottom: 1px solid $darkBackgroundBorder;
110+
.title {
111+
padding-top: 40px;
112+
text-align: center;
113+
}
114+
&.-dark {
115+
background-color: $darkBackground;
116+
}
117+
.benefit {
118+
max-width: $homeWidth;
119+
margin: 0 auto;
120+
display: flex;
121+
flex-flow: row wrap;
122+
align-items: center;
123+
.item {
124+
flex-basis: 50%;
125+
flex-grow: 1;
126+
min-width: 250px;
127+
.image {
128+
padding: 40px;
129+
text-align: center;
130+
img {
131+
max-height: 200px;
132+
}
133+
}
134+
}
135+
.description {
136+
padding: 40px;
137+
h2 {
138+
border: none;
139+
}
140+
ul {
141+
list-style-type: none;
142+
padding-left: 0;
143+
}
144+
li {
145+
display: flex;
146+
align-items: center;
147+
line-height: 25px;
148+
margin-bottom: 20px;
149+
}
150+
.checkmark {
151+
width: 20px;
152+
margin-right: 10px;
153+
vertical-align: middle;
154+
align-self: baseline;
155+
padding-top: 5px;
156+
}
157+
}
158+
}
159+
}
160+
}
161+
162+
@media (max-width: $MQMobile) {
163+
.workflow {
164+
.mobile {
165+
display: block;
166+
}
167+
.desktop {
168+
display: none;
169+
}
170+
}
171+
172+
.benefits-container {
173+
.benefit-container {
174+
.benefit {
175+
flex-direction: column;
176+
.item {
177+
&.image {
178+
order: -1;
179+
}
180+
}
181+
}
182+
}
183+
}
184+
}
185+
186+
@media (max-width: $MQMobileNarrow) {
187+
.home {
188+
padding-left: 1.5rem;
189+
padding-right: 1.5rem;
190+
.hero {
191+
img {
192+
max-height: 210px;
193+
margin: 2rem auto 1.2rem;
194+
}
195+
h1 {
196+
font-size: 2rem;
197+
}
198+
h1, .description, .action {
199+
margin: 1.2rem auto;
200+
}
201+
.description {
202+
font-size: 1.2rem;
203+
}
204+
.action-button {
205+
font-size: 1rem;
206+
padding: 0.6rem 1.2rem;
207+
}
208+
}
209+
}
210+
}
211+
1212
.theme-container {
2-
&.home-custom {
3-
.hero {
4-
h1 {
5-
font-size: 64px;
6-
font-family: Lato, sans-serif;
7-
font-weight: 900;
8-
color: #222;
9-
}
10-
img {
11-
height: 200px;
12-
}
13-
}
14-
p {
15-
&.description {
16-
position: relative;
17-
&:before {
18-
position: absolute;
19-
content: '';
20-
width: 40px;
21-
height: 3px;
22-
top: -19px;
23-
left: 50%;
24-
margin-left: -20px;
25-
background: #f36;
26-
}
27-
}
28-
}
29-
.feature {
30-
h2 {
31-
color: #222;
32-
}
33-
p {
34-
color: #222;
35-
}
36-
}
37-
}
213+
&.home-custom {
214+
.hero {
215+
h1 {
216+
font-size: 64px;
217+
font-family: Lato, sans-serif;
218+
font-weight: 900;
219+
}
220+
img {
221+
height: 200px;
222+
}
223+
}
224+
p {
225+
&.description {
226+
position: relative;
227+
&:before {
228+
position: absolute;
229+
content: '';
230+
width: 40px;
231+
height: 3px;
232+
top: -19px;
233+
left: 50%;
234+
margin-left: -20px;
235+
background: #f36;
236+
}
237+
}
238+
}
239+
}
38240
}
39241
.sidebar-heading {
40-
font-size: inherit;
242+
font-size: inherit;
41243
}

0 commit comments

Comments
 (0)