Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Landing page vite #46

Merged
merged 2 commits into from
Dec 13, 2024
Merged

Landing page vite #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7d70ad8
cleanup
neonwatty Dec 13, 2024
f128689
cleanup
neonwatty Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
/>
<title>Meme Search</title>
</head>
<body class="bg-white dark:bg-slate-800">
<body class="bg-light dark:bg-slate-800">
<!-- <script src="src/js/scroll.js"></script> -->
<script type="module" src="src/js/hamburger_dropdown.js"></script>
<script type="module" src="src/js/theme.js"></script>
Expand Down
10 changes: 7 additions & 3 deletions src/js/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
document.documentElement.classList.add("dark");

// set icon visibility
function iconVisibility(toggle, label) {
const toggleLabelClasses = label.classList;
if (toggle.checked) {
toggleLabelClasses.remove("fa-sun");
toggleLabelClasses.add("fa-moon");
} else {
toggleLabelClasses.remove("fa-moon");
toggleLabelClasses.add("fa-sun");
} else {
toggleLabelClasses.remove("fa-sun");
toggleLabelClasses.add("fa-moon");
}
}

Expand All @@ -18,6 +20,8 @@ document.addEventListener("DOMContentLoaded", () => {

// initial setting
iconVisibility(themeToggle, toggleLabel);
themeToggle.checked = true;
document.documentElement.classList.toggle("dark", themeToggle.checked);

// form event handler
themeToggle.addEventListener("change", () => {
Expand Down
14 changes: 5 additions & 9 deletions src/partials/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,17 +96,13 @@
<p class="text-center text-3xl md:text-6xl mt-6 text-gray-900">
Try out the "pro" version! ⤵
</p>
<div class="flex flex-col md:flex-row w-auto h-fit">
<div class="flex flex-col items-center justify-center mx-auto my-auto">
<p
class="text-center align-middle my-auto mx-auto w-1/2 text-xl md:text-xl mt-1 md:mt-6 mb-4 text-gray-900"
>
free and open source with advanced search features, tags, and more!
</p>
</div>
<div class="flex flex-col w-full h-full">
<p class="text-center text-2xl md:text-2xl mt-6 mb-10 text-gray-900">
(open source with advanced search features, tags, and more!)
</p>
<iframe
src="https://meme-search-pro.ytdatakit.xyz/"
class="w-full md:w-screen h-[55vh] md:h-[85vh]"
class="w-full h-[55vh] md:h-[70vh]"
frameborder="0"
title="meme search pro demo"
loading="lazy"
Expand Down
47 changes: 21 additions & 26 deletions src/partials/nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div class="relative flex h-16 items-center justify-between">
<div
class="absolute inset-y-0 left-0 flex items-center sm:hidden"
class="absolute inset-y-0 left-0 flex items-center xl:hidden"
id="vertical-menu"
>
<!-- Mobile menu button-->
Expand Down Expand Up @@ -59,55 +59,49 @@
</button>
</div>
<div
class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start"
class="flex flex-1 items-center justify-center xl:items-stretch xl:justify-start"
id="menu-div"
>
<div class="flex flex-shrink-0 items-center">
<img
class="h-8 w-auto"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Twemoji2_1f602.svg/1920px-Twemoji2_1f602.svg.png"
alt="Meme Search emoji"
/>
<div class="mt-1 mr-1">
<a href="https://github.com/neonwatty/meme-search">
<i
class="fa-brands fa-github"
style="color: #63e6be; font-size: 36px"
></i>
</a>
</div>
<div id="full-menu" class="hidden sm:ml-6 sm:block">
<div id="full-menu" class="hidden xl:ml-6 xl:block">
<div class="flex space-x-4">
<a
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-500"
class="rounded-md px-3 py-2 text-xl font-medium text-light hover:bg-gray-700 hover:text-white active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-500"
aria-current="page"
href="#mission"
>mission</a
>
<a
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-500"
class="rounded-md px-3 py-2 text-xl font-medium text-light hover:bg-gray-700 hover:text-white active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-500"
href="#example"
>
a short example</a
>
<a
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
class="rounded-md px-3 py-2 text-xl font-medium text-light hover:bg-gray-700 hover:text-white"
href="#try-lite"
>try the lite version!</a
>
<a
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
class="rounded-md px-3 py-2 text-xl font-medium text-light hover:bg-gray-700 hover:text-white"
href="#try-pro"
>try the pro version!
</a>
<a
class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
class="rounded-md px-3 py-2 text-xl font-medium text-light hover:bg-gray-700 hover:text-white"
href="#download"
>download
</a>
<a href="https://github.com/neonwatty/meme-search">
<i
class="fa-brands fa-github"
style="color: #63e6be; font-size: 36px"
></i>
</a>
</div>
</div>
</div>

<div
class="flex items-center ml-18 mt-2 mr-2 w-max select-none transition duration-200 ease-in"
>
Expand All @@ -118,6 +112,7 @@
name="toggle"
id="theme-toggle"
class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
checked="true"
/>
<label
for="toggle"
Expand All @@ -137,29 +132,29 @@
<div class="space-y-1 px-2 pb-3 pt-2">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<a
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-500"
class="block rounded-md px-3 py-2 text-lg font-medium text-light hover:bg-gray-700 hover:text-white active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-500"
aria-current="page"
href="#mission"
>mission</a
>
<a
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-500"
class="block rounded-md px-3 py-2 text-lg font-medium text-light hover:bg-gray-700 hover:text-white active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-500"
href="#example"
>
example</a
>
<a
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-500"
class="block rounded-md px-3 py-2 text-lg font-medium text-light hover:bg-gray-700 hover:text-white active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-500"
href="#try-lite"
>try the lite version!</a
>
<a
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-500"
class="block rounded-md px-3 py-2 text-lg font-medium text-light hover:bg-gray-700 hover:text-white active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-500"
href="#try-pro"
>try the pro version!
</a>
<a
class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-500"
class="block rounded-md px-3 py-2 text-lg font-medium text-light hover:bg-gray-700 hover:text-white active:bg-gray-900 focus:outline-none focus:ring focus:ring-gray-500"
href="#download"
>download
</a>
Expand Down
6 changes: 6 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@ module.exports = {
content: ["./src/**/*.{html,js}", "./index.html"],
theme: {
extend: {
backgroundColor: {
light: "#e9e6fa",
},
textColor: {
light: "#e9e6fa",
},
fontSize: {
"2xl": "2.25rem",
"3xl": "2.75rem",
Expand Down
Loading