From bfc145e8df87f398e2815ad5a800003632d96b8a Mon Sep 17 00:00:00 2001 From: Matt Mascarenhas Date: Sat, 27 May 2017 00:11:53 +0100 Subject: [PATCH] hmml_to_html.c: Keyboard navigation [#24] Incomplete, but mostly done --- hmml_to_html/mock_keys.html | 839 ++++++++++++++++++++++++++++++++++++ hmml_to_html/riscy.css | 52 ++- hmml_to_html/style.css | 66 ++- 3 files changed, 904 insertions(+), 53 deletions(-) create mode 100644 hmml_to_html/mock_keys.html diff --git a/hmml_to_html/mock_keys.html b/hmml_to_html/mock_keys.html new file mode 100644 index 0000000..008a0ab --- /dev/null +++ b/hmml_to_html/mock_keys.html @@ -0,0 +1,839 @@ + + + + Coloured Nicks + + + + + + + + +
+ Coloured Nicks +
+ Quotes ▼ +
+
+ + +
Quote 1
+
Stay RISCY, everyone
+
—miotatsu, Wed Nov 16 21:03:26 2016
+ +
+ [α]2:56 +
+ + + +
Quote 2
+
I dream of nice things
+
—miotatsu, Fri Dec 2 21:00:05 2016
+ +
+ [β]5:12 +
+ +
+
+
+ References ▼ +
+
+ + +
Wikipedia
+
Logic gate
+ +
+ [1]1:00[4]10:24 +
+ + + +
Charles Petzold (Microsoft Press)
+
Code: The Hidden Language of Computer Hardware and Software
+ +
+ [2]1:00 +
+ + + +
Charles Petzold (Microsoft Press)
+
Code Again: The Hidden Language of Computer Hardware and Software
+ +
+ [3]1:00 +
+ + + +
Handmade Network
+ +
+ [5]12:34[6]16:32 +
+ +
+
+
+ +
+
Filter mode:
+
+
+
Topics
+
+ hardware +
+
+ mathematics +
+
+
+
Media
+
+ 🖌Blackboard +
+
+ 🗪Chat Comment +
+
+ 🖮Programming +
+
+ 💢Rant +
+
+ 📖Research +
+
+
+
+
+
+
+ Credits +
+ + +
Host
+
Mio Iwakura
+ + + + + +
Annotator
+
Matt Mascarenhas
+ + + +
+
+
+
+
+
+
+
1:00insofaras Some text referring to Zilarrezko about this thing1 regarding circuit design he saw in Code2,3
+
+
1:00insofaras Some text referring to Zilarrezko about this thing1 regarding circuit design he saw in Code2,3
+
+
+
1:00insofaras Some text referring to Zilarrezko about this thing1 regarding circuit design he saw in Code2,3
+
+
+
+
2:56“Stay RISCY, everyone”α
+
+
2:56“Stay RISCY, everyone”α
+
+
+
2:56“Stay RISCY, everyone”α
+
+
+
+
5:12Matrix multiplicationβ
+
+
5:12Matrix multiplicationβ
+
+
+
5:12Matrix multiplicationβ
+
+
+
+
10:24More stuff referring to the milton forum post4
+
+
10:24More stuff referring to the milton forum post4
+
+
+
10:24More stuff referring to the milton forum post4
+
+
+
+
10:42Some text. Simples!
+
+
10:42Some text. Simples!
+
+
+
10:42Some text. Simples!
+
+
+
+
12:34Something about the Handmade.Network5
+
+
12:34Something about the Handmade.Network5
+
+
+
12:34Something about the Handmade.Network5
+
+
+
+
16:32Something else about the Handmade.Network6
+
+
16:32Something else about the Handmade.Network6
+
+
+
16:32Something else about the Handmade.Network6
+
+
+
+
+ + + diff --git a/hmml_to_html/riscy.css b/hmml_to_html/riscy.css index 11fc4d1..3ff6b59 100644 --- a/hmml_to_html/riscy.css +++ b/hmml_to_html/riscy.css @@ -24,16 +24,42 @@ box-shadow: inset 0 0 0 #2A3172; } +.title.riscy > .menu.current { + box-shadow: inset 0px 0px 30px #2A3172; +} + +.title.riscy > .menu > .refs .ref .ref_indices .timecode:hover, +.title.riscy > .menu > .refs .ref .ref_indices .timecode.focused, +.markers_container.riscy > .marker.current > .content { + color: #2A3172; +} + +.title.riscy > .menu > .refs .ref.current .ref_indices .timecode.focused { +color: rgb(246, 178, 26); +} + .title.riscy > .menu:hover, +.title.riscy > .menu.visible, + .title.riscy > .menu > .refs .ref:hover, +.title.riscy > .menu > .quotes_container .ref.focused, +.title.riscy > .menu > .references_container .ref.focused, + .title.riscy > .menu > .filter_container .filter_mode:hover, .title.riscy > .menu > .filter_container .filter_content:hover, +.title.riscy > .menu > .filter_container .filter_content.focused, + +.title.riscy > .menu > .credits_container .credit *:hover, +.title.riscy > .menu > .credits_container .credit *.focused, + .markers_container.riscy > .marker:hover > .content { background-color: #FFF8E7; } -.title.riscy > .menu.current { - box-shadow: inset 0px 0px 30px #2A3172; +.title.riscy > .menu > .refs .ref.current .source, +.title.riscy > .menu > .refs .ref.current .quote_byline, +.title.riscy > .menu > .refs .ref.current .ref_indices .timecode.focused:before { + color: #FFF8E7; } .title.riscy > .menu > .refs .ref.current, @@ -47,27 +73,16 @@ background-color: rgb(42, 49, 114); } -.title.riscy > .menu > .refs .ref .source, -.title.riscy > .menu > .refs .ref .quote_byline, -.title.riscy > .menu > .filter_container .filter_content.off .text, -.title.riscy > .menu > .credits_container .credit .role { - color: #888; -} - -.title.riscy > .menu > .refs .ref.current .source, -.title.riscy > .menu > .refs .ref.current .quote_byline { - color: #FFF8E7; -} - .title.riscy > .menu > .refs .ref.current:hover, .markers_container.riscy > .marker:hover > .faded .content { background-color: rgba(42, 49, 114, 0.7); } -/* Regular */ -.title.riscy > .menu > .refs .ref .ref_indices .timecode:hover, -.markers_container.riscy > .marker.current > .content { - color: #2A3172; +.title.riscy > .menu > .refs .ref .source, +.title.riscy > .menu > .refs .ref .quote_byline, +.title.riscy > .menu > .filter_container .filter_content.off .text, +.title.riscy > .menu > .credits_container .credit .role { + color: #888; } /* Blackboard */ @@ -135,4 +150,3 @@ .title.riscy > .menu > .filter_container .filter_mode.responsible { animation-name: riscy_fade_background; } - diff --git a/hmml_to_html/style.css b/hmml_to_html/style.css index 8f8c1e6..25dc0b7 100644 --- a/hmml_to_html/style.css +++ b/hmml_to_html/style.css @@ -1,12 +1,16 @@ /* Structure */ -.title { - display: flex; - flex-direction: row; +.title, +.title > .menu > .refs .ref, +.title > .menu > .credits_container .credit { border-bottom: 1px solid; + display: flex; + text-decoration: none; } -.title > * { +.title > *, +.title > .menu > .refs .ref, +.title > .menu > .credits_container .credit .person { padding: 10px; } @@ -60,37 +64,27 @@ } .title > .menu:hover .refs, +.title > .menu.quotes .refs.visible, +.title > .menu.references .refs.visible, .title > .menu:hover .filter_container, +.title > .menu.filter .filter_container.visible, +.title > .menu.credits .credits_container.visible, .title > .menu:hover .credits_container { display: block; } -.title > .menu > .refs .ref, -.title > .menu > .refs .filter_container, /* TODO(matt): See what this is! */ -.title > .menu > .credits_container .credit { - border-bottom: 1px solid; - padding: 10px; - display: flex; - align-items: center; - text-decoration: none; -} - -.title > .menu > .refs .ref, -.title > .menu > .refs .filter_container { /* TODO(matt): See what this is! */ +.title > .menu > .refs .ref { flex-direction: column; } -.title > .menu > .credits_container .credit { - flex-direction: row; - justify-content: space-between; -} - .title > .menu > .credits_container .credit .person { text-decoration: none; } .title > .menu > .credits_container .credit .support { - margin: 4px; + flex-grow: 1; + text-align: right; + padding: 16px; } .title > .menu > .refs .ref:last-child, @@ -98,10 +92,14 @@ border: none; } +.title > .menu > .refs .ref .timecode, +.title > .menu > .filter_container .filter_mode { + font-size: 12px; +} + .title > .menu > .refs .ref .timecode { cursor: pointer; display: inline-block; - font-size: 12px; padding: 0; } @@ -115,25 +113,30 @@ width: 100%; } -.title > .menu > .refs .ref .quote_byline, .title > .menu > .refs .ref .source, +.title > .menu > .refs .ref .quote_byline, +.title > .menu > .filter_container .filter_title, .title > .menu > .credits_container .credit .role { font-size: 10px; +} + +.title > .menu > .refs .ref .source, +.title > .menu > .refs .ref .quote_byline, +.title > .menu > .credits_container .credit .role { line-height: 8px; } -.title > .menu > .refs .ref .ref_title { - font-style: oblique; +.title > .menu > .refs .ref .quote_byline, +.title > .menu > .refs .ref .ref_indices { + width: 100%; } .title > .menu > .refs .ref .quote_byline { text-align: right; - width: 100%; } .title > .menu > .refs .ref .ref_indices { text-align: center; - width: 100%; } .title > .menu > .refs .ref .ref_indices .timecode:first-child::before { @@ -153,7 +156,6 @@ cursor: pointer; border-bottom: 1px solid; text-align: center; - font-size: 12px; } .title > .menu > .filter_container .filter_mode.exclusive:after { @@ -165,7 +167,6 @@ } .title > .menu > .filter_container .filter_title { - font-size: 9px; text-align: center; } @@ -186,10 +187,6 @@ margin: 0 4px; } -.title > .menu > .filter_container > .filter_media .filter_content .icon { - margin: 0 .5em 0 4px; -} - .title > .menu > .filter_container .filter_content.off .icon { background: transparent; } @@ -251,6 +248,7 @@ font-weight: bold; } +.title > .menu > .refs .ref .ref_title, .title .filter_content.authored .text, .markers_container > .marker.authored { font-style: oblique;