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

Jump to bottom

Fixes Minor Mobile Issues #26

Merged
merged 11 commits into from
Jun 8, 2024
Merged

Fixes Minor Mobile Issues #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
90792d5
feat: version bump
Eveeifyeve Jun 5, 2024
a64d107
Merge pull request #25 from TeaClientMC/main
Eveeifyeve Jun 5, 2024
2f43039
fix: mobile font
Eveeifyeve Jun 5, 2024
ee5c595
fix: sizing issues
Eveeifyeve Jun 6, 2024
f12d864
fix: home image to make them hidden when screen gets small
Eveeifyeve Jun 6, 2024
4302b39
feat tailwind menu bar conversion
Eveeifyeve Jun 6, 2024
78ac8d1
fix: menu bar
Eveeifyeve Jun 6, 2024
773b528
feat: cleaner virables
Eveeifyeve Jun 6, 2024
5fd2e66
chore: convert most stuff to tailwind
Eveeifyeve Jun 6, 2024
f4c2ecd
fix: text color and background
Eveeifyeve Jun 6, 2024
05c73ad
fix: mobile nav bar
Eveeifyeve Jun 7, 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 package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "teaclient-website",
"type": "module",
"version": "0.0.1",
"version": "0.0.2",
"scripts": {
"dev": "astro dev",
"preview": "astro preview",
Expand Down
49 changes: 25 additions & 24 deletions src/components/CustomImage.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,34 @@ import { twMerge } from "tailwind-merge";
const { src, className, flexbasis } = Astro.props;
---

<div class={twMerge("reveal-image", className)} style=`--image-url: url(${src}); flex-basis:${flexbasis}; `>
<div
class={twMerge("reveal-image", className)}
style=`--image-url: url(${src}); flex-basis:${flexbasis}; `
>
</div>

<style>
.reveal-image {
@apply relative rounded-2xl z-10 hidden xl:flex;
box-shadow: 0 0 40px var(--nav-color);
background: var(--image-url) center center / cover;
transition: transform 0.3s ease-in-out;
transform: perspective(800px) rotateY(-15deg) translateY(10px)
rotateX(10deg) scale(1);
}

.reveal-image {
box-shadow: 0 0 40px var(--nav-color);
position: relative;
background: var(--image-url) center center / cover;
border-radius: 1rem;
z-index: 9;
transition: transform 0.3s ease-in-out;
transform: perspective(800px) rotateY(-15deg) translateY(10px) rotateX(10deg) scale(1);
}
.reveal-image:hover {
transform: none;
}

.reveal-image:hover {
transform: none;
}
.reveal-image::before {
content: "";
display: block;
padding-top: calc(9 / 16 * 100%);
}

.reveal-image::before {
content: '';
display: block;
padding-top: calc(9 / 16 * 100%);
}

.reveal-image>* {
top: 0;
left: 0;
}
</style>
.reveal-image > * {
top: 0;
left: 0;
}
</style>
69 changes: 36 additions & 33 deletions src/components/HeroImage.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,47 @@ import { twMerge } from "tailwind-merge";
const { src, className, flexbasis } = Astro.props;
---

<div class={twMerge("reveal-image", className)} style=`--image-url: url(${src}); flex-basis:${flexbasis}; `>
<div
class={twMerge("reveal-image", className)}
style=`--image-url: url(${src}); flex-basis:${flexbasis}; `
>
</div>

<style>
@keyframes reveal-hero-image {
0% {
opacity: 0;
transform: scale(1.1, 1.1);
}
100% {
opacity: 1;
transform: perspective(800px) rotateY(-15deg) translateY(10px) rotateX(10deg) scale(1);
}
@keyframes reveal-hero-image {
0% {
opacity: 0;
transform: scale(1.1, 1.1);
}

.reveal-image {
box-shadow: 0 0 40px var(--nav-color);
position: relative;
background: var(--image-url) center center / cover;
border-radius: 1rem;
z-index: 9;
animation: reveal-hero-image 3s ease-out backwards;
transition: transform 0.3s ease-in-out;
transform: perspective(800px) rotateY(-15deg) translateY(10px) rotateX(10deg) scale(1);
100% {
opacity: 1;
transform: perspective(800px) rotateY(-15deg) translateY(10px)
rotateX(10deg) scale(1);
}
}

.reveal-image:hover {
transform: none;
}
.reveal-image {
@apply relative rounded-2xl z-10 hidden xl:flex;
box-shadow: 0 0 40px var(--nav-color);
background: var(--image-url) center center / cover;
animation: reveal-hero-image 3s ease-out backwards;
transition: transform 0.3s ease-in-out;
transform: perspective(800px) rotateY(-15deg) translateY(10px)
rotateX(10deg) scale(1);
}

.reveal-image::before {
content: '';
display: block;
padding-top: calc(9 / 16 * 100%);
}
.reveal-image:hover {
transform: none;
}

.reveal-image>* {
top: 0;
left: 0;
}
</style>
.reveal-image::before {
content: "";
display: block;
padding-top: calc(9 / 16 * 100%);
}

.reveal-image > * {
top: 0;
left: 0;
}
</style>
10 changes: 5 additions & 5 deletions src/components/head.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
import { SEO } from "astro-seo";
const { title, customDescription, bannerPath } = Astro.props;
export interface Props {
title: string;
customDescription?: string;
bannerPath?: string;
title: string;
customDescription?: string;
bannerPath?: string;
}

// SEO SETTINGS
Expand Down Expand Up @@ -54,7 +54,7 @@ const language = "en-us";
link: [
{ rel: "icon", href: favicon },
{ rel: "apple-touch-icon", type: "image/x-icon", href: favicon },
{ rel: "sitemap", href: "/sitemap-index.xml" }
{ rel: "sitemap", href: "/sitemap-index.xml" },
],
meta: [
{ name: "theme-color", content: theme_color },
Expand All @@ -67,7 +67,7 @@ const language = "en-us";
{
name: "viewport",
content:
"width=device-1200px, initial-scale=1.0, shrink-to-fit=yes, viewport-fit=cover",
"width=device-width, initial-scale=1.0, shrink-to-fit=yes, viewport-fit=cover",
},
],
}}
Expand Down
Loading
Loading