initial commit

5 years ago · 3d1dbae5b1
commit 3d1dbae5b1
6 changed files with 99 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
--- a/README.md
+++ b/README.md
@ -0,0 +1,3 @@
+# mumble.datenvorr.at website
+
+Diese webseite soll leute auf die funktionsweisen von unserem Mumble-Server hinweisen.
--- a/index.html
+++ b/index.html
@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Mumble auf Datenvorr.ar</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300&display=swap" rel="stylesheet"> 
+    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
+</head>
+<body>
+    <nav>
+        <div class="nav-container">
+            <img src="logo.png" class="mumble-logo"/>
+            <div class="nav-title">
+                <h1>Datenvorr.at Mumble</h1>
+                <p>Was machst du denn hier?</p>
+            </div>
+        </div>
+    </nav>
+    <main>
+        <h2>Was mach ich denn jetzt?</h2>
+        <p>Wenn du auf den Mumble server wolltest, brauchst du dafür den <a href="https://www.mumble.info/downloads/" target="_blank" rel="noopener">Mumble Client</a>. Mumble ist ähnlich wie Teamspeak, nur quelloffen.</p>
+        <br>
+        <br>
+        <br>
+        <br>
+        <br>
+
+        <h2>Und was wenn nicht?</h2>
+        <p class="italic">???</p>
+
+    </main>
+    <footer>
+        &copy; 2020 datenvorr.at
+    </footer>
+</body>
+</html>
--- a/logo.png
+++ b/logo.png
--- a/logo2.png
+++ b/logo2.png
--- a/main.css
+++ b/main.css
@ -0,0 +1,58 @@
+html, body {
+    margin: 0px;
+    padding: 0px;
+    min-height: 100vh;
+    min-width: 100vw;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    font-family: 'Open Sans', sans-serif;
+    align-items: stretch;
+}
+
+.nav-container, main, footer {
+    max-width: 1080px;
+    width: 70%;
+    margin: 0px auto;
+    display: block;
+}
+
+.nav-container {
+    display: flex;
+    flex-direction: row;
+}
+
+nav {
+    border-bottom: 1px solid #ddd;
+    background: rgba(0,0,0,.08);
+    padding: 32px 0;
+}
+
+.mumble-logo {
+    background-size: contain;
+    height: 113px;
+    margin-right: 32px;
+}
+
+main {
+    margin: 16px auto;
+    flex-grow: 1;
+}
+
+.italic {
+    font-style: italic;
+}
+
+@media(max-width: 600px) {
+    nav, main, footer {
+        width: calc(100vw - 16px);
+    }
+}
+
+h1 {
+    font-weight: 400;
+}
+
+h2, h3 {
+    font-weight: 300;
+}