diff --git a/index.html b/index.html
index dc83af7..23e55d1 100644
--- a/index.html
+++ b/index.html
@@ -30,6 +30,40 @@
+
+
diff --git a/src/styles/base.css b/src/styles/base.css
index 477d41c..a71c5a0 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -15,16 +15,18 @@
--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: linear-gradient(
+ 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;
@@ -46,10 +48,10 @@ body {
background > p {
visibility: hidden;
position: absolute;
- top: 69vh;
- right: 0;
- color: var(--font-color-lighter);
- font-size: calc(var(--font-size-description) - 0.4rem);
+ top: 69vh;
+ right: 0;
+ color: var(--font-color-lighter);
+ font-size: calc(var(--font-size-description) - 0.4rem);
}
background:hover > p {
@@ -66,6 +68,10 @@ a {
margin: 6rem 2vw;
}
+ .toast {
+ margin: 0 2vw !important;
+ }
+
:root {
--font-size-main: 2.25rem;
--font-size-description: 1.045rem;
@@ -94,6 +100,7 @@ icon {
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
+ font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
@@ -105,7 +112,8 @@ background {
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);
+ 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);
@@ -125,6 +133,7 @@ background {
--working-with-error-color: #fdd663;
--linear-start-color: #0c8cca;
--linear-end-color: #00bdff;
+ --mask-color: rgba(0, 0, 0, 0.5);
}
background {
@@ -154,3 +163,21 @@ tooltiptext {
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);
+}
diff --git a/src/styles/contents.css b/src/styles/contents.css
index fe7e9c1..02eeb54 100644
--- a/src/styles/contents.css
+++ b/src/styles/contents.css
@@ -6,7 +6,7 @@ contents {
right: 0vh;
left: 0vh;
- margin: 0vh 5vw;
+ margin: 0vh calc(5vw - 0.5rem);
justify-content: center;
align-items: flex-start;
@@ -72,6 +72,6 @@ group#footer > * {
@media screen and (max-width: 480px) {
contents {
- margin: 0 2vw;
+ margin: 0 calc(2vw - 0.5rem);
}
}
\ No newline at end of file
diff --git a/src/styles/header.css b/src/styles/header.css
index 0cfd783..908e94e 100644
--- a/src/styles/header.css
+++ b/src/styles/header.css
@@ -33,7 +33,7 @@ header {
flex-direction: column;
justify-content: center;
backdrop-filter: blur(15px);
- background-color: rgba(255, 255, 255, 0.5);
+ background-color: var(--mask-color);
border-radius: 15px;
border: 10px;
padding: 20px 40px;
@@ -61,9 +61,3 @@ header > img {
width: fill-available;
}
}
-
-@media (prefers-color-scheme: dark) {
- header {
- background-color: rgba(0, 0, 0, 0.5);
- }
-}