init

16 files changed, 723 insertions, 0 deletions

diff --git a/sass/include/_button.scss b/sass/include/_button.scss
new file mode 100644
index 0000000..257e8c6
--- /dev/null
+++ b/sass/include/_button.scss
@@ -0,0 +1,41 @@
+// Form elements (button)
+button,
+input,
+select,
+textarea {
+	margin: 0;
+	padding: .5rem .75rem;
+	max-width: 100%;
+	background: var(--c2);
+	border: 0;
+	border-radius: .25rem;
+	font: inherit;
+	line-height: 1.125;
+	color: var(--f1);
+}
+button,
+[type="button" i],
+[type="submit" i],
+[type="reset" i] {
+	-webkit-appearance: button;
+	display: inline-block;
+	text-align: center;
+	white-space: nowrap;
+	background: var(--c2);
+	color: var(--f1);
+	border: 0;
+	cursor: pointer;
+	transition: opacity .25s;
+}
+button:hover,
+[type="button" i]:hover,
+[type="submit" i]:hover,
+[type="reset" i]:hover {
+	opacity: .75;
+}
+button[disabled],
+[type="button" i][disabled],
+[type="submit" i][disabled],
+[type="reset" i][disabled] {
+	opacity: .5;
+}
diff --git a/sass/include/_code.scss b/sass/include/_code.scss
new file mode 100644
index 0000000..bd72a32
--- /dev/null
+++ b/sass/include/_code.scss
@@ -0,0 +1,33 @@
+// Code
+pre,
+code,
+kbd,
+samp,
+tt,
+var {
+	border-radius: var(--br);
+	background: var(--c2);
+	font-family: var(--fm);
+	line-height: initial;
+	font-size: .8rem;
+	padding: .3rem .2rem;
+}
+pre {
+  display: block;
+	overflow-x: auto;
+  -ms-overflow-style: scrollbar;
+	white-space: pre;
+  > code {
+		display: block;
+		background: transparent;
+	}
+}
+
+// kbd
+kbd {
+  background-color: var(--f2);
+  color: var(--c1);
+  vertical-align: baseline;
+	font-size: 1rem;
+	padding: .2rem;
+}
diff --git a/sass/include/_document.scss b/sass/include/_document.scss
new file mode 100644
index 0000000..a5f91db
--- /dev/null
+++ b/sass/include/_document.scss
@@ -0,0 +1,37 @@
+// Document: Content-box & Responsive typography
+
+// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`
+*,
+*::before,
+*::after {
+  box-sizing: border-box; // 1
+}
+
+// 1. Add text decoration inheritance in all browsers (opinionated)
+// 2. Add vertical alignment inheritance in all browsers (opinionated)
+//::before,
+//::after {
+//  text-decoration: inherit; // 1
+//  vertical-align: inherit; // 2
+//}
+
+// 1. Correct the line height in all browsers
+// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
+// 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS
+// 4. Change the default tap highlight to be completely transparent in iOS
+// 5. Use the default cursor in all browsers (opinionated)
+// 6. Use a 4-space tab width in all browsers (opinionated)
+html {
+  text-rendering: optimizeLegibility;
+  background-color: var(--c1);
+  color: var(--f1);
+  font-family: var(--ff);
+  font-weight: var(--fw);
+  font-size: var(--fs);
+  line-height: var(--lh); // 1
+//  -ms-text-size-adjust: 100%; // 2
+//  -webkit-text-size-adjust: 100%; // 3
+//  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
+//  cursor: default; // 5
+//  tab-size: 4; // 6
+}
diff --git a/sass/include/_embedded.scss b/sass/include/_embedded.scss
new file mode 100644
index 0000000..48282f7
--- /dev/null
+++ b/sass/include/_embedded.scss
@@ -0,0 +1,19 @@
+// Embedded content
+img,
+video,
+svg {
+	max-width: 100%;
+	height: auto;
+}
+embed,
+iframe,
+object {
+	max-width: 100%;
+}
+iframe {
+	border-style: none;
+	width: 100%;
+	height: 100%;
+	border: 0;
+	overflow: hidden;
+}
diff --git a/sass/include/_form.scss b/sass/include/_form.scss
new file mode 100644
index 0000000..5761c3f
--- /dev/null
+++ b/sass/include/_form.scss
@@ -0,0 +1,36 @@
+// Form elements (non-button)
+fieldset {
+	padding: .5rem .75rem;
+	border: var(--bw) solid var(--c3);
+	border-radius: .25rem;
+}
+legend {
+	padding: 0 .25rem;
+}
+label {
+	cursor: pointer;
+	display: block;
+	margin-bottom: .25rem;
+}
+select,
+input:not([size]):not([type="button" i]):not([type="submit" i]):not([type="reset" i]):not([type="checkbox" i]):not([type="radio" i]) {
+	width: 100%;
+}
+[type="color" i] {
+	min-height: 2.125rem;
+}
+select:not([multiple]):not([size]) {
+	padding-right: 1.5rem;
+	background-repeat: no-repeat;
+	background-position: right .5rem center;
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	appearance: none;
+}
+textarea {
+	width: 100%;
+	resize: vertical;
+}
+textarea:not([rows]) {
+	height: 8rem;
+}
diff --git a/sass/include/_grid.scss b/sass/include/_grid.scss
new file mode 100644
index 0000000..1ced06b
--- /dev/null
+++ b/sass/include/_grid.scss
@@ -0,0 +1,14 @@
+/* Infinity Grid
+ * https://github.com/vladocar/Basic.css
+ */
+
+[style*="--c:"],section>section{
+color: var(--f2);
+padding: var(--s1);
+margin: var(--s1);
+text-align: center;
+}
+
+section {display: flex; flex-flow: row wrap}
+
+[style*="--c:"], section>section {flex:var(--c,1); margin:var(--s1)}
diff --git a/sass/include/_hr.scss b/sass/include/_hr.scss
new file mode 100644
index 0000000..aaa9f4e
--- /dev/null
+++ b/sass/include/_hr.scss
@@ -0,0 +1,15 @@
+/**
+ * HR
+ * https://github.com/picocss/pico
+ */
+
+// 1. Add the correct box sizing in Firefox
+// 2. Show the overflow in Edge and IE
+hr {
+  box-sizing: content-box; // 1
+  height: 0; // 1
+  overflow: visible; // 2
+  border: none;
+  border-top: 1px solid var(--f1)
+}
+header hr, footer hr {border-top: 1px solid var(--c4)}
diff --git a/sass/include/_icons.scss b/sass/include/_icons.scss
new file mode 100644
index 0000000..b98930b
--- /dev/null
+++ b/sass/include/_icons.scss
@@ -0,0 +1,102 @@
+/**
+ * SVG Icons
+ * https://github.com/feathericons/feather
+ * https://github.com/tabler/tabler-icons/find/master
+ *
+ * https://yqnn.github.io/svg-path-editor/
+ * https://jakearchibald.github.io/svgomg/
+ * https://codepen.io/yoksel/pen/MWKeKK
+ */
+
+@function icon($icon-name,$stroke,$stroke-width: 1,$fill:'none'){
+  $sc:"%23888";//stroke color
+  @if $ic {
+    $sc: $stroke
+  }
+  $p: (
+    's': $sc,
+    'sw': $stroke-width,
+    'f': $fill
+  );
+  $icons: (
+    //template-fill: "%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d=''/%3E%3C/svg%3E",
+    //template-stroke: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d=''/%3E%3C/svg%3E",
+    ffolder: "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='#{map-get($p, f)}' d='M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z'/%3E%3C/svg%3E",
+    ftag: "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='#{map-get($p, f)}' d='M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0133.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 010 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z'/%3E%3C/svg%3E",
+    bitbucket: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M3.648 4a.64.64 0 0 0-.64.744l3.14 14.528c.07.417.43.724.852.728h10a.644.644 0 0 0 .642-.539l3.35-14.71a.641.641 0 0 0-.64-.744L3.648 4z'/%3E%3Cpath d='M14 15h-4L9 9h6z'/%3E%3C/svg%3E",
+    check: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E",
+    chevron: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E",
+    clock: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E",
+    date: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E",
+    docker: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M22 12.54c-1.804-.345-2.701-1.08-3.523-2.94-.487.696-1.102 1.568-.92 2.4.028.238-.32 1.002-.557 1H3c0 5.208 3.164 7 6.196 7 4.124.022 7.828-1.376 9.854-5 1.146-.101 2.296-1.505 2.95-2.46z'/%3E%3Cpath d='M5 10h3v3H5zM8 10h3v3H8zM11 10h3v3h-3zM8 7h3v3H8zM11 7h3v3h-3zM11 4h3v3h-3zM4.571 18c1.5 0 2.047-.074 2.958-.78M10 16v.01'/%3E%3C/svg%3E%0A",
+    element: "%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-1.314 4.715c3.289 0 5.956 2.66 5.956 5.943a.879.879 0 0 1-1.758 0 4.194 4.194 0 0 0-4.198-4.189.878.878 0 1 1 0-1.754zm-5.092 9.504a.879.879 0 0 1-.879-.877 5.95 5.95 0 0 1 5.956-5.945.878.878 0 1 1 0 1.753 4.195 4.195 0 0 0-4.198 4.191.88.88 0 0 1-.879.878zm7.735 5.067c-3.29 0-5.957-2.662-5.957-5.944a.88.88 0 0 1 1.758 0 4.194 4.194 0 0 0 4.199 4.189.879.879 0 1 1 0 1.755zm0-2.683a.88.88 0 0 1-.88-.876.88.88 0 0 1 .88-.878 4.195 4.195 0 0 0 4.199-4.19.878.878 0 0 1 1.758 0c0 3.282-2.667 5.944-5.957 5.944z'/%3E%3C/svg%3E",
+    facebook: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E",
+    folder: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E",
+    github: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'/%3E%3C/svg%3E",
+    gitlab: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M22.65 14.39 12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z'/%3E%3C/svg%3E",
+    globe: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E",
+    home: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E",
+    instagram: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37zM17.5 6.5h.01'/%3E%3C/svg%3E",
+    linkedin: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E",
+    mail: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E",
+    mastodon: "%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M1.004 7.879c0 6.197-.347 13.894 5.559 15.486 2.132.574 3.964.696 5.438.61 2.674-.15 4.175-.969 4.175-.969l-.09-1.977s-1.911.61-4.059.54c-2.127-.075-4.37-.235-4.717-2.892a5.514 5.514 0 0 1-.047-.745c4.507 1.12 8.349.488 9.408.359 2.954-.359 5.528-2.212 5.855-3.905.515-2.667.474-6.508.474-6.508 0-5.206-3.353-6.733-3.353-6.733-3.291-1.537-12.029-1.521-15.288 0-.002.002-3.355 1.528-3.355 6.734zm4.923-2.667c1.363-1.548 4.201-1.65 5.465.327l.611 1.044.611-1.044c1.269-1.987 4.112-1.864 5.465-.327 1.248 1.463.969 2.838.969 9.373h-2.455V8.469c0-2.662-3.369-2.764-3.369.369v3.348h-2.437V8.838c0-3.133-3.369-3.031-3.369-.369v6.117H4.959c0-6.54-.274-7.922.968-9.374z'/%3E%3C/svg%3E",
+    matrix: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M.632.55v22.9H3V24H0V0h3v.55zm7.043 7.26v1.157h.033C10.867 6.726 12 9 12.49 9.329 14.918 6.697 18 8 18 11v5h-1.504v-5a1 1 0 0 0-3.488.019v5h-1.69v-4.973a1 1 0 0 0-3.679-.027V16H6V7.83zm15.693 15.64V.55H21V0h3v24h-3v-.55z'/%3E%3C/svg%3E",
+    minus: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E",
+    moon: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E",
+    pinterest: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='m8 20 4-9m-1.3 3c.437 1.263 1.43 2 2.55 2 2.071 0 3.75-1.554 3.75-4a5 5 0 1 0-9.7 1.7'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E",
+    python: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M12 9H5a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h3M12 15h7a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3'/%3E%3Cpath d='M8 9V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4M11 6v.01M13 18v.01'/%3E%3C/svg%3E",
+    rss: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16'/%3E%3Ccircle cx='5' cy='19' r='1'/%3E%3C/svg%3E",
+    search: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E",
+    stack: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1M8 16h8M8.322 12.582l7.956.836M8.787 9.168l7.826 1.664M10.096 5.764l7.608 2.472'/%3E%3C/svg%3E",
+    sun: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E",
+    tag: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m20.59 13.41-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82zM7 7h.01'/%3E%3C/svg%3E",
+    twitch: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7'/%3E%3C/svg%3E",
+    twitter: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'/%3E%3C/svg%3E",
+    x: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E",
+    youtube: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z'/%3E%3Cpath d='m9.75 15.02 5.75-3.27-5.75-3.27v6.54z'/%3E%3C/svg%3E"
+  );
+  $icon: map-get($icons, $icon-name);
+  @return url("data:image/svg+xml,#{$icon}");
+}
+@if $enable-icons {
+  @if $icon-ffolder {.ffolder { background-image: icon(ffolder, "none", 1, "%23888") }}
+  @if $icon-ftag {.ftag { background-image: icon(ftag, "none", 1, "%23888") }}
+  @if $icon-bitbucket {.bitbucket { background-image: icon(bitbucket, "%232684ff", 2, "none") }}
+  @if $icon-check {.check { background-image: icon(check, "%23888", 2, "none") }}
+  @if $icon-chevron {.chevron { background-image: icon(chevron, "%23888", 2, "none") }}
+  @if $icon-clock {.clock { background-image: icon(clock, "%23888", 2, "none") }}
+  @if $icon-date {.date { background-image: icon(date, "%23888", 2, "none") }}
+  @if $icon-docker {.docker { background-image: icon(docker, "%232391e5", 2, "none") }}
+  @if $icon-element {.element { background-image: icon(element, "none", 1, "%230dbd8b") }}
+  @if $icon-facebook {.facebook { background-image: icon(facebook, "%23395498", 2, "none") }}
+  @if $icon-folder {.folder { background-image: icon(folder, "%23888", 2, "none") }}
+  @if $icon-github {.github { background-image: icon(github, "%23888", 2, "none") }}
+  @if $icon-gitlab {.gitlab { background-image: icon(gitlab, "%23ef6824", 2, "none") }}
+  @if $icon-globe {.globe { background-image: icon(globe, "%23888", 2, "none") }}
+  @if $icon-home {.home { background-image: icon(home, "%23888", 2, "none") }}
+  @if $icon-instagram {.instagram { background-image: icon(instagram, "%23e90077", 2, "none") }}
+  @if $icon-linkedin {.linkedin { background-image: icon(linkedin, "%232362aa", 2, "none") }}
+  @if $icon-mail {.mail { background-image: icon(mail, "%23888", 2, "none") }}
+  @if $icon-mastodon {.mastodon { background-image: icon(mastodon, "none", 1, "%232989ce") }}
+  @if $icon-matrix {.matrix { background-image: icon(matrix, "%23888", 2, "none") }}
+  @if $icon-minus {.minus { background-image: icon(minus, "%23888", 2, "none") }}
+  @if $icon-moon {.moon { background-image: icon(moon, "%23888", 2, "none") }}
+  @if $icon-pinterest {.pinterest { background-image: icon(pinterest, "%23b7081c", 2, "none") }}
+  @if $icon-python {.python { background-image: icon(python, "%23f2ca45", 2, "none") }}
+  @if $icon-rss {.rss { background-image: icon(rss, "%23eb9036", 2, "none") }}
+  @if $icon-search {.search { background-image: icon(search, "%23888", 2, "none") }}
+  @if $icon-stack {.stack { background-image: icon(stack, "%23e77923", 2, "none") }}
+  @if $icon-sun {.sun { background-image: icon(sun, "%23888", 2, "none") }}
+  @if $icon-tag {.tag { background-image: icon(tag, "%23888", 2, "none") }}
+  @if $icon-twitch {.twitch { background-image: icon(twitch, "%23a970ff", 2, "none") }}
+  @if $icon-twitter {.twitter { background-image: icon(twitter, "%232ba5da", 2, "none") }}
+  @if $icon-x {.x { background-image: icon(x, "%23888", 2, "none") }}
+  @if $icon-youtube {.youtube { background-image: icon(youtube, "%23f00", 2, "none") }}
+  .svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    display: inline-block;
+    overflow: hidden;
+    vertical-align: middle
+  }
+}
diff --git a/sass/include/_misc.scss b/sass/include/_misc.scss
new file mode 100644
index 0000000..9f9c3b5
--- /dev/null
+++ b/sass/include/_misc.scss
@@ -0,0 +1,15 @@
+/**
+ * Miscs
+ * https://github.com/picocss/pico
+ */
+
+// Add the correct display in IE 10+
+[hidden],
+template {
+  display: none;
+}
+
+// Add the correct display in IE 9-
+canvas {
+  display: inline-block;
+}
diff --git a/sass/include/_nav.scss b/sass/include/_nav.scss
new file mode 100644
index 0000000..9dd4dac
--- /dev/null
+++ b/sass/include/_nav.scss
@@ -0,0 +1,62 @@
+/**
+ * Horizontal Nav
+ * https://github.com/raj457036/attriCSS
+ */
+main nav a,
+main nav a:visited {
+	font-weight: var(--fh);
+  border: .1rem solid var(--f2);
+  border-radius: var(--br);
+  padding: .3rem var(--s1);
+	margin: var(--s1);
+}
+main nav a:hover {
+  border-color: var(--a3);
+}
+nav {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  div {
+		ul {
+			line-height: 0;
+			margin-top: 0;
+			padding-bottom: var(--s1);
+		}
+    display: block;
+    margin-left: auto
+  }
+  div h2 {
+    font-size: 1rem;
+    &:hover {
+      color: var(--a3);
+    }
+  }
+  header {
+    display: inline;
+  }
+  header h1, div ul {
+    margin-bottom: 0
+  }
+  ul li {
+    display: inline-block;
+    margin: 0 0.2rem;
+    position: relative;
+    text-align: left;
+  }
+}
+
+@if map-get($breakpoints, "md") {
+  @media (max-width: map-get($breakpoints, "md")) {
+    header nav {
+      display: flex;
+      flex-direction: column;
+      header {
+        text-align: center
+      }
+      div {
+        margin: auto
+      }
+    }
+  }
+}
diff --git a/sass/include/_recent.scss b/sass/include/_recent.scss
new file mode 100644
index 0000000..88b5763
--- /dev/null
+++ b/sass/include/_recent.scss
@@ -0,0 +1,35 @@
+main {
+  .toc {
+    max-width: 260px;
+    min-width: 240px;
+  }
+  .toc-item {
+    padding: 10px 20px;
+    color: var(--f1);
+  }
+  .toc-item a, .toc-item-child a {
+    color: var(--f1);
+    &:hover {
+      cursor: pointer;
+      color: var(--a2);
+      text-decoration: underline;
+    }
+  }
+  .toc-item a.active, .toc-item-child a.active {
+    color: var(--a2);
+  }
+  .toc-item-child {
+    padding: 0 30px 5px;
+    color: var(--f1);
+  }
+}
+.toc-sticky {
+  border-radius: var(--br);
+  border-top: 5px solid var(--a1);
+  background-color: var(--c2);
+  position: sticky;
+  top: 10px;
+  padding: 10px 0 20px;
+  max-height: 100vh;
+  overflow: auto;
+}
diff --git a/sass/include/_scroller.scss b/sass/include/_scroller.scss
new file mode 100644
index 0000000..de1de5e
--- /dev/null
+++ b/sass/include/_scroller.scss
@@ -0,0 +1,17 @@
+/**
+ * Horizontal scroller (<figure>)
+ * https://github.com/picocss/pico
+ */
+
+// Wrapper to make any content responsive across all viewports
+figure {
+  display: block;
+  margin: 0;
+  padding: 0;
+  overflow-x: auto;
+
+  figcaption {
+    padding: var(--s1) 0;
+    color: var(--c4);
+  }
+}
diff --git a/sass/include/_sectioning.scss b/sass/include/_sectioning.scss
new file mode 100644
index 0000000..b433ac2
--- /dev/null
+++ b/sass/include/_sectioning.scss
@@ -0,0 +1,87 @@
+/**
+ * Sectioning: Container and responsive spacings for header, main, footer
+ * https://github.com/picocss/pico
+ */
+
+// Render the `main` element consistently in IE
+main {
+  display: flex;
+  // should always have a single div that holds all content below main.
+  // TOC or Recent Posts are the only other sections that would be directly under main.
+  article, div {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+}
+
+body {
+  width: 100%;
+  margin: 0;
+
+  > header,
+  > main,
+  > footer {
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+
+    // Semantic container
+    @if $enable-semantic-container {
+      padding: var(--s1);
+
+      // Centered viewport max-width only
+      @if $enable-maxwidth {
+        @media (min-width: $mb) {
+            min-width: $mb;
+            max-width: $mw;
+        }
+      }
+      // Centered viewport
+      @else if $enable-viewport {
+        @if map-get($breakpoints, "sm") and $enable-viewport {
+          @media (min-width: map-get($breakpoints, "sm")) {
+            max-width: map-get($viewports, "sm");
+            //padding-right: 0;
+            //padding-left: 0;
+            .toc {
+              display: none;
+            }
+          }
+        }
+        @if map-get($breakpoints, "md") and $enable-viewport {
+          @media (min-width: map-get($breakpoints, "md")) {
+            max-width: map-get($viewports, "md");
+          }
+        }
+        @if map-get($breakpoints, "lg") and $enable-viewport {
+          @media (min-width: map-get($breakpoints, "lg")) {
+            max-width: map-get($viewports, "lg");
+          }
+        }
+        @if map-get($breakpoints, "xl") and $enable-viewport {
+          @media (min-width: map-get($breakpoints, "xl")) {
+            max-width: map-get($viewports, "xl");
+          }
+        }
+      }
+    }
+    // Semantic container
+    @else {
+      padding: var(--s1) 0;
+    }
+  }
+  header, main {
+    padding-top: 0;
+    margin-top: 0;
+    padding-bottom: 0;
+    margin-bottom: 0;
+    hr {
+      margin:0.1rem 0
+    }
+  }
+  footer{
+    hr {
+      margin:0.5rem 0
+    }
+  }
+}
diff --git a/sass/include/_table.scss b/sass/include/_table.scss
new file mode 100644
index 0000000..7b9ddbf
--- /dev/null
+++ b/sass/include/_table.scss
@@ -0,0 +1,30 @@
+// Table
+table {
+	border-collapse: collapse;
+	width: 100%;
+	text-indent: 0; /* Remove text indentation from table contents in Chrome, Edge, and Safari. */
+}
+table caption {
+	margin-bottom: .5rem;
+}
+tr {
+	border-bottom: var(--bw) solid var(--c3);
+}
+td,
+th {
+	padding: var(--s1);
+}
+th {
+	text-align: left;
+}
+
+// Striped
+table {
+  tbody tr:nth-child(even) {
+    background-color: var(--c2);
+  }
+  thead tr {
+		border-top: var(--bw) solid var(--c3);
+    background-color: var(--c2);
+  }
+}
diff --git a/sass/include/_toc.scss b/sass/include/_toc.scss
new file mode 100644
index 0000000..0ee8476
--- /dev/null
+++ b/sass/include/_toc.scss
@@ -0,0 +1,44 @@
+main {
+  .toc {
+    max-width: 260px;
+    min-width: 240px;
+    margin-left: var(--s1);
+  }
+  .toc-item {
+    padding: .4rem 0;
+    color: var(--f1);
+  }
+  .toc-item a, .toc-item-child a {
+    color: var(--f1);
+    &:hover {
+      cursor: pointer;
+      color: var(--a2);
+      text-decoration: underline;
+    }
+  }
+  .toc-item a.active, .toc-item-child a.active {
+    color: var(--a2);
+  }
+  .toc-item-child {
+    padding: 0 var(--s1);
+    color: var(--f1);
+  }
+}
+.toc-sticky {
+  border-radius: var(--br);
+  border-top: 5px solid var(--a1);
+  background-color: var(--c2);
+  position: sticky;
+  top: var(--s2);
+  margin-top: var(--s2);
+  padding: 0 var(--s2) var(--s2);
+  max-height: 100vh;
+  overflow: auto;
+}
+@if map-get($breakpoints, "md") {
+  @media (max-width: map-get($breakpoints, "md")) {
+    .toc {
+      display: none;
+    }
+  }
+}
diff --git a/sass/include/_typography.scss b/sass/include/_typography.scss
new file mode 100644
index 0000000..f9f0caa
--- /dev/null
+++ b/sass/include/_typography.scss
@@ -0,0 +1,136 @@
+// Typography
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  padding-left: 0;
+	color: var(--f2);
+  margin-bottom: var(--s1);
+	margin-top: var(--s2);
+  font-weight: var(--fh);
+  font-size: var(--fs);
+}
+h1 {
+	font-size: 2rem;
+}
+h2 {
+	font-size: 1.75rem;
+}
+h3 {
+	font-size: 1.5rem;
+}
+h4 {
+	font-size: 1.25rem;
+}
+h5 {
+	font-size: 1.125rem;
+}
+header h1 {
+	margin-top: 0;
+}
+a {
+	color: var(--a1);
+	text-decoration: none;
+}
+a:hover {
+  color: var(--a2);
+	text-decoration: underline;
+}
+h1 a, h2 a, main nav a {
+  color: var(--f2);
+  text-decoration:none;
+  &:hover {
+		color: var(--a3);
+		text-decoration: none;
+  }
+}
+article {
+  padding-bottom: .2rem;
+}
+
+// Abbreviations
+// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
+abbr[title] {
+  border-bottom: var(--bw) dotted;
+  text-decoration: none; // 1
+  cursor: help;
+}
+
+// Highlighted text
+mark {
+  background-color: var(--c4);
+  color: var(--c1);
+  vertical-align: baseline;
+	padding: .1rem .4rem;
+}
+blockquote {
+	margin-left: 0;
+	padding: .5rem 0 .5rem 1.5rem;
+	border-left: .25rem solid var(--c3);
+}
+blockquote > :last-child {
+	margin-bottom: 0;
+}
+small {
+	font-size: .875rem;
+}
+
+/* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
+sub,
+sup {
+	font-size: .75em;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+sub {
+	bottom: -.25em;
+}
+sup {
+	top: -.5em;
+}
+
+address,
+blockquote,
+dl,
+figure,
+form,
+ol,
+p,
+pre,
+table,
+ul {
+  margin: var(--s1) 0;
+  color: var(--f1);
+  font-style: normal;
+  font-weight: var(--fw);
+  font-size: var(--fs);
+}
+
+/* Lists */
+ul,
+ol {
+  padding-right: 0;
+  padding-left: var(--s2);
+
+  li {
+    margin-bottom: var(--s1);
+  }
+}
+
+ul li {
+  list-style: square;
+}
+
+// Ins
+ins {
+  color: var(--cg);
+  text-decoration: none;
+}
+
+// del
+del {
+  color: var(--cr);
+}