Page Title

Use this page to get familiar with the different components Mechref has to offer. Resize the browser window to visualize how the pages look like on different screen sizes (desktop vs. tablet vs. phone).

The Style guide & documentation has a detailed explanation of how a page should be set up and a list of the different elements that can be added to a page. This page is just meant to get you started with the basics of page structure, the navbar, images, and equations.

Each block of information should be structured by: figure, equation(s), and text. If a given bock of information does not need an equation and/or figure then skip that part. Each section should have some text, but no more than 3-4 sentences. The goal of these pages is to be referenced and the page is to be written assuming students have already seen the materal and are not learning the material for the first time. AKA don't write a textbook.

Warning: Read me if you plan to copy/paste this page into your course! #copy-paste

Because of where this page is in github, the insert components section at the top of the code is a little different. After copy/pasting this page into your course, remove one '../' from each component line at the top. All insert components statements in the text here and in the style guide have the correct path structure and do not need to be changed.

Good luck!

This section of your page should be a brief intro to the topic of the page. Keep it short and sweet here!

Page Section Title

These sections should be the main topics of the page.

I'm here!

By default, the title is "Did you know?", but can be changed, as illustrated here.

Page Subsection Title

Use if the topic requires.

Page Subsubsection Title

Use if the topic requires.

NavBar

You can add little cards to the side of each section. These are meant to contain extra information not critical to what's discussed in the section, such as fun-facts, extra readings related to the material, or real-world applications.

These will follow the user as they scroll through the section they are defined in, but will stay contained to their section. Scroll up and down to experience this effect.

There exists a hierarchy of sections to indicate to students that certain concepts are directly related to another. The main "Section" item should only be used at the top of the page and acts as the page's title. There also exist "SubSection", "SubSubSection", and "SubSubSubSection", each with a progressively smaller header and faded color, to emphasize that they belong inside another bigger section.

Each page also has its own navtree on the left-hand side (desktop and tablet) or at the top (phone) that links to each Subsection, SubSubSection and SubSubSubSection.

Adding Images

You can also add images with or without a caption. For info on where images should be saved at, see the setup page. More info on formatting images is in the Style guide & documentation.

Add caption here if you want one

Math in Mechref

$ \LaTeX $ can be used inside your pages. Just like in Latex, we differentiate between inline-math and display-math. One difference betweem $ \LaTeX $ and these pages is when writing math in $ \LaTeX $, you use one backslash $ (\backslash) $, but in the reference pages you need to use two $ (\backslash \backslash) $.

Inline Math

Inline math is math font text inside of sentences where the lines don't break. For example, $ E = mc^2 $ as proved by Einstein. This is most commonly used for variable letters like "the moment $ M $" or units like "the units for moment are $ Nm $".

Display Math

Display math is for relevant course equations. These are denoted by a different format from the surrounding text. For example, the same equation as above would look like the following.

Mass-energy equivalence

$$ E = mc^2 $$

A block of equations can also be put in the same box if needed.

Standard form of a Linear-Program. #lp-std-form

$$ \begin{aligned}&{\text{Find a vector}}&&\mathbf {x} \\&{\text{that maximizes}}&&\mathbf {c} ^{\mathsf {T}}\mathbf {x} \\&{\text{subject to}}&&A\mathbf {x} \leq \mathbf {b} \\&{\text{and}}&&\mathbf {x} \geq \mathbf {0} .\end{aligned} $$

When we want to show students how a particular equation is derived, we can add an expendable derivation field.

Memorylessness of the exponential distribution. #exp-memoryless

$$ P\left(T>s+t\mid T>s\right)=P(T>t),\qquad \forall s,t\geq 0. $$

$$ \begin{aligned}P\left(T>s+t\mid T>s\right)&={\frac {P \left(T>s+t\cap T>s\right)}{P \left(T>s\right)}} \\ &={\frac {P \left(T>s+t\right)}{P \left(T>s\right)}} \quad \text{since} \; [0, s) \subset [0, s+t) \\ &={\frac {e^{-\lambda (s+t)}}{e^{-\lambda s}}} \\ &=e^{-\lambda t} \\ &=P(T>t).\end{aligned} $$

Warning: Do not reuse IDs #unique-ids

These expendable warning fields can be used to emphasize that students should really pay attention to what's inside. Here, we want to warn you not to reuse IDs, since unique IDs are essential to certain features working correctly.