diff --git a/guestbook/index.html b/guestbook/index.html index 4933fef..8747e09 100644 --- a/guestbook/index.html +++ b/guestbook/index.html @@ -12,7 +12,7 @@

Guestbook from SmartGB

(fentseller.lol is not affiliated with SmartGB)
-
+
diff --git a/guestbook/style.css b/guestbook/style.css index 67eaf12..c754710 100644 --- a/guestbook/style.css +++ b/guestbook/style.css @@ -4,11 +4,20 @@ h6 { margin-top: -10px; } +.cards { + margin-bottom: 50px; +} + +hr { + background-color: var(--surface2); + color: var(--surface2); +} + .guestbook-entry { margin-bottom: 20px; padding: 10px; - border: 2px solid #3f3f3f; - background-color: #2f2f2f; + border: 2px solid var(--surface1); + background-color: var(--surface0); max-width: 50vw; text-align: left; border-radius: 8px; diff --git a/ip/index.html b/ip/index.html index 97cb0f0..da36cef 100644 --- a/ip/index.html +++ b/ip/index.html @@ -9,10 +9,10 @@

IP Lookup

-
+
-
Your IP: 69.420.69.69
+
Your IP: 69.420.69.69
diff --git a/ip/style.css b/ip/style.css index 1f167f6..9fd6dd3 100644 --- a/ip/style.css +++ b/ip/style.css @@ -6,9 +6,9 @@ h1 { } input[type="text"] { - background: #1e1e1e; - border: 1px solid #444; - color: #f0f0f0; + background: var(--surface0); + border: 1px solid var(--surface1); + color: var(--text); padding: 12px 15px; border-radius: 8px; font-size: 1rem; @@ -20,7 +20,7 @@ input[type="text"] { } button { - background: #c099ff; + background: var(--mauve); color: #1e1e1e; border: none; padding: 12px 20px; @@ -32,7 +32,7 @@ button { } button:hover { - background: #a875ff; + background: var(--pastel-violet); } #output { @@ -52,13 +52,11 @@ table { th, td { padding: 10px 14px; - border: 2px solid #2a2a2a; - background-color: #1f1f1f; + border-radius: 12px; } -th:hover, -td:hover { - background-color: #232323; +tr:hover { + background-color: var(--surface1); } th { @@ -74,35 +72,5 @@ th { } #your-ip:not(:hover) { - filter: blur(10px); -} - -.tooltip { - display: flex; - justify-content: center; - position: relative; -} - -.tooltip::after { - content: attr(data-tooltip); - position: absolute; - left: 50%; - transform: translateX(-50%); - bottom: 125%; - background-color: #2a2a2a; - border: 2px solid rgba(150, 150, 150, 0.1); - color: #fff; - 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; -} + filter: blur(50px); +} \ No newline at end of file diff --git a/js/index.html b/js/index.html index 62469a8..104827f 100644 --- a/js/index.html +++ b/js/index.html @@ -8,7 +8,7 @@ -
+

JavaScript Evaluator

diff --git a/js/style.css b/js/style.css index 39374f2..aeaba61 100644 --- a/js/style.css +++ b/js/style.css @@ -1,6 +1,6 @@ @import url(/global.css); -.container { +.cards { text-align: center; padding: 20px; border-radius: 20px; @@ -13,8 +13,8 @@ textarea { padding: 10px; border-radius: 10px; border: none; - background-color: #333; - color: #f0f0f0; + background-color: var(--surface0); + color: var(--text); resize: none; outline: none; } @@ -26,22 +26,22 @@ button { border-radius: 10px; border: none; background-color: #333; - color: #f0f0f0; + color: var(--text); } button { cursor: pointer; - background-color: #444; + background-color: var(--surface1); } button:hover { - background-color: #555; + background-color: var(--surface2); } pre { font-family: "JetBrainsMono"; - background-color: #333; - color: #fff; + background-color: var(--crust); + color: var(--white); text-align: left; - padding: 3px; + padding: 10px; } diff --git a/keyboard/index.html b/keyboard/index.html index 8647efd..cc0376b 100644 --- a/keyboard/index.html +++ b/keyboard/index.html @@ -1,5 +1,6 @@ + @@ -8,39 +9,18 @@ + - - - - -
+

Keyboard Tester

A minimalist keyboard test without ads or trackers.

+
- + + \ No newline at end of file diff --git a/keyboard/style.css b/keyboard/style.css index 09318e1..ce899cf 100644 --- a/keyboard/style.css +++ b/keyboard/style.css @@ -5,13 +5,12 @@ button, p { } .help { - color: #f0f0f0; + color: var(--text); background: none; border: none; } -.container { - background-color: #4b4b4b; +.cards { border-radius: 8px; padding: 30px 100px; box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5); @@ -22,13 +21,12 @@ button, p { text-align: center; top: 0; left: 0; - } .counter { font-size: 24px; margin: 40px 0; - color: #ffffff; + color: var(--white); width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); @@ -38,7 +36,7 @@ button, p { } .counter > * { - background-color: rgb(90,90,90); + background-color: var(--overlay0); padding: 10px 5px 10px 5px; margin: 15px; border-radius: 10px; @@ -46,99 +44,19 @@ button, p { } p, h6, h1, h3 { - color: #f0f0f0; + color: var(--text); transition: color 0.3s; } -.reset, .button { +button { transition: background-color 0.3s; - color: #2a2a2a; - background-color: rgb(116, 116, 116); - border: 2px solid rgb(135,135,135); + color: var(--text); + background-color: var(--surface0); + border: 2px solid var(--surface1); border-radius: 5px; padding: 5px; cursor: pointer; margin-top: 15px; outline: none; transition: border 0.3s; -} - -.reset:hover, .button:hover { - border: 2px dashed #3c7855; -} - -.navBar > *:hover:not(.seperator) { - cursor: pointer; - scale: 1.05; -} - -.navBar > * { - transition: scale 0.3s; - -} - -.theme-button { - background-color: rgb(0,0,0,0); - border-color: rgb(0,0,0,0); - transition: 0.3s; - color: #f0f0f0; - cursor: pointer; - outline: none; - margin-top: -5px; - z-index: 1000; - right: 20px; - top: 20px; - margin-left: 5px !important; -} - -.theme-button:hover { - scale: 1.1; -} - -.theme-button svg { - pointer-events: none; -} - -.navBar { - position: fixed; - top: 0px; - left: 0px; - display: flex; - text-align: center; - align-items: center; - justify-content: left; - background-color: rgb(42,42,42,0.775); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - width: 100%; -} - -.navBar > * { - margin: 5px 1px 5px 10px; -} - -.github, -.web { - text-align: center; - transition: 0.3s; - user-select: none; - pointer-events: none; - z-index: 10; - color: #747474; - text-decoration: none; -} - -.github svg, -.web svg { - pointer-events: all; - transition: 0.3s; - fill: #747474; -} - -.seperator { - height: 25px; - width: 2px; - border-radius: 10px; - background-color: #747474; - -} +} \ No newline at end of file