Skip to content

Commit aab44bc

Browse files
cwhite911cwhite911
committed
Added support button
1 parent f3e4fcf commit aab44bc

File tree

3 files changed

+192
-15
lines changed

3 files changed

+192
-15
lines changed

‎_variables.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ grass:
22
name: GRASS
33
version: 8.4
44
website: https://grass.osgeo.org
5+
support: https://opencollective.com/grass/contribute
56
description: Bringing advanced geospatial technologies to the world
67
founded: 1984
78
docs:

‎content/include/_support-button.qmd‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<!-- Custom button for contributing to GRASS -->
2+
[{{< fa heart >}} Support]({{< var grass.support >}}){.btn .btn-support .btn role="button"}

‎theme.scss‎

Lines changed: 189 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,6 @@ $gs-secondary-dark-color--light: rgba(0, 32, 36, 0.541);
5757
$gs-secondary-dark-color--lighter: rgba(0, 32, 36, 0.322);
5858
$gs-secondary-dark-color--lightest: rgba(0, 32, 36, 0.071);
5959

60-
/* Special Colors */
61-
$gs-support-color: rgb(243, 57, 138);
62-
$gs-support-color--dark: rgba(243, 57, 138, 0.541);
63-
$gs-support-color--light: rgba(243, 57, 138, 0.322);
64-
$gs-yard-sign-color: rgb(116, 93, 2);
65-
6660
/* White */
6761
$gs-white-base-color: rgb(255, 255, 255);
6862
$gs-white-color: rgb(247, 247, 247);
@@ -101,33 +95,66 @@ $gs-grey-dark-color--light: rgba(78, 77, 76, 0.541);
10195
$gs-grey-dark-color--lighter: rgba(78, 77, 76, 0.322);
10296
$gs-grey-dark-color--lightest: rgba(78, 77, 76, 0.071);
10397

98+
/* Special Colors */
99+
$gs-support-color: rgb(243, 57, 138);
100+
$gs-support-color--dark: rgba(243, 57, 138, 0.541);
101+
$gs-support-color--light: rgba(243, 57, 138, 0.322);
102+
$gs-yard-sign-color: rgb(116, 93, 2);
103+
104+
/* Bootstrap Mapping Colors */
105+
// $gs-primary-color: $gs-primary-color; Defined above
106+
// $gs-secondonary-color: $gs-secondary-color; Defined above
107+
$gs-danger-color: rgb(176, 76, 76);
108+
$gs-warning-color: rgb(176, 154, 76);
109+
$gs-success-color: $gs-primary-alt-color;
110+
$gs-info-color: $gs-secondary-alt-color;
111+
$gs-light-color: $gs-grey-light-color;
112+
$gs-dark-color: $gs-grey-dark-color;
113+
104114
/* Images */
105115
// $gs-grass-background-image: url("/images/logos/banner.jpg");
106116

107117
/* Icons */
108118
$gs-grass-logo-white-simple: url('images/logos/small/[email protected]');
109119

110120
//-- scss:defaults --*/
121+
122+
// Bootstrap Variables
123+
/*---------------------------------------------------------------------------*/
111124
$primary: $gs-primary-color;
112125
$secondary: $gs-secondary-color;
126+
$success: $gs-success-color;
127+
$info: $gs-info-color;
128+
$warning: $gs-warning-color;
129+
$danger: $gs-danger-color;
130+
$light: $gs-grey-light-color;
131+
$dark: $gs-grey-dark-color;
113132

114-
133+
// Quarto Variables
134+
/*---------------------------------------------------------------------------*/
115135

116136
$body-bg: $gs-white-color;
117137
$body-color: $gs-black-color;
118138
$link-color: $primary;
139+
$font-family-sans-serif: $gs-grass-font;
140+
$font-family-monospace: $gs-grass-font--mono;
141+
$font-size-root: 16px;
119142

143+
// Navbar
120144
$navbar-fg: $gs-white-color;
121145
$navbar-hl: $gs-secondary-alt-color;
122146

147+
// Footer
123148
$footer-bg: $gs-secondary-color;
124149
$footer-fg: $gs-white-color--light;
125150

151+
// Inputs
126152
$input-bg: $gs-white-base-color;
153+
154+
// Popover
127155
$popover-bg: $body-bg;
128-
$font-family-sans-serif: $gs-grass-font;
129-
$font-family-monospace: $gs-grass-font--mono;
130-
$font-size-root: 16px;
156+
157+
// Table of Contents
131158
$toc-font-size: 1rem;
132159

133160
// Code Variables
@@ -137,11 +164,16 @@ $code-block-bg: $gs-grey-light-color;
137164
$code-keyword-color: $gs-primary-color;
138165
$code-string-color: $gs-primary-color;
139166

140-
// bootstrap
167+
// Callouts
141168
$callout-color-note: $gs-primary-light-color;
169+
$callout-color-warning: $gs-warning-color;
170+
$callout-color-tip: $gs-info-color;
171+
$callout-color-caution: $gs-danger-color;
172+
$callout-color-important: $gs-primary-dark-color;
142173

143174
/*-- scss:rules --*/
144175

176+
// Header Styles
145177
h1 {
146178
color: $gs-secondary-alt-color;
147179
font-family: $gs-grass-font--bold;
@@ -169,21 +201,128 @@ h3 {
169201
margin: 1.6em 0 .8em;
170202
}
171203

172-
204+
// Code Styles
173205
code {
174206
span {
207+
.al {
208+
color: $gs-primary-color;
209+
font-style: inherit;
210+
}
175211
.im {
176212
color: $code-keyword-color;
177213
font-style: inherit;
178214
}
179-
180215
.st {
181216
color: $code-string-color;
182217
font-style: inherit;
183218
}
184219
}
185220
}
186221

222+
// Button Styles
223+
.btn {
224+
font-family: $gs-grass-font--medium;
225+
font-size: 1em;
226+
font-weight: 700;
227+
padding: .5rem 1rem;
228+
border-radius: .25rem;
229+
}
230+
.btn-primary {
231+
background-color: $gs-primary-color;
232+
border-color: $gs-primary-color;
233+
color: $gs-white-base-color;
234+
&:hover,
235+
&:focus {
236+
background-color: $gs-primary-alt-color;
237+
border-color: $gs-primary-alt-color;
238+
color: $gs-white-base-color;
239+
}
240+
}
241+
.btn-secondary {
242+
background-color: $gs-secondary-color;
243+
border-color: $gs-secondary-color;
244+
color: $gs-white-base-color;
245+
&:hover,
246+
&:focus {
247+
background-color: $gs-secondary-light-color;
248+
border-color: $gs-secondary-light-color;
249+
color: $gs-white-base-color;
250+
}
251+
}
252+
.btn-success {
253+
background-color: $gs-black-color;
254+
border-color: $gs-success-color;
255+
color: $gs-success-color;
256+
&:hover,
257+
&:focus {
258+
background-color: $gs-black-color;
259+
border-color: $gs-primary-light-color;
260+
color: $gs-primary-light-color;
261+
}
262+
}
263+
264+
.btn-support {
265+
background-color: $gs-support-color;
266+
border-color: $gs-support-color;
267+
color: $gs-white-base-color;
268+
&:hover,
269+
&:focus {
270+
background-color: $gs-support-color--dark;
271+
border-color: $gs-support-color--dark;
272+
color: $gs-white-base-color;
273+
}
274+
}
275+
276+
.btn-outline-primary {
277+
background-color: $gs-white-base-color;
278+
border-color: $gs-primary-color;
279+
color: $gs-primary-color;
280+
&:hover,
281+
&:focus {
282+
background-color: $gs-primary-color;
283+
border-color: $gs-primary-alt-color;
284+
color: $gs-white-base-color;
285+
}
286+
}
287+
288+
.btn-outline-secondary {
289+
background-color: $gs-white-base-color;
290+
border-color: $gs-secondary-color;
291+
color: $gs-secondary-color;
292+
&:hover,
293+
&:focus {
294+
background-color: $gs-secondary-light-color;
295+
border-color: $gs-secondary-light-color;
296+
color: $gs-white-base-color;
297+
}
298+
}
299+
300+
.btn-outline-success {
301+
background-color: $gs-white-base-color;
302+
border-color: $gs-success-color;
303+
color: $gs-success-color;
304+
&:hover,
305+
&:focus {
306+
background-color: $gs-black-color;
307+
border-color: $gs-black-color;
308+
color: $gs-primary-light-color;
309+
}
310+
}
311+
312+
.btn-outline-support {
313+
background-color: $gs-white-base-color;
314+
border-color: $gs-support-color;
315+
color: $gs-support-color;
316+
display: inline-flex;
317+
align-items: center;
318+
gap: 0.5rem; // Space between icon and text
319+
&:hover,
320+
&:focus {
321+
background-color: $gs-support-color;
322+
border-color: $gs-support-color;
323+
color: $gs-white-base-color;
324+
}
325+
}
187326

188327
ul.pagination li.disabled a,
189328
ul.pagination li.active a {
@@ -217,9 +356,44 @@ ul.pagination li.active a {
217356
font-weight: 700;
218357
}
219358

359+
input[type=checkbox] {
360+
appearance: none; // Ensure custom styles apply
361+
height: 0.9rem;
362+
border: 2px solid $gs-primary-color;
363+
border-radius: 0.2rem;
364+
background-color: $gs-white-base-color;
365+
padding: 0.2rem;
366+
cursor: pointer;
367+
display: inline-flex;
368+
align-items: center;
369+
justify-content: center;
370+
371+
&:checked {
372+
background-color: $gs-primary-color;
373+
border-color: $gs-primary-color;
374+
375+
&::after {
376+
font-family: 'Font Awesome 6 Free'; // Ensure Font Awesome is loaded
377+
content: '\f00c'; // Add a checkmark when selected
378+
color: $gs-white-base-color;
379+
font-size: 0.75rem; // Adjust size of the checkmark
380+
}
381+
}
382+
383+
&:disabled {
384+
background-color: $gs-primary-light-color;
385+
border-color: $gs-primary-light-color;
386+
cursor: not-allowed;
387+
}
388+
&:disabled:checked {
389+
background-color: $gs-primary-light-color;
390+
border-color: $gs-primary-light-color;
391+
}
392+
}
393+
220394
.form-control:focus {
221-
color: #021905;
222-
background-color: #fff;
395+
color: $gs-black-color;
396+
background-color: $gs-white-base-color;
223397
border-color: $gs-primary-alt-color;
224398
outline: 0;
225399
box-shadow: 0 0 0 .05rem $gs-primary-color--lighter;

0 commit comments

Comments
 (0)