diff --git a/public/about.html b/public/about.html index 8bb2adcf31009712f0b7199cc73f54b79499bfe9..804eb5f0bbec0b7478ef82fffd4b0af31cb62c16 100644 --- a/public/about.html +++ b/public/about.html @@ -15,8 +15,8 @@ </head> <body class="font-Ubuntu"> <header> - <div class="js" lang="en" id="accessibility-options"> - <button type="button"> + <div class="js no-print" lang="en" id="accessibility-options"> + <button type="button" class="no-print"> Accessibility Options </button> <fieldset class="display-none" id="font-selection"> @@ -95,10 +95,12 @@ </fieldset> </div> <h1><a href="index.html"> C3 Inclusion Operation Center</a></h1> - <a href="#english" lang="en" class="skiplink">Go to English content</a> + <a href="#english" lang="en" class="skiplink no-print" + >Go to English content</a + > </header> - <label class="no-js" for="toggle">OpenDyslexic Font</label> - <input class="no-js" type="checkbox" id="toggle" /> + <label class="no-js no-print" for="toggle">OpenDyslexic Font</label> + <input class="no-js no-print" type="checkbox" id="toggle" /> <div class="fontchange"> <main> <section lang="de" id="deutsch"> @@ -118,8 +120,8 @@ wird hell oder dunkel angezeigt. Die Vorgabe wird <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" - >mit einem Media-Query abgefragt</a - >. + >mit einem Media-Query abgefragt.</a + > </p> <p> <a @@ -138,8 +140,9 @@ >in Javascript realisiert</a > und als no-JS-Fallback gibt es immerhin zwei Fonts per - <a href="https://css-tricks.com/the-checkbox-hack/">Checkbox-Hack</a - >. + <a href="https://css-tricks.com/the-checkbox-hack/" + >Checkbox-Hack.</a + > </p> <p> Hier ein Kommentar zu der Font-Auswahl: @@ -181,8 +184,8 @@ your browser or operating system settings, and is queried <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" - >by a media query</a - >. + >by a media query.</a + > </p> <p> <a @@ -201,8 +204,9 @@ implemented in Javascript</a >, and if your browser does not allow javascript, you can still choose between two fonts, implemented via - <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a - >. + <a href="https://css-tricks.com/the-checkbox-hack/" + >checkbox hack.</a + > </p> <p> Regarding the choices of fonts: @@ -227,7 +231,7 @@ </p> </section> </main> - <footer> + <footer class="no-print"> <a lang="de" href="index.html">Zurück zur Hauptseite</a> / <a lang="en" href="index.html#english">back to main page</a> <br /> diff --git a/public/index.html b/public/index.html index 86b12caeebb7d600943b7b82268321a9b8f4f47d..2c671d169cd565698f2a1150050566a87e720f05 100644 --- a/public/index.html +++ b/public/index.html @@ -15,8 +15,8 @@ </head> <body class="font-Ubuntu"> <header> - <div class="js" lang="en" id="accessibility-options"> - <button type="button"> + <div class="js no-print" lang="en" id="accessibility-options"> + <button class="no-print" type="button"> Accessibility Options </button> <fieldset class="display-none" id="font-selection"> @@ -97,10 +97,12 @@ <h1> C3 Inclusion Operation Center </h1> - <a href="#english" lang="en" class="skiplink">Go to English content</a> + <a href="#english" lang="en" class="skiplink no-print" + >Go to English content</a + > </header> - <label class="no-js" for="toggle">OpenDyslexic Font</label> - <input class="no-js" type="checkbox" id="toggle" /> + <label class="no-js no-print" for="toggle">OpenDyslexic Font</label> + <input class="no-js no-print" type="checkbox" id="toggle" /> <div class="fontchange"> <main> <section lang="de" id="deutsch"> @@ -146,8 +148,8 @@ Es gibt einen <a href="https://nwng.eu/guides/voc-ad" >Guide für Live-Audiodeskriptionen bei - Vortragsveranstaltungen</a - >. + Vortragsveranstaltungen.</a + > </li> <li> Wir haben eine @@ -246,8 +248,8 @@ We made a <a href="speakersdesk.html#english" >checklist with things that are relevant for accessibility for - the Speakers Desk</a - >. + the Speakers Desk.</a + > </li> <li> @@ -291,7 +293,7 @@ </p> </section> </main> - <footer> + <footer class="no-print"> <a lang="en" href="https://help.ccc.de">help.ccc.de</a> <br /> <a lang="de" href="https://legal.cccv.de" >Impressum/<wbr />Datenschutzerklärung</a diff --git a/public/speakersdesk.html b/public/speakersdesk.html index 4d748e039ca7768db5ce5efca61280ed84f4c615..ba3032c272e80873b5f4c40b645cb09511ceb7e7 100644 --- a/public/speakersdesk.html +++ b/public/speakersdesk.html @@ -15,8 +15,8 @@ </head> <body class="font-Ubuntu"> <header> - <div class="js" lang="en" id="accessibility-options"> - <button type="button"> + <div class="js no-print" lang="en" id="accessibility-options"> + <button class="no-print" type="button"> Accessibility Options </button> <fieldset class="display-none" id="font-selection"> @@ -95,10 +95,12 @@ </fieldset> </div> <h1><a href="index.html"> C3 Inclusion Operation Center</a></h1> - <a href="#english" lang="en" class="skiplink">Go to English content</a> + <a href="#english" lang="en" class="skiplink no-print" + >Go to English content</a + > </header> - <label class="no-js" for="toggle">OpenDyslexic Font</label> - <input class="no-js" type="checkbox" id="toggle" /> + <label class="no-js no-print" for="toggle">OpenDyslexic Font</label> + <input class="no-js no-print" type="checkbox" id="toggle" /> <div class="fontchange"> <main> <section lang="de" id="deutsch"> @@ -323,7 +325,7 @@ Inclusion Operation Center </section> </main> - <footer> + <footer class="no-print"> <a lang="de" href="index.html">Zurück zur Hauptseite</a> / <a lang="en" href="index.html#english">back to main page</a> <br /> diff --git a/public/styles/style.css b/public/styles/style.css index 35e518a5939228543236a66a988b7602173f9c7c..fb6018bee6860586364f316e8e8f10b5c490f749 100644 --- a/public/styles/style.css +++ b/public/styles/style.css @@ -471,5 +471,10 @@ a:focus { background-color: #8432ee; } } +@media print { + .no-print { + display: none; + } +} /*# sourceMappingURL=style.css.map */ diff --git a/public/styles/style.scss b/public/styles/style.scss index 35b455058504e7df3c4776e192ca340925fab654..1e230f91637a6d376555bbd2dbe2e620131ac860 100644 --- a/public/styles/style.scss +++ b/public/styles/style.scss @@ -295,3 +295,9 @@ footer { } } } + +@media print { + .no-print { + display: none; + } +}