mirror of
https://github.com/wah-su/wah-su.github.io.git
synced 2025-04-05 07:44:40 +00:00
feat: make website more responsive
This commit is contained in:
parent
a9c029164f
commit
2fa98c366a
GPG key ID:
858E8EE696525EED
2 changed files with 100 additions and 6 deletions
14
index.html
14
index.html
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<body class="light dark:bg-slate-900" id="body">
|
||||
<header class="shadow-lg pt-4 pb-6 sticky top-0 left-0 bg-slate-50 dark:bg-slate-800">
|
||||
<div class="flex flex-row gap-2 items-center container max-w-[1440px] justify-between px-4">
|
||||
<div class="flex flex-col md:flex-row gap-2 items-center container max-w-[1440px] justify-between px-4">
|
||||
<div><img src="/public/images/logo-light.svg" alt="wah.su" id="logo" /></div>
|
||||
<div>
|
||||
<a href="https://status.wah.su" class="flex flex-row items-center gap-2" target="_blank">
|
||||
|
|
@ -46,12 +46,13 @@
|
|||
</header>
|
||||
|
||||
<div class="container max-w-[1440px] mt-14 text-center px-4">
|
||||
<h1 class="font-bold text-8xl text-gray-800 dark:text-slate-200">Welcome to wah.su!</h1>
|
||||
<h1 class="font-bold text-6xl md:text-8xl text-gray-800 dark:text-slate-200">Welcome to wah.su!</h1>
|
||||
<!--noformat-->
|
||||
<p class="max-w-[840px] mx-auto mt-6 text-gray-700 dark:text-slate-300 text-left whitespace-pre">
|
||||
<p class="max-w-[840px] mx-auto mt-6 text-gray-700 dark:text-slate-300 text-left w-full">
|
||||
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.
|
||||
|
||||
</p>
|
||||
<p class="max-w-[840px] mx-auto mt-6 text-gray-700 dark:text-slate-300 text-left w-full">
|
||||
Run by yours truly, <a href="https://bento.me/radiquum" class="font-medium text-blue-600 dark:text-blue-500 hover:underline" target="_blank">@radiquum</a>, 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.
|
||||
</p>
|
||||
|
|
@ -59,8 +60,9 @@
|
|||
</div>
|
||||
|
||||
<div class="container max-w-[1440px] mt-14 px-4 py-4">
|
||||
<h1 class="font-bold text-4xl mb-4 text-gray-800 dark:text-slate-200">Currently hosting</h1>
|
||||
<div class="flex flex-row gap-2 flex-wrap" id="services">
|
||||
<h1 class="font-bold text-4xl md:ml-0 mb-4 text-gray-800 dark:text-slate-200">Currently
|
||||
hosting</h1>
|
||||
<div class="flex flex-row gap-2 flex-wrap justify-center md:justify-start" id="services">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue