quad
/
site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fine-tune the site. Also add Avi and Favicon.

This commit is contained in:
Dominik V. Salonen 2018-03-15 08:34:33 +01:00
parent 0c62dae000
commit 65684102fe
5 changed files with 54 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/avi.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
assets/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

22
index.html
View File

@ -2,6 +2,7 @@
<head>
<title>Quad's site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="assets/favicon.png" type="image/png"/>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" />
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="style.css" rel="stylesheet" />
@ -10,12 +11,19 @@
<div id="site">
<div id="content">
<h1 class="title">
Quad
</h1>
<p class="sub-title">
AKA Dominik <span>(Vincent)</span> Salonen
</p>
<div id="splits">
<div id="split1">
<img src="assets/avi.jpg" />
</div>
<div id="split2">
<h1 class="title">
Quad
</h1>
<p class="sub-title">
AKA Dominik <span>(Vincent)</span> Salonen
</p>
</div>
</div>
<div id="main-container">
<div id="navbar">
@ -25,7 +33,7 @@
</div>
<div id="page" onload="javascript:initialContent();">
<p class="initial-text">Click a button!</p>
<p class="initial-text">Hold on. We gotta finish loading.</p>
</div>
</div>

2
main.js
View File

@ -56,4 +56,6 @@ function initialContent() {
button3.addEventListener('click', function() {
activatePage(button3, page3);
}, false);
setContent(contentArea, '<p class="initial-text">Click a button!</p>');
}

41
style.css
View File

@ -62,7 +62,7 @@ a:hover {
}
#main-container {
max-height: 65vh;
max-height: 60vh;
}
}
@ -78,17 +78,49 @@ a:hover {
padding: 15px 5px 8px 5px;
}
#splits {
text-align: center;
width: 100%;
font-size: 0;
}
#split1, #split2 {
display: inline-block;
width:50%;
height: 100%;
vertical-align: middle;
padding: 5px;
box-sizing: border-box;
}
#split1 {
display: inline-block;
width: 40%;
text-align: right;
}
#split2 {
display: inline-block;
width: 40%;
text-align: left;
}
/* Core site components */
#split1 img {
height: 120px;
width: auto;
border-radius: 100%;
box-shadow: 2px 2px 8px rgba(0,0,0,0.25);
}
.title {
font-size: 32pt;
font-weight: 300;
text-align: center;
}
.sub-title {
font-size: 10pt;
color: #AAA;
text-align: center;
}
.sub-title span {
@ -214,7 +246,8 @@ a.mastodon {
#page p {
margin-top: 5px;
margin-bottom: 15px;
font-size: 13pt
font-size: 13pt;
line-height: 1.25em;
}
#page p:last-child {