Deployed 21bf76d with MkDocs version: 1.6.1

advanced/index.html

@@ -1203,7 +1203,7 @@ <h3 id="scanning-in-private-windows">Scanning in private windows</h3>
 <hr />
 <h2 id="audio">Audio</h2>
 <h3 id="default-audio-sources">Default audio sources</h3>
-<p>After looking up a term, you can click on the <img src="../assets/icon/play-audio.svg" alt="" width="16" height="16"> <em>speaker</em> button to hear the term's pronunciation. When searching for audio, multiple audio sources are checked until the first source with audio for the term is found. If no audio is found, you will hear a short click instead. Right-clicking the <img src="../assets/icon/play-audio.svg" alt="" width="16" height="16"> button allows choosing the source manually.</p>
+<p>After looking up a term, you can click on the <img class="icon" src="../assets/icon/play-audio.svg" alt="" width="16" height="16"> <em>speaker</em> button to hear the term's pronunciation. When searching for audio, multiple audio sources are checked until the first source with audio for the term is found. If no audio is found, you will hear a short click instead. Right-clicking the <img class="icon" src="../assets/icon/play-audio.svg" alt="" width="16" height="16"> button allows choosing the source manually.</p>
 <h4 id="japanese">Japanese</h4>
 <p>The default audio sources for Japanese are:</p>
 <ul>
@@ -1257,7 +1257,7 @@ <h3 id="parse-sentences-using-mecab">Parse sentences using MeCab</h3>
     <span class="md-icon" title="Last update">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1zM12.5 7v5.2l4 2.4-1 1L11 13V7zM11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2z"/></svg>
     </span>
-    <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">August 21, 2024</span>
+    <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-date">September 17, 2024</span>
   </span>
 
 

getting-started/index.html

@@ -1018,24 +1018,33 @@ <h3 id="edge">Edge</h3>
 <h2 id="basic-usage">Basic Usage</h2>
 <p>Now that you have installed Yomitan, let's explore how you can utilize her features in your language learning journey.</p>
 <h3 id="quick-actions">Quick-actions</h3>
-<p>Click the <img src="../assets/icon/yomitan-icon.svg" width="16" height="16" alt="yomitan icon"> <em>Yomitan</em> button in the browser bar to open the quick-actions popup.</p>
-<p><img src="../assets/ss/browser-action-popup.webp" alt="yomitan main popup"></p>
+<p>Click the <img class="icon" src="../assets/icon/yomitan-icon.svg" width="16" height="16" alt="yomitan icon"> <em>Yomitan</em> button in the browser bar to open the quick-actions popup.</p>
+<p><img class="ss" src="../assets/ss/browser-action-popup.webp" alt="yomitan main popup"></p>
 <ul>
-<li>The <img src="../assets/icon/cog.svg" width="16" height="16" alt="cog"> <em>cog</em> button will open the Settings page.</li>
-<li>The <img src="../assets/icon/magnifying-glass.svg" width="16" height="16" alt="magnifying glass"> <em>magnifying glass</em> button willopen the Search page.</li>
-<li>The <img src="../assets/icon/question-mark-circle.svg" width="16" height="16" alt="question mark symbol"> <em>question mark</em> buttonwill open the Information page.</li>
-<li>The <img src="../assets/icon/profile.svg" width="16" height="16" alt="profile icon"> <em>profile</em> button will appear when multipleprofiles exist, allowing the current profile to be quickly changed.</li>
+<li>The <img class="icon" src="../assets/icon/cog.svg" width="16" height="16" alt="cog"> <em>cog</em> button will open the Settings page.</li>
+<li>The <img class="icon" src="../assets/icon/magnifying-glass.svg" width="16" height="16" alt="magnifying glass"> <em>magnifying glass</em> button willopen the Search page.</li>
+<li>The <img class="icon" src="../assets/icon/question-mark-circle.svg" width="16" height="16" alt="question mark symbol"> <em>question mark</em> buttonwill open the Information page.</li>
+<li>The <img class="icon" src="../assets/icon/profile.svg" width="16" height="16" alt="profile icon"> <em>profile</em> button will appear when multipleprofiles exist, allowing the current profile to be quickly changed.</li>
 </ul>
 <h3 id="installing-dictionaries">Installing Dictionaries</h3>
 <p>To import the dictionaries you wish to use for term searches. head over to <a href="../dictionaries/">Dictionary</a> to get set up!</p>
 <p>If you do not have any dictionaries installed or enabled. Yomitan will warn you that it is not ready for use by displaying an orange exclamation mark over its icon. This exclamation mark will disappear once you have installed and enabled at least one dictionary.</p>
-<p><img src="../assets/ss/settings-dictionaries-popup-english.webp" width="300" alt="custom dictionaries list"></p>
+<figure>
+    <img class="ss" src="../assets/ss/settings-dictionaries-popup.webp" width="550" alt="custom dictionaries list">
+</figure>
+
 <h3 id="scanning-text">Scanning Text</h3>
 <p>Webpage text can be scanned by moving the cursor while holding a modifier key, which is <kbd>Shift</kbd> by default.</p>
 <p>If definitions are found for the text at the cursor position, a popup window containing term definitions will open. This window can be dismissed by clicking anywhere outside of it.</p>
-<p><img src="../assets/ss/search-popup-terms-english.webp" width="300" alt="popup with search terms"></p>
+<figure>
+    <a href="https://www.wikiwand.com/en/articles/English_language#Classification">
+    <img class="ss" src="../assets/ss/search-popup-terms.webp" width="850" alt="popup with search terms">
+    </a>
+    <figcaption><small>Try it yourself!</small></figcaption>
+</figure>
+
 <h3 id="audio">Audio</h3>
-<p>Click on the <img src="../assets/icon/play-audio.svg" width="16" height="16" alt="loudspeaker icon"> <em>speaker</em> button to hear the term pronounced by a native speaker.</p>
+<p>Click on the <img class="icon" src="../assets/icon/play-audio.svg" width="16" height="16" alt="loudspeaker icon"> <em>speaker</em> button to hear the term pronounced by a native speaker.</p>
 <p>If an audio sample is not available, you will hear a short click instead. For more options, see <a href="../advanced/#audio">Audio Configuration</a>.</p>
 <h3 id="anki">Anki</h3>
 <p>To further enhance your Yomitan experience, it's worth <a href="../anki/">integrating with Anki</a>, a spaced-repetition flashcard program to help solidify the words you encounter.</p>

stylesheets/extra.css

@@ -8,4 +8,25 @@
         width: 100%;
         text-align: center;
     }
-}
+}
+
+.ss {
+    position: relative;
+    top: 0;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    transition: top ease 0.5s;
+}
+
+.ss:hover {
+    top: -5px;
+}
+
+.icon {
+    position: relative;
+    top: 0;
+    transition: top ease 0.5s;
+}
+
+.icon:hover {
+    top: -1px;
+}