diff --git a/docs/assets/css/custom.css b/docs/assets/css/custom.css
index fb94813..f77d811 100644
--- a/docs/assets/css/custom.css
+++ b/docs/assets/css/custom.css
@@ -1,117 +1,91 @@
-/* custom.css */
-a.boxedThumb {
- display: block;
- padding: 4px;
- line-height: 20px;
- border: 1px solid #ddd;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
- -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
- -webkit-transition: -webkit-transform .15s ease;
- -moz-transition: -moz-transform .15s ease;
- -o-transition: -o-transform .15s ease;
- -ms-transition: -ms-transform .15s ease;
- transition: transform .15s ease;
-}
-
-a.boxedThumb:hover {
- -webkit-transform: scale(1.05);
- -moz-transform: scale(1.05);
- -o-transform: scale(1.05);
- -ms-transform: scale(1.05);
- transform: scale(1.05);
- z-index: 5;
+@CHARSET "UTF-8";
+body {
+ font-family: Helvetica;
+ font-size: 12px;
+ color: #63665F
}
.step {
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- -ms-flex-direction: column;
- -webkit-flex-direction: column;
- flex-direction: column
+ display: grid;
+ grid-template-areas:
+ "step-title step-title"
+ "step-picture step-thumbs"
+ "step-picture step-contents";
+ grid-template-rows: auto auto 1fr;
+ grid-template-columns: 50% 50%;
+ margin: 0;
}
-.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
+/* Stack the layout on small devices/viewports. */
+@media all and (max-width: 479px) {
+ .step {
+ grid-template-areas:
+ "step-title"
+ "step-picture"
+ "step-thumbs"
+ "step-contents";
+ grid-template-rows: auto 1fr 90px auto;
+ grid-template-columns: auto;
}
}
-.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
+.step-title {
+ grid-area: step-title;
}
-.thumb {
+.step-picture {
+ grid-area: step-picture;
+ max-width: 100%;
+}
+
+/* Make the picture fill width on small devices/viewports. */
+@media only screen and (max-width: 479px) {
+ .step-picture {
+ margin-bottom: 10px;
+ width: 100%;
+ }
+}
+
+.step-thumbs {
+ grid-area: step-thumbs;
+}
+
+.step-contents {
+ grid-area: step-contents;
+ padding: 10px;
+}
+
+.step-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;
+ margin: 10px 10px 0px 10px;
+ display: inline-block;
+ max-width: 27%!important;
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 {
+/* Make thumbnails on a separate row on small devices/viewports.*/
+@media only screen and (max-width: 479px) {
+ .step-thumb {
+ width: 30%;
+ max-height: 180px;
+ }
+}
+
+.step-thumb.active,
+.step-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)
+/* No translation and smaller shadow on small devices/viewports. */
+@media all and (max-width: 479px) {
+ .step-thumb.active,
+ .step-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/js/custom.js b/docs/assets/js/custom.js
index b98fe18..fdce47d 100644
--- a/docs/assets/js/custom.js
+++ b/docs/assets/js/custom.js
@@ -1,45 +1,115 @@
$(document).ready(function () {
- $(".step-container img:first-child").each(function () {
- $(this)
- .clone()
- .removeClass("thumb")
- .addClass("large-image")
- .insertBefore($(this));
- $(this).addClass("active");
- })
- 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)
+ /* Convert a loose structure of:
- function imageGroupsSet (value) {
- $(value).simpleLightbox()
- }
+ article
+ .step-title
+ .step-thumb
+ .step-thumb
+
+ .step-title
+ .step-thumb
+ .step-thumb
+
+
+ into a strict hierarchy of containers:
+
+ article
+ .step
+ .step-title
+ .step-thumbs
+ .step-thumb
+ .step-thumb
+ .step-contents
+
+ .step
+ .step-title
+ .step-thumbs
+ .step-thumb
+ .step-thumb
+ .step-contents
+
+ */
+
+ /* First, wrap all "step-title" article elements and all elements
+ until next such element or end of article into a "step" div */
+ $("article").each(function () {
+ var step = $();
+ var wrap = false;
+ $(this).contents().each(function () {
+ if ($(this).hasClass("step-title")) {
+ if (wrap && step.length > 1) {
+ step.wrapAll('');
+ }
+ step = $();
+ wrap = true;
+ }
+ step = step.add($(this));
+ });
+ if (wrap && step.length > 1) {
+ step.wrapAll('');
+ }
+ });
+
+ /* Then wrap all "step step-thumb" elements into a "step-thumbs"
+ div */
+ $(".step p").each(function () {
+ var thumbs = $();
+ $(this).contents().each(function () {
+ if ($(this).hasClass("step-thumb")) {
+ thumbs = thumbs.add($(this));
+ }
+ });
+ if (thumbs.length > 0) {
+ thumbs.unwrap();
+ thumbs.wrapAll('');
+ }
+ });
+
+ /* Then wrap all other except "step step-title" ones into a
+ "step-contents" div */
+ $(".step").each(function () {
+ var contents = $();
+ $(this).contents().each(function () {
+ if (!$(this).hasClass("step-title") &&
+ !$(this).hasClass("step-thumbs") &&
+ !$(this).hasClass("step-thumb")) {
+ contents = contents.add($(this));
+ }
+ });
+ if (contents.length > 0) {
+ contents.wrapAll('');
+ }
+ });
+
+ /* Create the large "step-picture" from the first thumbnail in a
+ "step-thumbs" */
+
+ /* For each first thumbnail in a "step-thumbs" */
+ $(".step-thumbs img:first-child").each(function () {
+
+ /* Clone first thumbnail, change its class to create the
+ "step-picture" by default and insert it in the parent
+ step */
+ $(this)
+ .clone()
+ .removeClass("step-thumb")
+ .addClass("step-picture")
+ .insertBefore($(this).parent());
+
+ /* Make the first thumbnail active by default */
+ $(this).addClass("active");
+ })
})
+
+/* Attach a delegate function on mouse over thumbnail to change the
+ step main picture and radio-toggle the thumbnails */
+$(".step-thumb").on("mouseover", function() {
-// Attach a delegate function on mouse over thumbnail
-$(".thumb").on("mouseover", function() {
+ /* Set picture image source to the thumbnail image source */
+ $(this).closest(".step").find(".step-picture").attr("src", $(this).attr("src"));
- // 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
+ /* Activate the corresponding thumbnail and deactivate all others */
$(this).addClass("active")
- .siblings().removeClass("active");
+ .siblings().removeClass("active");
});
diff --git a/docs/tutorials/hardware/change_sd_card.md b/docs/tutorials/hardware/change_sd_card.md
index 1b3bc9b..c7aa327 100644
--- a/docs/tutorials/hardware/change_sd_card.md
+++ b/docs/tutorials/hardware/change_sd_card.md
@@ -1,12 +1,18 @@
# Flashing a new micro-SD card
-The following steps describe how to flash a micro-SD card with the latest version of FunKey-OS. This must be done before switching micro-SD cards inside the console.
+The following steps describe how to flash a micro-SD card with the
+latest version of FunKey-OS. This must be done before switching
+micro-SD cards inside the console.
-Note: Everything on the micro-SD card will be lost, be sure to save your data.
+Note: Everything on the micro-SD card will be lost, be sure to save
+your data.
## Download the latest FunKey-OS image file
-Get the latest "***FunKey-rootfs-x.y.z.img***" SD card image file directly from [here](https://github.com/FunKey-Project/FunKey-OS/releases/download/FunKey-OS-2.0.0/FunKey-sdcard-2.0.0.img) or from the bottom of the latest release page in the "assets" section:
+Get the latest "***FunKey-rootfs-x.y.z.img***" SD card image file
+directly from
+[here](https://github.com/FunKey-Project/FunKey-OS/releases/download/FunKey-OS-2.0.0/FunKey-sdcard-2.0.0.img)
+or from the bottom of the latest release page in the "assets" section:
https://github.com/FunKey-Project/FunKey-OS/releases/latest
@@ -14,15 +20,21 @@ Get the latest "***FunKey-rootfs-x.y.z.img***" SD card image file directly from
## Flash the micro-SD card with balenaEtcher
-- Download and install balenaEtcher for Windows/Mac OS/Linux from balena.io.
+- Download and install balenaEtcher for Windows/Mac OS/Linux from balena.io.
-- Run balenaEtcher and click on "Flash from file" to select the FunKey-OS image file
+- Run balenaEtcher and click on "Flash from file" to select the
+ FunKey-OS image file
-- Insert the micro-SD card in your computer and select the SD card drive (balenaEtcher should automatically detect it for you)
+- Insert the micro-SD card in your computer and select the SD card
+ drive (balenaEtcher should automatically detect it for you)
- Finally, click **Flash**
-- You'll see a progress bar. Once complete, **make sure the flashing was successful, otherwise retry to flash the SD card**. The program will automatically unmount the SD card so it's safe to remove it from your computer.
+- You'll see a progress bar. Once complete, **make sure the flashing
+ was successful, otherwise retry to flash the SD card**. The program
+ will automatically unmount the SD card so it's safe to remove it
+ from your computer.
{: .lightbox}
@@ -30,20 +42,68 @@ Get the latest "***FunKey-rootfs-x.y.z.img***" SD card image file directly from
# Switching micro-SD cards
-On the FunKey S, the micro-SD card was voluntarily placed against the casing so that it has no degree of liberty and cannot move by accident during the eventful life of a keychain. Removing/switching the micro-SD card was nevertheless designed to be pretty straightforward and only require a standard **Phillips screwdriver (PH0)**. Please follow the steps below carefully.
+On the FunKey S, the micro-SD card was voluntarily placed against the
+casing so that it has no degree of liberty and cannot move by accident
+during the eventful life of a keychain. Removing/switching the
+micro-SD card was nevertheless designed to be pretty straightforward
+and only require a standard **Phillips screwdriver (PH0)**. Please
+follow the steps below carefully.
+### **STEP 1 - Removing the screws** {: .step-title}
+{: .step-thumb}
+{: .step-thumb}
+{: .step-thumb}
-| **Display** | **Action** |
-| :----------------------------------------------------------: | :----------------------------------------------------------- |
-| {: .lightbox width=240}{: .lightbox width=240}{: .lightbox width=240} | **STEP 1 - Removing the screws**
Using a standard **PH0 screwdriver**, remove the 2 screws on the back of your FunKey S.
Be careful to use the correct screwdriver head size not to damage the screws. |
-| {: .lightbox width=240}{: .lightbox width=240}{: .lightbox width=240} | **STEP 2 - Opening up the console**
Carefully remove:
1) The plastic back of the console by pulling from the side of the hinge first.
2) The keychain lanyard and axis.
3) The L/R plastic buttons by gently pulling them out of their axis. Be careful not to damage the switch on the circuit board. |
-| {: .lightbox width=240}{: .lightbox width=240} | **STEP 3 - Exposing the circuit board**
Pull back the battery (leave it connected) to expose the circuit board. |
-| {: .lightbox width=240} | **STEP 4 - Accessing the SD card**
By grabbing it **by the micro-USB port**, gently pull the circuit board towards you until you have access to the SD card. |
-| {: .lightbox width=240}{: .lightbox width=240} | **STEP 5 - Switching SD cards**
You can now remove the old micro-SD card from its socket and insert the new one (previously flashed as described [in the 1st part of this tutorial](#flashing-a-new-micro-sd-card)). |
-| {: .lightbox width=240}{: .lightbox width=240} | **STEP 6 - Reassembly**
Before putting back down the circuit board in the case, please make sure the speaker on the circuit board is already inserted in the casing. If not, then insert it first like in the pictures.
Reassemble the console by following the previous steps backwards.
Be careful not to damage the switches on the circuit board when putting back the L/R plastic buttons. |
+Using a standard **PH0 screwdriver**, remove the 2 screws on the back
+of your FunKey S.
Be careful to use the correct screwdriver head
+size not to damage the screws.
+### **STEP 2 - Opening up the console** {: .step-title}
+{: .step-thumb}
+{: .step-thumb}
+{: .step-thumb}
+Carefully remove:
+
+1. The plastic back of the console by pulling from the side of the
+hinge first.
+2. The keychain lanyard and axis.
+3. The L/R plastic buttons by gently pulling them out of their
+axis. Be careful not to damage the switch on the circuit board.
+
+### **STEP 3 - Exposing the circuit board** {: .step-title}
+{: .step-thumb}
+{: .step-thumb}
+
+Pull back the battery (leave it connected) to expose the circuit board.
+
+### **STEP 4 - Accessing the SD card** {: .step-title}
+{: .step-thumb}
+
+By grabbing it **by the micro-USB port**, gently pull the circuit
+board towards you until you have access to the SD card.
+
+### **STEP 5 - Switching SD cards** {: .step-title}
+{: .step-thumb}
+{: .step-thumb}
+
+You can now remove the old micro-SD card from its socket and insert
+the new one (previously flashed as described [in the 1st part of this
+tutorial](#flashing-a-new-micro-sd-card)).
+
+### **STEP 6 - Reassembly** {: .step-title}
+{: .step-thumb}
+{: .step-thumb}
+
+Before putting back down the circuit board in the case, please make
+sure the speaker on the circuit board is already inserted in the
+casing. If not, then insert it first like in the pictures.
+
+Reassemble the console by following the previous steps backwards.
+
+Be careful not to damage the switches on the circuit board when
+putting back the L/R plastic buttons.
--8<--
includes/glossary.md
---8<--
\ No newline at end of file
+--8<--
diff --git a/docs/tutorials/hardware/disassembling_console.md b/docs/tutorials/hardware/disassembling_console.md
index 0ef3187..1e15884 100644
--- a/docs/tutorials/hardware/disassembling_console.md
+++ b/docs/tutorials/hardware/disassembling_console.md
@@ -1,19 +1,17 @@
-## Step 1
-
+## Step 1 {: .step-title}
+{: .step-thumb}
+{: .step-thumb}
+{: .step-thumb}
-## Step 2
-
-
-
-
-
-
- 
- 
-