From 2fa98c366ae1ba5959458e22f53c1222837d1246 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Sun, 19 May 2024 19:26:32 +0500 Subject: [PATCH] feat: make website more responsive --- index.html | 14 ++++---- public/output.css | 92 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 100 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 353936f..0aca941 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@
-
-

Welcome to wah.su!

+

Welcome to wah.su!

-

+

Looking for a cozy, reliable den away from tech companies? You've come to the right place! wah.su is all about providing a safe and stable environment for your projects. - +

+

Run by yours truly, @radiquum, we believe in quality over quantity, which is why access is currently invite-only. Interested in joining the pack? Reach out to me to sniff out an invitation.

@@ -59,8 +60,9 @@
-

Currently hosting

-
+

Currently + hosting

+
diff --git a/public/output.css b/public/output.css index 7c82306..82bf9a8 100644 --- a/public/output.css +++ b/public/output.css @@ -1194,6 +1194,18 @@ input:checked + .toggle-bg { margin-right: 1rem; } +.ml-16 { + margin-left: 4rem; +} + +.ml-20 { + margin-left: 5rem; +} + +.ml-24 { + margin-left: 6rem; +} + .block { display: block; } @@ -1290,6 +1302,18 @@ input:checked + .toggle-bg { max-width: 840px; } +.max-w-\[340px\] { + max-width: 340px; +} + +.max-w-\[240px\] { + max-width: 240px; +} + +.max-w-\[140px\] { + max-width: 140px; +} + .flex-1 { flex: 1 1 0%; } @@ -1364,6 +1388,10 @@ input:checked + .toggle-bg { flex-direction: row; } +.flex-col { + flex-direction: column; +} + .flex-wrap { flex-wrap: wrap; } @@ -1605,6 +1633,26 @@ input:checked + .toggle-bg { padding-bottom: 1rem; } +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.px-8 { + padding-left: 2rem; + padding-right: 2rem; +} + +.px-16 { + padding-left: 4rem; + padding-right: 4rem; +} + +.px-32 { + padding-left: 8rem; + padding-right: 8rem; +} + .pb-6 { padding-bottom: 1.5rem; } @@ -1650,6 +1698,16 @@ input:checked + .toggle-bg { line-height: 1.25rem; } +.text-6xl { + font-size: 3.75rem; + line-height: 1; +} + +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; +} + .font-bold { font-weight: 700; } @@ -1937,6 +1995,40 @@ input:checked + .toggle-bg { --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity)); } +@media (min-width: 640px) { + .sm\:flex-row { + flex-direction: row; + } +} + +@media (min-width: 768px) { + .md\:ml-0 { + margin-left: 0px; + } + + .md\:block { + display: block; + } + + .md\:flex-row { + flex-direction: row; + } + + .md\:justify-start { + justify-content: flex-start; + } + + .md\:text-8xl { + font-size: 6rem; + line-height: 1; + } + + .md\:text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; + } +} + @media (min-width: 1024px) { .lg\:flex-nowrap { flex-wrap: nowrap;