bobidle/webseite-krautspace
1
0
Fork 0
forked from Krautspace/webseite-krautspace
Code Pull requests Activity

abschnitt krautspace eingefügt, optische korrekturen

Browse source
This commit is contained in:
example 2022-02-05 01:25:55 +01:00
parent f6736190e6
commit 7966609576
2 changed files with 144 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

146
index.html
View file

@ -27,7 +27,7 @@
<body> <body>
<a href="#treffpunkte" <a href="#space"
title="Springe zum Inhalt" title="Springe zum Inhalt"
alt="Springe zum Inhalt">Zum Inhalt springen</a> alt="Springe zum Inhalt">Zum Inhalt springen</a>
@ -79,6 +79,10 @@
<ul id="navigation-menu" <ul id="navigation-menu"
role="menu" role="menu"
class="flex-box-column"> class="flex-box-column">
<li role="menuitem">
<a title="Was ist der Krautspace?"
href="#space">Krautspace</a>
</li>
<li role="menuitem"> <li role="menuitem">
<a title="Neuigkeiten, Termine und Kontaktmöglichkeiten rund um den Space" <a title="Neuigkeiten, Termine und Kontaktmöglichkeiten rund um den Space"
href="#treffpunkte">Treffpunkte</a> href="#treffpunkte">Treffpunkte</a>
@ -116,42 +120,104 @@
<!-- main area with content ------------------------------------------> <!-- main area with content ------------------------------------------>
<main role="main"> <main role="main">
<div class="wrapper center-content max-width"> <div class="wrapper center-content max-width">
<div id="treffpunkte" class="panel-wrapper content-overlay"> <div id="space" class="panel-wrapper content-overlay">
<h2>Krautspace</h2>
<section> <section>
<p>
Der Krautspace ist ein Platz für technisch interessierte Menschen
zum kulturellen und technischen Austausch.
</p>
<p>
Dazu gibt es regelm&auml;&szlig;ig (oder auch
unregelm&auml;&szlig;ig) stattfindende thematische Runden,
Vortr&auml;ge, Workshops oder auch einfach nur mal eine
gesellige Runde in gechillter Atmosph&auml;re. Wir versuchen
Wissen zu vermitteln und Hilfe zur Selbsthilfe zu geben. In einer
kleinen Werkstatt findet man diverse Werkzeuge um das eine oder
andere Projekt umzusetzen.
</p>
<p>
Ansonsten betreiben wir noch dezentrale Kommunikationsdienste wie
Jabber oder Matrix. Auf Wunsch richten wir euch dort auch gern
einen Account ein.
</p>
<section>
</div>
<h2>Treffpunkte</h2> <div id="treffpunkte" class="panel-wrapper content-overlay">
<h2>Treffpunkte</h2>
<section>
<p> <p>
Aufgrund der Corona-Pandemie sind physische Treffen nur Aufgrund der Corona-Pandemie sind physische Treffen nur
eingeschr&auml;nkt m&ouml;glich. Daher betreiben wir derzeit eingeschr&auml;nkt m&ouml;glich. Daher betreiben wir derzeit
w&ouml;chentlich zwei virtuelle Treffpunkte. w&ouml;chentlich zwei virtuelle Treffpunkte.
</p> </p>
<ul> <div class="flex-box-column with-aside">
<li>Dienstag, 20:00 Uhr: "Chaostreff"</li> <div>
<li>Offene Runde</li> <h3>Termine</h3>
<li>Jitsi: <a <ul>
href="https://kraut.space/chaostreff">https://kraut.space/chaostreff</a></li> <li>Dienstag, 20:00 Uhr: "Chaostreff"</li>
</ul> <li>Offene Runde</li>
<li>Jitsi: <a
href="https://kraut.space/chaostreff">https://kraut.space/chaostreff</a></li>
</ul>
<ul> <ul>
<li>Donnerstag, 20:00 Uhr: "Linux User Group"</li> <li>Donnerstag, 20:00 Uhr: "Linux User Group"</li>
<li>Linux User Group</li> <li>Linux User Group</li>
<li>Jitsi: <a <li>Jitsi: <a
href="https://kraut.space/lug">https://kraut.space/lug</a></li> href="https://kraut.space/lug">https://kraut.space/lug</a></li>
</ul> </ul>
</div>
<aside class="sidebar">
<h3>Kontakt</h3>
<div class="sb-item">
<h4 class="aside">Jabber</h4>
<ul class="aside">
<li>MUC: <a
href="xmpp:krautchan@chat.krautspace.de">krautchan@chat.krautspace.de</a></li>
<li>Webchat: <a
href="https://kraut.space/chat">kraut.space/chat</a></li>
</ul>
</div>
<div class="sb-item">
<h4 class="aside">Matrix</h4>
<p><a
href="https://matrix.to/#/#krautchan:matrix.kraut.space">#krautchan:matrix.kraut.space</a>
</div>
<div class="sb-item">
<h4 class="aside">iCalendar</h4>
<p><a href="https://kraut.space/krautspace.ics"
>kraut.space/krautspace.ics</a>
</p>
</div>
<div class="sb-item">
<h4 class="aside">Twitter</h4>
<p><a href="https://twitter.com/krautspace">twitter.com/krautspace"</a>
</p>
</div>
</aside>
</div>
<section> <section>
</div> <!-- end class panel-wrapper content-overlay --> </div> <!-- end class panel-wrapper content-overlay -->
<div id="verein" class="panel-wrapper content-overlay"> <div id="verein" class="panel-wrapper content-overlay">
<section>
<h2>Unser Trägerverein</h2> <h2>Verein</h2>
<section>
<p> <p>
Der Verein Hackspace Jena e.&#x202f;V. fungiert als Tr&auml;gerverein für den Der Verein Hackspace Jena e.&#x202f;V. fungiert als Tr&auml;gerverein für den
Hack(er)space in Jena und hat aktuell 49 Mitglieder (Stand 27. Hack(er)space in Jena und hat aktuell 49 Mitglieder (Stand 27.
@ -166,7 +232,7 @@
Der Vorstand besteht aktuell aus: Der Vorstand besteht aktuell aus:
</p> </p>
<ul> <ul class="indent">
<li>Jens Kubieziel (Vorsitzender)</li> <li>Jens Kubieziel (Vorsitzender)</li>
<li>Jonny M&uuml;ller (Schriftf&uuml;hrer)</li> <li>Jonny M&uuml;ller (Schriftf&uuml;hrer)</li>
<li>Thomas Lotze (Schatzmeister)</li> <li>Thomas Lotze (Schatzmeister)</li>
@ -190,7 +256,7 @@
gesendet werden: gesendet werden:
</p> </p>
<ul> <ul class="indent">
<li>Hackspace Jena e.&#x202f;V.<li> <li>Hackspace Jena e.&#x202f;V.<li>
<li>Krautgasse 26</li> <li>Krautgasse 26</li>
<li>07743 Jena</li> <li>07743 Jena</li>
@ -212,10 +278,10 @@
</div> <!-- end class panel-wrapper content-overlay --> </div> <!-- end class panel-wrapper content-overlay -->
<div id="raum" class="panel-wrapper content-overlay"> <div id="raum" class="panel-wrapper content-overlay">
<h2>Raum</h2>
<section> <section>
<h2>Unser Raum</h2>
<p> <p>
Unser physischer Raum liegt mitten im Zentrum Jenas und ist sehr Unser physischer Raum liegt mitten im Zentrum Jenas und ist sehr
gut zu erreichen. Die n&auml;chsten Haltestellen des gut zu erreichen. Die n&auml;chsten Haltestellen des
@ -223,7 +289,7 @@
Das sind die Stra&szlig;enbahnen der Linie 16, sowie die Busse der Das sind die Stra&szlig;enbahnen der Linie 16, sowie die Busse der
Linie 5. Linie 5.
</p> </p>
<div id="map-box" class="flex-box-column space-around"> <div id="map-box" class="flex-box-column with-aside">
<div id="map"> <div id="map">
<a class="extern" <a class="extern"
href="http://www.openstreetmap.org/node/1875593753"> href="http://www.openstreetmap.org/node/1875593753">
@ -232,19 +298,23 @@
title="Karte auf Open Street Map öffnen"> title="Karte auf Open Street Map öffnen">
</a> </a>
</div> </div>
<aside id="öpnv">
<h3>Haltestellen</h3> <aside id="öpnv" class="sidebar">
<ul class="no-indent"> <div class="sb-item">
<li> <h4 class="aside">Haltestellen</h4>
<a href="https://www.nahverkehr-jena.de/fahrplan/strassenbahn/linie-5.html" <ul class="aside">
title="Zum Fahrplan der Linie 5">Linie 5</a> - Ernst-Abbe-Platz <li>
</li> <a href="https://www.nahverkehr-jena.de/fahrplan/strassenbahn/linie-5.html"
<li> title="Zum Fahrplan der Linie 5">Linie 5</a> - Ernst-Abbe-Platz
<a href="https://www.nahverkehr-jena.de/fahrplan/bus/linie-16.html" </li>
title="Zum Fahrplan der Linie 16">Linie 16</a> - Johannisplatz <li>
</li> <a href="https://www.nahverkehr-jena.de/fahrplan/bus/linie-16.html"
</ul> title="Zum Fahrplan der Linie 16">Linie 16</a> - Johannisplatz
</li>
</ul>
</div>
</aside> </aside>
</div> </div>
</section> </section>
</div> <!-- end class panel-wrapper content-overlay --> </div> <!-- end class panel-wrapper content-overlay -->
@ -258,7 +328,7 @@
<div id="footer" class="flex-box-row center-content max-width"> <div id="footer" class="flex-box-row center-content max-width">
<div class="sub-panel"> <div class="sub-panel">
<h4>Kontakt</h4> <h4>Kontakt</h4>
<ul class="no-indent"> <ul>
<li><span class="no-wrap">Hackspace Jena e.&#x202f;V.</li> <li><span class="no-wrap">Hackspace Jena e.&#x202f;V.</li>
<li>Krautgasse 26</li> <li>Krautgasse 26</li>
<li>07743 Jena</li> <li>07743 Jena</li>
@ -271,7 +341,7 @@
<div class="sub-panel"> <div class="sub-panel">
<h4>Organisatorisches</h4> <h4>Organisatorisches</h4>
<ul class="no-indent"> <ul>
<li role="link"><a title="Impressum" <li role="link"><a title="Impressum"
class="link-footer" class="link-footer"
href="https://kraut.space/impressum">Impressum</a></li> href="https://kraut.space/impressum">Impressum</a></li>
@ -283,7 +353,7 @@
<div class="sub-panel"> <div class="sub-panel">
<h4>Bankverbindung</h4> <h4>Bankverbindung</h4>
<ul class="no-indent"> <ul>
<li><span class="no-wrap">Inhaber: Hackspace Jena e.&#x202f;V.</li> <li><span class="no-wrap">Inhaber: Hackspace Jena e.&#x202f;V.</li>
<li><span class="no-wrap">IBAN: DE55 8309 4495 0003 1839 12</li> <li><span class="no-wrap">IBAN: DE55 8309 4495 0003 1839 12</li>
<li><span class="no-wrap">BIC: GENO DE F1 ETK</li> <li><span class="no-wrap">BIC: GENO DE F1 ETK</li>

44
style.css
View file

@ -4,15 +4,19 @@
/********** allgemein ***************************/ /********** allgemein ***************************/
/************************************************/ /************************************************/
* {
padding: 0;
box-sizing: border-box;
border-collapse: collapse;
scroll-behavior: smooth;
}
html, body { html, body {
margin: 0; margin: 0;
padding: 0;
font-size: 100%; font-size: 100%;
color: #333333; color: #333333;
background-color: #ffffff; background-color: #ffffff;
line-height: 150%; line-height: 150%;
border-collapse: collapse;
scroll-behavior: smooth;
} }
body { body {
@ -25,8 +29,8 @@ ul {
list-style: none; list-style: none;
} }
ul.no-indent { ul.indent {
padding-left: 0; padding-left: 2em;
} }
a { a {
@ -59,8 +63,8 @@ div.max-width {
justify-content: space-between; justify-content: space-between;
} }
.space-around { main section {
justify-content: space-around; padding-left: 1em;
} }
@ -258,6 +262,25 @@ div#map img {
} }
/**** aside ****/
div.sb-item {
border-top: 1px solid #333333;
}
div.sb-item p {
margin-top: 0;
}
h4.aside {
margin-bottom: 0.5em;
}
ul.aside {
margin-top: 0;
}
/**** footer ****/ /**** footer ****/
footer { footer {
@ -300,8 +323,13 @@ a.link-footer {
padding: 0 0 0 1em; padding: 0 0 0 1em;
} }
div#map-box { }
@media only screen and (min-width: 980px) {
div.with-aside {
flex-direction: row; flex-direction: row;
justify-content: space-around;
} }
} }