docs-gem01 0.1.0.dev

data/_includes/nav_side.html

@@ -0,0 +1,68 @@
+{% assign pagesByFolder = site.pages | group_by_exp: 'page', 'page.path | split: "/" | first' %}
+{% for folder in pagesByFolder  %}
+{% if folder.items.size > 1 %}
+<div class="accordion" id="accordionLevels">
+    <div class="accordion-item">
+        <h2 class="accordion-header">
+            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
+              {{ folder.name }}
+            </button>
+        </h2>
+
+            <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
+                <div class="accordion-body">
+                    <ul>
+                        <li>
+                            <a href="#"></a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+    </div>
+
+</div>
+{% endif %}
+{% endfor %}
+
+
+<!--
+<ul>
+    {% assign pagesByFolder = site.pages | group_by_exp: 'page', 'page.url | split: "/" | first' %}
+    {% for folder in pagesByFolder %}
+      <li>
+        {{ folder.name }}
+        {% if folder.items.size > 0 %}
+          <ul>
+          {% assign subpagesByFolder = folder.items | group_by_exp: 'subpage', 'subpage.url | split: "/" | slice: 1' %}
+          {% for subfolder in subpagesByFolder %}
+            <li>
+              {{ subfolder.name }}
+              {% if subfolder.items.size > 0 %}
+                <ul>
+                {% for subpage in subfolder.items %}
+                  <li><a href="{{ subpage.url }}">{{ subpage.title }}</a></li>
+                {% endfor %}
+                </ul>
+              {% endif %}
+            </li>
+          {% endfor %}
+          </ul>
+        {% endif %}
+      </li>
+    {% endfor %}
+    </ul>
+    -->
+
+    <!--
+    Let's break down how this code works:
+    The site.pages variable is used to get a list of all the pages in your Jekyll site.
+    The group_by_exp filter is used to group the pages by the first segment of their url. This creates a list of folders, each of which contains the pages in that folder.
+    The first level of the navigation tree is generated by looping through the folders and displaying their names.
+    For each folder, we check if there are any subpages. If there are, we generate a sub-menu for that folder.
+    We use group_by_exp again to group the subpages by the second segment of their url. This creates a list of subfolders, each of which contains the subpages in that subfolder.
+    We loop through the subfolders and display their names.
+    For each subfolder, we check if there are any sub-subpages. If there are, we generate a sub-menu for that subfolder.
+    Finally, we loop through the sub-subpages and display their titles and URLs as links.
+    Note that this code assumes that your Jekyll pages are organized into folders, and that each folder corresponds to a top-level item in your navigation tree. If your pages are organized differently, you may need to modify the code to suit your needs.
+    -->

data/_includes/toc_pure_liquid.html

@@ -0,0 +1,68 @@
+{% capture tocWorkspace %}
+    {% comment %}
+        "...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe
+        Usage:
+            {% include toc_pure_liquid.html html=content sanitize=true class="inline_toc" id="my_toc" toc_min=2 toc_max=3 %}
+
+        Variables:
+            * html (string) - the HTML of compiled markdown generated by kramdown in Jekyll
+            * sanitize (bool) - when set to true, the headers will be sanitized in the TOC
+            * class (string) - a CSS class assigned to the TOC
+            * id (string) - an ID to assigned to the TOC
+            * toc_min (int) - the minimum TOC header level to use (if not set, check page, then site, then default to 2)
+            * toc_max (int) - the maximum TOC header level to use (if not set, check page, then site, then default to 3)
+
+        Output:
+            An unordered list representing the table of contents of a markdown block. This snippet will only generate the table of contents and will NOT output the markdown given to it
+    {% endcomment %}
+
+    {% capture my_toc %}{% endcapture %}
+    {% assign minHeader = include.toc_min | default: 2 %}
+    {% assign maxHeader = include.toc_max | default: 3 %}
+    {% assign nodes = include.html | split: '<h' %}
+
+    {% for node in nodes %}
+        {% if node == "" %}
+            {% continue %}
+        {% endif %}
+
+        {% assign headerLevel = node | replace: '"', '' | slice: 0, 1 %}
+        {% assign headerLevel = headerLevel | times: 1 %}
+        {% assign indentAmount = headerLevel | minus: minHeader | add: 1 %}
+        {% assign _workspace = node | split: '</h' %}
+
+        {% unless headerLevel >= minHeader %}
+            {% continue %}
+        {% endunless %}
+
+        {% if headerLevel > maxHeader %}
+            {% continue %}
+        {% endif %}
+
+        {% assign _idWorkspace = _workspace[0] | split: '"' %}
+        {% assign html_id = _idWorkspace[1] %}
+
+        {% capture _hAttrToStrip %}{{ headerLevel }} id="{{ html_id }}">{% endcapture %}
+        {% assign header = _workspace[0] | replace: _hAttrToStrip, '' | remove_first: "1>" %}
+
+        {% assign space = '' %}
+        {% for i in (1..indentAmount) %}
+            {% assign space = space | prepend: '  ' %}
+        {% endfor %}
+
+        {% capture my_toc %}{{ my_toc }}
+{{ space }}- [{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}](#{{ html_id }}){: class="nomunge" }{% endcapture %}
+
+    {% endfor %}
+
+    {% if include.class %}
+        {% capture my_toc %}{:.{{ include.class }}}
+{{ my_toc | lstrip }}{% endcapture %}
+    {% endif %}
+
+    {% if include.id %}
+        {% capture my_toc %}{: #{{ include.id }}}
+{{ my_toc | lstrip }}{% endcapture %}
+    {% endif %}
+{% endcapture %}{% assign tocWorkspace = '' %}
+{{ my_toc | markdownify }}

data/_layouts/default.html

@@ -0,0 +1,252 @@
+{%- assign url = '/' | prepend: site.baseurl | prepend: site.url -%}
+{%- assign title = site.title -%}
+{%- assign description = site.description -%}
+{%- assign image = '/assets/img/image.jpg' | prepend: site.baseurl | prepend: site.url -%}
+
+{%- if page.url != '/' -%}
+  {%- if page.url -%}
+    {%- assign url = page.url | prepend: site.baseurl | prepend: site.url -%}
+  {%- endif -%}
+  {%- if page.title -%}
+    {%- assign title = page.title | append: ' | ' | append: site.title  -%}
+  {%- endif -%}
+  {%- if page.description -%}
+    {%- assign description = page.description -%}
+  {%- endif -%}
+{%- endif -%}
+
+<!doctype html>
+<html lang="en" data-bs-theme="light">
+  {% include head.html %}
+  <body>
+    {% include header.html %}
+    <section class="section-main">
+      <div class="section__head">
+          {% include breadcrumb.html %}
+  
+          <div class="section__head-inner">
+              <div class="switch section__switch js-switch">
+                  <i class="ico-sun">
+                      {% include icon.html name='sun' %}
+                  </i>
+  
+                  <div class="form-check form-switch">
+                      <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
+                      <label class="form-check-label" for="flexSwitchCheckDefault">&nbsp;</label>
+                  </div>
+  
+                  <i class="ico-moon">
+                      {% include icon.html name='moon' %}
+                  </i>
+              </div><!-- /.switch -->
+          </div><!-- /.section__head-inner -->
+      </div><!-- /.section__head -->
+  
+      <div class="section__body">
+          <div class="row">
+              <div class="col-md-3 section__aside">
+                {% include nav_side.html %}
+              </div><!-- /.col-md-3 -->
+  
+              <div class="col-md-9 section__content">
+                  <div class="section__content-inner">
+                      <div class="article">
+                          <h1>What is .NET introduction and overview</h1>
+  
+                          <div class="article__meta">
+                                <ul>
+                                  <li>Article</li>
+                                  <li>02-Feb-2023</li>
+                                  <li>8 minutes to read</li>
+                                  <li>10 contributors</li>
+                              </ul>
+                          </div><!-- /.article__meta -->
+  
+                          {{ content }}
+
+                          <h2>Key attributes</h2>
+  
+                          <table class="table article__table">
+                              <thead>
+                                  <tr>
+                                    <th>Attribute</th>
+                                    <th>Value</th>
+                                  </tr>
+                              </thead>
+  
+                              <tbody>
+                                  <tr>
+                                      <td>Client Short Name/Acronym</td>
+                                      <td>Example Client</td>
+                                  </tr>
+  
+                                  <tr>
+                                      <td>Industry</td>
+                                      <td>One of the industry from known list</td>
+                                  </tr>
+  
+                                  <tr>
+                                      <td>Government</td>
+                                      <td>Yes/No</td>
+                                  </tr>
+  
+                                  <tr>
+                                      <td>Non-profit</td>
+                                      <td>Yes/No</td>
+                                  </tr>
+  
+                                  <tr>
+                                      <td>Publicly Listed</td>
+                                      <td>Yes/No</td>
+                                  </tr>
+  
+                                  <tr>
+                                      <td>Insight APAC Top 10</td>
+                                      <td>Yes/No</td>
+                                  </tr>
+  
+                                  <tr>
+                                      <td>Rating on Ease of Doing Business</td>
+                                      <td>Very Hard < Hard < Average < Easy < Very Easy</td>
+                                  </tr>
+  
+                                  <tr>
+                                      <td>Location (Primary</td>
+                                      <td>City, Country Time Zone</td>
+                                  </tr>
+                              </tbody>
+                          </table>
+  
+                          <h2>Business overview</h2>
+  
+                          <div class="article__entry">
+                              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
+  
+                              <p>Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem.</p>
+  
+                              <p>In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</p>
+  
+                              <p>Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien.</p>
+                          </div><!-- /.article__entry -->
+  
+                          <h2>Key contacts </h2>
+  
+                          <table class="table article__table table--alt">
+                              <thead>
+                                  <tr>
+                                      <th>Name</th>
+                                      <th>Primary Day to Day Contact</th>
+                                      <th>Approval Authority Additional Fees</th>
+                                      <th>Changes to In-Scope Services</th>
+                                      <th>Agreement Terms</th>
+                                      <th>Invoice Recipient</th>
+                                  </tr>
+                              </thead>
+  
+                              <tbody>
+                                  <tr>
+                                      <td>Fred Arthur</td>
+                                      <td>Yes</td>
+                                      <td>Yes</td>
+                                      <td>Yes</td>
+                                      <td>Yes</td>
+                                      <td>Yes</td>
+                                  </tr>
+  
+                                  <tr>
+                                      <td>Jane</td>
+                                      <td>Yes</td>
+                                      <td>No</td>
+                                      <td>No</td>
+                                      <td>No</td>
+                                      <td>Yes</td>
+                                  </tr>
+  
+                                  <tr>
+                                      <td>Jack</td>
+                                      <td>No</td>
+                                      <td>No</td>
+                                      <td>No</td>
+                                      <td>No</td>
+                                      <td>No</td>
+                                  </tr>
+  
+                                  <tr>
+                                      <td>Finance</td>
+                                      <td>No</td>
+                                      <td>No</td>
+                                      <td>No</td>
+                                      <td>No</td>
+                                      <td>Yes</td>
+                                  </tr>
+  
+                                  <tr>
+                                      <td>Sally</td>
+                                      <td>No</td>
+                                      <td>No</td>
+                                      <td>No</td>
+                                      <td>No</td>
+                                      <td>Yes</td>
+                                  </tr>
+  
+                                  <tr>
+                                      <td>Fred</td>
+                                      <td>No</td>
+                                      <td>No</td>
+                                      <td>No</td>
+                                      <td>No</td>
+                                      <td>Yes</td>
+                                  </tr>
+                              </tbody>
+                          </table>
+  
+                          <h2>Environment overview including core services</h2>
+  
+                          <figure>
+                              <img src="assets/img/image-2.png" alt="" width="942" height="715">
+                          </figure>
+  
+                          <div class="article__entry">
+                              <p>A header is a way to easily change the font size when making title or putting an emphasis before creating a paragraph. You may choose a heading style between <span>&lt;h1&gt;</span> to <span>&lt;h6&gt;</span> depending on your preference.</p>
+                          </div><!-- /.article__entry -->
+  
+                          <button class="btn btn-danger article__btn">Link button</button>
+  
+                          <div class="article__tiles tiles">
+                              <div class="tile tile--danger tiles__tile article__tile">
+                                  <h6>WARNING</h6>
+  
+                                  <p>These callout names are not pre-defined by the theme: you need to define your own names.</p>
+                              </div><!-- /.tile -->
+  
+                              <div class="tile tile--danger tile--danger-alt tiles__tile article__tile">
+                                  <h6>NOTE</h6>
+  
+                                  <p>A paragraph</p>
+                              </div><!-- /.tile -->
+                          </div><!-- /.article__cards -->
+  
+                          <div class="article__video">
+                              <script src="{{ '//fast.wistia.com/embed/medias/s3lqfi0zn7.jsonp' }}" async=""></script>
+                              <script src="{{ '//fast.wistia.com/assets/external/E-v1.js' }}" async=""></script>
+  
+                              <div class="wistia_embed wistia_async_s3lqfi0zn7" style="height:349px;width:620px">&nbsp;</div>
+                          </div>
+                      </div><!-- /.article -->
+                  </div><!-- /.section__content-inner -->
+  
+                  {% include nav_page.html %}
+
+
+              </div><!-- /.col-md-9 -->
+          </div><!-- /.row -->
+      </div><!-- /.section__body -->
+  </section><!-- /.section-main -->
+    <div class="callout text-center bg-danger">
+      <div class="container">
+          <p class="m-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
+      </div><!-- /.container -->
+    </div><!-- /.callout -->
+    {% include footer.html %}
+  </body>
+</html>

data/_layouts/page.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{ content }}

data/_layouts/post.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{ content }}

data/_sass/_accordion.scss

@@ -0,0 +1,77 @@
+/* ------------------------------------------------------------ *\
+	Accordion
+\* ------------------------------------------------------------ */
+
+.accordion {
+	border: 0;
+
+	a:hover {
+		background: #f9f9fa;
+	}
+
+	.accordion-button {
+		padding: 0;
+		border: 0;
+		box-shadow: none;
+		font-family: $font-family-jost;
+		font-weight: normal;
+		font-size: 17px;
+		padding-left: 27px;
+		color: #000;
+		background: transparent;
+		appearance: none;
+		transition: none;
+
+		&:after {
+			width: 0;
+			height: 0;
+			border-left: 4px solid #000;
+			border-top: 4px solid transparent;
+			border-bottom: 4px solid transparent;
+			right: auto;
+			left: 0;
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			transition: transform .3s, margin-top .3s;
+		}
+	}
+
+	.accordion-header {
+		transition: none;
+	}
+
+	.accordion-body {
+		padding: 4px 24px;
+	}
+
+	.accordion-body a {
+		padding: 1px 0 0 24px;
+		display: block; 
+		transition: background-color .3s;
+	}
+
+	.accordion-body ul {
+		margin-bottom: 0;
+		list-style: none;
+		margin-top: 14px;
+		padding-left: 19px;
+	}
+
+	.accordion-button:not(.collapsed) {
+		background: transparent;
+
+		&:after {
+			transform: rotate(90deg) translateY(-50%);
+			margin-top: -5px;
+		}
+	}
+
+	.accordion-item {
+		border: 0;
+
+		& + .accordion-item {
+			margin-top: 20px;
+		}
+	}
+}

data/_sass/_article.scss

@@ -0,0 +1,96 @@
+/* ------------------------------------------------------------ *\
+	Article
+\* ------------------------------------------------------------ */
+
+.article {
+	h1 {
+		margin-bottom: 20px;
+	}
+
+	h2 {
+		margin: 31px 0;
+	}
+
+	figure {
+		margin: 55px 0 65px;
+		width: 100%; 
+		max-width: 59.2rem;
+	}
+
+	figure img {
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+		object-position: left center;
+	}
+
+	p {
+		line-height: 1.76;
+		margin-bottom: 30px;
+	}
+
+	.article__meta {
+		margin-bottom: 30px;
+	}
+
+	.article__meta ul {
+		padding: 0;
+		display: flex;
+		align-items: center;
+		list-style: none;
+		color: $danger;
+	}
+
+	.article__meta li + li {
+		position: relative;
+		margin-left: 8px;
+		padding-left: 7px;
+
+		&:before {
+			content: '';
+			display: inline-block;
+			width: 3px;
+			height: 3px;
+			border-radius: 50%;
+			background: $danger;
+			position: absolute;
+			top: 11px;
+			left: 0;
+		}
+	}
+
+	.article__tiles {
+		max-width: 710px;
+		margin-bottom: 45px;
+	}
+
+	.article__video {
+		max-width: 780px;
+
+		iframe {
+			width: 100%;
+		}
+	}
+
+	.article__table {
+		margin-bottom: 58px;
+		max-width: 1024px;
+	}
+
+	.article__entry {
+		max-width: 910px;
+	}
+
+	.article__entry p span {
+		padding: 0 2px;
+		background: #f5f6fa;
+		border: 1px solid #dddddd;
+		border-radius: 3px;
+		display: inline-block;
+	}
+
+	.article__btn {
+		margin-bottom: 57px;
+		margin-top: 10px;
+	}
+}

data/_sass/_base.scss

@@ -0,0 +1,48 @@
+/* ------------------------------------------------------------ *\
+	Base
+\* ------------------------------------------------------------ */
+
+body {
+	font-family: $font-family-jost;
+	font-size: 17px;
+	color: #000000;
+}
+
+a {
+	text-decoration: none;
+	color: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-family: $font-family-zilla-slab;
+	font-weight: normal;
+}
+
+h1 {
+	font-size: 40px;
+}
+
+h2 {
+	font-size: 30px;
+}
+
+h3 {
+	font-size: 28px;
+}
+
+h4 {
+	font-size: 20px;
+}
+
+h5 {
+	font-size: 18px;
+}
+
+h6 {
+	font-size: 17px;
+}

data/_sass/_bootstrap-icons.scss

@@ -0,0 +1,7 @@
+.bi {
+  display: inline-block;
+  fill: currentColor;
+  height: 1em;
+  vertical-align: -.1em;
+  width: 1em;
+}

data/_sass/_breadcrumb.scss

@@ -0,0 +1,20 @@
+/* ------------------------------------------------------------ *\
+	Breadcrumb
+\* ------------------------------------------------------------ */
+
+.breadcrumb {
+	margin: 0;
+
+	.breadcrumb-item:hover {
+		color: $danger;
+	}
+
+	.breadcrumb-item+.breadcrumb-item {
+		padding-left: 3px;
+	}
+
+	.breadcrumb-item+.breadcrumb-item::before {
+		content: '/';
+		color: #c1c1c1;
+	}
+}

data/_sass/_btn.scss

@@ -0,0 +1,9 @@
+/* ------------------------------------------------------------ *\
+	Button
+\* ------------------------------------------------------------ */
+
+.btn {
+    padding: 4px 25px;
+    font-size: 17px;
+    border-radius: 5px;
+}

data/_sass/_callout.scss

@@ -0,0 +1,13 @@
+/* ------------------------------------------------------------ *\
+	Callout
+\* ------------------------------------------------------------ */
+
+.callout {
+	background: #b11c89;
+	font-size: 25px;
+	text-align: center;
+	padding: 27px 0;
+	color: $white;
+	position: relative;
+	z-index: 2;
+}