Skip to content

Commit

Permalink
change image size for the small screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@cookspam
cookspam committed Sep 9, 2024
1 parent d4f3ade commit c61f67b
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 19 deletions.
10 changes: 5 additions & 5 deletions src/components/activity.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,17 @@ pub fn Activity(cx: Scope) -> Element {
class: "relative flex flex-col h-64 w-full mt-24",
img {
src: "{spam_gang}",
class: "absolute bottom-24 left-0 md:left-8 lg:left-8 w-128 h-48 md:w-128 md:h-48",

class: "absolute bottom-24 left-0 w-64 h-32 md:left-8 md:w-128 md:h-48", // Smaller size for small screens, original size for medium and up
}

img {
src: "{go}",
class: "absolute bottom-24 left-72 w-32 h-16 md:w-32 md:h-16 animate-jump_right hidden md:inline-block", // Hidden on small screens, shown as inline-block on medium and up
}
class: "absolute bottom-24 left-72 w-16 h-16 md:w-32 md:h-16 animate-jump_right", // Hidden on small screens, shown as inline-block on medium and up
}

img {
src: "{back}",
class: "absolute bottom-24 left-72 w-32 h-20 md:w-32 md:h-20 animate-move_left",
class: "absolute bottom-24 left-72 w-24 h-20 md:w-32 md:h-20 animate-move_left",
}
}
}
Expand Down
18 changes: 9 additions & 9 deletions src/components/navbar.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,21 +50,21 @@ pub fn Navbar(cx: Scope) -> Element {
class: "w-5 h-5 sm:w-6 sm:h-6 my-auto" // Smaller logo on small screens
}
p {
class: "text-lg sm:text-2xl font-semibold my-auto text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white", // Smaller text on small screens
class: "text-lg sm:text-2xl font-semibold my-auto text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white",
"SPAM"
}
}
div {
class: "flex flex-row gap-1 sm:gap-2 md:gap-4 lg:gap-10 flex-wrap sm:flex-nowrap", // Reduced gap for smaller screens
class: "flex flex-row gap-1 sm:gap-2 md:gap-4 lg:gap-10 flex-wrap sm:flex-nowrap",
Link {
class: "transition-colors flex flex-col sm:flex-row items-center gap-1 sm:gap-1 md:gap-2 lg:gap-3 px-2 sm:px-0 py-2 rounded-full text-gray-300 dark:text-gray-700 hover:text-black dark:hover:text-white", // Reduced padding
to: Route::Home {},
span {
class: "w-5 h-5 sm:w-6 sm:h-6 my-auto", // Smaller icon on small screens
class: "w-5 h-5 sm:w-6 sm:h-6 my-auto",
"⛏️"
}
span {
class: "text-xs sm:text-base md:text-lg", // Smaller text on small screens
class: "text-xs sm:text-base md:text-lg",
"Mine"
}
}
Expand All @@ -73,19 +73,19 @@ pub fn Navbar(cx: Scope) -> Element {
to: Route::Stats {},
StatsIcon {}
span {
class: "text-xs sm:text-base md:text-lg", // Smaller text on small screens
class: "text-xs sm:text-base md:text-lg",
"Stats"
}
}
Link {
class: "transition-colors flex flex-col items-center sm:flex-row gap-1 sm:gap-1 md:gap-2 lg:gap-3 px-2 sm:px-0 py-2 rounded-full text-black dark:text-gray-700 hover:text-gray-600 dark:hover:text-white", // Reduced padding
to: Route::Apps {},
span {
class: "w-5 h-5", // Smaller icon on small screens
class: "w-5 h-5",
"📦"
}
span {
class: "text-xs sm:text-base md:text-lg", // Smaller text on small screens
class: "text-xs sm:text-base md:text-lg",
"Apps"
}
}
Expand All @@ -94,15 +94,15 @@ pub fn Navbar(cx: Scope) -> Element {
to: Route::Settings {},
MyPageIcon {}
span {
class: "text-xs sm:text-base md:text-lg", // Smaller text on small screens
class: "text-xs sm:text-base md:text-lg",
"My Page"
}
}
}
}
}
div {
class: "flex flex-col h-full py-4 px-4 sm:px-8 grow w-full max-w-[96rem] mx-auto",
class: "flex flex-col h-full py-4 px-4 sm:px-8 grow w-full max-w-[96rem] mx-auto",
Outlet::<Route> {}
}
Footer {
Expand Down
11 changes: 6 additions & 5 deletions src/components/tutorial.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,24 @@ pub fn Tutorial(cx: Scope) -> Element {
let tool = asset_path("Tool1.png");
render! {
div {
class: "absolute right-4 sm:right-8 bottom-20 px-2 py-2 animate-bounce text-teal-500 rounded flex items-center space-x-2", // Change background to border
class: "absolute right-4 sm:right-8 bottom-20 px-2 py-2 animate-bounce text-teal-500 rounded flex items-center space-x-2", // No changes here
img {
src: "{tool}",
class: "w-32 h-36", // Larger image size and reduce padding
class: "w-24 h-28 md:w-32 md:h-36", // Smaller image for small screens and original size for medium screens and up
alt: "Tool"
}
div {
class: "flex flex-col mr-4", // Increase padding on the right side of the text
class: "flex flex-col mr-2 md:mr-4", // Smaller right margin for small screens and larger for medium screens
p {
class: "font-bold text-lg", // Make text bigger
class: "font-bold text-sm md:text-lg", // Smaller text for small screens, larger for medium screens
"Start"
}
p {
class: "font-bold text-lg", // Make text bigger
class: "font-bold text-sm md:text-lg", // Same adjustment for the second line of text
"Spamming"
}
}
}

}
}

0 comments on commit c61f67b

Please sign in to comment.