mirror of
https://github.com/wah-su/wah-su.github.io.git
synced 2025-04-05 15:54:40 +00:00
feat: make website more responsive
This commit is contained in:
parent
a9c029164f
commit
2fa98c366a
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">
|
<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">
|
<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><img src="/public/images/logo-light.svg" alt="wah.su" id="logo" /></div>
|
||||||
<div>
|
<div>
|
||||||
<a href="https://status.wah.su" class="flex flex-row items-center gap-2" target="_blank">
|
<a href="https://status.wah.su" class="flex flex-row items-center gap-2" target="_blank">
|
||||||
|
@ -46,12 +46,13 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="container max-w-[1440px] mt-14 text-center px-4">
|
<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-->
|
<!--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!
|
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.
|
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.
|
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.
|
Interested in joining the pack? Reach out to me to sniff out an invitation.
|
||||||
</p>
|
</p>
|
||||||
|
@ -59,8 +60,9 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container max-w-[1440px] mt-14 px-4 py-4">
|
<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>
|
<h1 class="font-bold text-4xl md:ml-0 mb-4 text-gray-800 dark:text-slate-200">Currently
|
||||||
<div class="flex flex-row gap-2 flex-wrap" id="services">
|
hosting</h1>
|
||||||
|
<div class="flex flex-row gap-2 flex-wrap justify-center md:justify-start" id="services">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -1194,6 +1194,18 @@ input:checked + .toggle-bg {
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ml-16 {
|
||||||
|
margin-left: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml-20 {
|
||||||
|
margin-left: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml-24 {
|
||||||
|
margin-left: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
.block {
|
.block {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
@ -1290,6 +1302,18 @@ input:checked + .toggle-bg {
|
||||||
max-width: 840px;
|
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 {
|
||||||
flex: 1 1 0%;
|
flex: 1 1 0%;
|
||||||
}
|
}
|
||||||
|
@ -1364,6 +1388,10 @@ input:checked + .toggle-bg {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flex-col {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
.flex-wrap {
|
.flex-wrap {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
@ -1605,6 +1633,26 @@ input:checked + .toggle-bg {
|
||||||
padding-bottom: 1rem;
|
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 {
|
.pb-6 {
|
||||||
padding-bottom: 1.5rem;
|
padding-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
@ -1650,6 +1698,16 @@ input:checked + .toggle-bg {
|
||||||
line-height: 1.25rem;
|
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-bold {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
@ -1937,6 +1995,40 @@ input:checked + .toggle-bg {
|
||||||
--tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
|
--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) {
|
@media (min-width: 1024px) {
|
||||||
.lg\:flex-nowrap {
|
.lg\:flex-nowrap {
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
|
Loading…
Add table
Reference in a new issue