Fixed flex-boxes in CV section

Signed-off-by: Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>
0.1.5
Tuan-Dat Tran 2024-09-03 11:23:00 +02:00
parent f76a7a8c4c
commit bec4c608f1
3 changed files with 64 additions and 17 deletions

View File

@ -2,6 +2,16 @@
My personal website.
## Usage
```sh
npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch
```
```sh
dx serve --platform fullstack
```
## Screenshot
[[./resources/screenshot.webp]]

View File

@ -608,6 +608,10 @@ video {
inset-inline-start: -0.375rem;
}
.m-16 {
margin: 4rem;
}
.mx-16 {
margin-left: 4rem;
margin-right: 4rem;
@ -628,6 +632,16 @@ video {
margin-bottom: 2rem;
}
.my-16 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.mx-8 {
margin-left: 2rem;
margin-right: 2rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
@ -700,10 +714,6 @@ video {
height: 1px;
}
.h-32 {
height: 8rem;
}
.min-h-screen {
min-height: 100vh;
}
@ -785,6 +795,16 @@ video {
gap: 1rem;
}
.gap-2 {
gap: 0.5rem;
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2rem * var(--tw-space-x-reverse));
@ -797,10 +817,16 @@ video {
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.overflow-x-auto {
@ -1279,6 +1305,11 @@ video {
}
@media (min-width: 640px) {
.sm\:my-16 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.sm\:mt-0 {
margin-top: 0px;
}
@ -1293,6 +1324,12 @@ video {
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2rem * var(--tw-space-x-reverse));
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.sm\:text-center {
text-align: center;
}

View File

@ -7,16 +7,21 @@ use crate::components::{H4, HR};
pub fn CV() -> Element {
rsx! {
div {
class: "flex flex-col ",
class: "flex flex-col",
div {
class: "flex justify-between",
class: "flex flex-col sm:flex-row justify-center items-center sm:space-x-8 space-y-8 sm:space-y-0",
img {
class: "rounded-full w-24 h-24",
alt: "headshot",
src: "/pictures/headshot.webp"
}
Introduction {},
Socials {}
},
HR {}
div {
class: "flex justify-between",
class: "flex flex-col justify-between sm:flex-row",
WorkExperience {},
Miscellaneous {},
},
@ -31,11 +36,6 @@ fn Introduction() -> Element {
rsx! {
div {
class: "flex",
img {
class: "rounded-full w-16 h-16 mx-16",
src: "/pictures/headshot.webp"
}
P { { translate!(i18, "cv.introduction_0") } },
P { { translate!(i18, "cv.introduction_1") } }
},
@ -195,7 +195,7 @@ fn CVEntry(props: CVEntryProps) -> Element {
time { class:"mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500", "{props.time}"},
h6 { class: "text-lg font-semibold text-gray-900 dark:text-white", "{props.title}"}
ul {
class: "flex",
class: "flex flex-wrap gap-2",
for (index, value) in props.technologies.iter().enumerate() {
li { key: "{index}", RandomBadge { text: "{value}"} }
}