1af9fd2 · webring · git.iko.soy

git.iko.soy/webring

Minor changes to the layout

commit1af9fd2c2cbfa61d805ca134dc8d05c7ac2e652c authorDevine Lu Linvega <aliceffekt@gmail.com> dateSun 3 Jun 2018, 10:11 (8 years ago) parent96bb8d7

4 files changed+47−16

compare with master

unifiedsplit

404.html+18 index.html+2−13 links/main.css+13 portal.js → scripts/portal.js+14−3

404.htmlnew file+18

@@ -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 @@

33<head>

44 <meta charset="utf-8">

55 <meta name="viewport" content="width=device-width, initial-scale=1.0">

6− <script src="portal.js"></script>

6+ <link rel="stylesheet" type="text/css" href="links/main.css"/>

7+ <script src="scripts/portal.js"></script>

78 <title>Webring</title>

89</head>

910<body>

@@ -61,17 +62,5 @@

6162 var portal = new Portal(sites);

6263 portal.start();

6364 </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>

7665</body>

7766</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 @@

11function Portal(sites)

22{

3− this.el = document.createElement("pre");

3+ this.el = document.createElement("div");

44 this.sites = sites;

66 this.install = function()

@@ -13,6 +13,16 @@ function Portal(sites)

1313 this.install();

1414 this.el.innerHTML = window.location.hash && window.location.hash.length > 4 ? this.redirect() : this.directory();

1515 }

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+ }

1626

1727 this.directory = function()

1828 {

@@ -22,7 +32,7 @@ function Portal(sites)

2232 var site = this.sites[id]

2333 html += `<ln>${id}) <a href='${site}'>${site.split("//")[1]}</a></ln>`

2434 }

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()}`

2636 }

2737

2838 this.reload = function()

@@ -69,6 +79,7 @@ function Portal(sites)

6979 var location = this.locate();

7080 var target = this.next(location);

7181 this.navigate(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>`

82+ return `<p>Redirecting to <b>${target}</b></p><meta http-equiv="refresh" content="3; url=${target}">

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>`

7384 }

7485}