git.iko.soy/webring
on master help sign in
port the portal over to a more symantic html and start cutting out unnecessary css
beb4bd5ckipp01
index.html+1−1
compare with master
unifiedsplit
@@ -4,7 +4,7 @@
4 <meta charset="utf-8">
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <link rel="stylesheet" type="text/css" href="links/fonts.css"/>
6 <link rel="stylesheet" type="text/css" href="links/fonts.css"/>
7− <link rel="stylesheet" type="text/css" href="links/main.css"/>
7+ <link rel="stylesheet" type="text/css" href="links/main2.css"/>
8 <script src="scripts/portal.js"></script>
8 <script src="scripts/portal.js"></script>
9 <script src="scripts/sites.js"></script>
9 <script src="scripts/sites.js"></script>
10 <script src="scripts/opml.js"></script>
10 <script src="scripts/opml.js"></script>
links/main2.cssnew file+25
@@ -0,0 +1,25 @@
1+* { margin:0;padding:0;border:0;outline:0;text-decoration:none;font-weight:inherit;font-style:inherit;color:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;list-style:none;border-collapse:collapse;border-spacing:0; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
2+
3+body { background:#f4f4f4; padding:0px; margin:0px; }
4+body > div { background: #111; min-height: calc(100vh - 60px); width: calc(100vw - 60px); margin: 15px; padding: 15px; font-family:'input_mono_regular', 'Monospaced','Courier New',courier; font-size:11px; color:white; position: relative; }
5+body > div > ul { padding-bottom: 15px; margin-bottom:15px; }
6+body div p { display:block; padding:0px 5px; line-height: 20px;}
7+body footer { border-top: 2px solid white; padding-top: 15px; margin-top: 15px;}
8+body footer a { text-decoration: underline; }
9+
10+/* portal */
11+body #portal main,
12+body #portal footer { max-width: 800px; }
13+body #portal #icon { display: block; width: 30px; height: 30px; background-image: url(../icon.white.svg); background-size: cover; background-repeat: no-repeat; position: absolute; bottom: 15px; right:15px; background-position: center; padding:0px }
14+body #portal ul { columns:1; }
15+body #portal ul li { display:block; padding-left:5px; text-overflow: ellipsis; text-transform: lowercase;}
16+body #portal ul li:before { content: attr(id) ")"; }
17+body #portal ul li[data-type]::after { content:"<" attr(data-type) ">"; color:#555; }
18+body #portal ul li a { line-height: 20px; padding:0px 5px; text-decoration: none;}
19+body #portal ul li a:visited { color:#ccc; text-decoration: none;}
20+body #portal ul li a:hover { text-decoration: underline; }
21+
22+@media (min-width: 630px) {
23+ body #portal ul { columns: 3;}
24+}
25+
scripts/portal.js+13−15
@@ -16,19 +16,22 @@ function Portal (sites) {
16 }
16 }
17
17
18 function _directory (sites) {
18 function _directory (sites) {
19− return `
20− <ul>${sites.reduce( (acc, site, id) =>
21− `${acc}<li ${site.type ? `data-type="${site.type}"` : ''} id='${id}'><a href='${site.url}'>${_name(site)}</a></li>`
19+ const listItems= sites.reduce((acc, site, id) => `${acc}<li ${_type(site)} id='${id}'><a href='${site.url}'>${_name(site)}</a></li>`, '')
22− , '')}</ul>\n${_readme()}${_buttons()}`
20+ return `<main><ul>${listItems}</ul></main><footer>${_readme()}${_buttons()}</footer>`
23 }
21 }
24
22
25 function _name (site) {
23 function _name (site) {
26 return site.title || `${site.url.split('//')[1]}`
24 return site.title || `${site.url.split('//')[1]}`
27 }
25 }
28
26
27+ function _type (site) {
28+ return site.type ? `data-type="${site.type}"` : ''
29+ }
30+
29 function _redirect (site) {
31 function _redirect (site) {
30− return `<p id='footer'>Redirecting to <a href="${site.url}">${site.url}</a></p><meta http-equiv="refresh" content="3; url=${site.url}">
32+ return `<main><p>Redirecting to <a href="${site.url}">${site.url}</a></p></main>
33+ <meta http-equiv="refresh" content="3; url=${site.url}">
31− <p class='buttons'><a href='#' onClick="portal.reload('')">Directory</a> | <a href='#${site.url}' onClick="portal.reload('random')">Skip</a> | <a href='#random' onClick="portal.reload('random')">Random</a> | <a href='https://github.com/XXIIVV/webring'>Information</a> <a id='icon' href='#random' onClick="portal.reload('random')"></a></p>`
34+ <footer><p class='buttons'><a href='#' onClick="portal.reload('')">Directory</a> | <a href='#${site.url}' onClick="portal.reload('random')">Skip</a> | <a href='#random' onClick="portal.reload('random')">Random</a> | <a href='https://github.com/XXIIVV/webring'>Information</a> <a id='icon' href='#random' onClick="portal.reload('random')"></a></p>`
32 }
35 }
33
36
34 //
37 //
@@ -52,17 +55,12 @@ function Portal (sites) {
52 this.locate = function () {
55 this.locate = function () {
53 const hash = window.location.hash.replace('#', '').trim()
56 const hash = window.location.hash.replace('#', '').trim()
54
57
55− if (hash == 'random') {
58+ if (hash === 'random') {
56 return Math.floor(Math.random() * this.sites.length)
59 return Math.floor(Math.random() * this.sites.length)
60+ } else {
61+ const id = sites.findIndex(site => site.url.indexOf(hash) > -1)
62+ return id > -1 ? parseInt(id) : -1
57 }
63 }
58−
59− for (const id in this.sites) {
60− const site = this.sites[id]
61− if (site.url.indexOf(hash) > -1) {
62− return parseInt(id)
63− }
64− }
65− return -1
66 }
64 }
67
65
68 this.next = function (loc = this.locate()) {
66 this.next = function (loc = this.locate()) {