initialer commit
This commit is contained in:
example
commit
9837d79198
2
images/arrow-up.svg
Normal file
2
images/arrow-up.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 400 B |
268
index.html
Normal file
268
index.html
Normal 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änkt möglich. Daher betreiben wir derzeit zwei
|
||||
virtuelle Treffpunkte wö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. V. fungiert als Trägerverein für den
|
||||
Hack(er)space in Jena und hat aktuell 49 Mitglieder (Stand 27.
|
||||
November 2016) und ist als gemeinnü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üller (Schriftführer)</li>
|
||||
<li>Thomas Lotze (Schatzmeister)</li>
|
||||
</ul>
|
||||
|
||||
<h3>Mitglied werden</h3>
|
||||
|
||||
<p>
|
||||
Um Mitglied zu werden, reicht eine schriftliche Willensbekundung
|
||||
gegenüber den Vorstand des Vereines — Im Idealfall über
|
||||
das ausgefüllte Mitgliedsformular, gesendet an die
|
||||
Postadresse. Durch eine Überweisung des Mitgliedsbeitrages
|
||||
und einer Bestätigung ist die Mitgliedschaft besiegelt.
|
||||
</p>
|
||||
|
||||
<h3>Kontaktmöglichkeiten</h3>
|
||||
|
||||
<p>
|
||||
Natürlich freuen wir uns auch über Post. Nur Werbung ist
|
||||
unerwünscht. Dabei kann die Post einfach an diese Adresse
|
||||
gesendet werden:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>Hackspace Jena e. 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ächsten Haltestellen des
|
||||
öffentlichen Nahverkehrs befinden sich ca. 50 Meter entfernt.
|
||||
Das sind die Straß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. 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ä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. 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
300
style.css
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in a new issue