mirror of
https://github.com/wah-su/wah-su.github.io.git
synced 2025-04-06 08:14:40 +00:00
feat: add responsiveness
This commit is contained in:
parent
0b09f1b50f
commit
78efd2500a
GPG key ID:
858E8EE696525EED
3 changed files with 86 additions and 8 deletions
10
index.html
10
index.html
|
|
@ -9,8 +9,8 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<header class="shadow-lg pt-4 pb-6 sticky top-0 left-0">
|
||||
<div class="flex flex-row gap-2 items-center container max-w-[1440px] justify-between">
|
||||
<header class="shadow-lg pt-4 pb-6 sticky top-0 left-0 bg-slate-50">
|
||||
<div class="flex 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" /></div>
|
||||
<div>
|
||||
<a href="https://status.wah.su" class="flex flex-row items-center gap-2" target="_blank">
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container max-w-[1440px] mt-14 text-center">
|
||||
<div class="container max-w-[1440px] mt-14 text-center px-4">
|
||||
<h1 class="font-bold text-8xl text-gray-800">Welcome to wah.su!</h1>
|
||||
<!--noformat-->
|
||||
<p class="max-w-[840px] mx-auto mt-6 text-gray-700 text-left whitespace-pre">
|
||||
|
|
@ -49,9 +49,9 @@
|
|||
<!--noformat-->
|
||||
</div>
|
||||
|
||||
<div class="container max-w-[1440px] mt-14">
|
||||
<div class="container max-w-[1440px] mt-14 px-4 py-4">
|
||||
<h1 class="font-bold text-4xl mb-4 text-gray-800">Currently hosting</h1>
|
||||
<div class="flex flex-row gap-2" id="services">
|
||||
<div class="flex flex-row gap-2 flex-wrap" id="services">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -40,13 +40,13 @@ window.onload = function () {
|
|||
</h5>
|
||||
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">${cards[index].description}
|
||||
</p>
|
||||
<div class="flex gap-1">
|
||||
<div class="flex gap-1 items-center justify-center flex-wrap lg:flex-nowrap lg:justify-start">
|
||||
<a href="${cards[index].about}" target="_blank"
|
||||
class="py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
|
||||
class="w-full inline-flex justify-center items-center py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
|
||||
Read more
|
||||
</a>
|
||||
<a href="${cards[index].url}"
|
||||
class="inline-flex justify-center items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
|
||||
class="w-full inline-flex justify-center items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
|
||||
open
|
||||
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
||||
|
|
|
|||
|
|
@ -1250,6 +1250,22 @@ input:checked + .toggle-bg {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.w-\[25\%\] {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.w-\[50\%\] {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.w-\[100\%\] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.max-w-\[1440px\] {
|
||||
max-width: 1440px;
|
||||
}
|
||||
|
|
@ -1336,6 +1352,10 @@ input:checked + .toggle-bg {
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
|
@ -1500,6 +1520,16 @@ input:checked + .toggle-bg {
|
|||
background-color: rgb(227 160 8 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-slate-200 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(226 232 240 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-slate-50 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(248 250 252 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.object-cover {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
|
|
@ -1550,6 +1580,16 @@ input:checked + .toggle-bg {
|
|||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pb-6 {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
|
@ -1902,6 +1942,44 @@ input:checked + .toggle-bg {
|
|||
--tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.md\:flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.md\:justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.lg\:flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.lg\:justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.xl\:w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.xl\:flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *) {
|
||||
--tw-rotate: 180deg;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue