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> <head>
<title>Quad's site</title> <title>Quad's site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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" /> <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> <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="style.css" rel="stylesheet" /> <link href="style.css" rel="stylesheet" />
@ -10,12 +11,19 @@
<div id="site"> <div id="site">
<div id="content"> <div id="content">
<h1 class="title"> <div id="splits">
Quad <div id="split1">
</h1> <img src="assets/avi.jpg" />
<p class="sub-title"> </div>
AKA Dominik <span>(Vincent)</span> Salonen <div id="split2">
</p> <h1 class="title">
Quad
</h1>
<p class="sub-title">
AKA Dominik <span>(Vincent)</span> Salonen
</p>
</div>
</div>
<div id="main-container"> <div id="main-container">
<div id="navbar"> <div id="navbar">
@ -25,7 +33,7 @@
</div> </div>
<div id="page" onload="javascript:initialContent();"> <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>
</div> </div>

2
main.js
View File

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

41
style.css
View File

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