This repository has been archived by the owner on Jun 22, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
185 lines (167 loc) · 9.78 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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1,initial-scale=1" />
<meta name="HandheldFriendly" content="true">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="application-name" content="Wews" />
<meta name="author" content="denim2x" />
<meta name="description" content="The friendly news aggregator" />
<meta name="abstract" content="A refreshing news aggregator app for the modern Web" />
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js" as="script" />
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.core.min.js" as="script" />
<link rel="preload" href="index.js" as="script" />
<title>Wews - Headlines</title>
<link rel="stylesheet" href="master.css" />
<style>
.Catalog-root :nth-child(4n) {
--weight: 3;
}
.Catalog-root :nth-child(4n+1) {
--weight: 4;
}
.Catalog-root :nth-child(4n+2) {
--weight: 2;
}
.Catalog-root :nth-child(4n+3) {
--weight: 3;
}
article img {
width: 300px;
float: right;
margin: 15px;
}
</style>
</head>
<body class="Root u-buttons">
<aside class="Config u-scrollbar">
<div class="Config-tools">
<button type="button" title="Close" class="Config-close"></button>
<button type="button" title="Account" class="Config-account"></button>
</div>
<div class="Config-body u-center">
<form class="Config-main u-values">
<fieldset class="Config-sharing">
<legend>Sharing</legend>
<button type="button" title="RSS" class="Config-rss"></button>
<button type="button" title="Facebook" class="Config-fb"></button>
<button type="button" title="Twitter" class="Config-tw"></button>
</fieldset>
<fieldset class="Config-categories">
<legend>Categories</legend>
<button type="button">Everything</button>
<button type="button">Sports</button>
<button type="button">Politics</button>
<button type="button">World</button>
<button type="button">Weather</button>
<button type="button">Technology</button>
<button type="button">Entertainment</button>
</fieldset>
<fieldset class="Config-ordering">
<legend>Sort by</legend>
<input type="radio" name="order" value="Relevance">
<input type="radio" name="order" value="Trending">
<input type="radio" name="order" value="Latest">
</fieldset>
<fieldset name="Config-interval">
<legend>Interval</legend>
<input type="radio" name="timespan" value="Last day">
<input type="radio" name="timespan" value="Last week">
<input type="radio" name="timespan" value="Last month">
<input type="radio" name="timespan" value="Last three months">
<input type="radio" name="timespan" value="Last year">
<input type="radio" name="timespan" value="Last five years">
<input type="radio" name="timespan" value="All time">
</fieldset>
<fieldset name="Config-sources">
<legend>Sources</legend>
<input type="checkbox" value="BBC">
<input type="checkbox" value="Yahoo">
<input type="checkbox" value="Google">
<input type="checkbox" value="Bing">
<input type="checkbox" value="NBC">
<input type="checkbox" value="MSN">
<input type="checkbox" value="Engadget">
<input type="checkbox" value="The Verge">
<input type="checkbox" value="CNET">
<input type="checkbox" value="TechCrunch">
<input type="checkbox" value="TechRadar">
<input type="checkbox" value="Wired">
<input type="checkbox" value="Express">
</fieldset>
</form>
</div>
</aside>
<div class="Root-body">
<header class="Header">
<h1 title="Open settings" class="Header-logo">
<span class="Header-title">Wews</span>
</h1>
<form class="Header-body">
<input type="search" autofocus placeholder="search…" class="Header-search">
<fieldset class="Header-tools">
<button type="button" title="Account" class="Header-account"></button>
<input type="checkbox" title="Switch theme" class="Header-themes">
</fieldset>
</form>
</header>
<main class="Catalog u-scrollbar">
<nav class="Catalog-root">
<section>
<h4>Aliquam laoreet tellus et porta faucibus.</h4>
</section>
<section>
<h4>In sodales diam sed lectus blandit, ut tristique arcu faucibus.</h4>
</section>
<section>
<h4>Phasellus at tortor bibendum, scelerisque purus sed, vestibulum tellus.</h4>
</section>
<section>
<h4>Ut non ante quis velit maximus aliquet.</h4>
</section>
<section>
<h4>Morbi venenatis tortor vel libero maximus molestie.</h4>
</section>
<section>
<h4>Donec vitae urna vehicula, fringilla turpis ut, ornare lorem.</h4>
</section>
<section>
<h4>Morbi eget eros ac elit bibendum consectetur ac mollis urna.</h4>
</section>
<section>
<h4>Phasellus posuere nulla eget velit scelerisque, sit amet varius felis tincidunt.</h4>
</section>
<section>
<h4>Praesent iaculis enim sit amet justo eleifend, et elementum risus aliquet.</h4>
</section>
<section>
<h4>Integer iaculis elit vel viverra vehicula.</h4>
</section>
<section>
<h4>Mauris eu nibh fermentum, scelerisque eros quis, aliquam massa.</h4>
</section>
<section>
<h4>In mollis urna sit amet viverra fringilla.</h4>
</section>
</nav>
</main>
<article class="Article u-scrollbar">
<div class="Article-root">
<button type="button" title="Close" class="Article-close"></button>
<section class="Article-body">
<img src="https://goo.gl/usHM9M" alt="Sample image">
<p>Aliquam nec neque nec orci aliquet tempor. Maecenas et varius ipsum. Suspendisse eu justo dui. Phasellus quam magna, sagittis ac tincidunt quis, pulvinar at purus. In molestie suscipit libero luctus convallis. Donec rhoncus, nisi ac imperdiet eleifend, urna nulla malesuada nunc, quis aliquet neque lectus eget est. Donec quis semper turpis, sagittis eleifend ipsum. Vestibulum tristique, enim nec convallis pharetra, neque velit tincidunt velit, vel facilisis quam metus id mauris. Nullam sit amet ligula eleifend, bibendum neque quis, egestas sem. Mauris consectetur ante a pretium eleifend. Vivamus at ultricies ex. Curabitur dui ex, bibendum ac nunc nec, scelerisque pretium tortor. Pellentesque ac pharetra ipsum. Aliquam et nisl lobortis, porta augue vitae, finibus purus.</p>
<p>Quisque velit elit, varius eu luctus sit amet, pretium at ligula. Nulla euismod lobortis felis eget laoreet. Aliquam erat volutpat. Aenean auctor metus tincidunt dignissim venenatis. Aliquam nec pellentesque nisi. Suspendisse potenti. Aenean hendrerit eu ipsum nec maximus. Sed nec urna nec mauris viverra fermentum. Pellentesque quis metus ac lectus faucibus iaculis ut eget tellus.</p>
<p>Donec venenatis nisl sit amet dui sollicitudin, nec iaculis nisi aliquam. Duis eu dapibus magna. Proin ultrices in tortor vel mattis. Nullam gravida hendrerit cursus. Phasellus efficitur nisi ut lacus bibendum commodo. Quisque aliquet viverra velit quis gravida. Aenean vel pharetra nisl. Aenean et porttitor erat. Integer dictum euismod euismod. Donec vulputate vehicula justo vitae pharetra.</p>
<p>Vivamus ac vestibulum elit. Ut ut rhoncus enim, sed dignissim ante. Phasellus eu pulvinar tellus. Maecenas eget libero at purus fringilla commodo nec at nisi. Morbi eu purus non turpis luctus pellentesque et vel purus. Morbi iaculis vulputate quam, in bibendum diam molestie dapibus. In eget lorem urna. In molestie bibendum nulla, ultricies facilisis arcu aliquet ac. Cras a purus auctor, mattis eros non, placerat magna. Pellentesque eu sollicitudin dolor. Aenean rhoncus diam sit amet diam aliquet tristique. Praesent non arcu ut metus scelerisque commodo sed ac leo.</p>
<p>In nec magna dictum, dictum tellus eget, finibus felis. Donec metus ex, facilisis id dolor vel, blandit viverra dui. Proin vitae quam tempor, porttitor eros non, facilisis elit. Sed aliquet diam imperdiet dictum pharetra. Phasellus eleifend, ipsum nec tincidunt molestie, sem nisl faucibus eros, sit amet lacinia quam diam facilisis augue. Vivamus nec semper dui. Vestibulum facilisis ligula quis nunc elementum iaculis. Aliquam ut placerat leo. Maecenas orci lorem, rhoncus ut nibh nec, semper pharetra purus. Pellentesque vitae efficitur nunc. Cras quis imperdiet nulla. Pellentesque suscipit leo leo, consectetur blandit libero vehicula ac. Nulla a leo a felis molestie rutrum eu eu dui. Proin et ante augue. Etiam finibus vulputate metus non fringilla. Mauris laoreet dapibus quam.</p>
</section>
</div>
</article>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.core.min.js"></script>
<script src="index.js"></script>
</body>
</html>