diff --git a/docs/assets/css/custom.css b/docs/assets/css/custom.css
index 6656eae..fb94813 100644
--- a/docs/assets/css/custom.css
+++ b/docs/assets/css/custom.css
@@ -25,3 +25,93 @@ a.boxedThumb:hover {
transform: scale(1.05);
z-index: 5;
}
+
+.step {
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -ms-flex-direction: column;
+ -webkit-flex-direction: column;
+ flex-direction: column
+}
+
+.step-container {
+ -ms-align-items: flex-start;
+ -webkit-align-items: flex-start;
+ align-items: flex-start;
+ -ms-flex-align: start
+}
+
+@media only screen and (max-width:599px) {
+ .step-container {
+ -ms-flex-direction: column;
+ -webkit-flex-direction: column;
+ flex-direction: column
+ }
+}
+
+.row {
+ position: relative;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -ms-flex-direction: row;
+ -webkit-flex-direction: row;
+ flex-direction: row;
+ margin-bottom: 20px
+}
+
+.thumb {
+ border-radius: 3px;
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
+ color: rgb(99, 102, 95);
+ margin-right: 10px;
+ margin-left: 10px;
+ display: block;
+ max-width: 110px;
+ max-height: 90px;
+ object-fit: cover;
+ opacity: .7;
+ -ms-flex: 0 1 110px;
+ -webkit-flex: 0 1 110px;
+ flex: 0 1 110px;
+ box-shadow: 0 0 0 0 transparent;
+ transition: box-shadow .2s, border-color .2s, opacity .2s;
+ white-space: nowrap
+}
+
+.thumb.active,
+.thumb:hover {
+ transform: translateY(-4px);
+ opacity: 1;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, .5)
+}
+
+@media only screen and (max-width:599px) {
+ .thumb.active,
+ .thumb:hover {
+ transform: translateY(0);
+ box-shadow: 0 0 2px rgba(0, 0, 0, .75)
+ }
+}
+
+.large-image {
+ -ms-flex: 1 2;
+ -webkit-flex: 1 2;
+ flex: 1 2;
+ width: 575px;
+ max-height: 432px;
+ object-fit: cover;
+ display: flex;
+ -ms-justify-content: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -ms-flex-pack: center;
+ -ms-align-items: center;
+ -webkit-align-items: center;
+ align-items: center;
+ -ms-flex-align: center;
+ -ms-flex-direction: column;
+ -webkit-flex-direction: column;
+ flex-direction: column;
+}
diff --git a/docs/assets/images/IMG_8800.jpg b/docs/assets/images/IMG_8800.jpg
new file mode 100644
index 0000000..8423c2e
Binary files /dev/null and b/docs/assets/images/IMG_8800.jpg differ
diff --git a/docs/assets/images/IMG_8801.jpg b/docs/assets/images/IMG_8801.jpg
new file mode 100644
index 0000000..2f2be49
Binary files /dev/null and b/docs/assets/images/IMG_8801.jpg differ
diff --git a/docs/assets/images/IMG_8802.jpg b/docs/assets/images/IMG_8802.jpg
new file mode 100644
index 0000000..8af78c9
Binary files /dev/null and b/docs/assets/images/IMG_8802.jpg differ
diff --git a/docs/assets/images/IMG_8803.jpg b/docs/assets/images/IMG_8803.jpg
new file mode 100644
index 0000000..243b483
Binary files /dev/null and b/docs/assets/images/IMG_8803.jpg differ
diff --git a/docs/assets/images/IMG_8804.jpg b/docs/assets/images/IMG_8804.jpg
new file mode 100644
index 0000000..87ea2a4
Binary files /dev/null and b/docs/assets/images/IMG_8804.jpg differ
diff --git a/docs/assets/js/custom.js b/docs/assets/js/custom.js
index 7c4e69c..b98fe18 100644
--- a/docs/assets/js/custom.js
+++ b/docs/assets/js/custom.js
@@ -1,24 +1,45 @@
$(document).ready(function () {
- let imageGroups = []
- $(".lightbox").each(function () {
- let imageSource = $(this).attr('src')
- let imageAlt = $(this).attr('alt').replace(/ /g,"")
- let imageTitle = $(this).attr('alt')
- if (imageTitle) {
- imageTitle = 'title="' + imageTitle + '" '
- }
- else {
- imageTitle = ''
- }
- $(this).
- wrap('')
- imageGroups.push('.' + imageAlt)
- })
- jQuery.unique(imageGroups)
- imageGroups.forEach(imageGroupsSet)
+ $(".step-container img:first-child").each(function () {
+ $(this)
+ .clone()
+ .removeClass("thumb")
+ .addClass("large-image")
+ .insertBefore($(this));
+ $(this).addClass("active");
+ })
- function imageGroupsSet (value) {
- $(value).simpleLightbox()
- }
+ let imageGroups = []
+ $(".lightbox").each(function () {
+ let imageSource = $(this).attr('src')
+ let imageAlt = $(this).attr('alt').replace(/ /g,"")
+ let imageTitle = $(this).attr('alt')
+ if (imageTitle) {
+ imageTitle = 'title="' + imageTitle + '" '
+ }
+ else {
+ imageTitle = ''
+ }
+ $(this).
+ wrap('')
+ imageGroups.push('.' + imageAlt)
+ })
+ jQuery.unique(imageGroups)
+ imageGroups.forEach(imageGroupsSet)
+
+ function imageGroupsSet (value) {
+ $(value).simpleLightbox()
+ }
})
+
+// Attach a delegate function on mouse over thumbnail
+$(".thumb").on("mouseover", function() {
+
+ // Set large image source to the thumbnail image source
+ $(this).siblings("img:first")
+ .attr("src", $(this).attr("src"));
+
+ // Activate the corresponding step-thumbnail and deactivate all others
+ $(this).addClass("active")
+ .siblings().removeClass("active");
+});
diff --git a/docs/tutorials/hardware/disassembling_console.md b/docs/tutorials/hardware/disassembling_console.md
index 26ae347..0ef3187 100644
--- a/docs/tutorials/hardware/disassembling_console.md
+++ b/docs/tutorials/hardware/disassembling_console.md
@@ -1,4 +1,20 @@
+## Step 1
+
+
+## Step 2
+
+
+
+
+
+
+ 
+ 
+