-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
141 lines (134 loc) · 3.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<html lang=”en-GB”>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>dwyl - Who?</title>
<!--FontAwesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Adding google fonts -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300%7COpen+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<!--favicon -->
<link rel="shortcut icon" href="https://www.dwyl.io/images/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="main-content">
<header>
<ul class='nav'>
<li>Why?</li>
<li class='active'>Who?</li>
<li>What?</li>
<li>How?</li>
</ul>
</header>
<section class='desc'>
<strong>dwyl</strong> is made by <em>many</em> people
all <em>over</em> the world!
</section>
<div id='profile'> </div>
<ul id='faces'><!-- client-side rendered --> </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var people = {}; // our client-side people "database"
$.get('/people/z_people.json', function(data){
var html = ''; // string we will append to the DOM
data.forEach(function(person) {
people[person.github] = person; // assign to map for later
html += '<li class="avatar" id="' + person.github + '">'
html += '<img src="' +person.avatar + '" />'
html += '</li>'
})
$('#faces').append(html);
// event handler for avatar clicks:
$('.avatar').click(function(){
console.log(this.id);
// window.location = window.location.origin + '#' + this.id
var person = people[this.id];
console.log(person);
var html = '';
html += '<div>'
html += '<img src="' +person.avatar + '" />'
html += '</div>'
$('#profile').html(html);
})
})
</script>
<style>
/*https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/*/
html {
box-sizing: border-box;
margin:0;
padding:0;
}
body{
margin: 0;
margin-left: 2em;
padding:0;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #ffffff;
color: #403f3f;
font-size:1em;
height: 100%;
}
header {
width: 100%;
height: 5em;
display: block;
background-color: #0288d1;
clear: both;
}
ul.nav {
margin-left: 1em;
}
ul.nav li {
color: white;
font-size: 1.4em;
font-weight: bold;
float:left;
background-color: #0288d1;
width:15%;
padding: 1em;
margin: auto;
border-top: 3px solid #0288d1;
}
ul.nav li:hover, ul.nav li.active {
background-color: white;
border-top: 3px solid #0288d1;
border-bottom: 3px solid white;
color: #0288d1;
}
/* reset margins */
ul, menu, dir {
display: block;
-webkit-margin-before: 0em;
margin-before: 0em;
-webkit-margin-after: 0em;
margin-after: 0em;
-webkit-margin-start: 0px;
margin-start: 0px;
-webkit-margin-end: 0px;
margin-end: 0px;
-webkit-padding-start: 0px;
padding-start: 0px;
}
ul {
list-style-type: none;
}
.desc .faces {
margin-left: 1em;
}
.desc {
margin-top:1em;
margin-bottom: 1em;
font-size: 1.2em;
}
.avatar {
float: left;
}
.avatar img {
width: 100px;
padding: 1px;
border-radius: 7px;
}
</style>
</body>
</html>