\documentclass[hidelinks,12pt,a4paper,numbers=enddot]{scrartcl}

\usepackage[margin=2cm]{geometry}
\usepackage{hyperref}
\usepackage{listings}

\title{How to make a content page with Jekyll}
\author{Joey Bevilacqua}

\begin{document}

\maketitle

We are using Jekyll to build our website: we've told you this allows us to split
styling from contents, but what does this actually mean?\\

The CSS team has worked to provide you templates to build your page upon.\\

Using a template is easy once you get familiar with jekyll.

\section{The template header}

The template header consist in a series of variables defined at the very beginning
of the web page. These variables have values associated that will be used
to generate a proper styling.\\

This is an example for a page with the following stuffs:

\begin{table}[h]
\begin{tabular}{l l p{5cm}}
\textbf{Variable} & \textbf{Example} & \textbf{Explaination}\\\hline
layout & page & The general style of the page. Use "page"\\
topic & The \textbf{ls} command & What the page is about\\
Author & Claudio Maggioni & The main author of the page\\
category\_title & Basic commands & Name of the category (Your team full name)\\
Team & basic & The name of the directory this file is in\\
Tags & list file directory find & List of words separated by spaces that are relevant to this. Think of these as hashtags without the \#\\
\end{tabular}
\end{table}

Example

\begin{lstlisting}[language=html]
---
layout: page
category: Basic commands
tags: directory list
author: Claudio Maggioni
title: LS
---
\end{lstlisting}

\section{Content}

The content comes right after the Template header
Keep your content as simple as possible, also don't worry about having a long page.\\

\textbf{DO NOT} insert screenshots of your terminal or any other kind of screenshot. Use
the code tags and eventually describe the results using text.\\

\textbf{DO NOT} use div and spans, nor use class, id or other styling attributes / options before
talking with the CSS team. \\

Place the html files straight inside the team folder, no subfolders allowed.\\
Name the html file using the command / topic you're talking about name.\\


Example content

\begin{lstlisting}[language=html]
<h1>The cd command</h1>

<p>The <b>ls</b> command is used to list a directory content or a file.<br>
The name stands for <i>LiSt</i>.

<h2>Usage</h2>

<p>The default ls command syntax is<br>

<code>
ls [flags] [path]
</code>
 
<br>
 
Where [flags] are the ls flags, read below for more info, and [path] is the (optional) path (absolute or relative).<br>
If no path is provided the current directory is listed
 </p>
 
 <h2>Flags<h2>

<p>Here are some of the most common ls flags

<ul>
  <li> <b>-a</b>: Includes the hidden files (those which name starts with ".")
  <li> <b>-l</b>: Lists with more information about the list file(s) </li>
  <li> .... </.li>
</ul>
\end{lstlisting}

\end{document}