diff --git a/_brand.yml b/_brand.yml new file mode 100644 index 0000000..ad1e83d --- /dev/null +++ b/_brand.yml @@ -0,0 +1,122 @@ +meta: + name: + full: GRASS + short: GRASS + link: + home: https://grass.osgeo.org + docs: https://grass.osgeo.org/grass-stable/manuals/ + description: | + Bringing advanced geospatial technologies to the world + founded: 1984 +typography: + fonts: + - family: Open Sans + source: bunny + - family: Fira Code + source: bunny + base: + family: Open Sans + weight: 400 + headings: + family: Open Sans + weight: 500 + color: dark_grey + link: + weight: 400 + color: secondary + monospace: "Fira Code" + + +# https://posit-dev.github.io/brand-yml/brand/color.html +color: + palette: + green: "#4cb05b" + alt_green: "#6ed079" + light_green: "#87e991" + dark_green: "#088b36" + blue: "#00393f" + alt_blue: "#27575c" + light_blue: " #4a787d" + dark_blue: "#002024" + grey: "#91908f" + alt_grey: "#d8d8d8" + light_grey: "#f0f0f1" + dark_grey: "#757473" + black: "#021905" + white: "#f7f7f7" + support: "#f3398a" + foreground: black + background: white + primary: green + secondary: blue + tertiary: alt_blue + success: dark_green + info: light_green + warning: light_blue + danger: "#dc3545" # bootsrap5 danger + light: white + dark: black + link: dark_blue + +# https://posit-dev.github.io/brand-yml/brand/logo.html +# https://sc.edu/about/offices_and_divisions/digital-accessibility/toolbox/best_practices/alternative_text/logo-alt-text/index.php +logo: + images: + logo-small-no-text-light: + path: "images/logos/small/grass-logo-white-simple@05x.png" + alt: "Small sized GRASS icon colored white with GRASS shape" + logo-small-no-text-dark: + path: "images/logos/small/grass-logo-green-simple@05x.png" + alt: "Small sized GRASS icon colored GRASS green with GRASS shape" + logo-medium-no-text-light: + path: "images/logos/medium/grass-logo-white-simple@1x.png" + alt: "Medium sized GRASS icon colored white with GRASS shape" + logo-medium-no-text-dark: + path: "images/logos/medium/grass-logo-green-simple@1x.png" + alt: "Medium sized GRASS icon colored GRASS green with GRASS shape" + logo-large-no-text-light: + path: "images/logos/large/grass-white-no-text.svg" + alt: "Large vector (svg) GRASS icon colored white with GRASS shape" + logo-large-no-text-dark: + path: "images/logos/large/grass-green-no-text.svg" + alt: "Large vector (svg) GRASS icon colored GRASS green with GRASS shape" + header-white: + path: images/logos/large/grass-white.svg + alt: "GRASS name with logo in white" + header-green: + path: images/logos/large/grass-green.svg + alt: "GRASS name with logo in GRASS green" + header-gradient: + path: images/logos/large/grass-gradient.svg + alt: "GRASS name with logo in gradient" + horizontal-white: + path: images/logos/large/grass-white-horizontal.svg + alt: "GRASS name with logo in white" + horizontal-green: + path: images/logos/large/grass-green-horizontal.svg + alt: "GRASS name with logo in GRASS green" + horizontal-gradient: + path: images/logos/large/grass-gradient-horizontal.svg + alt: "GRASS name with logo in gradient" + small: + light: logo-small-no-text-light + dark: logo-small-no-text-dark + medium: + light: logo-medium-no-text-light + dark: logo-medium-no-text-dark + large: + light: logo-large-no-text-light + dark: logo-large-no-text-dark + +defaults: + bootstrap: + # List of theme variables to override + # https://quarto.org/docs/output-formats/html-themes.html + defaults: + navbar-fg: white + navbar-hl: "$brand-alt-blue" + sidebar-fg: "$blue" + sidebar-hl: "$brand-alt-blue" + footer-bg: "$brand-green" + footer-fg: "$brand-white" + diff --git a/_quarto.yml b/_quarto.yml index 42dddab..f9e4e11 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -2,12 +2,10 @@ project: type: website output-dir: docs website: - favicon: images/logos/grass-favicon-16x16.png + favicon: images/favicon.ico navbar: - title: "Learn GRASS" - background: primary + title: Learn GRASS search: true - logo: "images/logos/grass-favicon-white-32x32.png" tools: - icon: github menu: @@ -20,30 +18,42 @@ website: Partially supported by US NSF [![](/images/logos/NSF_Official_logo_100x100.png){fig-alt="NSF" width=45px}](https://www.nsf.gov/awardsearch/showAward?AWD_ID=2303651) center: Content is dual-licensed under [GFDL-1.2-or-later](https://www.gnu.org/licenses/fdl-1.2.html) and [CC-BY-SA-4.0](https://creativecommons.org/licenses/by-sa/4.0/) + # Quarto does not support the icon tag to use FontAwesome. + # The workaround is to use the fa icon in the text. + # We do this for consistency with the rest of the sites. + # https://github.com/quarto-ext/fontawesome/issues/6 right: - - icon: github - href: https://github.com/OSGeo/grass - aria-label: GRASS on GitHub - - icon: chat-fill - href: https://discourse.osgeo.org/c/grass/62 - aria-label: GRASS on Discourse - - icon: mastodon + - icon: opencollective + href: https://opencollective.com/grass/contribute + aria-label: GRASS on Open Collective + - text: "{{< fa brands gitter >}}" + href: https://gitter.im/grassgis/community + aria-label: GRASS on Gitter + - text: "{{< fa brands mastodon >}}" href: https://fosstodon.org/@grassgis aria-label: GRASS on Mastodon - - icon: twitter-x + - text: "{{< fa brands discourse >}}" + href: https://discourse.osgeo.org/c/grass/62 + aria-label: GRASS on Discourse + - text: "{{< fa brands linkedin >}}" + href: "https://linkedin.com/company/grass-gis" + aria-label: GRASS on LinkedIn + - text: "{{< fa brands x-twitter >}}" href: https://x.com/grassgis aria-label: GRASS on X - - icon: facebook - href: https://www.facebook.com/groups/GRASS - aria-label: GRASS on Facebook - - icon: youtube + - text: "{{< fa brands youtube >}}" href: https://www.youtube.com/@grass-gis aria-label: GRASS on YouTube + - text: "{{< fa brands github >}}" + href: https://github.com/OSGeo/grass + aria-label: GRASS on GitHub + execute: freeze: auto +brand: _brand.yml format: html: - theme: [pandoc, theme.scss] + theme: [pandoc, brand, theme.scss] toc: true toc-title: Table of Contents link-external-newwindow: true diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 0000000..7bf220f Binary files /dev/null and b/images/favicon.ico differ diff --git a/images/logos/grass-green-on-white.png b/images/logos/grass-green-on-white.png new file mode 100644 index 0000000..aecdb59 Binary files /dev/null and b/images/logos/grass-green-on-white.png differ diff --git a/images/logos/large/grass-gradient-horizontal.svg b/images/logos/large/grass-gradient-horizontal.svg new file mode 100644 index 0000000..0cdf3e5 --- /dev/null +++ b/images/logos/large/grass-gradient-horizontal.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/logos/large/grass-gradient-no-text.svg b/images/logos/large/grass-gradient-no-text.svg new file mode 100644 index 0000000..e966279 --- /dev/null +++ b/images/logos/large/grass-gradient-no-text.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/images/logos/large/grass-gradient.svg b/images/logos/large/grass-gradient.svg new file mode 100644 index 0000000..6b7bf52 --- /dev/null +++ b/images/logos/large/grass-gradient.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/logos/large/grass-green-horizontal.svg b/images/logos/large/grass-green-horizontal.svg new file mode 100644 index 0000000..bfa6aba --- /dev/null +++ b/images/logos/large/grass-green-horizontal.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/images/logos/large/grass-green-no-text.svg b/images/logos/large/grass-green-no-text.svg new file mode 100644 index 0000000..af7e14a --- /dev/null +++ b/images/logos/large/grass-green-no-text.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/images/logos/large/grass-green.svg b/images/logos/large/grass-green.svg new file mode 100644 index 0000000..02dda5b --- /dev/null +++ b/images/logos/large/grass-green.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/images/logos/large/grass-white-horizontal.svg b/images/logos/large/grass-white-horizontal.svg new file mode 100644 index 0000000..2a3db6f --- /dev/null +++ b/images/logos/large/grass-white-horizontal.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/images/logos/large/grass-white-no-text.svg b/images/logos/large/grass-white-no-text.svg new file mode 100644 index 0000000..2a0b69d --- /dev/null +++ b/images/logos/large/grass-white-no-text.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/logos/large/grass-white.svg b/images/logos/large/grass-white.svg new file mode 100644 index 0000000..4d4b635 --- /dev/null +++ b/images/logos/large/grass-white.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/images/logos/medium/grass-logo-gradient-simple@1x.png b/images/logos/medium/grass-logo-gradient-simple@1x.png new file mode 100644 index 0000000..1ecd359 Binary files /dev/null and b/images/logos/medium/grass-logo-gradient-simple@1x.png differ diff --git a/images/logos/medium/grass-logo-green-simple@1x.png b/images/logos/medium/grass-logo-green-simple@1x.png new file mode 100644 index 0000000..4858714 Binary files /dev/null and b/images/logos/medium/grass-logo-green-simple@1x.png differ diff --git a/images/logos/medium/grass-logo-white-simple@1x.png b/images/logos/medium/grass-logo-white-simple@1x.png new file mode 100644 index 0000000..bed6043 Binary files /dev/null and b/images/logos/medium/grass-logo-white-simple@1x.png differ diff --git a/images/logos/small/grass-logo-gradient-simple@05x.png b/images/logos/small/grass-logo-gradient-simple@05x.png new file mode 100644 index 0000000..5eb0549 Binary files /dev/null and b/images/logos/small/grass-logo-gradient-simple@05x.png differ diff --git a/images/logos/small/grass-logo-green-simple@05x.png b/images/logos/small/grass-logo-green-simple@05x.png new file mode 100644 index 0000000..ace918a Binary files /dev/null and b/images/logos/small/grass-logo-green-simple@05x.png differ diff --git a/images/logos/small/grass-logo-white-simple@05x.png b/images/logos/small/grass-logo-white-simple@05x.png new file mode 100644 index 0000000..a465938 Binary files /dev/null and b/images/logos/small/grass-logo-white-simple@05x.png differ diff --git a/theme.scss b/theme.scss index 499b605..17c82d5 100644 --- a/theme.scss +++ b/theme.scss @@ -1,39 +1,21 @@ -/*-- scss:defaults --*/ -// Base document colors -$body-bg: #ffffff; -$banner-bg: #f0e3ce; -$grass-color-light: #f0e3ce; -// $grass-color-light: rgb(207, 207, 207); -$grass-color-black: #0a0a0a; -$grass-color-dark-grey: #A0A0A0; -$grass-color-light-grey: #CCCCCC; -$grass-color-light-green: #EFF4E8; -$grass-color-dark-green: #B8C6A5; -$grass-color-soft-green: #9ED29C; -$grass-color-primary: #088B36; -$primary: $grass-color-primary; +//-- scss:defaults --*/ +$grass-font: "Fira Sans", sans-serif; -$op-white:#fbfbfb; -// https://www.color-hex.com/color-palette/36240 -$op-primary: #657e96; -$op-secondary: #d07944; -$op-tan: #f0e3ce; -$op-brown: #a76a3a; -$op-mustard: #d49441; -$op-light-grey:rgb(207, 207, 207); +/*-- scss:rules --*/ -// Revealjs theme colors -$link-color: $grass-color-primary; -$presentation-heading-color: $grass-color-primary; +ul.pagination li.disabled a, +ul.pagination li.active a { + background-color: $brand-dark-green !important; + color: $brand-white !important; +} .highlight { - color: $grass-color-primary; + color: $primary; font-weight: bold; } .circle-image-container { position: relative; - // width: 100%; height: auto; display: inline-block; } @@ -54,40 +36,40 @@ $presentation-heading-color: $grass-color-primary; width: 100%; height: 100%; border-radius: 60%; - background: linear-gradient(to bottom, $op-white, $grass-color-soft-green); + background: linear-gradient(to bottom, $brand-white, $brand-dark-green); opacity: 1; z-index: -1; } .quarto-title-banner { - background-color: $banner-bg !important; - color: $grass-color-black !important; + background-color: $brand-light-green !important; + color: $brand-black !important; h1 { - color: $grass-color-black !important; + color: $brand-black !important; } } .reveal { h3 { - color: $grass-color-black !important; + color: $brand-black !important; } .columns { .column { - background-color: rgba(251, 252, 250, 0.5) !important; + background-color: $brand-grey !important; } } .quarto-title-block { .quarto-title-acknowledgements { - color: $grass-color-primary !important; + color: $primary !important; font-size: 0.6em; } } } .text-white { - color: $op-white !important; + color: $brand-white !important; } .text-center {