From d96e796bdf1dd8c92f2662ccd805429cb433c4b4 Mon Sep 17 00:00:00 2001
From: 186526 <i@186526.xyz>
Date: Fri, 29 Apr 2022 23:53:54 +0800
Subject: [PATCH] Update

---
 src/style.css         | 417 ------------------------------------------
 src/styles/base.css   |   2 +-
 src/styles/header.css |  11 +-
 3 files changed, 8 insertions(+), 422 deletions(-)
 delete mode 100644 src/style.css

diff --git a/src/style.css b/src/style.css
deleted file mode 100644
index e2f3e50..0000000
--- a/src/style.css
+++ /dev/null
@@ -1,417 +0,0 @@
-: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;
-}
-
-h2,
-h1 {
-	background: linear-gradient(
-		90deg,
-		var(--linear-start-color),
-		var(--linear-end-color)
-	);
-	-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%;
-}
-
-body {
-	margin: 2rem 2rem;
-	font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
-	color: var(--font-color);
-	background-color: var(--background-color);
-}
-
-a {
-	text-decoration: none;
-	color: #1967d2;
-}
-
-header {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: flex-end;
-	justify-content: flex-start;
-	align-content: stretch;
-}
-
-app h1 {
-	font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
-    margin-block-start: 0em;
-    margin-block-end: 0em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    font-weight: normal;
-}
-
-header description {
-	font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
-	font-size: var(--font-size-description);
-	line-height: var(--lineheight-description);
-	color: var(--font-color-lighter);
-	margin-left: 5px;
-}
-
-header div {
-	line-height: var(--lineheight-description);
-	margin-top: 1rem;
-	flex-basis: 100%;
-}
-
-header h1 {
-	font-size: var(--font-size-main);
-	line-height: var(--font-size-main);
-}
-
-header > div {
-	display: inline-flex;
-	align-items: flex-start;
-	flex-direction: column;
-	justify-content: center;
-}
-
-app > header > img {
-	margin-right: 1rem;
-	margin-bottom: 1rem;
-}
-
-code {
-	font-family: Fira Mono, monospace;
-}
-
-none {
-	display: none;
-}
-
-icon {
-	font-size: var(--icon-size) !important;
-}
-
-footer {
-	color: var(--font-color-lighter);
-	font-size: calc(var(--font-size-description) - 0.2rem);
-}
-
-footer > text {
-	margin-top: 1rem;
-	font-size: calc(var(--font-size-description) - 0.4rem);
-}
-
-footer > * {
-	display: block;
-}
-
-contents {
-	display: flex;
-	flex-direction: row-reverse;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	align-items: flex-start;
-}
-
-contents group {
-	margin: 1rem 0;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	align-items: flex-start;
-	min-width: 0;
-}
-
-contents content {
-	display: block;
-	min-width: 0;
-}
-
-contents content h2 {
-	font-weight: 500;
-	margin-block-start: 0.5rem !important;
-	margin-block-end: 0.5rem !important;
-}
-
-contents content h2.zh-cn {
-	font-weight: 900 !important;
-}
-
-contents content#map img {
-	height: 100%;
-	width: 100%;
-	max-height: 350px;
-	max-width: 700px;
-	min-height: 150px;
-	min-width: 300px;
-	border-radius: 10px;
-	display: block;
-	margin: 1.5rem 0;
-}
-
-contents content#path img {
-	width: 100%;
-	min-width: 300px;
-	max-height: 600px;
-	border-radius: 10px;
-	margin: 1.5rem 0;
-}
-
-code {
-	padding: 0.15em 0.3em;
-	margin: 0;
-	font-size: 85%;
-	background-color: var(--box-color);
-	border-radius: 3px;
-	line-height: 200%;
-}
-
-group#pops {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	align-items: stretch;
-}
-
-group#pops content#status {
-	flex-basis: 100%;
-}
-
-group#pops img {
-	height: 48px;
-	vertical-align: middle;
-}
-
-group#pops pop[status="working"] {
-	background-color: var(--working-color-background);
-}
-
-group#pops pop[status="working-with-error"] {
-	background-color: var(--working-with-error-color-background);
-}
-
-group#pops pop[status="error"] {
-	background-color: var(--error-color-background);
-}
-
-.error-text {
-	color: var(--error-color);
-}
-
-.working-with-error-text {
-	color: var(--working-with-error-color);
-}
-
-.working-text {
-	color: var(--working-color);
-}
-
-group#pops pop {
-	background-color: var(--box-color);
-	padding: 2rem;
-	min-height: 3rem;
-	min-width: 24%;
-	border-radius: 9px;
-	flex-grow: 1;
-	margin-top: 1rem;
-	margin-right: 1rem;
-	flex-basis: 2rem;
-}
-
-pop > system {
-	margin-top: 1rem;
-}
-
-pop > span,
-pop > system {
-	margin-bottom: 1rem;
-}
-
-pop name {
-	font-size: calc(var(--font-size-description) + 0.1rem);
-	vertical-align: middle;
-	margin-left: 0.5rem;
-}
-
-pop location {
-	font-size: calc(var(--font-size-description) - 0.2rem);
-	color: var(--font-color-lighter);
-	vertical-align: middle;
-	display: inherit;
-	margin-left: calc(0.5rem + 53px);
-}
-
-pop > status > i {
-	vertical-align: middle;
-}
-
-pop ipv4,
-pop ipv6,
-pop system {
-	font-size: calc(var(--font-size-description) - 0.25rem);
-	font-family: Roboto, Noto Sans SC, sans-serif;
-}
-
-@media screen and (max-width: 480px) {
-	body {
-		margin: 6rem 2rem;
-	}
-
-	:root {
-		--font-size-main: 3rem;
-		--font-size-description: 1.045rem;
-	}
-
-	footer {
-		font-size: calc(var(--font-size-description) - 0.2rem);
-	}
-
-	footer > text {
-		font-size: calc(var(--font-size-description) - 0.4rem);
-	}
-
-	header description {
-		order: -1;
-	}
-}
-
-@media screen and (max-width: 1126px) {
-	contents group {
-		justify-content: flex-start;
-		flex-direction: column;
-	}
-
-	group#pops {
-		width: 50%;
-	}
-
-	group#picture {
-		width: 40%;
-	}
-
-	group#pops pop {
-		flex-basis: 100%;
-	}
-}
-
-@media screen and (max-width: 768px) {
-	contents group {
-		justify-content: flex-start;
-		flex-direction: column;
-	}
-
-	contents {
-		justify-content: flex-start;
-		flex-direction: column;
-	}
-
-	group#pops {
-		width: 100%;
-	}
-
-	group#picture {
-		width: 100% !important;
-	}
-
-	pop > * {
-		overflow-x: auto;
-		overflow-y: hidden;
-		white-space: nowrap;
-	}
-
-	group#pops pop {
-		margin-right: unset !important;
-	}
-}
-
-@media screen and (min-width: 1126px) {
-	group#picture {
-		width: 100%;
-	}
-
-	contents group#text {
-		flex-direction: column;
-	}
-
-	contents {
-		justify-content: flex-start;
-		flex-direction: column;
-	}
-}
-
-@media screen and (min-width: 768px) {
-	body {
-		margin: 8% 10%;
-	}
-
-	header > * {
-		display: inline-block;
-	}
-
-	header > div {
-		flex-direction: row;
-		align-items: center;
-	}
-}
-
-@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;
-	}
-
-	contents content#path img {
-		filter: invert(93%);
-	}
-}
-
-content#prefix ul {
-	padding: unset;
-}
-
-content#prefix ul > li {
-	list-style-type: "";
-}
-
-pop > * {
-	display: block;
-}
-
-pop > system[type="wireguard"] {
-	overflow-x: auto;
-	overflow-y: hidden;
-	white-space: nowrap;
-}
-
-::-webkit-scrollbar {
-	width: 0;
-}
diff --git a/src/styles/base.css b/src/styles/base.css
index 5dd0bd0..5e43b3a 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -54,7 +54,7 @@ a {
 	}
 
 	:root {
-		--font-size-main: 2.5rem;
+		--font-size-main: 2.25rem;
 		--font-size-description: 1.045rem;
 	}
 }
diff --git a/src/styles/header.css b/src/styles/header.css
index 4c56486..0cfd783 100644
--- a/src/styles/header.css
+++ b/src/styles/header.css
@@ -54,10 +54,13 @@ header > img {
 		align-items: center;
 	}
 }
-/* @media screen and (max-width: 480px) {
-
-	
-} */
+@media screen and (max-width: 480px) {
+	header {
+		width: -moz-available;
+		width: -webkit-fill-available;
+		width: fill-available;
+	}
+}
 
 @media (prefers-color-scheme: dark) {
 	header {