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
genericand will result in a full width page. - The second layout is
overviewwhich 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-lengthand 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.mdfor 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
pagevariable 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-pagegets 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.