GRASS GIS web theme

This is the  GRASS GIS web theme for Hugo.

Please use assets and markup described in this section for extending the GRASS GIS website consistently.

Get and contribute to the website source code on Github.

Fonts

Fira Sans Medium

font-family: fira_sansmedium

Fira Sans Thin

font-family: fira_sansthin

Open Sans Light

font-family: open_sanslight

Open Sans Light Italic

font-family: open_sanslight_italic

Open Sans Regular

font-family: open_sansregular

Open Sans Italic

font-family: open_sansitalic

Open Sans Semi Bold

font-family: open_sanssemibold

Open Sans Semi Bold Italic

font-family: open_sanssemibold_italic

Open Sans Bold

font-family: open_sansbold

Open Sans Bold Italic

font-family: open_sansbold_italic

Open Sans Extra Bold

font-family: open_sansextrabold

Open Sans Extra Bold Italic

font-family: open_sansextrabold_italic

Colors

GRASS green

var(--grass-color)

  • HEX   #088B36
  • RGB   8,139,54
  • HSL   120,100%,28%
.grass-color

Soft green

var(--grass-color-alt)

  • HEX   #9ED29C
  • RGB   158,210,156
  • HSL   188,38%,72%
.grass-color-alt

Light green

var(--grass-color-light)

  • HEX   #EFF4E8
  • RGB   239,244,232
  • HSL   85,35%,93%
.grass-color-light

Dark green

var(--grass-color-dark)

  • HEX   #B8C6A5
  • RGB   184,198,165
  • HSL   85,22%,71%
.grass-color-dark

White

var(--white-color)

  • HEX   #FFFFFF
  • RGB   255,255,255
  • HSL   0,0%,100%
.white-color

Light grey

var(--grey-color-light)

  • HEX   #CCCCCC
  • RGB   204,204,204
  • HSL   0,0%,80%
.grey-color-light

Dark grey

var(--grey-color-dark)

  • HEX   #A0A0A0
  • RGB   160,160,160
  • HSL   0,0%,63%
.grey-color-dark

Black

var(--black-color)

  • HEX   #000000
  • RGB   0,0,0
  • HSL   0,0%,0%
.black-color

Official logo

The GRASS GIS logo is used as scalable vector graphics (SVG).

GRASS GIS
HTML
<img src="../../images/logos/grasslogo.svg" width="33%" alt="GRASS GIS" />

Simplified logo

The GRASS GIS logo is also used as a simplified vector shape able to scale across media.

HTML
<i class="ms ms-grass-gis ms-7x"></i>



HTML
<i class="ms ms-grass-gis ms-5x grass-green-alt"></i>



HTML
<i class="ms ms-grass-gis ms-2x grass-green"></i>

Text

Section title

# Section title

Page title

## Page title

Section subtitle

### Section subtitle

Default

Default

Italic

*Italic*

Bold

**Bold**

      Blockquote

> Blockquote

code

<p class="command">code</p>
date
<span class="grey-color-dark"><i class="fa fa-calendar"></i> date</span>
date badge
<span class="badge badge-pill bg-lgr grass-green"><i class="fa fa-calendar"></i> 11 Dec 2019 >/span>
Default alert
 <div class="alert rounded-0 alert-default">Default alert </div>
Info alert
 <div class="alert rounded-0 alert-info">Info alert </div>
Success alert
 <div class="alert rounded-0 alert-success">Success alert </div>
Warning alert
 <div class="alert rounded-0 alert-success">Warning alert </div>
Danger alert
 <div class="alert rounded-0 alert-success">Danger alert </div>

Card

<div class="card">
<h4><i class="fa fa-info-circle"></i> Card</h4>
</div>

fontawesome (6.4.2)

                       

See the full icon list

<i class="fa fa-download"></i>

mapskin (2.0)

                  

See the full software icon list

<i class="ms ms-grass-gis"></i>

flag-icons

              

See the full icon list

<i class="flag-icon flag-icon-de"></i>

Images

Markdown ![GRASS GIS banner](/images/logos/banner.jpg "GRASS GIS banner") HTML <img href="/images/logos/banner.jpg" alt="GRASS GIS banner" />
Markdown ![Black Canyon](/images/other/Black_canyon_map.jpg "Black Canyon Map") HTML <img href="/images/other/Black_canyon_map.jpg" alt="Black Canyon Map" />
HTML <img href="/images/other/GRASS_analysis.jpg" alt="Analysis" width="200" />
HTML <img href="/images/gallery/raster/d_rast_arrow_magnitude.png" alt="flow" width="100" />