From 24d05acb413f312e37dfd67ad17667c4af445e34 Mon Sep 17 00:00:00 2001 From: FelipeFTN Date: Mon, 2 Dec 2024 22:13:30 -0300 Subject: [PATCH 1/3] feat(mobile): creating styles folder --- web/Dioxus.toml | 2 +- web/assets/{ => styles}/blog.css | 0 web/assets/{ => styles}/books.css | 0 web/assets/{ => styles}/games.css | 0 web/assets/{ => styles}/interests.css | 0 web/assets/{ => styles}/main.css | 0 web/assets/{ => styles}/projects.css | 0 web/assets/{ => styles}/sidebar.css | 0 8 files changed, 1 insertion(+), 1 deletion(-) rename web/assets/{ => styles}/blog.css (100%) rename web/assets/{ => styles}/books.css (100%) rename web/assets/{ => styles}/games.css (100%) rename web/assets/{ => styles}/interests.css (100%) rename web/assets/{ => styles}/main.css (100%) rename web/assets/{ => styles}/projects.css (100%) rename web/assets/{ => styles}/sidebar.css (100%) diff --git a/web/Dioxus.toml b/web/Dioxus.toml index 1d9b06e..3237470 100644 --- a/web/Dioxus.toml +++ b/web/Dioxus.toml @@ -31,7 +31,7 @@ watch_path = ["src", "assets"] # CSS style file -style = ["main.css"] +style = ["styles/main.css"] # Javascript code file script = [] diff --git a/web/assets/blog.css b/web/assets/styles/blog.css similarity index 100% rename from web/assets/blog.css rename to web/assets/styles/blog.css diff --git a/web/assets/books.css b/web/assets/styles/books.css similarity index 100% rename from web/assets/books.css rename to web/assets/styles/books.css diff --git a/web/assets/games.css b/web/assets/styles/games.css similarity index 100% rename from web/assets/games.css rename to web/assets/styles/games.css diff --git a/web/assets/interests.css b/web/assets/styles/interests.css similarity index 100% rename from web/assets/interests.css rename to web/assets/styles/interests.css diff --git a/web/assets/main.css b/web/assets/styles/main.css similarity index 100% rename from web/assets/main.css rename to web/assets/styles/main.css diff --git a/web/assets/projects.css b/web/assets/styles/projects.css similarity index 100% rename from web/assets/projects.css rename to web/assets/styles/projects.css diff --git a/web/assets/sidebar.css b/web/assets/styles/sidebar.css similarity index 100% rename from web/assets/sidebar.css rename to web/assets/styles/sidebar.css From 724a37eb93aa5d37d124ae93d5ecafd6d6ef8704 Mon Sep 17 00:00:00 2001 From: FelipeFTN Date: Mon, 2 Dec 2024 22:46:18 -0300 Subject: [PATCH 2/3] feat(mobile): lots of improvements on responsivity --- web/assets/styles/blog.css | 3 +++ web/assets/styles/books.css | 3 +++ web/assets/styles/games.css | 8 ++++++++ web/assets/styles/main.css | 6 ++++++ web/assets/styles/projects.css | 8 ++++++++ web/assets/styles/sidebar.css | 5 +++++ web/src/main.rs | 2 +- 7 files changed, 34 insertions(+), 1 deletion(-) diff --git a/web/assets/styles/blog.css b/web/assets/styles/blog.css index e8254de..8f4ae52 100644 --- a/web/assets/styles/blog.css +++ b/web/assets/styles/blog.css @@ -1,11 +1,14 @@ .blog { .title { color: #cdd6f4; + margin-left: 10px; } .subtitle { color: #bac2de; + margin-left: 10px; } .not-found { color: #babbf1; + text-align: center; } } diff --git a/web/assets/styles/books.css b/web/assets/styles/books.css index 4a6ebfa..48c1ded 100644 --- a/web/assets/styles/books.css +++ b/web/assets/styles/books.css @@ -1,11 +1,14 @@ .books { .title { color: #cdd6f4; + margin-left: 10px; } .subtitle { color: #bac2de; + margin-left: 10px; } .not-found { color: #babbf1; + text-align: center; } } diff --git a/web/assets/styles/games.css b/web/assets/styles/games.css index 6b326d5..13d774a 100644 --- a/web/assets/styles/games.css +++ b/web/assets/styles/games.css @@ -1,9 +1,11 @@ .games { .title { color: #cdd6f4; + margin-left: 10px; } .subtitle { color: #bac2de; + margin-left: 10px; } .games-list { @@ -85,4 +87,10 @@ } } } + + @media screen and (max-width: 768px) { + .games-list { + width: 100vw; + } + } } diff --git a/web/assets/styles/main.css b/web/assets/styles/main.css index 8d2b56c..ec6699d 100644 --- a/web/assets/styles/main.css +++ b/web/assets/styles/main.css @@ -46,3 +46,9 @@ main { margin-left: auto !important; margin-right: auto !important; } + +@media screen and (max-width: 768px) { + .div-to-align-the-layout { + display: none; + } +} diff --git a/web/assets/styles/projects.css b/web/assets/styles/projects.css index 815c9ba..c3b4a50 100644 --- a/web/assets/styles/projects.css +++ b/web/assets/styles/projects.css @@ -1,9 +1,11 @@ .projects { .title { color: #cdd6f4; + margin-left: 10px; } .subtitle { color: #bac2de; + margin-left: 10px; } .project-tags { color: #bac2de; @@ -143,4 +145,10 @@ } } } + + @media screen and (max-width: 768px) { + .projects-grid { + width: 90vw; + } + } } diff --git a/web/assets/styles/sidebar.css b/web/assets/styles/sidebar.css index 3b0c054..007f423 100644 --- a/web/assets/styles/sidebar.css +++ b/web/assets/styles/sidebar.css @@ -101,3 +101,8 @@ transform: rotateZ(-360deg); } } +@media screen and (max-width: 768px) { + .sidebar { + display: none; + } +} diff --git a/web/src/main.rs b/web/src/main.rs index d4010cb..57ef415 100644 --- a/web/src/main.rs +++ b/web/src/main.rs @@ -46,9 +46,9 @@ pub fn Main() -> Element { components::sidebar::SideBar {} div { class: "main-content", components::projects::Projects {}, + components::games::Games {}, components::blog::Blog {}, components::books::Books {}, - components::games::Games {}, } div { class: "div-to-align-the-layout" } } From 9d456a30bbe7bdf59d5bd471e1c073b65b0c9137 Mon Sep 17 00:00:00 2001 From: FelipeFTN Date: Mon, 2 Dec 2024 23:27:43 -0300 Subject: [PATCH 3/3] feat(mobile): new floating profile icon on mobile view --- web/assets/styles/sidebar.css | 56 +++++++++++++++++++++++++---------- web/src/components/sidebar.rs | 5 ++++ 2 files changed, 46 insertions(+), 15 deletions(-) diff --git a/web/assets/styles/sidebar.css b/web/assets/styles/sidebar.css index 007f423..b8b3f75 100644 --- a/web/assets/styles/sidebar.css +++ b/web/assets/styles/sidebar.css @@ -25,21 +25,6 @@ text-align: center; color: #cdd6f4; - .profile-frame { - margin-left: auto; - margin-right: auto; - align-items: center; - width: 150px; - height: 150px; - border-radius: 50%; - border: 2px dashed #cdd6f4; - animation: spin 20s linear infinite; - img { - width: 150px; - border-radius: 50%; - animation: counterspin 20s linear infinite; - } - } .social-links { display: flex; flex-direction: column; @@ -91,6 +76,26 @@ } } } +.profile-icon { + display: none; + position: sticky; +} +.profile-frame { + margin-left: auto; + margin-right: auto; + align-items: center; + width: 150px; + height: 150px; + border-radius: 50%; + border: 2px dashed #cdd6f4; + animation: spin 20s linear infinite; + img { + width: 150px; + border-radius: 50%; + animation: counterspin 20s linear infinite; + } +} + @keyframes spin { 100% { transform: rotateZ(360deg); @@ -105,4 +110,25 @@ .sidebar { display: none; } + .profile-icon { + display: initial; + position: fixed; + right: 20px; + top: 20px; + z-index: 2; + + .profile-frame { + width: 75px; + height: 75px; + border: 2px dashed #cdd6f4; + img { + width: 75px; + } + } + } +} +@media screen and (max-width: 300px) { + .profile-icon { + display: none; + } } diff --git a/web/src/components/sidebar.rs b/web/src/components/sidebar.rs index ddcf903..2684be5 100644 --- a/web/src/components/sidebar.rs +++ b/web/src/components/sidebar.rs @@ -5,6 +5,11 @@ use dioxus::prelude::*; #[component] pub fn SideBar() -> Element { rsx! { + div { class: "profile-icon", + div { class: "profile-frame", + img { src: "https://avatars.githubusercontent.com/u/80127749?v=4", alt: "Profile Picture"}, + } + } div { class: "sidebar", div { class: "profile", div { class: "profile-frame",