120 lines
No EOL
3.2 KiB
Text
120 lines
No EOL
3.2 KiB
Text
<!DOCTYPE html>
|
|
<html>
|
|
<%- include("../components/page-head.ejs") %>
|
|
<body>
|
|
<main>
|
|
<h1>sites</h1>
|
|
<p>a collection of other sites in the form of 88x31s.</p>
|
|
<h2>friends of abtmtr.link (<%= b.length %>)</h2>
|
|
<div>
|
|
<% b.forEach((button) => { %>
|
|
<% if (button.img != null) { %>
|
|
<a class="web-button" target="_blank" href="<%= button.href %>"><img src="<%= button.img %>" title="<%= button.alt %>" alt="<%= button.alt %>" /></a>
|
|
<% } else { %>
|
|
<a class="web-button noimg" target="_blank" href="<%= button.href %>" title="<%= button.alt %>" style="background-color: <%= button.accent[0] %>;color: <%= button.accent[1] %>"><span><%= button.name %></span></a>
|
|
<% } %>
|
|
<% }) %>
|
|
</div>
|
|
<h2>sites of interest (<%= f.length %>)</h2>
|
|
<div>
|
|
<% f.forEach((button) => { %>
|
|
<% if (button.img != null) { %>
|
|
<a class="web-button" target="_blank" href="<%= button.href %>"><img src="<%= button.img %>" title="<%= button.alt %>" alt="<%= button.alt %>" /></a>
|
|
<% } else { %>
|
|
<a class="web-button noimg" target="_blank" href="<%= button.href %>" title="<%= button.alt %>" style="background-color: <%= button.accent[0] %>;color: <%= button.accent[1] %>"><span><%= button.name %></span></a>
|
|
<% } %>
|
|
<% }) %>
|
|
</div>
|
|
</main>
|
|
<%- include("../components/footer.ejs") %>
|
|
<%- include("../components/post-main.ejs") %>
|
|
<style>
|
|
@property --hue {
|
|
syntax: '<number>';
|
|
initial-value: 0;
|
|
inherits: false;
|
|
}
|
|
|
|
@keyframes hue-shift {
|
|
0% {
|
|
--hue: 0;
|
|
}
|
|
|
|
50% {
|
|
--hue: 180;
|
|
}
|
|
|
|
100% {
|
|
--hue: 360;
|
|
}
|
|
}
|
|
|
|
.web-button img {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.web-button {
|
|
position: relative;
|
|
left: 0;
|
|
top: 0;
|
|
transition: box-shadow 0.5s ease-out, left 0.5s ease-out, top 0.5s ease-out;
|
|
opacity: 1 !important;
|
|
display: inline-block;
|
|
width: 88px;
|
|
height: 31px;
|
|
line-height: 31px;
|
|
border: 1px solid black;
|
|
vertical-align: middle;
|
|
margin: 0.5rem;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
/* text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
padding: 0 8px;
|
|
box-sizing: border-box; */
|
|
}
|
|
|
|
.web-button.noimg {
|
|
text-shadow: 1px 1px 0 #000;
|
|
box-shadow:
|
|
inset -1px -1px 0 0 #000,
|
|
inset 1px 1px 0 0 #fff,
|
|
inset -2px -2px 0 0 #0008;
|
|
/* background-image: linear-gradient(135deg, transparent, #8888); */
|
|
}
|
|
|
|
.web-button:hover {
|
|
left: -4px;
|
|
top: -4px;
|
|
z-index: 999;
|
|
animation: hue-shift 1s linear infinite;
|
|
transition: all 0.0625s ease-out;
|
|
--shadow: hsl(var(--hue), 50%, 75%);
|
|
box-shadow:
|
|
4px 4px 0 -1px var(--shadow),
|
|
3px 3px 0 -1px var(--shadow),
|
|
2px 2px 0 -1px var(--shadow),
|
|
1px 1px 0 -1px var(--shadow),
|
|
4px 4px 0 0px black,
|
|
3px 3px 0 0px black,
|
|
2px 2px 0 0px black,
|
|
1px 1px 0 0px black;
|
|
}
|
|
|
|
.web-button.noimg:hover {
|
|
box-shadow:
|
|
inset -1px -1px 0 0 #000,
|
|
inset 1px 1px 0 0 #fff,
|
|
inset -2px -2px 0 0 #0008,
|
|
4px 4px 0 -1px var(--shadow),
|
|
3px 3px 0 -1px var(--shadow),
|
|
2px 2px 0 -1px var(--shadow),
|
|
1px 1px 0 -1px var(--shadow),
|
|
4px 4px 0 0px black,
|
|
3px 3px 0 0px black,
|
|
2px 2px 0 0px black,
|
|
1px 1px 0 0px black;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html> |