Browse Source

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

pull/1/head
Ellpeck 3 years ago
parent
commit
2877f6ca11
  1. 7
      index.html
  2. BIN
      res/blobheart.png
  3. BIN
      res/heart.png
  4. 4
      scripts/main.js
  5. 4
      scripts/projects.js
  6. 2
      scripts/social.js
  7. 10
      style.css

7
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 -->

BIN
res/blobheart.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

BIN
res/heart.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 540 KiB

4
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');
});
});

4
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>';

2
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>'

10
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;
}
Loading…
Cancel
Save