Styling and Features Documentation
February 25, 2021
Detailed below are some extra styling and layout features you can use, outside of what is possible with markdown.
Page Layouts
There are currently 3 different layouts you can use. To switch page layouts, change the template
variable at the top of your md file.
- The most basic layout is called
generic
and will result in a full width page. - The second layout is
overview
which will add an overview/ table of contents side bar to your page. - The third is
columns
. To use the columns layout, in each place where you would like your markdown content to split into a new column add the text//split//
. You can add many columns this way but it will start to look bad so make sure to view your page before commiting. - The fourth is
rows
. To use the rows layout, in each place where you would like your markdown content to split into a new row add the text//split//
. You can add as many rows as you like but make sure to view your page before commiting. - The last is
grid
. To use the grid layout, in each place where you would like your markdown content to split into a new section add the text//split//
. You can add as many sections as you like. You will also need to add a global variable calledrow-length
and assign it anint
. This will determine how many sections get put into each row of the grid. Make sure to view your page before commiting. (Check outsite/resources/team.md
for an example)
Note: When using
//split//
make sure to have no space below it. Pandoc and jinja do not parse this well.
Page Specific Styling
There are some cases in which you may need to add css styling that only applies to your page. This is a feature that is not yet widely used but can come in handy!
- To use this feature, in the 'global variables' at the top of your md add a
page
variable and set it to a string value without spaces that describes your page. Keep in mind, you can reuse the same specific styles with the same name on other pages. - This essentially wraps your content in an ID called
your-string-value-page
. (Note the-page
gets added on by the parser.) - Then in the css file (site/static/style.css), find the section labeled PAGE SPECIFIC STYLING and place your css rules here.