abtmtr-v13/views/pages/sites.ejs

120 lines
3.2 KiB
Text
Raw Normal View History

2024-08-30 05:04:14 +00:00
<!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>
2024-08-31 05:54:10 +00:00
<h2>friends of abtmtr.link (<%= b.length %>)</h2>
2024-08-30 05:04:14 +00:00
<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>
2024-08-31 05:54:10 +00:00
<h2>sites of interest (<%= f.length %>)</h2>
2024-08-30 05:04:14 +00:00
<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") %>
2024-08-31 07:08:51 +00:00
<%- include("../components/post-main.ejs") %>
2024-08-30 05:04:14 +00:00
<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;
2024-08-30 05:18:28 +00:00
transition: box-shadow 0.5s ease-out, left 0.5s ease-out, top 0.5s ease-out;
2024-08-30 05:04:14 +00:00
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>