Base Elements
Header 1
Header 2
Entry Title Header 2
Header 2 wrapped in small element
Header 3
Header 4
Header 5
Header 6
Paragraph
Montserrat Paragraph
Some formatting elements: Bold | italic | underline
- unordered list item 1
- unordered list item 2
- secondary list item
- nested list
- nested list item 2
- ordered list item 1
- ordered list item 2
Blockquote: DEDICATED TO UNDERSTANDING Life On Earth Regular link
Color Pallette
Font Awesome
.btn class and button element
.vertical-button-container
.horizontal-button-container
- Term
- Description
- Term
- Description
Standard table no header in div
| Job Board | Internship Opportunities | Funding and Grants | Ecology as a Career |
Full table elements in responsive div
| Rank: Ecology | Rank: Environmental Science | Journal Title | Impact Factor 2017 | Impact Factor 2016 | Impact Factor 2015 | Impact Factor 2014 |
|---|---|---|---|---|---|---|
|
7/158 |
N/A |
ECOLOGICAL MONOGRAPHS |
7.878 |
8.759 |
8.037 |
6.98 |
|
6/158 |
5/241 |
FRONTIERS IN ECOLOGY AND THE ENVIRONMENT |
8.302 |
8.039 |
8.504 |
7.441 |
|
20/158 |
N/A |
ECOLOGY |
4.617 |
4.809 |
4.733 |
4.656 |
|
25/158 |
36/241 |
ECOLOGICAL APPLICATIONS |
4.393 |
4.314 |
4.252 |
4.093 |
|
55/158 |
N/A |
ECOSPHERE |
2.671 |
2.49 |
2.287 |
2.255 |
HTML
For More Advanced Users
(some of these snippets were added in Appearance > Customize > Additional CSS and have yet to be translated into the .sass)
Sections containing headers
.section
.section .section-alt
.section .section-real
.well
Grabs attention container for text, buttons or an icon but by rule not an image.
.well{ margin:20px 0px; padding:20px 26px 10px 20px; line-height: 1.25em; background-color:#F1F4F7; border:1px solid #adb5bd; border-radius:1px; } .well > img{ display:none; }
.section-real
border-bottom:1px solid #adb5bd; border-top:1px solid #adb5bd;
.montserrat
Montserrat Paragraph, Input and Table
.montserrat, input, table{ font-family:”Montserrat”,-apple-system,BlinkMacSystemFont,”Segoe UI”,Roboto,”Helvetica Neue”,Arial,sans-serif,”Apple Color Emoji”,”Segoe UI Emoji”,”Segoe UI Symbol”,”Noto Color Emoji”; }
.vertical-button-container .btn
margin-bottom:10px; display:table;
.horizontal-button-container .btn
.horizontal-button-container .btn{ margin-right:6px; margin-bottom:10px; }
Helpers
.inline{display:inline;} .inline-block{display:inline-block;} .pad{padding:6px;} .padding-top{padding-top:22px;} .padding-bottom{padding-bottom:22px;} .mar{margin:6px;} .margin-top{margin-top:26px;} .margin-bottom{margin-bottom:26px;} .tiny{font-size:60%;} .small{font-size:80%;}