ilyakooo0/webring
1
0
Fork 0
mirror of https://github.com/ilyakooo0/webring.git synced 2024-11-22 22:57:39 +03:00
Code Issues Projects Releases Wiki Activity

Minor changes to the layout

Browse Source
This commit is contained in:
Devine Lu Linvega 2018-06-03 10:11:00 +12:00
parent 96bb8d7d5f
commit 1af9fd2c2c
4 changed files with 47 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
404.html Normal file
View File

@ -0,0 +1,18 @@
---
permalink: /404.html
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading..</title>
</head>
<body style='background:black'>
<script>
var parts = window.location.pathname.split("/")
var target = parts.slice(-1);
parts.splice(-1)
document.location.href = parts.join("/")+"/#"+target
</script>
</body>
</html>

15
index.html
View File

@ -3,7 +3,8 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="portal.js"></script>
<link rel="stylesheet" type="text/css" href="links/main.css"/>
<script src="scripts/portal.js"></script>
<title>Webring</title>
</head>
<body>
@ -61,17 +62,5 @@
var portal = new Portal(sites);
portal.start();
</script>
<style>
body { background:#f4f4f4; padding:0px; margin:0px; }
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 }
body pre a { color:#fff; padding:0px 5px; line-height: 20px}
body pre a:hover { color:#eee; background:#000; text-decoration: none; }
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 }
body pre p { display:block; padding:0px 5px}
body pre p b { font-weight: normal; color:#ccc; }
body pre list { display:flex; flex-wrap: wrap; max-width: 800px}
body pre list ln { width: 16em; display:block; padding-left:5px; overflow: hidden; text-overflow: ellipsis; }
body pre list ln a:visited { color:#ccc;}
</style>
</body>
</html>

13
links/main.css Normal file
View File

@ -0,0 +1,13 @@
body { background:#f4f4f4; padding:0px; margin:0px; }
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 }
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 }
body div p { display:block; padding:0px 5px}
body div p a { color:black; text-decoration: none; }
body div p a:hover { text-decoration: underline; }
body div p b { font-weight: normal; color:#000; text-decoration: underline; }
body div p.readme { max-width:500px; }
body div list { display:block; max-width: 800px; columns:3; border-bottom: 2px solid white;padding-bottom: 15px;margin-bottom:15px; overflow: hidden;}
body div list ln { width: 16em; display:block; padding-left:5px; overflow: hidden; text-overflow: ellipsis; }
body div list ln a { line-height: 20px; display: inline-block; color:#000; padding:0px 5px;}
body div list ln a:visited { color:#777; text-decoration: none;}
body div list ln a:hover { background:black; color:#fff; text-decoration: none; }

17
portal.js → scripts/portal.js
View File

@ -1,6 +1,6 @@
function Portal(sites)
{
this.el = document.createElement("pre");
this.el = document.createElement("div");
this.sites = sites;
this.install = function()
@ -14,6 +14,16 @@ function Portal(sites)
this.el.innerHTML = window.location.hash && window.location.hash.length > 4 ? this.redirect() : this.directory();
}
this.readme = function()
{
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>`
}
this.buttons = function()
{
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>`
}
this.directory = function()
{
var html = ""
@ -22,7 +32,7 @@ function Portal(sites)
var site = this.sites[id]
html += `<ln>${id}) <a href='${site}'>${site.split("//")[1]}</a></ln>`
}
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>`
return `<list>${html}</list>\n${this.readme()}${this.buttons()}`
}
this.reload = function()
@ -69,6 +79,7 @@ function Portal(sites)
var location = this.locate();
var target = this.next(location);
this.navigate(target)
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>`
return `<p>Redirecting to <b>${target}</b></p><meta http-equiv="refresh" content="3; url=${target}">
<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>`
}
}