diff --git a/404.css b/404.css index 453923e..741887e 100644 --- a/404.css +++ b/404.css @@ -1,15 +1,5 @@ @import url(global.css); -.main { - text-align: center; - background-color: #4b4b4b; - border-radius: 8px; - padding: 30px 100px; - box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5); - width: 30vw; - max-width: 30vw; -} - h1 { font-size: 1.5rem; } diff --git a/404.html b/404.html index 9da4ee7..d3cc760 100644 --- a/404.html +++ b/404.html @@ -8,7 +8,7 @@ -
+

❌ Eror: 404 Not Found ❌

Looks like you found an unfinished site or were redirected to the wrong page!

Go back to the main page or open an issue on my GitHub

diff --git a/assets/css/frappe.css b/assets/css/frappe.css deleted file mode 100644 index e69de29..0000000 diff --git a/assets/css/latte.css b/assets/css/latte.css deleted file mode 100644 index 6b7e38d..0000000 --- a/assets/css/latte.css +++ /dev/null @@ -1,311 +0,0 @@ -@import url(/global.css); - -img { - pointer-events: none; - user-select: none; -} - -body { - color: #4c4f69; - padding: 0; - margin: 0; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - background-color: #eff1f5; - min-height: 100vh; - overflow-x: hidden; -} - -.languages { - margin-bottom: 20px; -} - -strong { - font-weight: 900; - color: #1e66f5; -} - -.info { - margin-top: 50px; -} - -#profile-picture { - width: 150px; - height: 150px; - border-radius: 50%; -} - -.name { - font-size: 24px; - margin-top: 10px; -} - -.time, -.weather, -.age, -.hobbies { - font-size: 18px; - color: #5c5f77; - margin-bottom: 10px; -} - -.hobbies { - font-size: 16px; -} - -.cards { - background-color: #e6e9ef; - border: 2px solid #bcc0cc; -} - -.cards:hover { - border: 2px solid #acb0be; -} - -#status { - font-weight: bold; - margin: 10px 0 15px 10px; - color: #7287fd; -} - -.activity { - display: flex; - align-items: center; - justify-content: center; - text-align: left; - width: 100%; - gap: 2px; -} - -#activity-name { - flex-grow: 1; - text-align: left; - color: #5c5f77; -} - -#activity-image { - display: block; - height: 36px; - width: 36px; -} - -.languages, -.contact, -.software { - margin-top: 30px; - width: 100%; -} - -.language-item { - display: block; - background-color: #dde0e8; - padding: 10px 15px; - border-radius: 8px; - transition: background-color 0.3s, transform 0.2s; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); - margin: 10px; -} - -.language-item:hover { - background-color: #ccd0da; - transform: translateY(-5px); -} - -.language-item:hover span, -.language-item:hover .language-name { - color: #1e66f5; -} - -.name-percent-container { - display: inline-flex; - align-items: center; - gap: 10px; - width: 100%; -} - -div[class="name-percent-container"] > img.image { - width: 30px; - height: 20px; - border-radius: 2px; -} - -.language-item .language-name, -.language-item .percent { - font-size: 16px; - color: #6c6f85; - font-weight: bold; -} - -.percentage-bar { - display: block; - width: 100%; - height: 8px; - background-color: #bcc0cc; - margin-top: 10px; - border-radius: 5px; - position: relative; -} - -.percentage-bar .bar-after { - position: relative; - width: 100%; - height: 100%; - background: linear-gradient(to right, #40a02b 0%, #a6e3a1 50%, #40a02b 100%); - border-radius: 5px; - background-size: 200% 100%; - animation: shimmer 2s infinite ease-in; -} - -.language-item:hover .percentage-bar .bar-after { - background: linear-gradient(to right, #179299 0%, #04a5e5 50%, #179299 100%); -} - -.tooltip { - display: flex; - justify-content: center; - position: relative; -} - -.tooltip::after, -a[class="skill-item tooltip"]::after, -a[class^="software-item tooltip"]::after { - content: attr(data-tooltip); - position: absolute; - left: 50%; - transform: translateX(-50%); - bottom: 125%; - background-color: #dce0e8; - border: 2px solid #ccd0da; - color: #4c4f69; - padding: 5px 10px; - border-radius: 5px; - font-size: 14px; - white-space: nowrap; - opacity: 0; - visibility: hidden; - transition: opacity 0.3s, visibility 0.3s; - cursor: default; -} - -.tooltip:hover::after { - opacity: 1; - visibility: visible; -} - -@keyframes shimmer { - 0% { - background-position: 100% 0; - } - 100% { - background-position: -100% 0; - } -} - -#skills-div:not(#skills-div > h2) { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 15px; - margin: 20px auto 0 auto; - width: calc(100% - 40px); - max-width: 600px; -} - -.software:not(.software > h2) { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - justify-content: center; - width: 100%; - max-width: 600px; -} - -.skill-item, -.contact-item, -.software-item { - text-decoration: none; - display: flex; - align-items: center; - justify-content: center; - background-color: #dde0e8; - padding: 15px; - border-radius: 8px; - transition: background-color 0.3s, transform 0.2s; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); - text-align: center; - margin: 10px; -} - -.skill-item { - flex-direction: column; - margin: 0 20px; -} - -.skill-item:hover, -.software-item:hover { - background-color: #ccd0da; - transform: translateY(-5px); - filter: brightness(1); -} - -.skill-item:hover .skill-name { - color: #1e66f5; -} - -.skill-item > .image, -.software-item > .image { - margin-bottom: 10px; - filter: brightness(0.75); -} - -.skill-item:hover > .image, -.software-item:hover > .image { - filter: brightness(1); -} - -.image { - height: 50px; - border-radius: 5px; - transition: 0.1s; -} - -.software-item > .image { - height: 50px !important; - border-radius: 0px; -} - -.skill-name, -.contact-name, -.software-name { - font-size: 16px; - color: #6c6f85; - transition: 0.1s; -} - -.card-header { - color: #4c4f69; - text-align: left; - width: 100%; - grid-column: span 2; -} - -.contact-item:hover .contact-name, -.software-item:hover .software-name { - color: #1e66f5; -} - -.github-contact { - background-color: #dce0e8; -} - -.github-contact:hover { - background-color: #ccd0da; -} - -.instagram-contact { - background-color: #f2d5cf; -} - -.instagram-contact:hover { - background-color: #eebebe; -} diff --git a/assets/css/mocha.css b/assets/css/mocha.css deleted file mode 100644 index e69de29..0000000 diff --git a/assets/css/style.css b/assets/css/style.css index 58d5e98..71ca8fc 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -6,7 +6,7 @@ img { } body { - color: #cdd6f4; + color: var(--text); padding: 0; margin: 0; display: flex; @@ -24,7 +24,7 @@ body { strong { font-weight: 900; - color: #cdd6f4; + color: var(--text); } .info { @@ -185,7 +185,7 @@ div[class="name-percent-container"] > img.image { } .language-item:hover .percentage-bar .bar-after { - background: linear-gradient(to right, #cdd6f4 0%, #b4befe 50%, #cdd6f4 100%); + background: linear-gradient(to right, var(--text) 0%, #b4befe 50%, var(--text) 100%); animation: shimmer 2s infinite ease-in; background-size: 200% 100%; } @@ -206,7 +206,7 @@ a[class^="software-item tooltip"]::after { bottom: 125%; background-color: #1e1e2e; border: 1px solid #6c7086; - color: #cdd6f4; + color: var(--text); padding: 5px 10px; border-radius: 5px; font-size: 14px; @@ -339,7 +339,7 @@ a[class^="software-item tooltip"]::after { } .card-header { - color: #cdd6f4; + color: var(--text); text-align: left; width: 100%; grid-column: span 2; @@ -722,7 +722,7 @@ div[class="cards sitemap shadow"] > h4 { .themes > button { font-size: 16px; cursor: pointer; - color: #cdd6f4; + color: var(--text); border-radius: 3px; padding: 4px; margin-right: 10px; diff --git a/autist/index.html b/autist/index.html index 73d9dbe..0302c8d 100644 --- a/autist/index.html +++ b/autist/index.html @@ -9,11 +9,7 @@ - - -
+

No sound played. Press the button!

+
+

Welcome!

+

This is a website for future tools. The source code can be found on my GitHub!

+

Clicking "Test It" will open the tool in the current tab.

+

More tools will come in the future.

- -
why is this one so much worse than /projects T_T T_T T_T
-
- -
-

Welcome!

-

This is a website for future tools. The source code can be found on my GitHub!

-

Clicking "Test It" will open the tool in the current tab.

-

More tools will come in the future.

+
@@ -56,4 +35,4 @@ - + \ No newline at end of file diff --git a/sitemap/style.css b/sitemap/style.css index 4fcd95f..f58b9cf 100644 --- a/sitemap/style.css +++ b/sitemap/style.css @@ -1,59 +1,13 @@ -@font-face { - font-family: 'Hack'; - src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype'); -} - -@font-face { - font-family: 'JetBrainsMono'; - src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2'); -} - -body { - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - min-height: 100vh; - margin: 0; - font-family: monospace; - font-size: 1rem; - background-color: #2a2a2a; - color: #f0f0f0; - overflow-x: hidden; - font-family: 'Hack', 'JetBrainsMono', monospace; -} +@import url(/global.css); html { height: 100%; } -::selection { - background-color: #c099ff; - color: #2a2a2a; -} - #motd { font-style: italic; } -.topbar { - display: flex; - align-items: center; - justify-content: start; - gap: 2vw; - width: 100%; - max-width: 100vw; - position: fixed; - background-color: rgba(59, 59, 59, 0.885); - backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(5px); - font-size: large; - top: 0; - border-bottom: 1px solid rgba(70, 70, 70, 0.885); - z-index: 9999; - overflow-x: hidden; -} - .welcome { text-align: center; margin: 0; @@ -73,14 +27,9 @@ html { margin: 0 0 10px 0; } -.tools-main { - display: flex; - flex-wrap: wrap; - gap: 2.5vw; - justify-content: center; - min-height: 10vh; - max-width: 80vw; - margin-bottom: 100px; +.cards { + margin-top: 50px; + text-align: center; } .tool-div { @@ -98,18 +47,13 @@ html { max-width: 90vw; width: 50vw; box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5); - scale: 0.79; - margin-bottom: -100px; } .tool-header { - margin-bottom: 0; - padding-top: 15px; text-decoration: underline; } .tool-desc { - margin: 5px; font-weight: normal; max-width: 90%; } @@ -117,24 +61,23 @@ html { .tool-media { max-width: 30vw; border-radius: 5px; - margin: 10px; + margin: 25px 10px; } .visit-tool { padding: 10px 20px; background-color: rgb(40, 100, 65); - color: #fff; + color: var(--subtext1); border: 2px solid rgb(75, 135, 100); border-radius: 4px; transition: 0.1s; - font-weight: bolder; - font-size: large; - margin: 5px 0 15px 0; + margin: 10px; } .visit-tool:hover { background-color: rgb(35, 95, 60); border-color: rgb(90, 150, 115); + color: var(--white); } .slideshow-container { @@ -160,8 +103,12 @@ html { margin-left: 30px; } +#langauge-selector, option { + color: var(--surface0) !important; +} + @media (max-width: 768px) { - .tools-main { + .cards { max-width: 100%; gap: 1.5vw; } @@ -174,7 +121,7 @@ html { } .tool-header { - font-size: 1.2rem; + font-size: 1rem; } .tool-desc { @@ -199,7 +146,7 @@ html { margin: 0 10px; } - .tools-main { + .cards { max-width: 100%; } diff --git a/sitemap/tools.js b/sitemap/tools.js index 28a4c1b..4a1e20d 100644 --- a/sitemap/tools.js +++ b/sitemap/tools.js @@ -25,12 +25,12 @@ function renderTools(filteredTools, language = 'en') { }; const toolItem = document.createElement("div"); - toolItem.className = "tool-div"; + toolItem.className = "cards"; toolItem.innerHTML = ` -

↬ ${toolData.name} ↫

-

${toolData.subheader}

-

${toolData.description}

+

↬ ${toolData.name} ↫

+

${toolData.subheader}

+

${toolData.description}

${tool.name} Image Visit "${toolData.name}"! `; diff --git a/timer/index.html b/timer/index.html index 5804d1b..1b2a9ab 100644 --- a/timer/index.html +++ b/timer/index.html @@ -8,7 +8,7 @@ zy's Timer -
+
00:00:00:00
diff --git a/timer/style.css b/timer/style.css index 5e00b8d..96d3e88 100644 --- a/timer/style.css +++ b/timer/style.css @@ -1,18 +1,16 @@ @import url(/global.css); -div.main { +div.cards { padding: 60px; display: grid; justify-content: center; - background-color: #3a3a3a; border-radius: 10px; margin: 50px auto; - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); max-width: 600px; text-align: center; } -div.main button { +div.cards button { margin: 0 10px; cursor: pointer; color: #fff;