From b03df02e27292bfbe13e2efb4becb721684a4719 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 10 Jul 2023 16:50:06 +0300 Subject: (presentation) Reworked controller to use the characters --- src/presentation.css | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'src/presentation.css') diff --git a/src/presentation.css b/src/presentation.css index 2aba6e1..4b74030 100644 --- a/src/presentation.css +++ b/src/presentation.css @@ -32,7 +32,7 @@ ul, ol { padding-inline-start: 30px; } /* Presentation controller */ #presentCont { margin: 0.5em 0.5em 0.5em 0; } - #presentCont > img { height: 1.4em; } + #presentCont > span { font-size: 1.4em; } /* Presenting mode */ #presentCont { display: initial; } @@ -120,11 +120,7 @@ absolute-slide {...} */ visibility: visible; z-index: 10; } - #slideIndex { - border: none; - font-size: 1.4em; - vertical-align: middle; - } + #slideIndex { border: none; font-size: 1.6em; } /* Media specific stylings */ -- cgit v1.3.1-23-gd82d From fc912ee942e9e577156fcedee047fee66d0eed13 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Tue, 11 Jul 2023 09:36:32 +0300 Subject: (presentation) Fixed slide scaling to work properly --- awk-edits/Presentation.awk | 2 +- src/presentation.css | 9 +++++---- src/scripts/presentation.js | 10 ++++++++-- src/styles.css | 3 ++- 4 files changed, 16 insertions(+), 8 deletions(-) (limited to 'src/presentation.css') diff --git a/awk-edits/Presentation.awk b/awk-edits/Presentation.awk index f3fce0e..d1233c6 100644 --- a/awk-edits/Presentation.awk +++ b/awk-edits/Presentation.awk @@ -163,7 +163,7 @@ BEGIN { " \\⎚" ORS \ " \\⎙" ORS \ "

" ORS \ -" " +" " for (i = 1; i <= nameslength; i++) { pat[i] = "&&" names[i] diff --git a/src/presentation.css b/src/presentation.css index 4b74030..4dbe7e0 100644 --- a/src/presentation.css +++ b/src/presentation.css @@ -6,6 +6,8 @@ padding: 1em; width: 297mm; /* Size of landscape A4 paper */ font-size: 30px; + transform-origin: 0 0; + margin-bottom: 1em; } .absolute-slide { border: none !important; @@ -15,6 +17,7 @@ right: 0; top: 50%; transform: translate(-50%, -50%); + transform-origin: center center; visibility: visible; } .absolute-slide .clicked-image { @@ -25,8 +28,6 @@ /* Stylesheet override */ -article { max-width: calc(297mm + 2em); } - ul, ol { padding-inline-start: 30px; } /* Presentation controller */ @@ -127,7 +128,6 @@ absolute-slide {...} */ @media screen { .slide { border: 1px solid var(--fg-color); - margin-bottom: 1em; } } @@ -135,7 +135,7 @@ absolute-slide {...} */ article, body { border: none !important; margin: 0; - max-width: auto; + max-width: none; padding: 0; } nav, article > :not(.slide), #pagenav { @@ -144,6 +144,7 @@ absolute-slide {...} */ .slide { height: 210mm; width: 297mm; + margin: 0; } } diff --git a/src/scripts/presentation.js b/src/scripts/presentation.js index 425815c..ba7dd66 100644 --- a/src/scripts/presentation.js +++ b/src/scripts/presentation.js @@ -79,20 +79,26 @@ presentBtn.addEventListener('click', function() { else { pageY = window.scrollY; pageX = window.scrollX; window.scrollTo(0, 0); - fixAbsoluteSlideScale(); } presenting = !presenting; + fixAbsoluteSlideScale(); }); function fixAbsoluteSlideScale() { - var scale = Math.min(window.innerHeight / slides[0].offsetHeight, window.innerWidth / slides[0].offsetWidth); + var height = (presenting) ? window.innerHeight : articleElem.offsetHeight; + var width = (presenting) ? window.innerWidth : articleElem.offsetWidth - 32; + var scale = Math.min(height / slides[0].offsetHeight, width / slides[0].offsetWidth); + // Update .slide + document.styleSheets.item(3).cssRules[0].style.transform = 'scale(' + scale + ')'; + document.styleSheets.item(3).cssRules[0].style.marginBottom = 'calc(1em - ' + slides[0].offsetHeight + 'px * ' + (1 - scale) + ')'; // Update .absolute-slide document.styleSheets.item(3).cssRules[1].style.transform = 'translate(-50%, -50%) scale(' + scale + ')'; // Update .clicked-image document.styleSheets.item(3).cssRules[2].style.transform = 'translate(-50%, -50%) scale(' + (1/scale) + ')'; } window.addEventListener('resize', fixAbsoluteSlideScale); +window.addEventListener('load', fixAbsoluteSlideScale); /* Show as article button */ diff --git a/src/styles.css b/src/styles.css index 79b0b83..2a14de5 100644 --- a/src/styles.css +++ b/src/styles.css @@ -423,7 +423,7 @@ dt, dd { /* Small screen support */ -@media screen and (max-width: 610px) { +@media screen and ((max-width: 610px) or (max-height: 610px)) { article { border-top: none; max-width: calc(100vw - 16px - 3px); @@ -460,6 +460,7 @@ dt, dd { } pre, code { white-space: pre-wrap !important; } + .slide, .absolute-slide { transform: none !important; margin: 0; } } /* presentation.js */ -- cgit v1.3.1-23-gd82d From ccb8fc87c90acfd5ec03b73075f7e0f13e8b19b1 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Tue, 11 Jul 2023 09:39:33 +0300 Subject: (presentation) Disabled image clicking on slides that aren't absolute We need to fix slide scale, however, this means that all positioning of child elements is relative to the slide So, the image cannot be in the middle of the screen --- src/presentation.css | 1 + 1 file changed, 1 insertion(+) (limited to 'src/presentation.css') diff --git a/src/presentation.css b/src/presentation.css index 4dbe7e0..c231259 100644 --- a/src/presentation.css +++ b/src/presentation.css @@ -46,6 +46,7 @@ ul, ol { padding-inline-start: 30px; } max-width: 100%; /* width: auto; */ } + .slide:not(.absolute-slide) img { pointer-events: none; } .slide td { font: inherit; } .slide > *:first-child, .slide > div:only-child > *:first-child, .slide > ul:first-child > li:first-child > *:first-child, -- cgit v1.3.1-23-gd82d From a978ffe9844fb7c40acf6edc9877c444cbf77b83 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Tue, 11 Jul 2023 13:31:32 +0300 Subject: (presentation) Removed old ::after header styling --- src/presentation.css | 3 --- 1 file changed, 3 deletions(-) (limited to 'src/presentation.css') diff --git a/src/presentation.css b/src/presentation.css index c231259..f22d419 100644 --- a/src/presentation.css +++ b/src/presentation.css @@ -67,9 +67,6 @@ ul, ol { padding-inline-start: 30px; } .clide > * { flex: 1; } .centered { text-align: center; } - .centered h1::after, .centered h2::after, .centered h3::after { - content: " \2550" - } .fright { float: right; text-align: right; } * + .fright { margin-left: 1em; } -- cgit v1.3.1-23-gd82d