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

initialer commit

Browse source
This commit is contained in:
example 2022-02-04 20:43:06 +01:00
commit 9837d79198
3 changed files with 570 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
images/arrow-up.svg Normal file
View file

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="#333" d="M1675 971q0 51-37 90l-75 75q-38 38-91 38-54 0-90-38l-294-293v704q0 52-37.5 84.5t-90.5 32.5h-128q-53 0-90.5-32.5t-37.5-84.5v-704l-294 293q-36 38-90 38t-90-38l-75-75q-38-38-38-90 0-53 38-91l651-651q35-37 90-37 54 0 91 37l651 651q37 39 37 91z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 400 B

268
index.html Normal file
View file

@ -0,0 +1,268 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="Hackspace, Jena, Technik, Elektronik,
Computer, krautspace" />
<meta name="description" content="Webseite des Hackspace Jena e. V. aka
krautspace" />
<meta name="robots" content="index, follow" />
<meta name="language" content="de" />
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<meta property="og:title" content="kraut.space" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://kraut.space" />
<meta property="og:description" content="Webseite des Hackspace Jena e. V. aka
krautspace" />
<meta property="og:locale" content="de_DE" />
<meta property="og:image" content="https://kraut.space/favicon.ico" />
<link rel="canonical" href="https://kraut.space/index.html" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico"/>
<title>kraut.space - Homepage</title>
</head>
<body>
<a href="#treffpunkte"
title="Springe zum Inhalt"
alt="Springe zum Inhalt">Zum Inhalt springen</a>
<!-- fixed elements -------------------------------------------------->
<div id="space-status-div" class="flex-box-column">
<div id="space-status-icon-div" aria-hidden="true">
<img id="logo"
alt="Raumstatus"
src="./images/user-times.svg" />
</div>
<div id="space-status-text-div" class="flex-box-column">
<p class="hidden">Raumstatus:</p>
<div>C</div>
<div>l</div>
<div>o</div>
<div>s</div>
<div>e</div>
<div>d</div>
</div>
</div>
<!-- head with title and navigation ---------------------------------->
<div id="head-fix">
<div class="center-content max-width">
<div id="headline" class="flex-box-row">
<header role="banner">
<h1>kraut.space</h1>
<hr/>
</header>
<!-- navigation -->
<nav role="navigation" class="flex-box-column">
<label id="responsiv-navi-label"
for="responsiv-navi-checkbox"
role="button"
aria-hidden="true">
<div id="hamburger" class=flex-box-column>
<div class="hamburger-scheibe"></div>
<div class="hamburger-scheibe"></div>
<div class="hamburger-scheibe"></div>
</div>
</label>
<input type="checkbox"
aria-hidden="true"
id="responsiv-navi-checkbox" />
<ul id="navigation-menu"
role="menu"
class="flex-box-column">
<li role="menuitem">
<a title="Neuigkeiten, Termine und Kontaktmöglichkeiten rund um den Space"
href="#treffpunkte">Treffpunkte</a>
</li>
<li role="menuitem">
<a title="Trägerverein, Mitgliedschaft, Vorstand"
href="#verein">Verein</a>
</li>
<li role="menuitem">
<a title="Der physische Raum und Anfahrt"
href="#raum">Raum</a>
</li>
<li role="menuitem">
<a class="extern" title="Unser Wiki"
href="https://wiki.kraut.space">Wiki</a>
</li>
<li role="menuitem">
<a class="extern" title="Unser Blog im Wiki"
href="https://wiki.kraut.space/blog:start">Blog</a>
</li>
</ul>
</nav>
<hr/>
</div>
</div>
</div>
<!-- big image at the top, should be further a slider --------------->
<div id="start-image-container" aria-hidden="true">
<div class="center-content max-width">
</div> <!-- end center-content, max-width -->
</div> <!-- end start-image-container -->
<!-- main area with content ------------------------------------------>
<main role="main">
<div class="wrapper center-content max-width">
<div id="treffpunkte" class="panel-wrapper content-overlay">
<section>
<h2>Treffpunkte</h2>
<p>
Aufgrund der Corona-Pandemie sind physische Treffen nur
eingeschr&auml;nkt m&ouml;glich. Daher betreiben wir derzeit zwei
virtuelle Treffpunkte w&ouml;chentlich.
</p>
<section>
</div> <!-- end class panel-wrapper content-overlay -->
<div id="verein" class="panel-wrapper content-overlay">
<section>
<h2>Unser Trägerverein</h2>
<p>
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.
November 2016) und ist als gemeinn&uuml;tzig anerkannt. Unsere <a
class="extern" href="https://wiki.kraut.space/verein:satzung">Satzung</a>
kannst du dir hier anschauen.
</p>
<h3>Vorstand</h3>
<p>
Der Vorstand besteht aktuell aus:
</p>
<ul>
<li>Jens Kubieziel (Vorsitzender)</li>
<li>Jonny M&uuml;ller (Schriftf&uuml;hrer)</li>
<li>Thomas Lotze (Schatzmeister)</li>
</ul>
<h3>Mitglied werden</h3>
<p>
Um Mitglied zu werden, reicht eine schriftliche Willensbekundung
gegen&uuml;ber den Vorstand des Vereines — Im Idealfall &uuml;ber
das ausgef&uuml;llte Mitgliedsformular, gesendet an die
Postadresse. Durch eine &Uuml;berweisung des Mitgliedsbeitrages
und einer Best&auml;tigung ist die Mitgliedschaft besiegelt.
</p>
<h3>Kontaktmöglichkeiten</h3>
<p>
Nat&uuml;rlich freuen wir uns auch &uuml;ber Post. Nur Werbung ist
unerw&uuml;nscht. Dabei kann die Post einfach an diese Adresse
gesendet werden:
</p>
<ul>
<li>Hackspace Jena e.&#x202f;V.<li>
<li>Krautgasse 26</li>
<li>07743 Jena</li>
</ul>
<p>
Elektronische Post wird über <a
href="mailto:office@kraut.space">office@kraut.space</a> entgegen
genommen - gerne auch mit PGP/GnuPG verschlüsselt und signiert.
Die aktuelle KeyID ist 0x6B604128A8D30500 <a class="extern"
href="http://u3mqsh2dzbbj2mv6evcobgtp7c3y6y3lox7dwvdoxhkd5dwg26xuxdid.onion/_media/verein:93990c08e1a620147a3dff1d6b604128a8d30500.asc">(Download)</a>,
der komplette Fingerprint E9B3 BDF1 AC2E 351A 4BEE EE0C A9DE BB37
7A0D B943. Für einen Erstkontakt kann auch dieser Service benutzt
werden: <a class="extern"
href="https://encrypt.to/office@kraut.space">https://encrypt.to/office@kraut.space</a>
</p>
</section>
</div> <!-- end class panel-wrapper content-overlay -->
<div id="raum" class="panel-wrapper content-overlay">
<section>
<h2>Unser Raum</h2>
<p>
Unser physischer Raum liegt mitten im Zentrum Jenas und ist sehr
gut zu erreichen. Die n&auml;chsten Haltestellen des
&ouml;ffentlichen Nahverkehrs befinden sich ca. 50 Meter entfernt.
Das sind die Stra&szlig;enbahnen der Linie 16, sowie die Busse der
Linie 5.
</p>
</section>
</div> <!-- end class panel-wrapper content-overlay -->
</main>
<hr/>
<!-- footer ---------------------------------------------------------->
<footer>
<div id="footer" class="flex-box-row center-content max-width">
<div class="sub-panel">
<h4>Kontakt</h4>
<ul class="list-footer">
<li><span class="no-wrap">Hackspace Jena e.&#x202f;V.</li>
<li>Krautgasse 26</li>
<li>07743 Jena</li>
<li>E-Mail: <a href="mailto:office@kraut.space">office@kraut.space</a></li>
<li>GPG-Key: <a href="https://keys.openpgp.org/search?q=93990C08E1A620147A3DFF1D6B604128A8D30500">0x6B604128A8D30500</a></li>
</ul>
</div> <!-- end class sub-panel -->
<div class="sub-panel">
<h4>Organisatorisches</h4>
<ul class="list-footer">
<li><a title="Impressum"
href="https://kraut.space/impressum">Impressum</a></li>
<li><a title="Direkt zur Datenschutzerkl&auml;hrung"
href="https://wiki.kraut.space/datenschutz">Datenschutz</a></li>
</ul>
</div> <!-- end class sub-panel -->
<div class="sub-panel">
<h4>Bankverbindung</h4>
<ul class="list-footer">
<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">BIC: GENO DE F1 ETK</li>
<li><span class="no-wrap">Bank: Ethikbank Eisenberg</li>
</ul>
</div> <!-- end class sub-panel -->
</div> <!-- end class flex-box center-content max-width footer-box -->
</footer>
<!-- go-to-top ------------------------------------------------------->
<div id="go-to-top" class="max-width">
<a href="#start-image-container"
alt="Springe zum Seitenanfang"
title="Springe zum Seitenanfang">
<img id="to-top"
alt="Pfeil nach oben"
src="./images/arrow-up.svg" />
</a>
</div>
</body>
</html>

300
style.css Normal file
View file

@ -0,0 +1,300 @@
/* style.css für kraut.space */
/********** allgemein ***************************/
/************************************************/
html, body {
margin: 0;
padding: 0;
font-size: 100%;
color: #333333;
background-color: #ffffff;
line-height: 150%;
border-collapse: collapse;
scroll-behavior: smooth;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
div.center-content {
margin: 0 auto;
}
div.max-width {
max-width: 75em;
}
.hidden, hr {
display: none;
}
.flex-box-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.flex-box-column {
display: table; /* fallback IE<9 */
display: flex;
flex-direction: column;
justify-content: space-between;
}
/**** fixed elements ****************************/
/************************************************/
/**** space status ****/
div#space-status-div {
position: fixed;
top: 0;
left: 0;
width: 3em;
height: 3em;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 1.5em;
border-bottom-right-radius: 1.5em;
overflow: hidden;
background-color: #ffffff;
z-index: 10;
display: none;
}
div#space-status-div:hover {
height: 12em;
}
/**** fixed header ****/
div#head-fix {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #ffffff;
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.8);
z-index: 100;
}
#headline {
margin: 0;
padding: 1em;
align-items: center;
}
header {
align-self: flex-start;
flex-grow: 1;
}
h1 {
margin: 0;
padding: 0;
}
/**** fixed navigation ****/
nav {
height: 100%;
align-items: flex-end;
flex-grow: 2;
}
label#responsiv-navi-label {
width: 1.5em;
height: 1.5em;
display: flex;
cursor: pointer;
}
input#responsiv-navi-checkbox {
display: none;
}
div#hamburger {
width: 100%;
height: 100%;
justify-content: space-around;
}
.hamburger-scheibe {
width: 100%;
height: 20%;
background-color: #333333;
}
/*
#hamburger-menu:after {
content: 'Menu';
position: absolute;
top: 0;
right: 0;
}
*/
ul#navigation-menu {
justify-content: space-between;
align-items: flex-end;
list-style: none;
display: none;
margin: 0;
padding: 0;
z-index: 5;
}
ul#navigation-menu > li {
padding: 0.5em 0 0 0;
z-index: 5;
}
ul#navigation-menu li a {
color: inherit;
}
#responsiv-navi-checkbox:checked ~ ul#navigation-menu {
display: flex;
}
/**** go-to-top ****/
div#go-to-top {
position: fixed;
right: 2%;
bottom: 2%;
width: 2.5em;
height: 2.5em;
border-radius: 0.5em;
background-color: #ffffff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
z-index: 10;
}
img#to-top {
width: 80%;
height: 80%;
padding: 10% 10% 10% 10%;
}
/**** flexible elements *************************/
/************************************************/
/**** startimage ****/
#start-image-container {
position: relative;
display: block;
width: 100%;
min-height: 50vh;
max-height: 60vh;
margin: 0;
padding: 0;
overflow: hidden;
background: url('./images/doppelzimmer-2000.jpg') no-repeat center;
background-size: cover;
}
/**** main ****/
main {
min-height: 100px;
flex: 1;
}
.wrapper {
position: relative;
padding: 0 2%;
}
.content-overlay {
position: relative;
top: -40px;
}
.panel-wrapper {
margin: 1% 1% 5% 1%;
padding: 3.5em 2em 7em 1.5em;;
background-color: #ffffff;
box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.7);
}
.sub-panel {
flex-grow: 1;
padding: 1em 1em 1em 1.5em;
background-color: inherit;
}
/**** main - iframe ****/
div#text {
width: 30%;
}
div#iframe-karte {
width: 70%;
}
iframe#osm {
width: 100%;
height: 100%;
}
/**** footer ****/
footer {
padding: 0 5% 10% 5%;
color: #ffffff;
background-color: #333333;
}
div#footer {
display: flex;
flex-wrap: wrap;
}
ul.list-footer {
color: inherit;
padding-left: 1em;
}
/**** media querys ******************************/
/************************************************/
@media only screen and (min-width: 600px) {
label#responsiv-navi-label {
display: none;
}
ul#navigation-menu {
display: flex;
flex-direction: row;
}
ul#navigation-menu li {
padding: 0 0 0 1em;
}
}