mirror of
https://github.com/wah-su/wah-su.github.io.git
synced 2025-04-07 08:44:41 +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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header class="shadow-lg pt-4 pb-6 sticky top-0 left-0">
|
<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">
|
<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><img src="/public/images/logo-light.svg" alt="wah.su" /></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">
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</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>
|
<h1 class="font-bold text-8xl text-gray-800">Welcome to wah.su!</h1>
|
||||||
<!--noformat-->
|
<!--noformat-->
|
||||||
<p class="max-w-[840px] mx-auto mt-6 text-gray-700 text-left whitespace-pre">
|
<p class="max-w-[840px] mx-auto mt-6 text-gray-700 text-left whitespace-pre">
|
||||||
|
|
@ -49,9 +49,9 @@
|
||||||
<!--noformat-->
|
<!--noformat-->
|
||||||
</div>
|
</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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -40,13 +40,13 @@ window.onload = function () {
|
||||||
</h5>
|
</h5>
|
||||||
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">${cards[index].description}
|
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">${cards[index].description}
|
||||||
</p>
|
</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"
|
<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
|
Read more
|
||||||
</a>
|
</a>
|
||||||
<a href="${cards[index].url}"
|
<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
|
open
|
||||||
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true"
|
<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">
|
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
||||||
|
|
|
||||||
|
|
@ -1250,6 +1250,22 @@ input:checked + .toggle-bg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.w-auto {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[25\%\] {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[50\%\] {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-\[100\%\] {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.max-w-\[1440px\] {
|
.max-w-\[1440px\] {
|
||||||
max-width: 1440px;
|
max-width: 1440px;
|
||||||
}
|
}
|
||||||
|
|
@ -1336,6 +1352,10 @@ input:checked + .toggle-bg {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flex-wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
.items-start {
|
.items-start {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
@ -1500,6 +1520,16 @@ input:checked + .toggle-bg {
|
||||||
background-color: rgb(227 160 8 / var(--tw-bg-opacity));
|
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 {
|
.object-cover {
|
||||||
-o-object-fit: cover;
|
-o-object-fit: cover;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
|
@ -1550,6 +1580,16 @@ input:checked + .toggle-bg {
|
||||||
padding-bottom: 0.75rem;
|
padding-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.px-4 {
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.py-4 {
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.pb-6 {
|
.pb-6 {
|
||||||
padding-bottom: 1.5rem;
|
padding-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
@ -1902,6 +1942,44 @@ input:checked + .toggle-bg {
|
||||||
--tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
|
--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"] *) {
|
.rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *) {
|
||||||
--tw-rotate: 180deg;
|
--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));
|
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