-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (95 loc) · 3.91 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
<html class="bg-dark-gray" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Nice Sites via Maxim Siebert</title>
<link rel="stylesheet" href="css/all.css">
</head>
<body class="courier white overflow-y-scroll f6">
<nav class="fixed w-100 z-1 bg-dark-gray">
<div class="mh4-ns mh2 mt4-ns mt3 relative">
<div class="flex pb3 nav">
<h1 class="ma0 f6 fw4 fade"><span class="count"></span> nice sites</h1>
<div class="fade-out">
<div class="loader absolute left--50"></div>
</div>
<p class="ml-auto ma0 f6 fade">via <a class="link white fw4 hover-white" href="http://maximsiebert.com/" target="_blank">Maxim <span class="dib-ns dn">Siebert</span></a></p>
</div>
</div>
</nav>
<div id="wrapper" class="pt5">
<!-- <ul class="list ma0 ph3-ns ph1 pt3 flex flex-wrap w-100 relative"> -->
<ul class="list ma0 ph3-ns ph1 w-100 relative mb3">
<!-- <li class="w-20-l w-50 flex pa3-ns pa1 fade">
<a class="link white db w-100 relative overflow-hidden bg-mid-gray" href="" target="_blank">
<img class="thumbnail h5 z-1 relative w-100" src="" alt="">
<div class="placeholder absolute--fill absolute"></div>
<div class="details absolute absolute--fill bg-black-40 flex items-end pa3 z-1">
<span class="name word-wrap db"></span>
</div>
</a>
</li> -->
<li class="w-100 flex ph3-ns ph1 fade">
<a class="link db w-100 relative overflow-hidden flex items-center bb b--white-20 pv3-ns pv1" href="" target="_blank">
<div class="w3-ns w2 relative">
<img class="thumbnail h3-ns h2 z-1 relative w-100" src="" alt="">
<div class="placeholder absolute--fill absolute"></div>
</div>
<div class="pa3 z-1 w-25-ns">
<span class="name word-wrap db"></span>
</div>
<div class="pl3 z-1 db-ns dn ml0-l ml-auto">
<span class="url word-wrap db"></span>
</div>
<div class="z-1 ml-auto db-l dn">
<span class="date word-wrap db"></span>
</div>
</a>
</li>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/pure.min.js"></script>
<script>
$.getJSON("https://maximsiebert.dropmark.com/343445.json", function(data) {
var content = {
data //the JSON data
},
directive = {
'li':{
'site<-items':{
'span.name': 'site.name',
'span.date': 'site.created_at',
'span.url': 'site.link',
'a@href': 'site.link',
'img.thumbnail@src': 'site.thumbnail',
}
},
};
$p('ul').render(data, directive);
$('h1 span').html(data.items_total_count);
}).done(function() {
$('.fade').addClass('active');
$('.fade-out').addClass('active');
$('.nav').addClass('active');
});
$(document).ready(function () {
'use strict';
var c, currentScrollTop = 0,
navbar = $('nav');
$(window).scroll(function () {
var a = $(window).scrollTop();
var b = navbar.height();
currentScrollTop = a;
if (c < currentScrollTop && a > b + b) {
navbar.addClass("scrollUp");
} else if (c > currentScrollTop && !(a <= b)) {
navbar.removeClass("scrollUp");
}
c = currentScrollTop;
});
});
</script>
</html>