Swift-Dev-Ninjas · akarsh · Jan 16, 2019
diff --git a/Package.resolved b/Package.resolved
diff --git a/Public/footer.css b/Public/footer.css
@@ -1,34 +1,14 @@
-/* Sticky footer styles
- -------------------------------------------------- */
-html {
-    position: relative;
-    min-height: 100%;
-}
-
-body {
-    /* Margin bottom by footer height */
-    margin-bottom: 60px;
-}
-
 .footer {
     position: absolute;
-    bottom: 0;
     width: 100%;
     /* Set the fixed height of the footer here */
     height: 40px;
+    bottom: 0;
     line-height: 40px; /* Vertically center the text there */
     background-color: #f46a78;
     color: #ffffff;
 }
 
 p {
-    color: #ffffff;
     text-align: center;
-}
-
-/* trick to only display the first element of
- * the array of versions thus the 'newest'.
- */
-.footer .version-list:nth-child(n+2) {
-    display: none;
-}
+}
diff --git a/Public/images/sdn_logo.png b/Public/images/sdn_logo.png
diff --git a/Public/images/slack_logo.png b/Public/images/slack_logo.png
diff --git a/Public/index.css b/Public/index.css
@@ -1,55 +1,66 @@
-.index-view .row {
-    flex-flow: column;
-    align-items: center;
+body::before {
+    background: url("/images/sdn_logo.png");
+    background-repeat: no-repeat;
+    background-size: contain;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    opacity: 0.2;
+    content: "";
+    z-index: -1;
+    overflow: hidden;
+}
+
+html {
+    height: 480px;
+    width: 320px;
+    margin: auto;
+    position: relative;
 }
 
-.index-view .card {
-    height: 200px;
+.title p {
+    font-size: 24px;
+    color: #000000;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', 'sans-serif';
+    text-align: center;
+}
+
+.index-view .box {
+    height: 82px;
     display: flex;
     align-items: center;
     flex-flow: column;
-    max-width: 350px;
-    margin-bottom: 30px;
+    width: 129px;
+    border-radius: 25px;
+    border: 1px solid rgba(0, 0, 0, .2);
 }
 
-.index-view .card img {
-    width: 210px;
-    margin-top: 25px;
+.align-boxes {
+    margin-top: 90px;
 }
 
-.index-view .card .btn {
-    background-color: #ec2440;
-    color: #ffffff;
-    font-style: italic;
-    display: flex;
-    margin-top: 55px;
-    font-size: 14px;
+.meetup-box {
+    float: left;
+}
+
+.slack-box {
+    float: right;
+}
+
+.meetup-img {
+    margin-top: 22px;
+    height: 38px;
+}
+
+.slack-img {
+    margin-top: 10px;
+    height: 56.25px;
 }
 
 .index-view .card .btn span {
     line-height: 1.7;
 }
 
-@media screen and (min-width: 480px) {
-    .index-view .row {
-        flex-flow: row;
-    }
-
-    .index-view .card:first-child {
-        margin-right: 25px;
-    }
-
-    .index-view .card:last-child {
-        margin-left: 25px;
-    }
-}
-
-@media screen and (min-width: 992px) {
-    .index-view .card:first-child {
-        margin-right: 40px;
-    }
-
-    .index-view .card:last-child {
-        margin-left: 40px;
-    }
-}
+@media screen and (min-width: 480px) {}
diff --git a/Public/navigation.css b/Public/navigation.css
@@ -1,45 +1,20 @@
-nav.navbar {
+.bottom-bar {
     color: #ffffff;
-    height: 50px;
-    font-size: 22px;
+    height: 22px;
+    font-size: 18px;
+    margin-top: 310px;
+    margin-left: 15px;
 }
 
-nav.navbar a {
-    color: #ffffff;
-}
-
-nav.navbar a:hover {
-    text-decoration: underline;
+.box {
+    border-radius: 25px;
+    border: 1px solid rgba(0, 0, 0, .2);
 }
 
-nav.navbar .brand {
-    font-weight: 500;
-    color: black;
+.bottom-bar a {
+    color: #000000;
 }
 
-nav .navigation {
-    display: flex;
-    font-weight: 300;
-}
-
-nav .navigation a:last-child,
-nav .navigation input:last-child {
-    padding-right: 0;
-}
-
-nav .navigation input.nav-link {
-    background: transparent;
-    border: none;
-    color: #ffffff;
-    font-weight: 300;
-}
-
-nav .navigation input.nav-link:hover {
-    cursor: pointer;
+.bottom-bar a:hover {
     text-decoration: underline;
-    outline: none;
-}
-
-nav.brand {
-    text-align: center;
 }
diff --git a/Resources/Views/Layout/base.leaf b/Resources/Views/Layout/base.leaf
@@ -3,16 +3,16 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <title>Swift Dev Ninjas BASE</title>
+        <title>Swift Dev Ninjas</title>
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
         <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:100,300, 300i,700">
         <link rel="stylesheet" href="/index.css">
         <link rel="stylesheet" href="/footer.css">
         <link rel="stylesheet" href="/navigation.css">
     </head>
     <body>
-        #embed("Layout/navigation")
         #embed("Layout/index")
+        #embed("Layout/navigation")
         #embed("Layout/footer")
     </body>
 </html>
diff --git a/Resources/Views/Layout/footer.leaf b/Resources/Views/Layout/footer.leaf
@@ -1,7 +1,5 @@
-<footer class="footer">
-    <div class="container">
-        <p>
-            Built with ❤️ by A & A
-        </p>
-    </div>
-</footer>
+<div class="container footer">
+    <p>
+        Built with ❤️ by A & A
+    </p>
+</div>
diff --git a/Resources/Views/Layout/index.leaf b/Resources/Views/Layout/index.leaf
@@ -1,17 +1,19 @@
 <div class="container">
     <div class="index-view">
-        <h1 class="text-center m-b-60 m-t-60"><strong> Swift Dev Ninjas INDEX</strong></h1>
-
-        <div class="row justify-content-center">
-            <div class="card col-5">
-                <div class="card-body">
-                    <a class="link-overlay" href="https://www.meetup.com/Swift-Dev-Ninjas/" target="_blank"></a>
-                    <h6 class="card-title text-dark text-center">
-                        <strong>JOIN THE MEETUP</strong>
-                    </h6>
-                    <a href="https://www.meetup.com/de-DE/Swift-Dev-Ninjas/" target="_blank"><img src="/images/meetup_logo.png" alt="meetup-logo" /></a>
-                </div>
+        <div class="title">
+            <p class="text-center">Welcome to Swift Dev Ninjas</p>
+        </div>
+        <div class="text-center align-boxes">
+            <div class="box meetup-box ">
+                <a href="https://www.meetup.com/de-DE/Swift-Dev-Ninjas/" target="_blank">
+                    <img src="/images/meetup_logo.png" class="card-img meetup-img" alt="meetup-logo" />
+                </a>
+            </div>
+            <div class="box slack-box">
+                <a href="https://join.slack.com/t/swiftdevninjas/shared_invite/enQtNDEzNTQyNjQ3ODQ0LTJmY2E5MDRiNzA4OTE3YjBhOWE2YThhMTJhNDUxZmVjYTU2OWZjNzlmNzk0NDY1YzY0YTU1OGMzODBiYTMwYmI"
+                    target="_blank"><img src="/images/slack_logo.png" class="rounded slack-img" alt="slack-logo" />
+                </a>
             </div>
         </div>
     </div>
-</div>
+</div>
diff --git a/Resources/Views/Layout/navigation.leaf b/Resources/Views/Layout/navigation.leaf
@@ -1,8 +1,5 @@
-<nav class="navbar">
-    <div class="container">
-        <div class="col-4 text-right">
-        <a href="/about"> About </a>
-        <a href="/imprint" class="m-l-20"> Imprint </a>
-        </div>
-    </div>
-</nav>
+<div class="bottom-bar">
+    <a class="btn btn-light box" href="/about">About</a>
+    <a class="btn btn-light box" href="/faq">FAQ</a>
+    <a class="btn btn-light box" href="/codeofconduct">Code of Conduct</a>
+</div>