git.iko.soy/webring
on master help sign in
Minor changes to the layout
1af9fd2Devine Lu Linvega
404.htmlnew file+18
compare with master
unifiedsplit
@@ -0,0 +1,18 @@
1+---
2+permalink: /404.html
3+---
4+<!DOCTYPE html>
5+<html lang="en">
6+<head>
7+ <meta charset="utf-8">
8+ <title>Loading..</title>
9+</head>
10+<body style='background:black'>
11+ <script>
12+ var parts = window.location.pathname.split("/")
13+ var target = parts.slice(-1);
14+ parts.splice(-1)
15+ document.location.href = parts.join("/")+"/#"+target
16+ </script>
17+</body>
18+</html>
index.html+2−13
@@ -3,7 +3,8 @@
3<head>
3<head>
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/main.css"/>
6− <script src="portal.js"></script>
7+ <script src="scripts/portal.js"></script>
7 <title>Webring</title>
8 <title>Webring</title>
8</head>
9</head>
9<body>
10<body>
@@ -61,17 +62,5 @@
61 var portal = new Portal(sites);
62 var portal = new Portal(sites);
62 portal.start();
63 portal.start();
63 </script>
64 </script>
64− <style>
65− body { background:#f4f4f4; padding:0px; margin:0px; }
66− body pre { background: #111;min-height: calc(100vh - 60px);width: calc(100vw - 60px);margin: 15px;color: #555;padding: 15px;font-family: 'Courier New',courier;font-size:12px; position: relative; border-radius: 2px }
67− body pre a { color:#fff; padding:0px 5px; line-height: 20px}
68− body pre a:hover { color:#eee; background:#000; text-decoration: none; }
69− body pre #icon { display: block;width: 30px;height: 30px;background-image: url(icon.white.svg);background-size: cover;background-repeat: no-repeat;position: absolute;bottom: 10px;right:10px;background-position: center;padding:0px }
70− body pre p { display:block; padding:0px 5px}
71− body pre p b { font-weight: normal; color:#ccc; }
72− body pre list { display:flex; flex-wrap: wrap; max-width: 800px}
73− body pre list ln { width: 16em; display:block; padding-left:5px; overflow: hidden; text-overflow: ellipsis; }
74− body pre list ln a:visited { color:#ccc;}
75− </style>
76</body>
65</body>
77</html>
66</html>
links/main.cssnew file+13
@@ -0,0 +1,13 @@
1+body { background:#f4f4f4; padding:0px; margin:0px; }
2+body div { display:block; background: #ccc;min-height: calc(100vh - 60px);width: calc(100vw - 60px);margin: 15px;color: #555;padding: 15px;font-family: 'Monospaced','Courier New',courier;font-size:12px; position: relative; border-radius: 2px }
3+body div #icon { display: block;width: 30px;height: 30px;background-image: url(../icon.white.svg);background-size: cover;background-repeat: no-repeat;position: absolute;bottom: 10px;right:10px;background-position: center;padding:0px }
4+body div p { display:block; padding:0px 5px}
5+body div p a { color:black; text-decoration: none; }
6+body div p a:hover { text-decoration: underline; }
7+body div p b { font-weight: normal; color:#000; text-decoration: underline; }
8+body div p.readme { max-width:500px; }
9+body div list { display:block; max-width: 800px; columns:3; border-bottom: 2px solid white;padding-bottom: 15px;margin-bottom:15px; overflow: hidden;}
10+body div list ln { width: 16em; display:block; padding-left:5px; overflow: hidden; text-overflow: ellipsis; }
11+body div list ln a { line-height: 20px; display: inline-block; color:#000; padding:0px 5px;}
12+body div list ln a:visited { color:#777; text-decoration: none;}
13+body div list ln a:hover { background:black; color:#fff; text-decoration: none; }
portal.js → scripts/portal.jsrenamed+14−3
@@ -1,6 +1,6 @@
1function Portal(sites)
1function Portal(sites)
2{
2{
3− this.el = document.createElement("pre");
3+ this.el = document.createElement("div");
4 this.sites = sites;
4 this.sites = sites;
5
5
6 this.install = function()
6 this.install = function()
@@ -13,6 +13,16 @@ function Portal(sites)
13 this.install();
13 this.install();
14 this.el.innerHTML = window.location.hash && window.location.hash.length > 4 ? this.redirect() : this.directory();
14 this.el.innerHTML = window.location.hash && window.location.hash.length > 4 ? this.redirect() : this.directory();
15 }
15 }
16+
17+ this.readme = function()
18+ {
19+ return `<p class='readme'>This webring is an attempt to inspire artists & developers to build their own website and share traffic among each other. The ring welcomes personalized websites such as <b>diaries, wikis & portfolios</b> — To add yourself to the ring, submit a <a href='https://github.com/XXIIVV/webring/edit/master/index.html' target='_blank'>Pull Request</a>.</p>`
20+ }
21+
22+ this.buttons = function()
23+ {
24+ return `<p class='buttons'><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>`
25+ }
16
26
17 this.directory = function()
27 this.directory = function()
18 {
28 {
@@ -22,7 +32,7 @@ function Portal(sites)
22 var site = this.sites[id]
32 var site = this.sites[id]
23 html += `<ln>${id}) <a href='${site}'>${site.split("//")[1]}</a></ln>`
33 html += `<ln>${id}) <a href='${site}'>${site.split("//")[1]}</a></ln>`
24 }
34 }
25− return `<list>${html}</list>\n<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></ln>`
35+ return `<list>${html}</list>\n${this.readme()}${this.buttons()}`
26 }
36 }
27
37
28 this.reload = function()
38 this.reload = function()
@@ -69,6 +79,7 @@ function Portal(sites)
69 var location = this.locate();
79 var location = this.locate();
70 var target = this.next(location);
80 var target = this.next(location);
71 this.navigate(target)
81 this.navigate(target)
82+ return `<p>Redirecting to <b>${target}</b></p><meta http-equiv="refresh" content="3; url=${target}">
72− return `<p>Redirecting to <b>${target}</b></p><meta http-equiv="refresh" content="3; url=${target}"><a href='#' onClick="portal.reload('')">Directory</a> | <a href='#${target}' 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>`
83+ <p class='buttons'><a href='#' onClick="portal.reload('')">Directory</a> | <a href='#${target}' 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>`
73 }
84 }
74}
85}