Chapter 1 Chapter 3

---

---

Adjustments

Out of the box the site looks good, but it misses a lot of details that you will have to tackle individually, so this section will focus on those small things that make the difference between a basic site and a decent one.

Tab Name

It mixes the title of the page set with the “title” followed by a | and then the main title.

# _config.yml - title: 📚
# pages/markdown-chapter-2.md - title: HTML - Chapter 2

# Tab Name: HTML - Chapter 2 | 📚

Favicon

Inside of the head of your layout you must include the following line

<link rel="icon" href="/favicon.ico" type="image/x-icon">

I mention that because as I have multiple subpages handling that in everything would be complex.

You can either overwrite the default.html or create a new one an refer it.

Layout

Format

This is what the page was made for.

Color Reference

Here’s a small square displaying the color #ff6347 (Tomato):

• Square Color Display:

• Text Color:
  1. Panel Macro
  2. Panel Macro

Square Box Code

```html 1.

2.

```

Text Color Code

```html 1. **Panel Macro** 2. Panel Macro ```

Links

• Hyper Links
  1. Link to Another Markdown Section
  2. Open a New Tab

Links Code

1. [Link to Another Markdown Section](#expandable-blocks) 2. Open a New Tab

Expandable Blocks

Markdown itself does not natively support expandable or collapsible sections. However, you can use HTML <details> and <summary> tags to create expandable sections in environments that support HTML within Markdown (e.g., GitHub, GitLab). Note that not all Markdown renderers support this.

1. Click to expand

   This is the content that will be hidden until clicked.

</details>

> See Code

```html 1.

Click to expand

This is the content that will be hidden until clicked.

```

Import Images

• No Format:

• With Format:

• Popup Image:

> See Code

# No Format:
![alt image](../images/neptunia-please-wait.png "Title")

# With Format:
<a href="page.html">
  <img src="../images/neptunia-please-wait.png" alt="Example Image" style="border: 2px solid #000; border-radius: 4px; padding: 5px;" />
</a>

# Popup Image
<img id="myImg" src="../images/neptunia-please-wait.png" alt="Example Image" style="border: 2px solid #000; border-radius: 4px; padding: 5px; max-width: 200px; cursor: pointer;">

<style>
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 80vh;
  border-radius: 4px;
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
</style>

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");

img.onclick = function(){
  modal.style.display = "flex";
  modalImg.src = this.src;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

span.onclick = function() { 
  modal.style.display = "none";
}

// Close the modal when pressing the "Esc" key
document.onkeydown = function(event) {
  if (event.key === "Escape") {
    modal.style.display = "none";
  }
}
</script>

# Copy to Clipboard

<button onclick="copyToClipboard()">Copy Text</button>
<input type="text" value="This is the text to be copied" id="myInput">

<script>
function copyToClipboard() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}
</script>

Content Tips

---

Chapter 1 Chapter 3