From dce79619721c31118b8b05d66b7d4bf28d6b8a05 Mon Sep 17 00:00:00 2001
From: benjamin <bwand@c-base.org>
Date: Thu, 31 Dec 2020 19:41:27 +0100
Subject: [PATCH] print CSS
---
public/about.html | 32 ++++++++++++++++++--------------
public/index.html | 22 ++++++++++++----------
public/speakersdesk.html | 14 ++++++++------
public/styles/style.css | 5 +++++
public/styles/style.scss | 6 ++++++
5 files changed, 49 insertions(+), 30 deletions(-)
diff --git a/public/about.html b/public/about.html
index 8bb2adc..804eb5f 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 86b12ca..2c671d1 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 4d748e0..ba3032c 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 35e518a..fb6018b 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 35b4550..1e230f9 100644
--- a/public/styles/style.scss
+++ b/public/styles/style.scss
@@ -295,3 +295,9 @@ footer {
}
}
}
+
+@media print {
+ .no-print {
+ display: none;
+ }
+}
--
GitLab