added footer

docs/assets/css/main.css

@@ -66,9 +66,12 @@ body {
   background-color: #f7f7f7;
   height: calc(100vh - 3rem);
   overflow: hidden; }
+  @media (max-width: 56.25em) {
+    .header {
+      height: calc(100vh); } }
   .header__image {
     display: block;
-    margin: 8vh auto 0 auto; }
+    margin: 8.5vh auto 0 auto; }
     @media (max-width: 56.25em) {
       .header__image {
         display: none; } }
@@ -76,11 +79,12 @@ body {
     transition: all .2s;
     margin: 30vh auto 0 auto;
     width: calc(95%);
-    font-family: 'Open Sans',
 sans-serif;
+    font-family: 'Open Sans', sans-serif;
     font-size: 2rem; }
     @media (max-width: 56.25em) {
       .header__download-box {
-        margin: 10vh auto 0 auto; } }
+        margin: 10vh auto 0 auto;
+        width: calc(80%); } }
     .header__download-box--title {
       font-weight: 300;
       font-size: 5rem;
@@ -101,7 +105,8 @@ body {
   padding: 0 15px 2px 15px;
   font-size: 38px;
   color: #3f3f3f;
-  text-decoration: none; }
+  text-decoration: none;
+  margin-bottom: 1rem; }
   .download-button:hover {
     color: #faa424; }
   .download-button__web {
@@ -129,3 +134,25 @@ body {
 .fa-apple {
   position: relative;
   top: -2px; }
+
+.footer {
+  text-align: center;
+  background-color: #141414;
+  color: white;
+  height: 18rem;
+  padding-top: 4em; }
+  .footer__title {
+    font-family: 'Open Sans', sans-serif;
+    font-weight: lighter;
+    font-size: 2rem;
+    margin-bottom: 1.5rem; }
+  .footer__buttons {
+    margin: auto; }
+    .footer__buttons--button {
+      font-size: 4rem;
+      color: whitesmoke;
+      transition: all .2s; }
+      .footer__buttons--button:not(:last-child) {
+        margin-right: 2rem; }
+      .footer__buttons--button:hover {
+        color: #faa424; }

docs/assets/sass/layout/_header.scss

@@ -4,9 +4,13 @@
     height: calc(100vh - 3rem);
     overflow: hidden;
 
+    @include respond(tab-port) {
+        height: calc(100vh);
+    }
+
     &__image {
         display: block;
-        margin: 8vh auto 0 auto;
+        margin: 8.5vh auto 0 auto;
 
         @include respond(tab-port) {
             display: none;
@@ -26,14 +30,14 @@
 
         @include respond(tab-port) {
             margin: 10vh auto 0 auto;
+            width: calc(80%);
         }
 
         // position: relative;
         // top: 50%;
         // transform: translateY(-50%);
 
-        font-family: 'Open Sans',
+        font-family: 'Open Sans', sans-serif;
-        sans-serif;
         font-size: 2rem;
 
         &--title {
@@ -70,6 +74,7 @@
     //opacity: .80;
     text-decoration: none;
     // outline-color: rgb(141, 140, 140);
+    margin-bottom: 1rem;
 
     &:hover {
         color: rgb(250, 164, 36);
@@ -111,4 +116,38 @@
 .fa-apple {
     position: relative;
     top: -2px;
+}
+
+.footer {
+    text-align: center;
+    background-color: rgb(20, 20, 20);
+    color: white;
+    height: 18rem;
+    padding-top: 4em;
+
+    &__title {
+        font-family: 'Open Sans', sans-serif;
+        font-weight: lighter;
+        font-size: 2rem;
+        margin-bottom: 1.5rem;
+        
+    }
+
+    &__buttons {
+        margin: auto;       
+
+        &--button {
+            font-size: 4rem;
+            color:whitesmoke;
+            transition: all .2s;
+
+            &:not(:last-child){
+                margin-right: 2rem;
+            }
+
+            &:hover {
+                color:rgb(250, 164, 36);
+            }
+        }
+    }
 }

docs/index.html

@@ -35,18 +35,18 @@
                     <div class="header__download-box--buttons">
                         <p>
                             <h4 class="header__download-box--subtitle">Try it in your browser!</h4>
-                            <a href="#" class="download-button download-button__web"
+                            <a href="#" class="download-button download-button__web" title="what are you waiting for? click!"
                                 onClick="window.open('http://sengi.nicolas-constant.com'+'?qt='+ (new Date()).getTime(),'Sengi','toolbar=no,location=no,status=no,menubar=no,scrollbars=no, resizable=yes,width=377,height=800'); return false;"
-                                class="button"><i class="fas fa-globe"></i><span class="download-button__web--label">launch!</span></a><br />
+                                class="button"><i class="fas fa-globe"></i><span
+                                    class="download-button__web--label">launch!</span></a><br />
                             <br />
                             <br />
 
                             <h4 class="header__download-box--subtitle">Or download the desktop client:</h4>
-                            <a href="#" class="download-button"><i class="fab fa-windows"></i></a>
+                            <a href="#" class="download-button" title="download client for windows"><i class="fab fa-windows"></i></a>
-                            <a href="#" class="download-button"><i class="fab fa-apple"></i></a>
+                            <a href="#" class="download-button" title="download client for mac"><i class="fab fa-apple"></i></a>
-                            <a href="#" class="download-button"><i class="fab fa-ubuntu"></i></a>
+                            <a href="#" class="download-button" title="download client for debian-based distrib"><i class="fab fa-ubuntu"></i></a>
-                            <a href="https://snapcraft.io/sengi"><img
+                            <a href="https://snapcraft.io/sengi" title="use Snap Store for linux"><img src="/images/[EN]-snap-store-white-uneditable@1x.png" /></a>
-                                    src="/images/[EN]-snap-store-white-uneditable@1x.png" /></a>
                         </p>
                     </div>
 
@@ -70,8 +70,13 @@
 
         </section>
     </main>
-    <footer>
+    <footer class="footer">
+        <h3 class="footer__title">Let's keep in touch!</h3> 
 
+        <div class="footer__buttons">
+            <a href="https://mastodon.social/@sengi_app" class="footer__buttons--button" title="open pleroma-compatible account"><i class="fab fa-mastodon"></i></a>
+            <a href="https://github.com/NicolasConstant/sengi" class="footer__buttons--button"  title="open microsoft github repository"><i class="fab fa-github"></i></a>
+        </div>
     </footer>
 </body>