Commit 00369e5f authored by Chris Lamb's avatar Chris Lamb 💬

Start to merge in new style guide and add an example WIP typography page.

This will need some tweaks to ensure that we generate markdown HTML
suitable for Twitter Bootstrap, etc. (or CSS changes).
parent ff67d921
......@@ -10,6 +10,9 @@ description: |
baseurl: ""
url: https://reproducible-builds.org
sass:
sass_dir: /assets/styles
collections:
blog:
output: true
......
<div class="page-header mb-4 mt-5">
<h3 id="alerts">Alerts</h3>
<p class="text-muted">Some Description about alerts.</p>
</div>
<div class="row p-5 bg-light">
<div class="col-12 alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="col-12 alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="col-12 alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="col-12 alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
</div>
<h1 id="badges"> </h1>
<div class="page-header mb-4 mt-5">
<h3>Badges</h3>
<!--p class="text-muted">Some Description about badges.</p-->
</div>
<div class="row p-5 bg-light">
<div class="col-12">
<h2>Example heading <span class="badge badge-primary">New</span></h2>
</div>
<div class="col-12">
<h4 class="pt-4">Example heading <span class="badge badge-secondary">New</span></h4>
</div>
<div class="col-12">
<h6 class="pt-4">Example heading <span class="badge-pill badge-primary">New</span></h6>
</div>
</div>
\ No newline at end of file
<div id="buttons" class="mb-4">
<h3>Buttons</h3>
<!--p class="text-muted">Some Description about buttons.</p-->
</div>
<div class="row bg-light p-5">
<div class="col-xs-12 col-sm-6 col-md-6 p-1">
<p class="text-black small text-muted m-0 pb-2">Primary</p>
<button type="button" class="btn btn-lg btn-primary mr-2">Primary</button>
<p class="text-black small text-muted m-0 pt-2 pb-2">Ghost</p>
<button type="button" class="btn btn-lg btn-outline-primary mr-2">How to Contribute</button>
<p class="text-black small text-muted m-0 pt-2">Link</p>
<button type="button" class="btn btn-lg btn-link mr-2">Learn more</button>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 p-1">
<p class="text-black small text-muted m-0 pt-2 pb-2">Medium</p>
<button type="button" class="btn btn-primary mr-2">Primary</button>
<button type="button" class="btn btn-outline-primary mr-2">Ghost</button>
<button type="button" class="btn btn-link mr-2">Link</button>
<p class="text-black small text-muted m-0 pt-2 pb-2">Small</p>
<button type="button" class="btn btn-sm btn-primary mr-2">Primary</button>
<button type="button" class="btn btn-sm btn-outline-primary mr-2">Ghost</button>
<button type="button" class="btn btn-sm btn-link mr-2">Link</button>
</div>
</div>
<div class="mt-5" id="cards">
<h1>Cards</h1>
<div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="card mb-2">
<div class="card-body">
<h4 class="card-title">Reproducible Builds</h4>
<p class="card-text text-muted">Reproducible Builds are a set of software development practices that create an independently-verifiable path from source code to the binary code used by computers.</p>
<a href="#" class="btn btn-primary" onclick="return false;">Visit website</a>
</div>
</div>
<div class="card mb-2">
<div class="card-body">
<h4 class="card-title">Reproducible Builds</h4>
<p class="card-text text-muted">Reproducible Builds are a set of software development practices that create an independently-verifiable path from source code to the binary code used by computers.</p>
<a href="#" class="rb-link" onclick="return false;">Apply</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Reproducible Builds</h4>
<p class="card-text text-muted">Reproducible Builds are a set of software development practices that create an independently-verifiable path from source code to the binary code used by computers.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="card">
<img class="card-img-top"
src="{{site.baseurl}}/assets/images/placeholder.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">A few things everyone can do now</h4>
<p class="card-text text-muted">Numerous people contribute to the project to varying extents.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Consider <a href="#" class="rb-link" onclick="return false;">
<mark>contributing</mark>
</a> to help the Reproducible Builds project grow.
</li>
<li class="list-group-item">Take a moment to
<mark>donate</mark>
to support further development.
</li>
<li class="list-group-item">Help
<mark>translate</mark>
the documentation into <a href="#" class="rb-link" onclick="return false;">other languages</a>.
</li>
</ul>
<div class="card-body">
<a href="#" class="rb-link" onclick="return false;">View All</a>
</div>
</div>
</div>
</div>
</div>
<h1 id="forms"> </h1>
<div class="page-header mb-4 mt-5">
<h3>Forms</h3>
<!--p class="text-muted">Some Description about Forms.</p-->
</div>
<div class="row">
<form class="bg-light p-5 col-sm-6">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary mt-4" onclick="return false;">Submit</button>
</form>
</div>
<h1 id="pagination"></h1>
<div class="page-header mb-4 mt-5">
<h3>Pagination</h3>
<!--p class="text-muted">Some Description about pagination.</p-->
</div>
<div class="row bg-light p-5">
<nav aria-label="...">
<ul class="pagination m-0">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#" onclick="return false;">1</a></li>
<li class="page-item">
<span class="page-link rb-paginate-active">
2<span class="sr-only">(current)</span>
</span>
</li>
<li class="page-item"><a class="page-link" href="#" onclick="return false;">3</a></li>
<li class="page-item">
<a class="page-link" href="#" onclick="return false;">Next</a>
</li>
</ul>
</nav>
</div>
<div class="mt-5" id="tables">
<h1>Tables</h1>
<div class="row mt-5">
<span>Default</span>
<br />
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="row mt-5">
<span>Striped</span>
<br />
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<head>
<meta charset="utf-8">
<title>{{site.title}}</title>
<link rel="stylesheet" href="{{'/assets/styles/main.css' | prepend: site.baseurl}}">
<link rel="shortcut icon" type="image/png" href="{{'/assets/images/favicon.png' | prepend: site.baseurl}}"/>
<link href="{{'/assets/fonts/overpass.css' | prepend: site.baseurl}}" rel="stylesheet">
<link href="{{'/assets/fonts/overpass-mono.css' | prepend: site.baseurl}}" rel="stylesheet">
<link rel="stylesheet" href="{{'/assets/static/open-iconic-bootstrap.css' | prepend: site.baseurl}}" />
<link rel="stylesheet" href="{{'/assets/static/bootstrap.min.css' | prepend: site.baseurl}}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<nav class="navbar navbar-expand-lg navbar-light sticky-top rp-navbar__top">
<a class="navbar-brand" href="{{ "/"|prepend:site.baseurl }}">
<img src="{{ "/assets/images/logo-text-white.png"|prepend:site.baseurl }}" height="30" width="auto" alt=""></img>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav mr-auto display-xs">
<li class="nav-item">
<a class="nav-link" href="{{site.baseurl}}/">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{site.baseurl}}/getting-started">Getting Started</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{site.baseurl}}/visuals/">Visuals</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{site.baseurl}}/components/">Components</a>
</li>
</ul>
</div>
</nav>
<div class="sidebar {{include.sidebarClassName}}" id="sidebar1">
<ul class="list-group">
<li class="list-group-item rb-main-sidebar pt-5">
<a href="{{site.baseurl}}/" class="sidebar__link__darkGray">About</a>
</li>
<li class="list-group-item rb-main-sidebar">
<a href="{{site.baseurl}}/getting-started/" class="sidebar__link__darkGray">Getting Started</a>
</li>
<li class="list-group-item rb-main-sidebar">
<a href="{{site.baseurl}}/visuals/" class="sidebar__link__darkGray">Visuals</a>
</li>
<li class="list-group-item rb-main-sidebar">
<a href="{{site.baseurl}}/components/" class="sidebar__link__darkGray">Components</a>
</li>
</ul>
</div>
<script src="{{'/assets/javascript/modernizr.min.js' | prepend: site.baseurl}}"></script>
<script src="{{'/assets/javascript/jquery-3.3.1.slim.min.js' | prepend: site.baseurl}}"></script>
<script src="{{'/assets/javascript/popper.min.js' | prepend: site.baseurl}}"></script>
<script src="{{'/assets/javascript/bootstrap.min.js' | prepend: site.baseurl}}"></script>
<!-- <script src="{{'/assets/javascript/run_prettify.js' | prepend: site.baseurl}}"></script> /* -->
<script type="text/javascript" src="{{'/assets/javascript/index.js' | prepend: site.baseurl}}"></script>
<h1 id="scrollspy"> </h1>
<div class="page-header mb-4 mt-5 d-none d-sm-none">
<h3>Scrollspy</h3>
<!--p class="text-muted">Some Description about scrollspy.</p-->
</div>
<div class="row p-0 pt-5 bg-light d-none d-sm-none">
<div class="bd-example">
<div class="row">
<div class="col-4">
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action active" href="https://reproducible-builds.org/">Reproducible builds</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Second Link</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Third Link</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Forth Link</a>
</div>
</div>
<div class="col-8">
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem error eum inventore laboriosam necessitatibus nobis numquam praesentium quae tempore. Dignissimos minima rerum tenetur vel vero! Eius molestias natus nesciunt!
</div>
</div>
</div>
</div>
</div>
<div class="dropdown-divider mt-5 wi"></div>
<div class="row">
<div class="col-12 p-0">
<p class="mt-5 mb-5">
<span class="text-muted small"> Styleguide code licensed under <a href="https://opensource.org/licenses/MIT" class="rb-link" title="MIT" target="_blank">MIT</a>, documents licensed under a <a href="https://creativecommons.org/licenses/by/3.0/us/" title="CC 3.0" target="_blank">Creative Commons Attribution 3.0 United States License</a>. Reproducible Builds are a set of software development practices that create an independently-verifiable path from source code to the binary code used by computers. <br>Templates and styles based on the <a href="https://styleguide.torproject.org/" target="_blank">Tor Styleguide</a>.</span>
</p>
</div>
</div>
<div class="sidebar border-left-right {{ include.sidebarClassName }}" id="sidebar">
<ul class="list-group padding-top-35">
{% for sidebar_hash in page.sidebar %}
{% for link in sidebar_hash %}
<li class="list-group-item rb-sidebar">
<a href="#{{ link[0] }}" class="sidebar__link__darkGray">{{ link[1] }}</a>
</li>
{% endfor %}
{% endfor %}
</ul>
</div>
<h1 id="assets"></h1>
<div class="page-header mb-4 mt-5">
<h3>Identity Assets</h3>
<p class="text-muted">The Reproducible Builds Project brand assets are included here. Use them responsibly.</p>
</div>
<div class="row">
<div class="col-xs-12 col-md-4 col-sm-6">
<div class="image border p-5">
<img src="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_1.svg" class="rb-contain">
</div>
<p class="text-black pt-3 align-horizontally flex-space-between">
<span class="text-left color-gray-2 rb-isBold">Default</span>
<span class="text-right color-primary rb-isBold" style="float: right;">
<a target="_blank"
href="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_1.svg"
class="button btn btn-sm btn-outline-primary">Download SVG</a>
</span>
</p>
</div>
<div class="col-xs-12 col-md-4 col-sm-6">
<div class="image border p-5">
<img src="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_3.svg" class="rb-contain">
</div>
<p class="text-black pt-3 align-horizontally flex-space-between">
<span class="text-left color-gray-2 rb-isBold">Black</span>
<span class="text-right color-primary rb-isBold" style="float: right;">
<a target="_blank"
href="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_3.svg"
class="button btn btn-sm btn-outline-primary">Download SVG</a>
</span>
</p>
</div>
<div class="col-xs-12 col-md-4 col-sm-6">
<div class="image border p-5 bg-dark">
<img src="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_55.svg" class="rb-contain">
</div>
<p class="text-black pt-3 align-horizontally flex-space-between">
<span class="text-left color-gray-2 rb-isBold">White</span>
<span class="text-right color-primary rb-isBold" style="float: right;">
<a target="_blank"
href="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_55.svg"
class="button btn btn-sm btn-outline-primary">Download SVG</a>
</span>
</p>
</div>
</div>
<div class="row mt-5">
<div class="col-xs-12 col-md-4 col-sm-6">
<div class="image border p-5">
<img src="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_4.svg" class="rb-contain">
</div>
<p class="text-black pt-3 align-horizontally flex-space-between">
<span class="text-left color-gray-2 rb-isBold">Default</span>
<span class="text-right color-primary rb-isBold" style="float: right;">
<a target="_blank"
href="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_4.svg"
class="button btn btn-sm btn-outline-primary">Download SVG</a>
</span>
</p>
</div>
<div class="col-xs-12 col-md-4 col-sm-6">
<div class="image border p-5">
<img src="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_5.svg" class="rb-contain">
</div>
<p class="text-black pt-3 align-horizontally flex-space-between">
<span class="text-left color-gray-2 rb-isBold">Black</span>
<span class="text-right color-primary rb-isBold" style="float: right;">
<a target="_blank"
href="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_5.svg"
class="button btn btn-sm btn-outline-primary">Download SVG</a>
</span>
</p>
</div>
<div class="col-xs-12 col-md-4 col-sm-6">
<div class="image border p-5 bg-dark">
<img src="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_58.svg" class="rb-contain">
</div>
<p class="text-black pt-3 align-horizontally flex-space-between">
<span class="text-left color-gray-2 rb-isBold">White</span>
<span class="text-right color-primary rb-isBold" style="float: right;">
<a target="_blank"
href="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_58.svg"
class="button btn btn-sm btn-outline-primary">Download SVG</a>
</span>
</p>
</div>
</div>
<div class="row mt-5">
<div class="col-xs-12 col-md-4 col-sm-6">
<div class="image border p-5">
<img src="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_7.svg" class="rb-contain">
</div>
<p class="text-black pt-3 align-horizontally flex-space-between">
<span class="text-left color-gray-2 rb-isBold">Default</span>
<span class="text-right color-primary rb-isBold" style="float: right;">
<a target="_blank"
href="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_7.svg"
class="button btn btn-sm btn-outline-primary">Download SVG</a>
</span>
</p>
</div>
<div class="col-xs-12 col-md-4 col-sm-6">
<div class="image border p-5">
<img src="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_8.svg" class="rb-contain">
</div>
<p class="text-black pt-3 align-horizontally flex-space-between">
<span class="text-left color-gray-2 rb-isBold">Black</span>
<span class="text-right color-primary rb-isBold" style="float: right;">
<a target="_blank"
href="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_8.svg"
class="button btn btn-sm btn-outline-primary">Download SVG</a>
</span>
</p>
</div>
<div class="col-xs-12 col-md-4 col-sm-6">
<div class="image bg-dark border p-5">
<img src="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_36.svg" class="rb-contain">
</div>
<p class="text-black pt-3 align-horizontally flex-space-between">
<span class="text-left color-gray-2 rb-isBold">White</span>
<span class="text-right color-primary rb-isBold" style="float: right;">
<a target="_blank"
href="https://demo.identihub.co/assets/ReproducibleBuilds_ICONS_36.svg"
class="button btn btn-sm btn-outline-primary">Download SVG</a>
</span>
</p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-6">
<div class="border p-5 mb-3">
<h6>Reproducible Builds repo</h6>
<p class="m-0">Download SVG and PNG files</p>
<a class="btn btn-lg btn-link p-0" title="Reproducible Builds Repo"
href="https://salsa.debian.org/reproducible-builds/reproducible-styleguide" target="_blank">Visit Repo</a></div>
</div>
<div class="col-md-6">
<div class="border p-5 text-left">
<h6>Styleguide Mirror on Identihub</h6>
<p class="m-0">Identihub Project</p>
<a class="btn btn-lg btn-link p-0" href="https://demo.identihub.co/project/reproducible-builds"
target="_blank">Visit Project Page</a>
</div>
</div>
</div>
<h1 id="colors"></h1>
<div class="page-header mb-4 mt-4">
<h3>Colors</h3>
<p class="text-muted">The main Reproducible Builds color is Dark Blue. Use Light Blue as a secondary option.</p>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-primary text-white small">#1e5b96</div>
<h6 class="pt2 text-left">Primary Color</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-secondary text-white small">#2b89d6</div>
<h6 class="pt2 text-left">Secondary color</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-0 text-black small">#f8f9fa</div>
<h6 class="pt2 text-left">Gray 0</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-1 text-black small">#f1f3f5</div>
<h6 class="pt2 text-left">Gray 1</h6>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-2 text-black small">#e9ecef</div>
<h6 class="pt2 text-left">Gray 2</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-3 text-black small">#dee2e6</div>
<h6 class="pt2 text-left">Gray 3</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-4 text-black small">#ced4da</div>
<h6 class="pt2 text-left">Gray 4</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-5 text-black small">#adb5bd</div>
<h6 class="pt2 text-left">Gray 5</h6>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-6 text-white small">#868e96</div>
<h6 class="pt2 text-left">Gray 6</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-7 text-white small">#495057</div>
<h6 class="pt2 text-left">Gray 7</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-8 text-white small">#343a40</div>
<h6 class="pt2 text-left">Gray 8</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-9 text-white small">#212529</div>
<h6 class="pt2 text-left">Gray 9</h6>
</div>
</div>
<h1 id="grid"></h1>
<div class="page-header mb-4 mt-5">
<h3>Grid</h3>
<p class="text-muted">Our main used grid compositions are outlined here. Use them to generate one column or various columns layouts.</p>
</div>
<div class="container bg-light p-5">
<div class="row mb-1">
<div class="col-12">
<p class="background-primary p-3 text-white small">
12
</p>
</div>
</div>
<div class="row mb-1">
<div class="col-4">
<p class="background-primary p-3 text-white small">
4
</p>
</div>
<div class="col-8">
<p class="background-primary p-3 text-white small">
8
</p>
</div>
</div>
<div class="row mb-1">
<div class="col-3">
<p class="background-primary p-3 text-white small">
3
</p>
</div>
<div class="col-9">
<p class="background-primary p-3 text-white small">
9
</p>
</div>
</div>
<div class="row mb-1">
<div class="col-2">
<p class="background-primary p-3 text-white small">
2
</p>
</div>
<div class="col-2">
<p class="background-primary p-3 text-white small">
2
</p>
</div>
<div class="col-2">
<p class="background-primary p-3 text-white small">
2
</p>
</div>
<div class="col-2">
<p class="background-primary p-3 text-white small">
2
</p>
</div>
<div class="col-2">
<p class="background-primary p-3 text-white small">
2
</p>
</div>
<div class="col-2">
<p class="background-primary p-3 text-white small">
2
</p>
</div>
</div>
<div class="row mb-1">
<div class="col-3">
<p class="background-primary p-3 text-white small">
3
</p>
</div>
<div class="col-3">
<p class="background-primary p-3 text-white small">
3
</p>
</div>
<div class="col-3">
<p class="background-primary p-3 text-white small">
3
</p>
</div>
<div class="col-3">
<p class="background-primary p-3 text-white small">
3
</p>
</div>
</div>
<div class="row mb-1">
<div class="col-4">
<p class="background-primary p-3 text-white small">
4
</p>
</div>
<div class="col-4">
<p class="background-primary p-3 text-white small">
4
</p>
</div>
<div class="col-4">
<p class="background-primary p-3 text-white small">
4
</p>
</div>
</div>
<div class="row mb-1">
<div class="col-6">
<p class="background-primary p-3 text-white small">
6
</p>
</div>
<div class="col-6">
<p class="background-primary p-3 text-white small">
6
</p>
</div>
</div>
<div class="row mb-1">
<div class="col-8 offset-2">