diff --git a/docs/_static/timestamps.css b/docs/_static/timestamps.css
index 752d1595d..4bf38e134 100644
--- a/docs/_static/timestamps.css
+++ b/docs/_static/timestamps.css
@@ -1,99 +1,12 @@
-:root {
- --border-radius: 5.5px;
-}
-
-body[data-theme="dark"] {
---kbd-bg: #ed9d13;
---code-bg: #3c3c3c;
---code-fg: var(--kbd-bg);
---span-fg: #a6aaa7;
-}
-
-body[data-theme="light"] {
---kbd-bg: #ed9d13;
---code-bg: #3c3c3c;
---code-fg: #ffffff;
---code-bg: #888888;
-}
-
-* {
- box-sizing: border-box;
-}
-
-#timestamps {
- font-family: inherit;
- width: 100%;
+.timestamp-list dl {
display: grid;
- max-width: 900px;
- grid-auto-rows: 2rem;
- line-height: 1.2;
- font-size: 16px;
+ grid-template-columns: max-content auto;
}
-#timestamps .row {
- display: flex;
- align-items: center;
- gap: 1rem .5rem;
+.timestamp-list dt {
+ grid-column-start: 1;
}
-#timestamps time:hover {
- text-decoration: underline;
- padding-bottom: .2rem;
-}
-#timestamps time {
- color: var(--color-link);
-}
-#timestamps time:hover {
- cursor:pointer;
-}
-#timestamps time:focus {
- text-decoration: underline;
-}
-#timestamps span {
- margin: 0;
-}
-#timestamps p {
- margin: 0.5rem;
- line-height: 1.2;
- display: flex;
- align-items: center;
-}
-#timestamps kbd {
- border-radius: var(--border-radius);
- padding: .2rem;
- padding-top: 0.4rem;
- background: var(--kbd-bg);
- color: black;
- font-size: 0.9rem;
- display: flex;
- align-items: center;
- justify-content: center;
- border: none;
- box-shadow: none;
-}
-@-moz-document url-prefix() {
- #timestamps kbd {
- padding: 0.2rem;
- }
-}
-
-#timestamps span {
- color: var(--tabs--label-text);
-}
-#timestamps strong {
- font-weight: normal;
- min-width: max-content;
-}
-#timestamps code {
- background: var(--code-bg);
- color: var(--code-fg);
- padding: 0.2rem 0.3rem;
- margin-left: .2rem;
- border-radius: var(--border-radius);
- min-width: max-content;
- font-size: 0.9rem;
- display: grid;
- place-items: center;
- padding-top: 0.4rem;
-
+.timestamp-list dd {
+ grid-column-start: 2;
}
diff --git a/docs/_static/timestamps.js b/docs/_static/timestamps.js
index 25128bbcc..2e8f08253 100644
--- a/docs/_static/timestamps.js
+++ b/docs/_static/timestamps.js
@@ -1,129 +1,21 @@
/*jshint esversion: 6 */
(function() {
-var data = [
- {
- time: "00:00",
- description: "Intro"
- },
- {
- time: "00:39",
- description: "Pager: View command output in same window: Ctrl+Shift+g"
- },
- {
- time: "01:43",
- description: "Pager: View command output in a separate window"
- },
- {
- time: "02:14",
- description: "Pager: Uses shell integration in kitty"
- },
- {
- time: "02:27",
- description: "Tab text: The output of cwd and last cmd "
- },
- {
- time: "03:03",
- description: "Open files from ls output with mouse: Ctrl+Shift+Right-click"
- },
- {
- time: "04:04",
- description: "Open files from ls output with keyboard: Ctrl+Shift+P>y"
- },
- {
- time: "04:26",
- description: "Open files on click: ls --hyperlink=auto"
- },
- {
- time: "05:03",
- description: "Open files on click: Filetype settings in open-actions.conf"
- },
- {
- time: "05:45",
- description: "hyperlinked-grep kitten: Open grep output in editor"
- },
- {
- time: "07:18",
- description: "Remote-file kitten: View remote files locally"
- },
- {
- time: "08:31",
- description: "Remote-file kitten: Edit remote files locally"
- },
- {
- time: "10:01",
- description: "icat kitten: View images directly"
- },
- {
- time: "10:36",
- description: "icat kitten: Download & display image/gif from internet"
- },
- {
- time: "11:03",
- description: "Kitty Graphics Protocol: Live image preview in ranger"
- },
- {
- time: "11:25",
- description: "icat kitten: Display image from remote server"
- },
- {
- time: "12:04",
- description: "unicode-input kitten: Emojis in terminal "
- },
- {
- time: "12:54",
- description: "Windows: Intro"
- },
- {
- time: "13:36",
- description: "Windows: Switch focus: Ctrl+Shift+<win_nr>"
- },
- {
- time: "13:48",
- description: "Windows: Visual selection: Ctrl+Shift+F7"
- },
- {
- time: "13:58",
- description: "Windows: Simultaneous input"
- },
- {
- time: "14:15",
- description: "Interactive Kitty Shell: Ctrl+Shift+Esc"
- },
- {
- time: "14:36",
- description: "Broadcast text: launch --allow-remote-control kitty +kitten broadcast"
- },
- {
- time: "15:18",
- description: "Kitty Remote Control Protocol"
- },
- {
- time: "15:52",
- description: "Interactive Kitty Shell: Help"
- },
- {
- time: "16:34",
- description: "Choose theme interactively: kitty +kitten themes -h"
- },
- {
- time: "17:23",
- description: "Choose theme by name: kitty +kitten themes [options] [theme_name]"
- }
-];
-
function init_timestamps() {
var loc = document.getElementById('timestamps-for-intro-video');
if (loc) {
- const timestamps_element = get_timestamps_container(data);
- timestamps_element.addEventListener('click', handle_timestamp_click);
- loc.appendChild(timestamps_element);
+ var dl = loc.querySelector('dl');
+ dl.querySelectorAll('dt').forEach(dt => {
+ dt.innerHTML = '';
+ dt.style.display = 'inline';
+ });
+ dl.addEventListener('click', handle_timestamp_click);
}
}
function handle_timestamp_click(e) {
if (e.target.tagName.toUpperCase() === 'TIME') {
- const timestamp = e.target.getAttribute('datetime');
+ const timestamp = e.target.textContent;
if (timestamp) {
const [minutes, seconds] = timestamp.split(':');
const totalSeconds = parseInt(minutes) * 60 + parseInt(seconds);
@@ -134,51 +26,5 @@ function handle_timestamp_click(e) {
}
}
-function get_timestamps_container(file) {
- const timestamps_container = document.createElement('section');
-
- const rows_array = file.map(entry => {
- const [row_element, timestamp_element, description_element] = get_timestamp_elements(entry);
-
- row_element.append(timestamp_element, description_element);
-
- return row_element;
- });
- rows_array.forEach(row => timestamps_container.appendChild(row));
-
- timestamps_container.id = 'timestamps';
- return timestamps_container;
-}
-
-function get_timestamp_elements(entry) {
- return [
- get_simple_element('div', null, 'row'),
- get_simple_element('time', entry.time),
- get_updated_description_element(entry.description)
- ];
-}
-
-function get_simple_element(element, text_content = null, class_name = null) {
- const new_element = document.createElement(element);
- if (element === 'time') {
- new_element.dateTime = new_element.textContent = text_content;
- return new_element;
- }
- if (element === 'kbd' && !text_content) {
- return;
- }
- if (text_content) {
- new_element.textContent = text_content;
- }
- if (class_name) new_element.className = class_name;
- return new_element;
-}
-
-function get_updated_description_element(description) {
- const description_element = get_simple_element('p');
- description_element.innerHTML = description;
- return description_element;
-}
-
window.addEventListener('load', init_timestamps);
})();
diff --git a/docs/index.rst b/docs/index.rst
index 0b7051f6a..256eb3535 100644
--- a/docs/index.rst
+++ b/docs/index.rst
@@ -77,6 +77,65 @@ To get started see :doc:`quickstart`.
.. raw:: html
-
Timestamps for the above video:
-