make the site look a bit less bootstrappy (and a bit more materialy, rip)

index.html

@@ -45,7 +45,7 @@
             <div class="container">
                 <div class="row">
                     <div class="col-md-auto">
-                        <img src="res/me.png" class="rounded-circle" width="200" height="200">
+                        <img src="res/me.png" class="rounded-circle" width="200" height="200" id="navbar-image">
                     </div>
                     <div class="col">
                         <h1 class="display-4" id="intro-text"></h1>
@@ -94,9 +94,8 @@
 
     <!-- Footer -->
     <div class="footer">
-        <div class="container footer-content">
-            <span class="text-muted">&copy; 2018 Ellpeck - <a href="" data-toggle="modal" data-target="#impressum-modal">Impressum</a></span>
-        </div>
+        <span class="text-muted"><a href="https://github.com/Ellpeck/Web">&copy; 2018 Ellpeck</a> - <a href="" data-toggle="modal" data-target="#impressum-modal">Impressum</a></span>
+        <img src="res/blobheart.png" id="blobheart">
     </div>
 
     <!-- Impressum -->

scripts/main.js

@@ -2,4 +2,8 @@ $(function() {
     $('.navbar-collapse a').on('click', function() {
         $('.navbar-collapse').collapse('hide');
     });
+
+    $('#blobheart').on('click', function() {
+        $('#navbar-image').attr('src', 'res/heart.png');
+    });
 });

scripts/projects.js

@@ -60,7 +60,7 @@ const projects = [{
 
 let p = '';
 for (project of projects) {
-    p += '<div class="card bg-light project">';
+    p += '<div class="card bg-light project rounded-0">';
     p += '<div class="card-body">';
     p += '<img class="project-image" src="res/projects/' + project['icon'] + '.png" alt="">';
 
@@ -70,7 +70,7 @@ for (project of projects) {
 
     let links = project['links'];
     for (let name in links) {
-        p += '<a href="' + links[name] + '" class="card-link btn btn-outline-info">' + name + '</a>';
+        p += '<a href="' + links[name] + '" class="card-link btn btn-outline-info rounded-0">' + name + '</a>';
     }
 
     p += '</div>';

scripts/social.js

@@ -50,7 +50,7 @@ const socials = [{
 
 let s = '';
 for (social of socials) {
-    s += '<a class="btn btn-light social-button" href="' + social['link'] + '"">';
+    s += '<a class="btn btn-light social-button rounded-0" href="' + social['link'] + '"">';
     s += '<img class="social-image" src="res/social/' + social['name'].toLowerCase() + '.png" alt="">';
     s += ' ' + social['name'];
     s += '</a>'

style.css

@@ -75,12 +75,8 @@ a.anchor.home {
 
 .footer {
     bottom: 0;
-    width: 100%;
     line-height: 30px;
     background-color: #f5f5f5;
-}
-
-.footer-content {
     text-align: center;
     padding: 15px;
 }
@@ -89,4 +85,10 @@ a.anchor.home {
     padding: 15px;
     font-weight: bold;
     font-size: 125%;
+}
+
+#blobheart {
+    float: right;
+    width: 30px;
+    height: 30px;
 }