diff --git a/index.html b/index.html index 96bd061..674730a 100644 --- a/index.html +++ b/index.html @@ -1,181 +1,258 @@ - - - - - - - - - - - - - - - - It's me, 186526! - - - - + + + + + + + + + + + + + + It's me, 186526! + + + + - - - - + + + + - + - + if (broswerUA.broswer == "IE") { + document.body.innerHTML = + '
去他妈的Internet Explorer，请使用现代浏览器访问该站点，例如Chrome、Firefox。
' + + document.body.innerHTML; + } else if (broswerUA.broswer == "chrome" && broswerUA.version <= 60) { + document.body.innerHTML = + '
摆脱旧版Chrome，请使用新版Chrome访问该站点。
' + + document.body.innerHTML; + } + })(); + + + + + + +

PID @ 78361641

+ + +
+ avatar +
+

+ It's me, 186526! +

+

一个啥都不会的屑

+
+
+ + + + + + + + + + + + + + + + + + + + + mail + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Keybase PGP + + Moe ICP 20218600 + + + + + + +
+ +

+ Running on 186526 Network. +

+

Copyright © 2020 - Now 186526.xyz All rights Reserved.

+ + + + + + +

一个啥都不会的屑

+

+ LSP, Verified by + lama3l9r's avatar + and + lsp's avatar +

+

Less code, more bug.

+

Arknights Player

+

btw, I use arch

+

console.log('Arch is the best!');

+

24岁, 是学生

+

一天25小时绝赞配网中...

+

DN42 贴(pi)贴(er)请求中...

+

大陆北方网友

+

Linux user ✗ KVM user ✓

+

世界一级拖延症证书持有者

+

想拥有强大的自制力

+

想做好自己

+

wowaka, 晚安.

+ - - - - - -

PID @ 78361641

- - -
- avatar -
-

It's me, 186526!

- 一个啥都不会的屑 -
-
- - - - - - - - - - - - - - - - - - - - - mail - - - - - - - - - - - - - - - - - - - - - - - - -
- - Keybase PGP - - Moe ICP 20218600 - - - - - - -
- -

Running on 186526 Network.

-

Copyright © 2021 - 186526.xyz All rights Reserved.

- - - - - - - -

一个啥都不会的屑

-

LSP, Verified by lama3l9r's avatar - and lsp's avatar

-

Less code, more bug.

-

Arknights Player

-

btw, I use arch

-

console.log('Arch is the best!');

-

24岁, 是学生

-

一天25小时绝赞配网中...

-

DN42 贴(pi)贴(er)请求中...

-

大陆北方网友

-

Linux user ✗ KVM user ✓

-

世界一级
拖延症证书持有者

-

想拥有强大的自制力

-

wowaka, 晚安.

- - - - \ No newline at end of file + diff --git a/postcss.config.js b/postcss.config.js index 73228a7..bed9140 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,9 +1,9 @@ module.exports = { - plugins: [ - require("postcss-css-variables")(), - require('autoprefixer')(), - require('cssnano')({ - preset: 'default', - }), - ] -} \ No newline at end of file + plugins: [ + require("postcss-css-variables")(), + require("autoprefixer")(), + require("cssnano")({ + preset: "default", + }), + ], +}; diff --git a/public/manifest.json b/public/manifest.json index e1e2cb7..c65232d 100644 --- a/public/manifest.json +++ b/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" - } - ] -} \ No newline at end of file + "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" + } + ] +} diff --git a/public/sw.js b/public/sw.js index f163342..4324b23 100644 --- a/public/sw.js +++ b/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", + }) + ); } - diff --git a/src/main.ts b/src/main.ts index ade8634..366885c 100644 --- a/src/main.ts +++ b/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 += `Update Commit Latest Update`; + // @ts-expect-error + document.querySelector( + "#footer > div" + ).innerHTML += `Update Commit Latest Update`; - 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(); + }); + } }); diff --git a/src/styles/base.css b/src/styles/base.css index a71c5a0..54e3f82 100644 --- a/src/styles/base.css +++ b/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); - } + :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%); - } + 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; + 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; + 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%; + 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; + left: 0px; + position: absolute; + top: 8px; + right: 0px; + width: -webkit-fill-available; + width: fill-available; + margin: 0 5vw; - backdrop-filter: blur(15px); + backdrop-filter: blur(15px); } diff --git a/src/styles/contents.css b/src/styles/contents.css index 02eeb54..96d055f 100644 --- a/src/styles/contents.css +++ b/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; } -} \ No newline at end of file +} diff --git a/src/styles/header.css b/src/styles/header.css index 908e94e..119bf46 100644 --- a/src/styles/header.css +++ b/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; + } +} diff --git a/vercel.json b/vercel.json index ba4ad3a..9fba6da 100644 --- a/vercel.json +++ b/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:admin@186526.xyz" - } - }, - { - "src": "/generate_204", - "status": 204, - "headers": { - "X-Powered-By": "SW2Express", - "Server": "sw=>express" - } - }, - { - "src": "/v2/(.*)", - "dest": "https://registry.186526.xyz/v2/$1" - } - ] -} \ No newline at end of file + "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:admin@186526.xyz" + } + }, + { + "src": "/generate_204", + "status": 204, + "headers": { + "X-Powered-By": "SW2Express", + "Server": "sw=>express" + } + }, + { + "src": "/v2/(.*)", + "dest": "https://registry.186526.xyz/v2/$1" + } + ] +} diff --git a/vite.config.js b/vite.config.js index 9cdb779..14bb156 100644 --- a/vite.config.js +++ b/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 \ No newline at end of file + 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;