MAKE ABTMTR.LINK COOL AGAIN
This commit is contained in:
parent
c2240f8a92
commit
48d2a6658f
13 changed files with 387 additions and 60 deletions
|
@ -1,4 +1,4 @@
|
|||
h1, h2, h3, h4, h5, h6, p, br {
|
||||
h1, h2, h3, h4, h5, h6, p, li, br {
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
/* text-shadow: 1px 1px 0 var(--color-text-shadow); */
|
||||
|
@ -27,6 +27,11 @@ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
|
|||
|
||||
p {
|
||||
margin-inline-start: 1rem;
|
||||
margin-block: 1.5rem;
|
||||
}
|
||||
|
||||
p.nomargin {
|
||||
margin-block: unset;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
@ -39,7 +44,51 @@ ul li {
|
|||
margin-block: 1.5rem;
|
||||
}
|
||||
|
||||
div {
|
||||
margin-block: 1.5em;
|
||||
margin-inline-start: 1em;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-accent);
|
||||
text-decoration: underline solid currentColor 1px;
|
||||
}
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
font: inherit;
|
||||
background-color: var(--color-code);
|
||||
padding-inline: 0.5rem;
|
||||
color: var(--color-code-text);
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
button, input {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type=text], input[type=url] {
|
||||
padding-inline: 0.5rem;
|
||||
border-inline: 0.5em solid var(--color-accent);
|
||||
}
|
||||
|
||||
button, input[type=submit] {
|
||||
padding-inline: 0.5rem;
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:active, input[type=submit]:active {
|
||||
background-color: transparent;
|
||||
color: var(--color-accent);
|
||||
}
|
Binary file not shown.
Binary file not shown.
|
@ -1,15 +1,6 @@
|
|||
@font-face {
|
||||
font-family: "m3x6";
|
||||
src: url("./m3x6/m3x6.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "jbm";
|
||||
src: url("./jbm/jbm.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "dos";
|
||||
font-weight: regular;
|
||||
src: url("./dos/dos.woff");
|
||||
}
|
||||
|
||||
|
|
|
@ -4,8 +4,10 @@
|
|||
:root {
|
||||
--color-bg-scrim: #111;
|
||||
--color-bg: #222;
|
||||
--color-code: #000;
|
||||
--color-code-text: #888;
|
||||
--color-text: #ccc;
|
||||
--color-accent: #aca;
|
||||
--color-accent: #bac;
|
||||
|
||||
font-size: 12px;
|
||||
font-smooth: never;
|
||||
|
@ -21,6 +23,7 @@ html {
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0.1px 1rem;
|
||||
padding-block-end: 1.5rem;
|
||||
min-height: 100%;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
|
91
index.js
91
index.js
|
@ -1,11 +1,13 @@
|
|||
import express from "express";
|
||||
import { config } from "dotenv";
|
||||
import { config as dotenvConfig } from "dotenv";
|
||||
import path from "path";
|
||||
import SQLite from 'better-sqlite3';
|
||||
import { Kysely, SqliteDialect } from 'kysely';
|
||||
import { nanoid } from "nanoid";
|
||||
import { JSDOM } from "jsdom";
|
||||
|
||||
dotenvConfig();
|
||||
|
||||
const __dirname = import.meta.dirname;
|
||||
|
||||
const rawDB = new SQLite('abtmtr.db');
|
||||
|
@ -24,31 +26,19 @@ app.set('view engine', 'ejs');
|
|||
app.use('/assets', express.static('assets'));
|
||||
app.set('views', path.join(__dirname, "views", "pages"));
|
||||
|
||||
app.locals = {
|
||||
visibility: [
|
||||
"Backend",
|
||||
"Personal",
|
||||
"Friends-only",
|
||||
"Login-only",
|
||||
"Public"
|
||||
]
|
||||
}
|
||||
|
||||
config();
|
||||
|
||||
app.use(async (req, res, next) => {
|
||||
const buttonsJson = await fetch("https://cdn.abtmtr.link/site_content/buttons.json")
|
||||
.catch(() => res.status(500).send())
|
||||
.then((res) => res.json())
|
||||
.catch(() => res.status(500).send());
|
||||
const followingJson = await fetch("https://cdn.abtmtr.link/site_content/following.json")
|
||||
.catch(() => res.status(500).send())
|
||||
.then((res) => res.json())
|
||||
.catch(() => res.status(500).send());
|
||||
app.locals.buttons = buttonsJson;
|
||||
app.locals.following = followingJson;
|
||||
next();
|
||||
})
|
||||
// app.use(async (req, res, next) => {
|
||||
// const buttonsJson = await fetch("https://cdn.abtmtr.link/site_content/buttons.json")
|
||||
// .catch(() => res.status(500).send())
|
||||
// .then((res) => res.json())
|
||||
// .catch(() => res.status(500).send());
|
||||
// const followingJson = await fetch("https://cdn.abtmtr.link/site_content/following.json")
|
||||
// .catch(() => res.status(500).send())
|
||||
// .then((res) => res.json())
|
||||
// .catch(() => res.status(500).send());
|
||||
// app.locals.buttons = buttonsJson;
|
||||
// app.locals.following = followingJson;
|
||||
// next();
|
||||
// })
|
||||
|
||||
app.get('/', async (req, res) => {
|
||||
const statusesJson = await fetch("https://cdn.abtmtr.link/site_content/v13/statuses.json")
|
||||
|
@ -60,38 +50,50 @@ app.get('/', async (req, res) => {
|
|||
});
|
||||
})
|
||||
|
||||
app.get('/services', async (req, res) => {
|
||||
app.get('/servers', async (req, res) => {
|
||||
const servicesJson = await fetch("https://cdn.abtmtr.link/site_content/v13/services.json")
|
||||
.catch(() => res.status(500).send())
|
||||
.then((res) => res.json());
|
||||
|
||||
res.render('services/index', { services: servicesJson });
|
||||
});
|
||||
|
||||
app.get('/computers', async (req, res) => {
|
||||
const computersJson = await fetch("https://cdn.abtmtr.link/site_content/v13/computers.json")
|
||||
.catch(() => res.status(500).send())
|
||||
.then((res) => res.json());
|
||||
|
||||
res.render('computers/index', { computers: computersJson });
|
||||
res.render('servers', {
|
||||
services: servicesJson,
|
||||
computers: computersJson,
|
||||
visibility: [
|
||||
"for domain performance",
|
||||
"for personal use",
|
||||
"for use by friends of abtmtr.link's webmaster(s)",
|
||||
"for restricted public use",
|
||||
"for public use"
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
app.get('/links', async (req, res) => {
|
||||
app.get('/about', async (req, res) => {
|
||||
const linksJson = await fetch("https://cdn.abtmtr.link/site_content/v13/links.json")
|
||||
.catch(() => res.status(500).send())
|
||||
.then((res) => res.json());
|
||||
|
||||
res.render('links/index', {
|
||||
res.render('about', {
|
||||
links: linksJson
|
||||
});
|
||||
});
|
||||
|
||||
app.get('/matkap', (req, res) => {
|
||||
res.render('matkap/index');
|
||||
});
|
||||
app.get('/sites', async (req, res) => {
|
||||
const buttonsJson = await fetch("https://cdn.abtmtr.link/site_content/buttons.json")
|
||||
.catch(() => res.status(500).send())
|
||||
.then((res) => res.json())
|
||||
.catch(() => res.status(500).send());
|
||||
const followingJson = await fetch("https://cdn.abtmtr.link/site_content/following.json")
|
||||
.catch(() => res.status(500).send())
|
||||
.then((res) => res.json())
|
||||
.catch(() => res.status(500).send());
|
||||
|
||||
app.get('/about', (req, res) => {
|
||||
res.render('about/index');
|
||||
res.render('sites', {
|
||||
b: buttonsJson, f: followingJson
|
||||
});
|
||||
});
|
||||
|
||||
app.get('/blurbs', async (req, res) => {
|
||||
|
@ -101,7 +103,7 @@ app.get('/blurbs', async (req, res) => {
|
|||
.where('verified', '=', 1)
|
||||
.orderBy('time', "desc")
|
||||
.execute();
|
||||
res.render('blurbs/index', { data });
|
||||
res.render('blurbs', { data });
|
||||
});
|
||||
|
||||
// brbrleibbghbelsbbsbuuebbuubsubss
|
||||
|
@ -114,6 +116,11 @@ async function cleanupBlurbles() {
|
|||
.execute()
|
||||
}
|
||||
|
||||
app.get('/blurbs/testsend', async (req, res) => {
|
||||
|
||||
res.render('blurbsent', { id: "THISISATESTLOL" });
|
||||
});
|
||||
|
||||
app.get('/blurbs/send', async (req, res) => {
|
||||
const body = req.query;
|
||||
const errors = [];
|
||||
|
@ -153,7 +160,7 @@ app.get('/blurbs/send', async (req, res) => {
|
|||
|
||||
cleanupBlurbles();
|
||||
|
||||
res.render('blurbs/sent', { id: postId });
|
||||
res.render('blurbsent', { id: postId });
|
||||
});
|
||||
|
||||
app.get('/blurbs/check', async (req, res) => {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<footer>
|
||||
<h1>abtmtr.link v13-2</h1>
|
||||
<p>(c) MeowcaTheoRange 2023-24</p>
|
||||
<p>licensed under the <a href="https://git.abtmtr.link/MeowcaTheoRange/KarkatPublicLicense/">KKPL</a>.</p>
|
||||
<p>fork <a href="https://git.abtmtr.link/MeowcaTheoRange/abtmtr-v13/">MeowcaTheoRange/abtmtr-v13</a> with git</p>
|
||||
<p class="nomargin">(c) MeowcaTheoRange 2023-24</p>
|
||||
<p class="nomargin">licensed under the <a href="https://git.abtmtr.link/MeowcaTheoRange/KarkatPublicLicense/">KKPL</a>.</p>
|
||||
<p class="nomargin">fork <a href="https://git.abtmtr.link/MeowcaTheoRange/abtmtr-v13/">MeowcaTheoRange/abtmtr-v13</a> with git</p>
|
||||
</footer>
|
44
views/pages/about.ejs
Normal file
44
views/pages/about.ejs
Normal file
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<%- include("../components/page-head.ejs") %>
|
||||
<body>
|
||||
<main>
|
||||
<h1>about</h1>
|
||||
<p>hey, i'm MeowcaTheoRange.<br />i run abtmtr.link, for the most part.</p>
|
||||
<h2>MeowcaTheoRange's h-card</h2>
|
||||
<div class="h-card">
|
||||
<h3><span class="p-name">Theo Range</span>
|
||||
(<span class="p-nickname">MeowcaTheoRange</span>)</h3>
|
||||
<p class="nomargin">(<span class="p-honorific-prefix">Mx.</span>
|
||||
<span class="p-given-name">Theo</span>
|
||||
<span class="p-family-name">Range</span>)</p>
|
||||
<p class="nomargin">
|
||||
<span class="p-gender-identity">Non-binary</span>,
|
||||
<span class="p-pronouns">they/them</span>
|
||||
</p>
|
||||
<p><img class="u-photo" src="https://abtmtr.link/favicon.ico" height="72"></p>
|
||||
<p class="nomargin">
|
||||
<a class="u-url" href="https://abtmtr.link/">website</a>,
|
||||
<a class="u-email" href="mailto:me@abtmtr.link">email</a>
|
||||
</p>
|
||||
<p class="nomargin">
|
||||
born <time class="dt-bday">2007-08-07</time>
|
||||
</p>
|
||||
<p class="p-adr nomargin">
|
||||
<span class="p-region">Minnesota</span>,
|
||||
<span class="p-country-name">USA</span>
|
||||
</p>
|
||||
</div>
|
||||
<h2>MeowcaTheoRange's links</h2>
|
||||
<p>where else is MeowcaTheoRange?</p>
|
||||
<ul>
|
||||
<% links.forEach((link) => { %>
|
||||
<li><h3><a href="<%= link.link %>" target="_blank"><%= link.title %> / <%= new URL(link.link).hostname %></a></h3>
|
||||
<p class="nomargin"><%= link.subtitle %></p>
|
||||
</li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
</main>
|
||||
<%- include("../components/footer.ejs") %>
|
||||
</body>
|
||||
</html>
|
42
views/pages/blurbs.ejs
Normal file
42
views/pages/blurbs.ejs
Normal file
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<%- include("../components/page-head.ejs") %>
|
||||
<body>
|
||||
<main>
|
||||
<h1>blurbs</h1>
|
||||
<p>what are other sites saying about abtmtr.link?</p>
|
||||
<h2>submit a blurb</h2>
|
||||
<form action="/blurbs/send" method="get">
|
||||
<p>
|
||||
<label for="siteName">Website URL:</label>
|
||||
<input type="url" name="site" id="siteName">
|
||||
</p>
|
||||
<p>
|
||||
<label for="blurbText">Blurb:</label>
|
||||
<input type="text" name="text" id="blurbText" maxlength="140" minlength="1">
|
||||
</p>
|
||||
<p>
|
||||
<input type="submit" value="Submit Blurb">
|
||||
</p>
|
||||
<p style="opacity: 0.5;">by clicking this button and successfully submitting a blurb, you agree that your input may be displayed on this site and stored on abtmtr.link servers.</p>
|
||||
<p style="opacity: 0.5;">you'll also need to verify your blurb by leaving a X/HTML snippet on your site. further instructions will be given to do this after you submit your blurb. thanks!</p>
|
||||
</form>
|
||||
<h2>current blurbs</h2>
|
||||
<ul>
|
||||
<% data.forEach((blurb) => { %>
|
||||
<li class="blurb" id="<%= blurb.id %>"><a href="<%= blurb.site %>" target="_blank"><%= new URL(blurb.site).host %></a>: <%= blurb.blurb %> <a class="removePopup" href="/blurbs/check?id=<%= blurb.id %>">remove</a></li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
</main>
|
||||
<%- include("../components/footer.ejs") %>
|
||||
<style>
|
||||
.blurb .removePopup {
|
||||
visibility: hidden;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.blurb:hover .removePopup {
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
34
views/pages/blurbsent.ejs
Normal file
34
views/pages/blurbsent.ejs
Normal file
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<%- include("../components/page-head.ejs") %>
|
||||
<body>
|
||||
<main>
|
||||
<h1>blurb sent</h1>
|
||||
<p>congrations! you done it!</p>
|
||||
<h2>what now?</h2>
|
||||
<p>you have to add one of these code snippets to your site in order for the blurb to actually pop up.</p>
|
||||
<p>invisible: <code tabindex="0"><link rel="me" href="https://abtmtr.link/blurbs/#<%= id %>"></code></p>
|
||||
<p>visible: <code tabindex="0"><a rel="me" href="https://abtmtr.link/blurbs/#<%= id %>"></a></code></p>
|
||||
<p>88x31: <code tabindex="0"><a rel="me" href="https://abtmtr.link/blurbs/#<%= id %>" target="_blank"><img src="https://cdn.abtmtr.link/site_content/88x31/abtmtr_link.png"></a></code></p>
|
||||
<p>if you want to remove your blurb from abtmtr.link, remove the snippet from your site and then click "remove" on the blurb.</p>
|
||||
<p>do not leave this site until you have added the snippet! you can bookmark this page if you need to:</p>
|
||||
<p><code tabindex="0">https://abtmtr.link/blurbs/check/?id=<%= id %></code></p>
|
||||
<p>once you've done that, click this button below, and your blurb should appear if everything was done correctly. make sure your page has updated in your browser!</p>
|
||||
<form action="/blurbs/check/" method="get">
|
||||
<input type="hidden" value="<%= id %>" name="id">
|
||||
<p><input type="submit" value="Done and added"></p>
|
||||
</form>
|
||||
<p style="opacity: 0.5;">can't/don't want to add the snippet? <a href="/about" target="_blank">contact me</a>.</p>
|
||||
</main>
|
||||
<%- include("../components/footer.ejs") %>
|
||||
<style>
|
||||
.blurb .removePopup {
|
||||
visibility: hidden;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.blurb:hover .removePopup {
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
|
@ -9,15 +9,19 @@
|
|||
<ul>
|
||||
<li>
|
||||
<h3><a href="/blurbs/">blurbs</a></h3>
|
||||
<p>what are other sites saying about abtmtr.link?</p>
|
||||
<p class="nomargin">what are other sites saying about abtmtr.link?</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="/servers/">servers</a></h3>
|
||||
<p>about the services on abtmtr.link and the machines that serve them.</p>
|
||||
<p class="nomargin">about the services on abtmtr.link and the machines that serve them.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="/sites/">sites</a></h3>
|
||||
<p class="nomargin">a collection of other sites in the form of 88x31s.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="/about/">about</a></h3>
|
||||
<p>who runs abtmtr.link?</p>
|
||||
<p class="nomargin">who runs abtmtr.link?</p>
|
||||
</li>
|
||||
</ul>
|
||||
</main>
|
||||
|
|
32
views/pages/servers.ejs
Normal file
32
views/pages/servers.ejs
Normal file
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<%- include("../components/page-head.ejs") %>
|
||||
<body>
|
||||
<main>
|
||||
<h1>servers</h1>
|
||||
<p>about the services on abtmtr.link and the machines that serve them.</p>
|
||||
<h2>services</h2>
|
||||
<p>stuff that's hosted on abtmtr.link.</p>
|
||||
<ul>
|
||||
<% services.forEach((service) => { %>
|
||||
<li>
|
||||
<h3><a href="https://<%= service.domain %>/" target="_blank"><%= service.domain %> / <%= service.when.month %> <%= service.when.year %></a></h3>
|
||||
<p class="nomargin">Runs <%= service.software %> <%= visibility[service.visibility] %></p>
|
||||
</li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
<h2>machines</h2>
|
||||
<p>stuff that hosts on abtmtr.link.</p>
|
||||
<ul>
|
||||
<% computers.forEach((puter) => { %>
|
||||
<li>
|
||||
<h3><%= puter.name %> / <%= puter.whenGot.month %> <%= puter.whenGot.year %></h3>
|
||||
<p class="nomargin"><%= puter.model %> / <%= puter.description %></p>
|
||||
<p><%= puter.subtitle %></p>
|
||||
</li>
|
||||
<% }) %>
|
||||
</ul>
|
||||
</main>
|
||||
<%- include("../components/footer.ejs") %>
|
||||
</body>
|
||||
</html>
|
121
views/pages/sites.ejs
Normal file
121
views/pages/sites.ejs
Normal file
|
@ -0,0 +1,121 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<%- include("../components/page-head.ejs") %>
|
||||
<body>
|
||||
<main>
|
||||
<h1>sites</h1>
|
||||
<p>a large collection of 88x31s.</p>
|
||||
<h2>friends (<%= 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>following (<%= 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") %>
|
||||
<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;
|
||||
filter: grayscale(1);
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: all 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;
|
||||
filter: grayscale(0);
|
||||
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>
|
Loading…
Reference in a new issue