codingmarco
/
tdf-2023-webseite
1
0
Fork 1
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Fix background color being only 1000px wide in chromium-based browsers

Browse Source
main
Marco von Rosenberg 2 years ago
parent c9cc26b42a
commit b9be145760
2 changed files with 82 additions and 79 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 112
      index.html
  2. 49
      styles.css

112
index.html
Unescape View File

@ -6,61 +6,63 @@
<title>2. Tübinger Tag der digitalen Freiheit</title> <title>2. Tübinger Tag der digitalen Freiheit</title>
</head> </head>
<body> <body>
<img id="banner" src="image/tdf-web-wide.png" alt="Tag der digitalen Freiheit" /> <div id="content">
<div class="box" id="event"> <img id="banner" src="image/tdf-web-wide.png" alt="Tag der digitalen Freiheit" />
<h2>Das Event</h2> <div class="box" id="event">
<p>Der Tübinger Tag der digitalen Freiheit (TDF) ist ein Chaos Community Event. Er findet dieses Jahr zum zweiten Mal in der Shedhalle Tübingen statt.</p> <h2>Das Event</h2>
<p>Das kostenfreie Event verläuften über den ganzen Samstag 17. Juni 2023 und ist dank seines breiten Angebots für alle Altersklassen interessant und relevant. Unser Ziel ist es, die Besucherinnen und Besucher zu befähigen, informierte Entscheidungen zu treffen und ihre digitalen Räume selbst zu bestimmen.</p> <p>Der Tübinger Tag der digitalen Freiheit (TDF) ist ein Chaos Community Event. Er findet dieses Jahr zum zweiten Mal in der Shedhalle Tübingen statt.</p>
<p>Wenn du dich für Themen wie Digitalisierung, Netzpolitik, Sicherheit oder technische Basteleien interessierst, dann ist der TDF genau das richtige Event für dich.</p> <p>Das kostenfreie Event verläuften über den ganzen Samstag 17. Juni 2023 und ist dank seines breiten Angebots für alle Altersklassen interessant und relevant. Unser Ziel ist es, die Besucherinnen und Besucher zu befähigen, informierte Entscheidungen zu treffen und ihre digitalen Räume selbst zu bestimmen.</p>
</div> <p>Wenn du dich für Themen wie Digitalisierung, Netzpolitik, Sicherheit oder technische Basteleien interessierst, dann ist der TDF genau das richtige Event für dich.</p>
<div class="box" id="dates"> </div>
<h2>Termine</h2> <div class="box" id="dates">
<p class="label">Einsendeschluss für Programmbeiträge, <br/>Workshops, Vorträge, Assemblies:</p> <h2>Termine</h2>
<p class="big">Freitag, 28. April 2023</p> <p class="label">Einsendeschluss für Programmbeiträge, <br/>Workshops, Vorträge, Assemblies:</p>
<p class="label">Veranstaltungstermin:</p> <p class="big">Freitag, 28. April 2023</p>
<p class="big">Samstag, 17. Juni 2023</p> <p class="label">Veranstaltungstermin:</p>
<p class="label">Uhrzeit:</p> <p class="big">Samstag, 17. Juni 2023</p>
<p class="big">13.00 bis 21.00 Uhr</p> <p class="label">Uhrzeit:</p>
<p class="label-sub">Open End!</p> <p class="big">13.00 bis 21.00 Uhr</p>
</div> <p class="label-sub">Open End!</p>
<div class="box" id="participate"> </div>
<h2>Mitmachen</h2> <div class="box" id="participate">
<p>Der Tübinger Tag der digitalen Freiheit ist ein offenes Community Event. Das Programm kommt durch die Arbeit von verschiedenen netzpolitisch aktiven Personen, Initiativen und Organisationen zusammen. </p> <h2>Mitmachen</h2>
<p>Das vielfältige Programm umfasst themenspezifische Talks mit einer Dauer von 30 bis 45 Minuten inklusive einer Fragerunde, ebenso wie interessante Workshop-Angebote und Ausstellungen, die Kunst und selbstgebaute Werke präsentieren. Zudem gibt es aufregende Performances zu erleben.</p> <p>Der Tübinger Tag der digitalen Freiheit ist ein offenes Community Event. Das Programm kommt durch die Arbeit von verschiedenen netzpolitisch aktiven Personen, Initiativen und Organisationen zusammen. </p>
<p>Möchtest du selbst Teil des Programms werden? Dann zögere nicht und sende deinen Beitrag oder deine Idee an das Organisationsteam! Je früher du deine Vorschläge mitteilst, desto besser können wir die Planung angehen. Schicke einfach eine E-Mail an tdf@cttue.de und beschreibe kurz dein geplantes Programm. Gerne kannst du auch eine kurze Beschreibung über dich selbst hinzufügen. Wir freuen uns auf deine Vorschläge!</p> <p>Das vielfältige Programm umfasst themenspezifische Talks mit einer Dauer von 30 bis 45 Minuten inklusive einer Fragerunde, ebenso wie interessante Workshop-Angebote und Ausstellungen, die Kunst und selbstgebaute Werke präsentieren. Zudem gibt es aufregende Performances zu erleben.</p>
</div> <p>Möchtest du selbst Teil des Programms werden? Dann zögere nicht und sende deinen Beitrag oder deine Idee an das Organisationsteam! Je früher du deine Vorschläge mitteilst, desto besser können wir die Planung angehen. Schicke einfach eine E-Mail an tdf@cttue.de und beschreibe kurz dein geplantes Programm. Gerne kannst du auch eine kurze Beschreibung über dich selbst hinzufügen. Wir freuen uns auf deine Vorschläge!</p>
<div class="box right-align" id="assemblies"> </div>
<h2>Assemblies</h2> <div class="box right-align" id="assemblies">
<p>Bringe dein Projekt mit und erlebe den einzigartigen Charme, der entsteht, wenn Menschen gemeinsam an Projekten arbeiten! Wer bereits CCC Events besucht hat, weiß genau, wovon die Rede ist. Wir stellen freie und passende Flächen zur Verfügung, damit ihr euer Assembly vor Ort umsetzen könnt. </p> <h2>Assemblies</h2>
<p>Was ist ein Assembly? Der Begriff hat viele Bedeutung wie „Konstuktion“, aber auch „Versammlung“. Es kann ein übergroßes interaktives Kunstobjekt sein, oder eine kreative Erfindung die in die Hosentasche passt. Es kann aber auch ein Gruppe vor Leuten sein, die sich vor Ort treffen und ihrer Leidenschaft nach gehen.</p> <p>Bringe dein Projekt mit und erlebe den einzigartigen Charme, der entsteht, wenn Menschen gemeinsam an Projekten arbeiten! Wer bereits CCC Events besucht hat, weiß genau, wovon die Rede ist. Wir stellen freie und passende Flächen zur Verfügung, damit ihr euer Assembly vor Ort umsetzen könnt. </p>
</div> <p>Was ist ein Assembly? Der Begriff hat viele Bedeutung wie „Konstuktion“, aber auch „Versammlung“. Es kann ein übergroßes interaktives Kunstobjekt sein, oder eine kreative Erfindung die in die Hosentasche passt. Es kann aber auch ein Gruppe vor Leuten sein, die sich vor Ort treffen und ihrer Leidenschaft nach gehen.</p>
<div class="box" id="shedhalle"> </div>
<h2>Die Shedhalle</h2> <div class="box" id="shedhalle">
<p>Die Veranstaltung findet auf dem Shedhallen-Gelände statt. Da die eigentlich Shedhalle momentan als Mensa genutzt wird, unterhält der Shedhallen-Verein zur Zeit andere Räume des ehemaligen Schlachthofs, in denen wir uns treffen.</p> <h2>Die Shedhalle</h2>
<p>Mehr Informationen über den Ort und den Shedhalle Tübingen e.V. findest du unter <a href="https://shedhalle.de/de">shedhalle.de</a>.</p> <p>Die Veranstaltung findet auf dem Shedhallen-Gelände statt. Da die eigentlich Shedhalle momentan als Mensa genutzt wird, unterhält der Shedhallen-Verein zur Zeit andere Räume des ehemaligen Schlachthofs, in denen wir uns treffen.</p>
</div> <p>Mehr Informationen über den Ort und den Shedhalle Tübingen e.V. findest du unter <a href="https://shedhalle.de/de">shedhalle.de</a>.</p>
<div class="box" id="ctt"> </div>
<h2>Organisator</h2> <div class="box" id="ctt">
<p>Der Tübinger Tag der digitalen Freiheit wird vom Chaostreff Tübingen (CTT) initiiert und veranstaltet. Der Chaostreff ist ein eingetragener Verein und steht inhaltlich dem Chaos Computer Club e. V. nahe. Die Mitglieder treffen sich regelmäßig zum Austausch und gemeinsamen Arbeiten an technischen, digitalen, kulturellen und gesellschaflichen Themen.</p> <h2>Organisator</h2>
<p>Mehr Informationen und Termine unter <a href="https://cttue.de/">cttue.de</a>.</p> <p>Der Tübinger Tag der digitalen Freiheit wird vom Chaostreff Tübingen (CTT) initiiert und veranstaltet. Der Chaostreff ist ein eingetragener Verein und steht inhaltlich dem Chaos Computer Club e. V. nahe. Die Mitglieder treffen sich regelmäßig zum Austausch und gemeinsamen Arbeiten an technischen, digitalen, kulturellen und gesellschaflichen Themen.</p>
</div> <p>Mehr Informationen und Termine unter <a href="https://cttue.de/">cttue.de</a>.</p>
<div class="box" id="costs"> </div>
<h2>Kosten</h2> <div class="box" id="costs">
<p>Der TDF ist ein nicht-kommerzielles Event und wird von allen Beteiligten ehrenamtlich durchgeführt. Dadurch ist das Angebot kostenfrei für die Öffentlichkeit zugänglich.</p> <h2>Kosten</h2>
<h2 class="right-align">Anreise</h2> <p>Der TDF ist ein nicht-kommerzielles Event und wird von allen Beteiligten ehrenamtlich durchgeführt. Dadurch ist das Angebot kostenfrei für die Öffentlichkeit zugänglich.</p>
<p class="right-align">Der Veranstaltungsort ist vom Hauptbahnhof in ca. 15 Geh-Minuten und von der nächsten Bushaltestelle, am Lothar-Meyer-Bau, in ca. 2 Geh-Minuten zu erreichen. Samstags ist der Tübinger Stadtbus kostenfrei.</p> <h2 class="right-align">Anreise</h2>
</div> <p class="right-align">Der Veranstaltungsort ist vom Hauptbahnhof in ca. 15 Geh-Minuten und von der nächsten Bushaltestelle, am Lothar-Meyer-Bau, in ca. 2 Geh-Minuten zu erreichen. Samstags ist der Tübinger Stadtbus kostenfrei.</p>
<div class="box"> </div>
<h2>TDF 2022 RÜckblick</h2> <div class="box">
<p>Der erste Tübinger Tag der digitalen Freiheit war ein voller Erfolg. Hier einige Impressionen:</p> <h2>TDF 2022 RÜckblick</h2>
<ul> <p>Der erste Tübinger Tag der digitalen Freiheit war ein voller Erfolg. Hier einige Impressionen:</p>
<li><a href="https://pixelfed.de/ctt" target="_blank">Bildimpressionen auf dem Pixelfed des Chaostreff.</a></li> <ul>
<li><a href="https://iconet-foundation.org/blog/tdf" target="_blank">Rückblick in einem iconet Blogbeitrag.</a></li> <li><a href="https://pixelfed.de/ctt" target="_blank">Bildimpressionen auf dem Pixelfed des Chaostreff.</a></li>
<li><a href="https://iconet-foundation.org/digitale-freiheit" target="_blank">Programm vom letzten Jahr.</a></li> <li><a href="https://iconet-foundation.org/blog/tdf" target="_blank">Rückblick in einem iconet Blogbeitrag.</a></li>
</ul> <li><a href="https://iconet-foundation.org/digitale-freiheit" target="_blank">Programm vom letzten Jahr.</a></li>
</div> </ul>
<div> </div>
<h2>Sponsoren</h2> <div>
<h2>Sponsoren</h2>
</div>
</div> </div>
</body> </body>
</html> </html>

49
styles.css
Unescape View File

@ -12,37 +12,19 @@
body { body {
max-width: 1000px;
background: #40264c; background: #40264c;
background-image: url("image/neon-scene.png"); background-image: url("image/neon-scene.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center top; background-position: center top;
}
#content {
max-width: 1000px;
margin: 0 auto; margin: 0 auto;
padding: 0 75px; padding: 0 75px;
margin-bottom: 4em; margin-bottom: 4em;
} }
div {
background: #352040;
margin-bottom: 2em;
padding: 1em 2em 0.7em;
border-style: solid;
border-color: #1473cc;
border-width: 1px;
box-shadow: 0px 0px 10px 0px rgba(0, 255, 255, 0.5),
inset 0px 0px 10px 0px rgba(0, 255, 255, 0.5);
background-blend-mode: soft-light;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: right;
text-shadow: 0px 0px 5px #352040,
0px 0px 10px #352040,
0px 0px 15px #352040,
0px 0px 20px #352040,
0px 0px 25px #352040,
0px 0px 30px #352040;
}
#event { #event {
background-image: url("image/event.png"); background-image: url("image/event.png");
padding-right: 15%; padding-right: 15%;
@ -75,8 +57,6 @@ div {
background-size: 100% auto; background-size: 100% auto;
} }
#banner { #banner {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -111,6 +91,27 @@ h2 {
margin-top: 0em; margin-top: 0em;
} }
.box {
background: #352040;
margin-bottom: 2em;
padding: 1em 2em 0.7em;
border-style: solid;
border-color: #1473cc;
border-width: 1px;
box-shadow: 0px 0px 10px 0px rgba(0, 255, 255, 0.5),
inset 0px 0px 10px 0px rgba(0, 255, 255, 0.5);
background-blend-mode: soft-light;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: right;
text-shadow: 0px 0px 5px #352040,
0px 0px 10px #352040,
0px 0px 15px #352040,
0px 0px 20px #352040,
0px 0px 25px #352040,
0px 0px 30px #352040;
}
.big { .big {
font-family: "TitilliumWeb-Bold"; font-family: "TitilliumWeb-Bold";
font-size: 1.5em; font-size: 1.5em;

Write Preview
Loading…
Cancel
Save