Commit 65684102 authored by Dominik V. Salonen's avatar Dominik V. Salonen

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

parent 0c62dae0
......@@ -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>
......
......@@ -56,4 +56,6 @@ function initialContent() {
button3.addEventListener('click', function() {
activatePage(button3, page3);
}, false);
setContent(contentArea, '<p class="initial-text">Click a button!</p>');
}
......@@ -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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment