Merge pull request 'feat: ueberarbeitung des CMS textes' (#4) from aviac/c3d2-web:feat/cms-rewording into master
continuous-integration/drone/push Build is passing Details

Reviewed-on: #4
This commit is contained in:
Astro Spaceboyz 2023-11-10 01:11:28 +01:00
commit 20f406bfb3
2 changed files with 141 additions and 27 deletions

View File

@ -2,31 +2,54 @@
<!DOCTYPE page SYSTEM "http://www.c3d2.de/dtd/c3d2web.dtd">
<page pagetitle="Chaos macht Schule Dresden" title="Schule">
<p class="center">
<image title="CmS Logo">images/cms.png</image>
</p>
<p>
Hier finden sich alle Informationen rund um das <em>Chaos macht Schule</em> Projekt in Dresden.
Unser Ziel ist die Förderung von Medienkompetenz und Technikverständnis in Schulen.
Dazu machen wir Workshops mit Schülern, Lehrern und Eltern.
</p>
<h3>Themenschwerpunkte</h3>
<ul>
<li>Internetüberwachung - wie schütze ich mich und meine Daten?</li>
<li>Datenschutz und soziale Netzwerke</li>
<li>Freie Lizenzen und Open Source Software</li>
<li>Spaß am Gerät - Löten und Programmieren</li>
</ul>
<p>
Unsere Termine mit Links zu den Folien findet man <link href="https://wiki.c3d2.de/CMS">im Wiki</link>. Die Foliensätze stehen unter freien Creative-Commons-Lizenzen<sup><link href="#lizenzhinweis">[1]</link></sup>, dürfen also unter den angegebenen Bedingungen sehr gern, auch auszugsweise, weiterverwendet werden! Der LaTeX-Quellcode für Folien wird seit Januar 2014 auf <link href="https://gitea.c3d2.de/cms">Gitea</link> veröffentlicht. Frühere Vorträge befinden sich in eigenen Repositories (mit cms- im Namen) auf der <link href="https://github.com/c3d2">GitHub-Seite des C3D2</link>. Alles rund um den <em>Pentabug</em> findet man <link href="https://github.com/c3d2/pentabug">im Pentabug-Repository</link>.
</p>
<div class="cms-print-text-container">
<!-- Ordered by coolness 😝 -->
<!-- Could be improved, but it's a good start -->
<div class="cms-print-text-1">
println!("Hallo, Welt!");
</div>
<div class="cms-print-text-2">
putStrLn "Hallo, Welt!"
</div>
<div class="cms-print-text-3">
print("Hallo, Welt!")
</div>
<div class="cms-print-text-4">
std::cout &lt;&lt; "Hallo, Welt!";
</div>
</div>
<p class="center">
<image title="CmS Logo">
images/cms.png
</image>
</p>
<p title="&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;vom Chaos macht Schule Projekt in Dresden">
Wir sind Teil der <link href="https://www.ccc.de/schule">Chaos macht Schule</link> Initiative, die seit etwa 2007 in enger Kooperation mit verschiedenen Bildungsinstitutionen aktiv ist. Im <link href="https://www.ccc.de/">CCC</link> wird schon immer ein selbstverständlicher und trotzdem kritischer Umgang mit modernster Technik gelebt, vor allem im Bezug auf das Internet. Unser Anliegen ist es Interessierte über die Möglichkeiten, Risiken und Grenzen der Technik dahinter aufzuklären und Verständnis zu schaffen.
<dl>
<dt>Für Anfragen oder zum mitmachen bitte eine E-Mail an</dt>
<dd><link href="mailto:schule@c3d2.de">schule at c3d2 dot de</link></dd>
</dl>
<div id="lizenzhinweis" class="footnotes">
<p class="footnote"><span>[1]:</span> Üblicherweise ist die ausgewiesene Lizenz eine der <link href="https://de.creativecommons.org/">Creative Commons</link>, was bedeutet, dass das daraus resultierende Werk wieder unter z.B. <link href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA 4.0</link> stehen muss und die beteiligten Urheber genannt werden sollen. Ganze Foliensätze können so einfach als Kopie vom Original mit dem enthaltenen Lizenzverweis verwendet werden.</p>
</div>
Hierfür bieten wir Vorträge, Workshops und Schulungen für Schüler:innen, Fachkräfte und Eltern und auch für akademische Einrichtungen und in Vereinen an.
</p>
<p title="Themenschwerpunkte">
<ul>
<li>Internetnutzung </li>
<li>Risiken von sozialen Netzen </li>
<li>Überwachung und Datenschutz </li>
<li>Themen rund um künstliche Intelligenz </li>
<li>Urheberrecht im Netz </li>
<li>freie und offene Software und Lizenzen</li>
</ul>
</p>
<p title="Termine regelmäßiger Treffen">
Wir treffen uns regelmäßig, jeweils am zweiten Mittwoch eines Monats ab 18:00 Uhr im <link href="https://c3d2.de/space.html">hq des c3d2</link> (siehe auch den <link href="https://c3d2.de/calendar.html">Kalender</link>). Jede Person ist herzlich eingeladen, seien es Interessierte, potenzielle Mitstreiter:innen oder Ratsuchende. Während dieser Treffen erarbeiten wir neue Inhalte, planen Veranstaltungen und stehen gerne für Fragen zur Verfügung.
</p>
<p title="Quellen und Materialien">
Unsere Quellen und Materialien befinden sich zur Zeit in Überarbeitung und werden ab 2024 <link href="https://gitea.c3d2.de/CMS/quellen-und-folien">in unserem neuen gitea repository</link> nach und nach neu erscheinen. Alle Materialien stehen stets unter einer <link href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Lizenz BY-SA 4.0</link> und sind damit frei nutzbar.
<dl>
<dt>Für Anfragen oder zum mitmachen bitte eine E-Mail an:</dt>
<dd><link href="mailto:schule@c3d2.de">schule@c3d2.de</link></dd>
</dl>
</p>
</page>

View File

@ -1,3 +1,9 @@
:root {
--cms-text-size: 24px;
--cms-text-position-top: 253px;
--cms-text-position-left: 0px;
}
/* -- General -- */
html {
margin: 0;
@ -907,7 +913,6 @@ p.center {
text-align: center;
}
.hidden[aria-hidden] {
display: none;
}
@ -983,3 +988,89 @@ h3 + div {
border-radius: 2px;
border: 1px solid black;
}
.cms-print-text-container {
position: absolute;
width: 400px;
height: 200px;
}
/* sorry, I tried but I couldn't get it to work without copying everything for each text */
.cms-print-text-1 {
font: xx-small sans-serif;
position: absolute;
top: var(--cms-text-position-top);
left: var(--cms-text-position-left);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--cms-text-size);
color: black;
opacity: 0;
transition: opacity 1s ease-in-out;
animation: cmsPrintTextAnimation 8s infinite 0s;
}
.cms-print-text-2 {
font: xx-small sans-serif;
position: absolute;
top: var(--cms-text-position-top);
left: var(--cms-text-position-left);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--cms-text-size);
color: black;
opacity: 0;
transition: opacity 1s ease-in-out;
animation: cmsPrintTextAnimation 8s infinite 2s;
}
.cms-print-text-3 {
font: xx-small sans-serif;
position: absolute;
top: var(--cms-text-position-top);
left: var(--cms-text-position-left);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--cms-text-size);
color: black;
opacity: 0;
transition: opacity 1s ease-in-out;
animation: cmsPrintTextAnimation 8s infinite 4s;
}
.cms-print-text-4 {
font: xx-small sans-serif;
position: absolute;
top: var(--cms-text-position-top);
left: var(--cms-text-position-left);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--cms-text-size);
color: black;
opacity: 0;
transition: opacity 1s ease-in-out;
animation: cmsPrintTextAnimation 8s infinite 6s;
}
@keyframes cmsPrintTextAnimation {
0%, 25%, 100% {
opacity: 0;
}
8%, 16% {
opacity: 1;
}
}
.cms