Browse Source

Update

main
186526 2 months ago
parent
commit
9bc4b7c43e
Signed by: 186526
GPG Key ID: C7EB1E6B8CC5E51D
  1. 405
      index.html
  2. 16
      postcss.config.js
  3. 42
      public/manifest.json
  4. 101
      public/sw.js
  5. 83
      src/main.ts
  6. 264
      src/styles/base.css
  7. 62
      src/styles/contents.css
  8. 13
      src/styles/header.css
  9. 108
      vercel.json
  10. 33
      vite.config.js

405
index.html

@ -1,181 +1,258 @@
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<meta name="backend-renderer" content="LitePage">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://i.186526.xyz">
<link rel="preconnect" href="https://storage.186526.xyz">
<link rel="icon" href="https://i.186526.xyz/avatar">
<link
href="https://fonts.googleapis.com/css2?family=Google+Sans:[email protected]&amp;family=Fira+Mono&amp;family=Ubuntu&amp;family=Roboto&amp;display=swap"
rel="stylesheet">
<title>It's me, 186526!</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&amp;display=swap" rel="stylesheet">
<script type="module" src="./src/main.ts"></script>
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-PVVC00CJ26"></script>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1"
/>
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta name="backend-renderer" content="LitePage" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://i.186526.xyz" />
<link rel="preconnect" href="https://storage.186526.xyz" />
<link rel="icon" href="https://i.186526.xyz/avatar" />
<link
href="https://fonts.googleapis.com/css2?family=Google+Sans:[email protected]&amp;family=Fira+Mono&amp;family=Ubuntu&amp;family=Roboto&amp;display=swap"
rel="stylesheet"
/>
<title>It's me, 186526!</title>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&amp;display=swap"
rel="stylesheet"
/>
<script type="module" src="./src/main.ts"></script>
<script
async=""
src="https://www.googletagmanager.com/gtag/js?id=G-PVVC00CJ26"
></script>
<meta name="description" content="It's me, 186526! | 186526 的自留地">
<meta property="og:type" content="website">
<meta property="og:title" content="It's me, 186526! | 186526.xyz">
<meta name="og:description" content="It's me, 186526! | 186526 的自留地">
<meta name="description" content="It's me, 186526! | 186526 的自留地" />
<meta property="og:type" content="website" />
<meta property="og:title" content="It's me, 186526! | 186526.xyz" />
<meta
name="og:description"
content="It's me, 186526! | 186526 的自留地"
/>
<link rel="manifest" href="./manifest.json">
<link rel="manifest" href="./manifest.json" />
<script>
(function () {
function getBroswer() {
var sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/edge\/([\d.]+)/)) ? sys.edge = s[1] :
(s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1] :
(s = ua.match(/msie ([\d.]+)/)) ? sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? sys.safari = s[1] : 0;
<script>
(function () {
function getBroswer() {
var sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/edge\/([\d.]+)/))
? (sys.edge = s[1])
: (s = ua.match(/rv:([\d.]+)\) like gecko/))
? (sys.ie = s[1])
: (s = ua.match(/msie ([\d.]+)/))
? (sys.ie = s[1])
: (s = ua.match(/firefox\/([\d.]+)/))
? (sys.firefox = s[1])
: (s = ua.match(/chrome\/([\d.]+)/))
? (sys.chrome = s[1])
: (s = ua.match(/opera.([\d.]+)/))
? (sys.opera = s[1])
: (s = ua.match(/version\/([\d.]+).*safari/))
? (sys.safari = s[1])
: 0;
if (sys.edge) return { broswer: "Edge", version: sys.edge };
if (sys.ie) return { broswer: "IE", version: sys.ie };
if (sys.firefox) return { broswer: "Firefox", version: sys.firefox };
if (sys.chrome) return { broswer: "Chrome", version: sys.chrome };
if (sys.opera) return { broswer: "Opera", version: sys.opera };
if (sys.safari) return { broswer: "Safari", version: sys.safari };
if (sys.edge) return { broswer: "Edge", version: sys.edge };
if (sys.ie) return { broswer: "IE", version: sys.ie };
if (sys.firefox)
return { broswer: "Firefox", version: sys.firefox };
if (sys.chrome) return { broswer: "Chrome", version: sys.chrome };
if (sys.opera) return { broswer: "Opera", version: sys.opera };
if (sys.safari) return { broswer: "Safari", version: sys.safari };
return { broswer: "", version: "0" };
}
return { broswer: "", version: "0" };
}
var broswerUA = getBroswer();
if (broswerUA.broswer == "IE") {
document.body.innerHTML = '<div class="toast">去他妈的Internet Explorer,请使用现代浏览器访问该站点,例如<a href="http://aka.186526.xyz/Chrome">Chrome</a><a href="http://aka.186526.xyz/Firefox">Firefox</a></div>' + document.body.innerHTML;
} else if (broswerUA.broswer == "chrome" && broswerUA.version <= 60) {
document.body.innerHTML = '<div class="toast">摆脱旧版Chrome,请使用新版<a href="http://aka.186526.xyz/Chrome">Chrome</a>访问该站点。</div>' + document.body.innerHTML;
}
})()
</script>
</head>
var broswerUA = getBroswer();
<body>
<app>
if (broswerUA.broswer == "IE") {
document.body.innerHTML =
'<div class="toast">去他妈的Internet Explorer,请使用现代浏览器访问该站点,例如<a href="http://aka.186526.xyz/Chrome">Chrome</a><a href="http://aka.186526.xyz/Firefox">Firefox</a></div>' +
document.body.innerHTML;
} else if (broswerUA.broswer == "chrome" && broswerUA.version <= 60) {
document.body.innerHTML =
'<div class="toast">摆脱旧版Chrome,请使用新版<a href="http://aka.186526.xyz/Chrome">Chrome</a>访问该站点。</div>' +
document.body.innerHTML;
}
})();
</script>
</head>
<background>
<p>PID @ 78361641</p>
</background>
<body>
<app>
<background>
<p>PID @ 78361641</p>
</background>
<header>
<img src="./avatar.png" alt="avatar" width="100px" />
<div>
<h1><a href="https://186526.xyz" title="186526.xyz - It's me, 186526!">It's me, 186526!</a></h1>
<description>一个啥都不会的屑</description>
</div>
</header>
<header>
<img src="./avatar.png" alt="avatar" width="100px" />
<div>
<h1>
<a href="https://186526.xyz" title="186526.xyz - It's me, 186526!"
>It's me, 186526!</a
>
</h1>
<p><description>一个啥都不会的屑</description></p>
</div>
</header>
<contents>
<group id="channel">
<card id="blog">
<a href="https://blog.186526.xyz" alt="186526's Blog"><img
src='https://storage.186526.xyz/home-app/assets/hexo.svg' /></a>
</card>
<card id="status">
<a href="https://status.186526.eu.org/" alt="186526's Status"><img
src="https://storage.186526.xyz/home-app/assets/uptimerobot.ico" /></a>
</card>
<card id="dn42">
<a href="https://net.186526.xyz" alt="186526 Network @ DN42"><img
src="https://storage.186526.xyz/home-app/assets/dn42.png" /></a>
</card>
<card id="github">
<a href="https://github.com/186526" alt="Github"><img
src="https://storage.186526.xyz/home-app/assets/github.svg" /></a>
</card>
<card id="telegram">
<a href="https://t.me/real186526" alt="Telegram"><img
src="https://storage.186526.xyz/home-app/assets/telegram.svg" /></a>
</card>
<card id="email">
<a href="mailto:[email protected]" alt="Email">
<icon>mail</icon>
</a>
</card>
</group>
<group id="friend">
<card>
<a href="https://zikin.org/" alt="Zikin的独立博客 - 青春大概如你所说"><img
src="https://cdn.jsdelivr.net/gh/ZikinCDN/[email protected]/2021/logo.jpg" /></a>
</card>
<card>
<a href="https://blog.skrshadow.cn/" alt="Skrshadow - 是红雨, 斯哈斯哈"><img
src="https://sdn.geekzu.org/avatar/e2027c37ef15b736cf3ee8b7803216c4" /></a>
</card>
<card>
<a href="https://radium-bit.github.io/" alt="Radium-bit"><img
src="https://cdn.jsdelivr.net/gh/radium-bit/[email protected]/avatar.webp" /></a>
</card>
<card>
<a href="https://jimmyqin.com/" alt="JimmyQin's Blog"><img src="https://jimmyqin.com/images/avatar.png" /></a>
</card>
<card>
<a href="https://laple.me" alt="Lapis Apple - 一个回收站,里面住着Lapis Apple。"><img
src="https://storage.186526.xyz/home-app/assets/lsp.avatar.png" /></a>
</card>
<card>
<a href="https://blog.maxelbk.eu.org" alt="Maxel Black - Code & write what we want."><img
src="https://blog.maxelbk.eu.org/r/maxel.jpg" /></a>
</card>
</group>
<group id="footer">
<div>
<a href="https://i.186526.xyz/pgp_keys.asc">
<img alt="Keybase PGP" src="https://blog.186526.xyz/shields.io/keybase/pgp/186526">
</a>
<a href="https://icp.gov.moe/?keyword=20218600"><img alt="Moe ICP 20218600"
src="https://blog.186526.xyz/shields.io/badge/%E8%90%8CICP%E5%A4%87-20218600-blue" /></a>
<contents>
<group id="channel">
<card id="blog">
<a href="https://blog.186526.xyz" alt="186526's Blog"
><img src="https://storage.186526.xyz/home-app/assets/hexo.svg"
/></a>
</card>
<card id="status">
<a href="https://status.186526.eu.org/" alt="186526's Status"
><img
src="https://storage.186526.xyz/home-app/assets/uptimerobot.ico"
/></a>
</card>
<card id="dn42">
<a href="https://net.186526.xyz" alt="186526 Network @ DN42"
><img src="https://storage.186526.xyz/home-app/assets/dn42.png"
/></a>
</card>
<card id="github">
<a href="https://github.com/186526" alt="Github"
><img
src="https://storage.186526.xyz/home-app/assets/github.svg"
/></a>
</card>
<card id="telegram">
<a href="https://t.me/real186526" alt="Telegram"
><img
src="https://storage.186526.xyz/home-app/assets/telegram.svg"
/></a>
</card>
<card id="email">
<a href="mailto:[email protected]" alt="Email">
<icon>mail</icon>
</a>
</card>
</group>
<group id="friend">
<card>
<a
href="https://zikin.org/"
alt="Zikin的独立博客 - 青春大概如你所说"
><img
src="https://cdn.jsdelivr.net/gh/ZikinCDN/[email protected]/2021/logo.jpg"
/></a>
</card>
<card>
<a
href="https://blog.skrshadow.cn/"
alt="Skrshadow - 是红雨, 斯哈斯哈"
><img
src="https://sdn.geekzu.org/avatar/e2027c37ef15b736cf3ee8b7803216c4"
/></a>
</card>
<card>
<a href="https://radium-bit.github.io/" alt="Radium-bit"
><img
src="https://cdn.jsdelivr.net/gh/radium-bit/[email protected]/avatar.webp"
/></a>
</card>
<card>
<a href="https://jimmyqin.com/" alt="JimmyQin's Blog"
><img src="https://jimmyqin.com/images/avatar.png"
/></a>
</card>
<card>
<a
href="https://laple.me"
alt="Lapis Apple - 一个回收站,里面住着Lapis Apple。"
><img
src="https://storage.186526.xyz/home-app/assets/lsp.avatar.png"
/></a>
</card>
<card>
<a
href="https://blog.maxelbk.eu.org"
alt="Maxel Black - Code & write what we want."
><img src="https://blog.maxelbk.eu.org/r/maxel.jpg"
/></a>
</card>
</group>
<group id="footer">
<div>
<a href="https://i.186526.xyz/pgp_keys.asc">
<img
alt="Keybase PGP"
src="https://blog.186526.xyz/shields.io/keybase/pgp/186526"
/>
</a>
<a href="https://icp.gov.moe/?keyword=20218600"
><img
alt="Moe ICP 20218600"
src="https://blog.186526.xyz/shields.io/badge/%E8%90%8CICP%E5%A4%87-20218600-blue"
/></a>
<a href="https://status.186526.eu.org/"><img
src="https://blog.186526.xyz/shields.io/uptimerobot/ratio/m786767672-6913a353d708838f195d30d8" /></a>
<a href="https://status.186526.eu.org/"
><img
src="https://blog.186526.xyz/shields.io/uptimerobot/ratio/m786767672-6913a353d708838f195d30d8"
/></a>
<a alt="CI Status" href="https://ci.186526.xyz/186526/home-app">
<img src="https://ci.186526.xyz/api/badges/186526/home-app/status.svg" />
</a>
</div>
<a alt="CI Status" href="https://ci.186526.xyz/186526/home-app">
<img
src="https://ci.186526.xyz/api/badges/186526/home-app/status.svg"
/>
</a>
</div>
<p>Running on <a href="https://net.186526.xyz">186526 Network</a>.</p>
<p>Copyright © 2021
186526.xyz All rights Reserved.</p>
</group>
</contents>
<p>
Running on <a href="https://net.186526.xyz">186526 Network</a>.
</p>
<p>Copyright © 2020 - Now 186526.xyz All rights Reserved.</p>
</group>
</contents>
</app>
</body>
</app>
</body>
<none id="description-list">
<p>一个啥都不会的屑</p>
<p>LSP, Verified by <img src="https://storage.186526.xyz/home-app/assets/lama.avatar.png" alt="lama3l9r's avatar" />
and <img src="https://storage.186526.xyz/home-app/assets/lsp.avatar.png" alt="lsp's avatar" /></p>
<p>Less code, more bug.</p>
<p>Arknights Player</p>
<p>btw, I use arch</p>
<p><code>console.log('Arch is the best!');</code></p>
<p>24岁, 是学生</p>
<p>一天25小时绝赞配网中...</p>
<p>DN42 贴(pi)贴(er)请求中...</p>
<p>大陆北方网友</p>
<p>Linux user ✗ KVM user ✓</p>
<p>世界一级<br>拖延症证书持有者</p>
<p>想拥有强大的自制力</p>
<p>wowaka, 晚安.</p>
</none>
</head>
</html>
<none id="description-list">
<p>一个啥都不会的屑</p>
<p>
LSP, Verified by
<img
src="https://storage.186526.xyz/home-app/assets/lama.avatar.png"
alt="lama3l9r's avatar"
/>
and
<img
src="https://storage.186526.xyz/home-app/assets/lsp.avatar.png"
alt="lsp's avatar"
/>
</p>
<p>Less code, more bug.</p>
<p>Arknights Player</p>
<p>btw, I use arch</p>
<p><code>console.log('Arch is the best!');</code></p>
<p>24岁, 是学生</p>
<p>一天25小时绝赞配网中...</p>
<p>DN42 贴(pi)贴(er)请求中...</p>
<p>大陆北方网友</p>
<p>Linux user ✗ KVM user ✓</p>
<p>世界一级拖延症证书持有者</p>
<p>想拥有强大的自制力</p>
<p>想做好自己</p>
<p>wowaka, 晚安.</p>
</none>
</head>
</html>

16
postcss.config.js

@ -1,9 +1,9 @@
module.exports = {
plugins: [
require("postcss-css-variables")(),
require('autoprefixer')(),
require('cssnano')({
preset: 'default',
}),
]
}
plugins: [
require("postcss-css-variables")(),
require("autoprefixer")(),
require("cssnano")({
preset: "default",
}),
],
};

42
public/manifest.json

@ -1,22 +1,22 @@
{
"name": "It's me, 186526!",
"short_name": "186526.xyz",
"lang": "zh-CN",
"start_url": "/",
"display": "standalone",
"theme_color": "#2A2734",
"background_color": "#FBDBC4",
"icons": [
{
"src": "./maskable.png",
"sizes": "1269x1269",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "./avatar.webp",
"sizes": "512x512",
"type": "image/webp"
}
]
}
"name": "It's me, 186526!",
"short_name": "186526.xyz",
"lang": "zh-CN",
"start_url": "/",
"display": "standalone",
"theme_color": "#2A2734",
"background_color": "#FBDBC4",
"icons": [
{
"src": "./maskable.png",
"sizes": "1269x1269",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "./avatar.webp",
"sizes": "512x512",
"type": "image/webp"
}
]
}

101
public/sw.js

@ -1,60 +1,57 @@
importScripts(
'workbox/workbox-sw.js',
);
self.addEventListener('install', (e) => {
self.skipWaiting();
importScripts("workbox/workbox-sw.js");
self.addEventListener("install", (e) => {
self.skipWaiting();
});
if (workbox) {
workbox.core.setCacheNameDetails({
prefix: 'home-app',
suffix: '0.0.3',
precache: 'precache',
runtime: 'runtime',
});
workbox.routing.registerRoute(
/\/assets/,
new workbox.strategies.CacheFirst({
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 24 * 60 * 60,
}),
],
cacheName: 'assets',
workbox.core.setCacheNameDetails({
prefix: "home-app",
suffix: "0.0.3",
precache: "precache",
runtime: "runtime",
});
workbox.routing.registerRoute(
/\/assets/,
new workbox.strategies.CacheFirst({
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 24 * 60 * 60,
}),
);
workbox.routing.registerRoute(
'/manifest.json',
new workbox.strategies.StaleWhileRevalidate({
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 7 * 24 * 60 * 60,
}),
],
cacheName: 'assets',
],
cacheName: "assets",
})
);
workbox.routing.registerRoute(
"/manifest.json",
new workbox.strategies.StaleWhileRevalidate({
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 7 * 24 * 60 * 60,
}),
);
workbox.routing.registerRoute(
'/',
new workbox.strategies.StaleWhileRevalidate({
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24,
}),
],
cacheName: 'assets',
],
cacheName: "assets",
})
);
workbox.routing.registerRoute(
"/",
new workbox.strategies.StaleWhileRevalidate({
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24,
}),
);
workbox.routing.registerRoute(
/\**/,
new workbox.strategies.StaleWhileRevalidate({
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24,
}),
],
cacheName: 'assets',
],
cacheName: "assets",
})
);
workbox.routing.registerRoute(
/\**/,
new workbox.strategies.StaleWhileRevalidate({
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24,
}),
);
],
cacheName: "assets",
})
);
}

83
src/main.ts

@ -6,48 +6,49 @@ import "./styles.css";
import Typed from "typed.js";
window.addEventListener("load", (_ev) => {
new Typed(document.querySelector("description") ?? "description", {
stringsElement: "#description-list",
shuffle: true,
typeSpeed: 60,
backDelay: 2000,
fadeOut: false,
loop: true,
showCursor: false,
});
new Typed(document.querySelector("description") ?? "description", {
stringsElement: "#description-list",
shuffle: true,
typeSpeed: 60,
backDelay: 2000,
fadeOut: true,
loop: true,
showCursor: true,
smartBackspace: true,
});
document.querySelectorAll("[alt]").forEach((Elem) => {
const tooltip = document.createElement("tooltiptext");
tooltip.innerText = Elem.getAttribute("alt") ?? "";
Elem.appendChild(tooltip);
});
document.querySelectorAll("[alt]").forEach((Elem) => {
const tooltip = document.createElement("tooltiptext");
tooltip.innerText = Elem.getAttribute("alt") ?? "";
Elem.appendChild(tooltip);
});
// @ts-expect-error
document.querySelector(
"#footer > div"
).innerHTML += `<a href="https://git.186526.xyz/186526/home-app"><img alt="Update Commit" src="https://blog.186526.xyz/shields.io/badge/commit-${__APP_VERSION__}-blue" /></a> <img alt="Latest Update" src="https://blog.186526.xyz/shields.io/date/${__APP_BUILD_TIME__}?color=sucessful&label=latest%20update" />`;
// @ts-expect-error
document.querySelector(
"#footer > div"
).innerHTML += `<a href="https://git.186526.xyz/186526/home-app"><img alt="Update Commit" src="https://blog.186526.xyz/shields.io/badge/commit-${__APP_VERSION__}-blue" /></a> <img alt="Latest Update" src="https://blog.186526.xyz/shields.io/date/${__APP_BUILD_TIME__}?color=sucessful&label=latest%20update" />`;
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("./sw.js", {
scope: "/",
})
.then(function (registration) {
console.log(
"ServiceWorker registration successful with scope: ",
registration.scope
);
})
.catch(function (err) {
console.warn("ServiceWorker registration failed: ", err);
});
let refreshing = false;
navigator.serviceWorker.addEventListener("controllerchange", () => {
if (refreshing) {
return;
}
refreshing = true;
window.location.reload();
});
}
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("./sw.js", {
scope: "/",
})
.then(function (registration) {
console.log(
"ServiceWorker registration successful with scope: ",
registration.scope
);
})
.catch(function (err) {
console.warn("ServiceWorker registration failed: ", err);
});
let refreshing = false;
navigator.serviceWorker.addEventListener("controllerchange", () => {
if (refreshing) {
return;
}
refreshing = true;
window.location.reload();
});
}
});

264
src/styles/base.css

@ -1,183 +1,183 @@
:root {
--background-color: #fff;
--font-color: #000;
--font-color-lighter: rgb(87, 89, 88);
--font-size-main: 3.045rem;
--font-size-description: 1.245rem;
--lineheight-description: 1.845rem;
--box-color: #f2f2f2;
--working-color: #137333;
--working-color-background: #e6f4ea;
--error-color-background: #fce8e6;
--error-color: #c5221f;
--working-with-error-color: #b05a00;
--working-with-error-color-background: #fef7e0;
--linear-start-color: #f37335;
--linear-end-color: #ff4200fc;
--icon-size: 48px;
--mask-color: rgba(255, 255, 255, 0.5);
--background-color: #fff;
--font-color: #000;
--font-color-lighter: rgb(87, 89, 88);
--font-size-main: 3.045rem;
--font-size-description: 1.245rem;
--lineheight-description: 1.845rem;
--box-color: rgba(242, 242, 242, 0.5);
--working-color: #137333;
--working-color-background: #e6f4ea;
--error-color-background: #fce8e6;
--error-color: #c5221f;
--working-with-error-color: #b05a00;
--working-with-error-color-background: #fef7e0;
--linear-start-color: #f37335;
--linear-end-color: #ff4200fc;
--icon-size: 48px;
--mask-color: rgba(255, 255, 255, 0.5);
}
h2,
h1 {
font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
background-image: linear-gradient(
90deg,
var(--linear-start-color),
var(--linear-end-color)
) !important;
color: transparent !important;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
background-image: linear-gradient(
90deg,
var(--linear-start-color),
var(--linear-end-color)
) !important;
color: transparent !important;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
div,
p {
font-family: Roboto, Noto Sans SC, sans-serif;
line-height: 140%;
font-family: Roboto, Noto Sans SC, sans-serif;
line-height: 140%;
}
body {
margin: 6rem 5vw;
font-family: Roboto, Noto Sans SC, sans-serif;
color: var(--font-color);
background-color: var(--background-color);
margin: 20vh calc(10vw - 0.5rem);
font-family: Roboto, Noto Sans SC, sans-serif;
color: var(--font-color);
background-color: var(--background-color);
}
background > p {
visibility: hidden;
position: absolute;
top: 69vh;
right: 0;
color: var(--font-color-lighter);
font-size: calc(var(--font-size-description) - 0.4rem);
visibility: hidden;
position: absolute;
top: 69vh;
right: 0;
color: var(--font-color-lighter);
font-size: calc(var(--font-size-description) - 0.4rem);
}
background:hover > p {
visibility: visible;
visibility: visible;
}
a {
text-decoration: none;
color: #1967d2;
text-decoration: none;
color: #1967d2;
}
@media screen and (max-width: 480px) {
body {
margin: 6rem 2vw;
}
body {
margin: 20vh calc(4vw - 0.5rem);
}
.toast {
margin: 0 2vw !important;
}
.toast {
margin: 0 2vw !important;
}
:root {
--font-size-main: 2.25rem;
--font-size-description: 1.045rem;
}
:root {
--font-size-main: 2.25rem;
--font-size-description: 1.045rem;
}
}
code {
font-family: Fira Mono, monospace;
font-family: Fira Mono, monospace;
}
none {
display: none;
display: none;
}
icon {
vertical-align: middle;
font-size: 48px;
font-family: "Material Icons Outlined";
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
vertical-align: middle;
font-size: 48px;
font-family: "Material Icons Outlined";
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
background {
top: 0px;
right: 0px;
float: right;
position: absolute;
min-width: 100%;
min-height: 75vh;
background-size: cover;
background-image: url(https://storage.186526.xyz/home-app/assets/background.webp),
url(https://storage.186526.xyz/home-app/assets/background.png);
z-index: -1;
border-radius: 0 0 15px 15px;
filter: blur(0.2px);
top: 0px;
right: 0px;
float: right;
position: absolute;
min-width: 100%;
min-height: 75vh;
background-size: cover;
background-image: url(https://storage.186526.xyz/home-app/assets/background.webp),
url(https://storage.186526.xyz/home-app/assets/background.png);
z-index: -1;
border-radius: 0 0 15px 15px;
filter: blur(0.2px);
}
@media (prefers-color-scheme: dark) {
:root {
--font-color: #e8eaed;
--font-color-lighter: #9aa0a6;
--background-color: #121212;
--box-color: rgb(40 40 40 / 73%);
--working-color-background: rgba(129, 201, 149, 0.24);
--error-color-background: rgba(242, 139, 130, 0.24);
--working-with-error-color-background: rgba(253, 214, 99, 0.24);
--working-color: #81c995;
--error-color: #f28b82;
--working-with-error-color: #fdd663;
--linear-start-color: #0c8cca;
--linear-end-color: #00bdff;
--mask-color: rgba(0, 0, 0, 0.5);
}
background {
filter: brightness(50%);
}
:root {
--font-color: #e8eaed;
--font-color-lighter: #9aa0a6;
--background-color: #121212;
--box-color: rgb(40 40 40 / 73%);
--working-color-background: rgba(129, 201, 149, 0.24);
--error-color-background: rgba(242, 139, 130, 0.24);
--working-with-error-color-background: rgba(253, 214, 99, 0.24);
--working-color: #81c995;
--error-color: #f28b82;
--working-with-error-color: #fdd663;
--linear-start-color: #0c8cca;
--linear-end-color: #00bdff;
--mask-color: rgba(0, 0, 0, 0.5);
}
background {
filter: brightness(50%);
}
}
tooltiptext {
display: none;
visibility: hidden;
font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
opacity: 0;
transition: opacity 0.6s;
position: absolute;
z-index: 1;
display: none;
visibility: hidden;
font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
opacity: 0;
transition: opacity 0.6s;
position: absolute;
z-index: 1;
}
:hover > tooltiptext {
display: block;
visibility: visible;
opacity: 1;
display: block;
visibility: visible;
opacity: 1;
}
.toast {
background: var(--mask-color);
border-radius: 8px;
display: block;
padding: 0.4rem;
width: 100%;
left: 0px;
position: absolute;
top: 8px;
right: 0px;
width: -webkit-fill-available;
width: fill-available;
margin: 0 5vw;
backdrop-filter: blur(15px);
background: var(--mask-color);
border-radius: 8px;
display: block;
padding: 0.4rem;
width: 100%;
left: 0px;
position: absolute;
top: 8px;
right: 0px;
width: -webkit-fill-available;
width: fill-available;
margin: 0 5vw;
backdrop-filter: blur(15px);
}

62
src/styles/contents.css

@ -1,31 +1,28 @@
contents {
display: flex;
position: absolute;
top: 75vh;
position: relative;
top: 32.5vh;
right: 0vh;
left: 0vh;
margin: 0vh calc(5vw - 0.5rem);
justify-content: center;
align-items: flex-start;
flex-direction: column;
flex-wrap: nowrap;
right: 0vh;
left: 0vh;
justify-content: center;
align-items: flex-start;
flex-direction: column;
flex-wrap: nowrap;
}
contents > group {
display: flex;
margin: 2.5vh 0;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
}
card {
display: flex;
display: flex;
background-color: var(--box-color);
padding: 2rem;
min-height: 3rem;
@ -33,27 +30,29 @@ card {
flex-grow: 1;
margin-top: 1rem;
margin-right: 0.5rem;
margin-left: 0.5rem;
align-content: center;
justify-content: center;
align-items: center;
margin-left: 0.5rem;
align-content: center;
justify-content: center;
align-items: center;
backdrop-filter: blur(15px);
}
card > a > img {
max-height: 48px;
max-width: 48px;
max-width: 48px;
vertical-align: middle;
}
group#friend > card > a > img {
max-height: 48px;
max-width: 48px;
max-width: 48px;
border-radius: 100px;
}
group#footer {
display: block;
margin: 2rem 0.5rem;
display: block;
margin: 2rem 0.5rem;
align-self: flex-start;
color: var(--font-color-lighter);
font-size: calc(var(--font-size-description) - 0.4rem);
@ -64,14 +63,19 @@ group#footer > * {
}
@media (prefers-color-scheme: dark) {
card#github > a > img {
filter: invert(100%);
}
card#github > a > img {
filter: invert(100%);
}
}
@media screen and (max-width: 1024px) {
contents {
top: 27.5vh;
}
}
@media screen and (max-width: 480px) {
contents {
margin: 0 calc(2vw - 0.5rem);
top: 20vh;
}
}
}

13
src/styles/header.css

@ -7,6 +7,11 @@ header > div {
align-content: stretch;
}
header p {
margin-block-start: 0em;
margin-block-end: 0em;
}
header > div h1 {
margin-block-start: 0em;
margin-block-end: 0em;
@ -54,10 +59,16 @@ header > img {
align-items: center;
}
}
@media screen and (max-width: 480px) {
@media screen and (max-width: 1024px) {
header {
width: -moz-available;
width: -webkit-fill-available;
width: fill-available;
}
}
@media screen and (max-width: 480px) {
header {
min-height: 30vh;
}
}

108
vercel.json

@ -1,55 +1,55 @@
{
"routes": [
{
"src": "/(.*)",
"headers": {
"Cache-Control": "s-maxage=1209600, max-age=86400, public",
"Strict-Transport-Security": "max-age=63072000; includeSubDomains; preload",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "Accept, Authorization, Cache-Control, Content-Type, DNT, If-Modified-Since, Keep-Alive, Origin, User-Agent, X-Requested-With, Token, x-access-token"
},
"continue": true
},
{
"src": "/goto/github",
"status": 302,
"headers": {
"Location": "https://github.com/186526"
}
},
{
"src": "/goto/telegram",
"status": 302,
"headers": {
"Location": "https://t.me/real186526"
}
},
{
"src": "/goto/blog",
"status": 302,
"headers": {
"Location": "https://blog.186526.xyz"
}
},
{
"src": "/goto/email",
"status": 302,
"headers": {
"Location": "mailto:[email protected]"
}
},
{
"src": "/generate_204",
"status": 204,
"headers": {
"X-Powered-By": "SW2Express",
"Server": "sw=>express"
}
},
{
"src": "/v2/(.*)",
"dest": "https://registry.186526.xyz/v2/$1"
}
]
}
"routes": [
{
"src": "/(.*)",
"headers": {
"Cache-Control": "s-maxage=1209600, max-age=86400, public",
"Strict-Transport-Security": "max-age=63072000; includeSubDomains; preload",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "Accept, Authorization, Cache-Control, Content-Type, DNT, If-Modified-Since, Keep-Alive, Origin, User-Agent, X-Requested-With, Token, x-access-token"
},
"continue": true
},
{
"src": "/goto/github",
"status": 302,
"headers": {
"Location": "https://github.com/186526"
}
},
{
"src": "/goto/telegram",
"status": 302,
"headers": {
"Location": "https://t.me/real186526"
}
},
{
"src": "/goto/blog",
"status": 302,
"headers": {
"Location": "https://blog.186526.xyz"
}
},
{
"src": "/goto/email",
"status": 302,
"headers": {
"Location": "mailto:[email protected]"
}
},
{
"src": "/generate_204",
"status": 204,
"headers": {
"X-Powered-By": "SW2Express",
"Server": "sw=>express"
}
},
{
"src": "/v2/(.*)",
"dest": "https://registry.186526.xyz/v2/$1"
}
]
}

33
vite.config.js

@ -1,20 +1,23 @@
import child_process from "child_process"
import legacy from '@vitejs/plugin-legacy';
import child_process from "child_process";
import legacy from "@vitejs/plugin-legacy";
/**
* @type {import('vite').UserConfig}
*/
const config = {
base: './',
define: {
'__APP_VERSION': child_process.execSync('git rev-parse --short HEAD').toString().replace("\n",""),
'__APP_BUILD_TIME': Math.floor(Date.now() / 1000),
},
plugins: [
legacy({
targets: ['ie >= 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
})
]
}
export default config
base: "./",
define: {
__APP_VERSION: child_process
.execSync("git rev-parse --short HEAD")
.toString()
.replace("\n", ""),
__APP_BUILD_TIME: Math.floor(Date.now() / 1000),
},
plugins: [
legacy({
targets: ["ie >= 11"],
additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
}),
],
};
export default config;

Loading…
Cancel
Save