From: Muhammad Rizki <[email protected]>
To: Ammar Faizi <[email protected]>
Cc: Muhammad Rizki <[email protected]>,
Alviro Iskandar Setiawan <[email protected]>,
Arthur Lapz <[email protected]>, Memet Zx <[email protected]>,
GNU/Weeb Mailing List <[email protected]>
Subject: [PATCH v1 03/11] refactor(page): improve page design and add profile image cover
Date: Sat, 23 Sep 2023 03:58:09 +0700 [thread overview]
Message-ID: <[email protected]> (raw)
In-Reply-To: <[email protected]>
In this commit, we focus on enhancing the visual presentation of the
page design. The changes include:
- Improve some styles CSS.
- Add a profile image cover.
Both of these changes are closely related and have been combined into a
single commit due to their interdependencies. Separating them would risk
another issues.
Signed-off-by: Muhammad Rizki <[email protected]>
---
index.html | 356 +++++++++++++++++++++++++++++------------------------
1 file changed, 197 insertions(+), 159 deletions(-)
diff --git a/index.html b/index.html
index 4dd68ff..86853f6 100644
--- a/index.html
+++ b/index.html
@@ -35,179 +35,217 @@
/>
<link rel="manifest" href="./static/site.webmanifest" />
</head>
- <body class="w-full px-5 bg-neutral-950 text-neutral-200">
- <main
- class="w-full min-h-screen py-24 xl:py-0 max-w-sm mx-auto grid grid-cols-1 place-content-center gap-5"
- >
- <section class="border border-neutral-800 rounded-xl">
- <img
- src="https://github.com/GNUWeeb.png"
- alt="GNU/Weeb's GitHub Profile Picture"
- class="rounded-full w-32 h-32 mx-auto border border-neutral-800 bg-neutral-800 -mt-16"
- />
- <div
- class="flex px-5 py-3 border-b border-neutral-800 justify-between items-center"
- >
- <h1 class="text-2xl font-bold">GNU/Weeb</h1>
- <a
- href="https://github.com/GNUWeeb"
- target="_blank"
- title="View GNU/Weeb's Organization on GitHub"
- class="p-2 rounded-full hover:bg-neutral-800 border border-neutral-900 hover:border-neutral-800 flex items-center justify-center transition-colors duration-300 ease-in-out"
+ <body class="w-full px-20 bg-neutral-950 text-neutral-200">
+ <main class="flex justify-center w-full min-h-screen space-x-3">
+ <section class="flex flex-col space-y-3">
+ <section class="border border-neutral-800 rounded-b-xl overflow-hidden max-w-3xl">
+ <img
+ src="./static/img/profile-cover.jpg"
+ alt=""
+ draggable="false"
+ style="filter: brightness(70%);"
>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- class="w-5 h-5"
- >
- <path
- d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
- />
- <path d="M9 18c-4.51 2-5-2-7-2" />
- </svg>
- <span class="sr-only">GitHub</span>
- </a>
- </div>
- <div class="px-5 py-3 space-y-2">
- <h2 class="font-semibold text-lg">Description</h2>
- <p class="text-sm w-full opacity-70">
- We are working to build community through open source technology.
- </p>
- <blockquote
- class="w-full border-l-2 pl-3 py-1 !my-3 text-sm border-neutral-200"
- >
- <span class="not-italic font-semibold">Note:</span><br />
- Members on GitHub must have two-factor auth.
- </blockquote>
- </div>
- </section>
- <section class="border border-neutral-800 rounded-xl overflow-hidden">
- <div
- class="flex px-5 py-2 border-b border-neutral-800 justify-between items-center"
- >
- <h1 class="text-lg font-bold text-center w-full">Mailing List</h1>
- </div>
- <div class="px-5 py-3 text-sm">
+ <div class="relative flex flex-col px-5 py-3 space-x-3 space-y-3">
+ <div class="flex space-x-1 md:space-x-2 lg:space-x-3 pb-5 border-b border-neutral-800">
+ <div class="-mt-16">
+ <img
+ src="https://github.com/GNUWeeb.png"
+ alt="GNU/Weeb's GitHub Profile Picture"
+ draggable="false"
+ class="rounded-full w-44 border-4 border-neutral-950 bg-neutral-950"
+ />
+ </div>
+ <div class="flex justify-between w-full">
+ <div class="text-2xl md:text-3xl font-bold">
+ GNU/Weeb
+ </div>
+ <div>
+ <a
+ href="https://github.com/GNUWeeb"
+ target="_blank"
+ title="View GNU/Weeb's Organization on GitHub"
+ class="relative bottom-1 p-2 rounded-full hover:bg-neutral-800 flex items-center
+ justify-center transition-colors duration-300 ease-in-out"
+ draggable="false"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ class="w-5 h-5 md:w-6 md:h-6 lg:w-7 lg:h-7"
+ >
+ <path
+ d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
+ />
+ <path d="M9 18c-4.51 2-5-2-7-2" />
+ </svg>
+ <span class="sr-only">GitHub</span>
+ </a>
+ </div>
+ </div>
+ </div>
+ <div class="py-1 space-y-1">
+ <h2 class="font-bold text-2xl select-none">About</h2>
+ <p class="w-full opacity-70">
+ We are working to build community through open source technology.
+ </p>
+ <blockquote
+ class="w-max px-3 border-l-4 pl-3 !my-7 text-sm border-neutral-200"
+ >
+ <span class="not-italic font-bold select-none">Note:</span><br />
+ <span class="opacity-80">Members on GitHub must have two-factor auth.</span>
+ </blockquote>
+ </div>
+ </div>
+ </section>
+ <section class="border border-neutral-800 rounded-xl overflow-hidden max-w-3xl">
<div
- class="overflow-hidden flex items-center justify-between border rounded-lg border-neutral-900 font-mono"
+ class="flex px-5 py-2 border-b border-neutral-800 justify-between items-center"
>
- <p id="copy-text" class="px-3 py-2">[email protected]</p>
- <button
- id="copy-button"
- class="w-fit py-2 px-3 border-l border-neutral-900 hover:border-neutral-800 hover:bg-neutral-800 transition-colors duration-300 ease-in-out"
- title="Copy to Clipboard"
- onclick="copyText()"
+ <h1 class="text-lg font-bold text-center w-full select-none">Mailing List</h1>
+ </div>
+ <div class="px-5 py-3 text-sm">
+ <div class="overflow-hidden flex items-center justify-between border rounded-lg
+ border-neutral-900 font-mono"
>
- Copy
- </button>
+ <p
+ id="copy-text"
+ class="px-3 py-2 select-none cursor-pointer w-full"
+ onclick="copyText()"
+ >
+ [email protected]
+ </p>
+ <button
+ id="copy-button"
+ class="w-fit py-2 px-3 border-l border-neutral-900 hover:border-neutral-800
+ hover:bg-neutral-800 transition-colors duration-300 ease-in-out"
+ title="Copy to Clipboard"
+ onclick="copyText()"
+ >
+ Copy
+ </button>
+ </div>
</div>
- </div>
- </section>
- <section class="border border-neutral-800 rounded-xl overflow-hidden">
- <div
- class="flex px-5 py-2 border-b border-neutral-800 justify-between items-center"
- >
- <h1 class="text-lg font-bold text-center w-full">Useful Links</h1>
- </div>
- <div class="px-5 py-3 grid gap-3 grid-cols-2 text-sm">
- <a
- href="https://t.me/GNUWeeb"
- target="_blank"
- class="flex items-center gap-2 justify-center px-3 py-2 border rounded-lg border-neutral-900 hover:border-neutral-800 hover:bg-neutral-800 transition-colors duration-300 ease-in-out"
+ </section>
+ <section class="border border-neutral-800 rounded-xl overflow-hidden max-w-3xl">
+ <div
+ class="flex px-5 py-2 border-b border-neutral-800 justify-between items-center"
>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- class="w-5 h-5"
+ <h1 class="text-lg font-bold text-center w-full select-none">Useful Links</h1>
+ </div>
+ <div class="px-5 py-3 grid gap-3 grid-cols-2 text-sm">
+ <a
+ href="https://t.me/GNUWeeb"
+ target="_blank"
+ draggable="false"
+ class="flex items-center gap-2 justify-center px-3 py-2 border rounded-lg
+ border-neutral-900 hover:border-neutral-800 hover:bg-neutral-800
+ transition-colors duration-300 ease-in-out"
>
- <path d="m22 2-7 20-4-9-9-4Z" />
- <path d="M22 2 11 13" />
- </svg>
- <span>Telegram</span>
- </a>
- <a
- href="https://lore.gnuweeb.org/gwml"
- target="_blank"
- class="flex items-center gap-2 justify-center px-3 py-2 border rounded-lg border-neutral-900 hover:border-neutral-800 hover:bg-neutral-800 transition-colors duration-300 ease-in-out"
- >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- class="w-5 h-5"
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ class="w-5 h-5"
+ >
+ <path d="m22 2-7 20-4-9-9-4Z" />
+ <path d="M22 2 11 13" />
+ </svg>
+ <span class="select-none">Telegram</span>
+ </a>
+ <a
+ href="https://lore.gnuweeb.org/gwml"
+ target="_blank"
+ draggable="false"
+ class="flex items-center gap-2 justify-center px-3 py-2 border rounded-lg
+ border-neutral-900 hover:border-neutral-800 hover:bg-neutral-800
+ transition-colors duration-300 ease-in-out"
>
- <path
- d="M8 21h12a2 2 0 0 0 2-2v-2H10v2a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v3h4"
- />
- <path d="M19 17V5a2 2 0 0 0-2-2H4" />
- <path d="M15 8h-5" />
- <path d="M15 12h-5" />
- </svg>
- <span>GWML Lore</span>
- </a>
- <a
- href="https://discord.gg/GyRxNzK3Zs"
- target="_blank"
- class="flex items-center gap-2 justify-center px-3 py-2 border rounded-lg border-neutral-900 hover:border-neutral-800 hover:bg-neutral-800 transition-colors duration-300 ease-in-out"
- >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- class="w-5 h-5"
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ class="w-5 h-5"
+ >
+ <path
+ d="M8 21h12a2 2 0 0 0 2-2v-2H10v2a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v3h4"
+ />
+ <path d="M19 17V5a2 2 0 0 0-2-2H4" />
+ <path d="M15 8h-5" />
+ <path d="M15 12h-5" />
+ </svg>
+ <span class="select-none">GWML Lore</span>
+ </a>
+ <a
+ href="https://discord.gg/GyRxNzK3Zs"
+ target="_blank"
+ draggable="false"
+ class="flex items-center gap-2 justify-center px-3 py-2 border rounded-lg
+ border-neutral-900 hover:border-neutral-800 hover:bg-neutral-800
+ transition-colors duration-300 ease-in-out"
>
- <path
- d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
- />
- <path
- d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
- />
- </svg>
- <span>Discord</span>
- </a>
- <a
- href="https://social.gnuweeb.org/"
- target="_blank"
- class="flex items-center gap-2 justify-center px-3 py-2 border rounded-lg border-neutral-900 hover:border-neutral-800 hover:bg-neutral-800 transition-colors duration-300 ease-in-out"
- >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- class="w-5 h-5"
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ class="w-5 h-5"
+ >
+ <path
+ d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+ />
+ <path
+ d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+ />
+ </svg>
+ <span class="select-none">Discord</span>
+ </a>
+ <a
+ href="https://social.gnuweeb.org/"
+ target="_blank"
+ draggable="false"
+ class="flex items-center gap-2 justify-center px-3 py-2 border rounded-lg
+ border-neutral-900 hover:border-neutral-800 hover:bg-neutral-800
+ transition-colors duration-300 ease-in-out"
>
- <path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z" />
- </svg>
- <span>GW Social</span>
- </a>
- </div>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ class="w-5 h-5"
+ >
+ <path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z" />
+ </svg>
+ <span class="select-none">GW Social</span>
+ </a>
+ </div>
+ </section>
</section>
+ </main>
+ <footer class="pt-10 p-5">
<p class="text-xs opacity-70 mx-auto text-center">
© 2023 GNU/Weeb.<br />Licensed under BSD 3-Clause License.
</p>
- </main>
+ </footer>
<script lang="text/javascript">
function copyText() {
var copyText = document.getElementById("copy-button");
--
Muhammad Rizki
next prev parent reply other threads:[~2023-09-22 20:59 UTC|newest]
Thread overview: 14+ messages / expand[flat|nested] mbox.gz Atom feed top
2023-09-22 20:58 [PATCH v1 00/11] Refactoring and Add New Features Muhammad Rizki
2023-09-22 20:58 ` [PATCH v1 01/11] style: remove extra newline at end of file Muhammad Rizki
2023-09-22 20:58 ` [PATCH v1 02/11] feat(static/img): add `profile-cover.jpg` Muhammad Rizki
2023-09-22 20:58 ` Muhammad Rizki [this message]
2023-09-22 20:58 ` [PATCH v1 04/11] feat(page): improve UX for copying text Muhammad Rizki
2023-09-22 20:58 ` [PATCH v1 05/11] chore(page): add newlines to enhance Developer Experience Muhammad Rizki
2023-09-22 20:58 ` [PATCH v1 06/11] feat(page): add GNUWeeb member list UI Muhammad Rizki
2023-09-22 20:58 ` [PATCH v1 07/11] feat(page): add `getOrgMembers()` function Muhammad Rizki
2023-09-22 20:58 ` [PATCH v1 08/11] feat(page): add `renderMemberList()` function Muhammad Rizki
2023-09-22 20:58 ` [PATCH v1 09/11] feat(page): add initial UI for displaying recent group messages Muhammad Rizki
2023-09-22 20:58 ` [PATCH v1 10/11] feat(css): add initial CSS class styles for chat bubbles Muhammad Rizki
2023-09-22 20:58 ` [PATCH v1 11/11] feat(page): implement chat bubble message rendering Muhammad Rizki
2023-09-23 3:15 ` Ammar Faizi
2023-09-23 8:43 ` Muhammad Rizki
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
[email protected] \
[email protected] \
[email protected] \
[email protected] \
[email protected] \
[email protected] \
[email protected] \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox