text-wrap to markdown replace

pages/_data/menu.yml

@@ -1,9 +1,7 @@
 apps:
-  url: apps.html
-  title: Apps
-  icon: package
-  label: 8
-  label-color: green
+  url: form-elements.html
+  title: Form elements
+  icon: check-square
 level-1:
   title: Level 1
   icon: menu

pages/_docs/typography.md

@@ -48,10 +48,10 @@ Utilities for controlling the leading (line height) of an element.
 
 ## Basic elements
 
-When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.text-wrap` as container. It can handle almost any HTML tag.
+When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.markdown` as container. It can handle almost any HTML tag.
 
 {% example html %}
-<div class="text-wrap">
+<div class="markdown">
    <h1>Hello World</h1>
    <p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
    <h2>Second level</h2>

pages/_includes/cards/typography.html

@@ -5,7 +5,7 @@
 	<div class="card-body">
 
 
-		<div class="text-wrap">
+		<div class="markdown">
 			<h1>Hello World</h1>
 			<p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus
 				ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate

pages/_layouts/docs.html

@@ -6,29 +6,12 @@ page-title: Documentation
 ---
 
 
-<div class="row">
-	<div class="col-lg-3 order-lg-1 mb-4">
-		<a href="{{ site.github_url }}" class="btn btn-block btn-primary mb-4" target="_blank">
-			{% include ui/icon.html icon="github" class="mr-2" %}Browse source code
-		</a>
-
-		{% for group in site.docs-menu %}
-      {{ group[1].title }}
-		<div class="list-group list-group-transparent mb-0">
-			{% for p in group[1].pages %}
-			{% assign doc = site.docs | where: "slug", p | first %}
-			<a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="list-group-item list-group-item-action{% if page.url == doc.url %} active{% endif %}">
-				{{ doc.title }}
-			</a>
-			{% endfor %}
-		</div>
-		{% endfor %}
-	</div>
+<div class="row justify-content-center">
 	<div class="col-lg-9">
 		<div class="card">
 			<div class="card-body p-lg-5">
 
-				<div class="text-wrap">
+				<div class="markdown">
 					<h2 class="h1 mt-0 mb-4">{{ page.title }}</h2>
 
 					{% if page.description %}

pages/changelog.html

@@ -5,7 +5,7 @@ menu: changelog
 done: true
 ---
 <div class="card">
-	<div class="card-body text-wrap p-5">
+	<div class="card-body markdown p-5">
 		{% for page in site.changelog reversed %}
 		<div class="mb-4">
 			<div class="mb-2">

scss/utils/_text.scss

@@ -50,7 +50,7 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.text-wrap {
+.markdown {
   line-height: 1.66;
 
   > :first-child {