From 4d1e45359cd30a3bf2eafc3b001df5caaca3cf4b Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Thu, 24 Apr 2025 11:48:21 -0600 Subject: [PATCH] feat(CSS): cards, colouration and placement finished for all 3 different supported sizes, phone, 1920p and ultrawide --- assets/styling/contact.css | 41 ++++++-- assets/styling/ender.css | 4 +- assets/styling/home.css | 2 +- assets/styling/main.css | 1 + assets/styling/projectCards.css | 49 +++++---- assets/styling/standardColoursandFonts.css | 5 + assets/styling/techs.css | 47 ++++----- src/views/contact.rs | 113 +++++++++++---------- src/views/home.rs | 2 +- 9 files changed, 155 insertions(+), 109 deletions(-) diff --git a/assets/styling/contact.css b/assets/styling/contact.css index 821fed6..e9372f7 100644 --- a/assets/styling/contact.css +++ b/assets/styling/contact.css @@ -3,20 +3,27 @@ flex-direction: row; gap: 2svw; align-items: center; + justify-content: center; } #contact img { - flex: 1 1 50%; border-radius: 100%; - max-width: 40%; - object-fit: cover; + max-height: 250px; display: block; + background-color: var(--card-background-color); + padding: 0.5rem; } #contact div { + display: flex; + justify-content: center; + /* flex: 0 0 48%; */ +} + +#contact div div { display: flex; flex-direction: column; - flex: 1; + flex-basis: auto; } #contact div ul { @@ -46,9 +53,14 @@ } #contact div ul li { - justify-content: flex-start; - - border: 1px solid whitesmoke; + /* display: flex; + justify-content: flex-start; */ + /* text-wrap: nowrap; */ + padding-right: 1svw; + background-color: var(--card-background-color); + border-radius: var(--card-border-radius); + /* border: 1px solid whitesmoke; */ + padding: 0.5svh 1svw; } #contact div ul li a { @@ -68,7 +80,20 @@ } #contact ul li img { - height: 80px; + height: var(--img-width); + width: var(--img-height); object-fit: contain; border-radius: 0px; } + +@media only screen and (max-width: 430px) { + #contact ul li img { + display: none; + } + #contact img { + border-radius: 100%; + max-width: 100%; + max-height: 250px; + display: block; + } +} diff --git a/assets/styling/ender.css b/assets/styling/ender.css index ad28cc5..e42c555 100644 --- a/assets/styling/ender.css +++ b/assets/styling/ender.css @@ -10,11 +10,11 @@ footer div { display: flex; flex-direction: row; flex: 1 1 2; - justify-content: space-between; + justify-content: space-evenly; } footer img { - height: 100px; + height: 60px; } footer a { diff --git a/assets/styling/home.css b/assets/styling/home.css index 9170c2e..c64a3ff 100644 --- a/assets/styling/home.css +++ b/assets/styling/home.css @@ -15,6 +15,6 @@ display: flex; flex-flow: row wrap; justify-content: space-between; - column-gap: 2svw; + column-gap: 1svw; row-gap: 1svh; } diff --git a/assets/styling/main.css b/assets/styling/main.css index e21dfa4..6ff888f 100644 --- a/assets/styling/main.css +++ b/assets/styling/main.css @@ -7,6 +7,7 @@ body { h2 { width: 90%; border-bottom: var(--underlineTitle); + border-radius: var(--underlineTitleBorderRadius); margin: 2svh 0px; margin-left: 2svw; padding-left: 2svw; diff --git a/assets/styling/projectCards.css b/assets/styling/projectCards.css index fa5f0aa..b7443aa 100644 --- a/assets/styling/projectCards.css +++ b/assets/styling/projectCards.css @@ -2,21 +2,30 @@ display: flex; flex-direction: row; flex-wrap: wrap; + column-gap: 1svw; } .project-card { - display: flex; - flex-direction: column; - flex-wrap: wrap; - /* background-color: aqua; */ - flex: 0 1 48%; - gap: 1svw; + flex: 0 1 30%; + margin-bottom: 3svh; + background-color: var(--card-background-color); + border-radius: var(--card-border-radius); +} + +@media only screen and (max-width: 800px) { + .project-card { + flex: 0 1 auto; + } } .project-card img { - width: 96%; - height: 50svh; - align-self: center; + max-width: 100%; + + justify-self: center; padding-top: 1svh; + object-fit: contain; + color: transparent; + display: flex; + aspect-ratio: 3/2; } .project-title-info { @@ -24,7 +33,7 @@ flex-direction: row; border-bottom: var(--underlineTitle); - width: 80%; + border-radius: var(--underlineTitleBorderRadius); margin: 0px 2svw; padding: 0px 2svw; @@ -37,10 +46,15 @@ text-align: start; white-space: nowrap; align-self: center; + font-weight: normal; + text-wrap: wrap; + border-radius: var(--underlineTitleBorderRadius); } .project-title-info img { - height: 6svh; + height: var(--img-width); + width: var(--img-height); + padding: 1svh 0px; } .project-title-info div { @@ -59,21 +73,20 @@ .project-tech-logos { display: flex; - flex-direction: row; - flex-wrap: wrap; + flex-flow: row wrap; align-items: center; align-self: center; width: 90%; justify-content: flex-start; - column-gap: calc((100% - (60px * 5)) / 4); + column-gap: 0.5svw; row-gap: 1svw; - + padding-left: 2svw; padding-bottom: 1svh; } .project-tech-logos img { aspect-ratio: 1; - max-width: 60px; - max-height: 60px; - flex: 0 1 19%; + height: var(--img-width); + width: var(--img-height); + /* flex: 0 1 19%; */ } diff --git a/assets/styling/standardColoursandFonts.css b/assets/styling/standardColoursandFonts.css index 3a10ad8..61cc195 100644 --- a/assets/styling/standardColoursandFonts.css +++ b/assets/styling/standardColoursandFonts.css @@ -1,3 +1,8 @@ :root { --underlineTitle: 4px solid purple; + --underlineTitleBorderRadius: 4px; + --img-width: 32px; + --img-height: 32px; + --card-background-color: rgba(38, 38, 38, 0.5); + --card-border-radius: 0.5rem; } diff --git a/assets/styling/techs.css b/assets/styling/techs.css index fae64c1..9c8463c 100644 --- a/assets/styling/techs.css +++ b/assets/styling/techs.css @@ -2,23 +2,18 @@ --tech-gap: 4svw; } .tech-cat { - border: 1px solid salmon; - display: flex; - flex-flow: column wrap; - padding: 0px 2svw; + /* border: 1px solid salmon; */ + padding: 0px 1svw; padding-bottom: 2svh; margin-bottom: 3svh; - column-gap: var(--tech-gap); - flex: 1 1 30%; - min-width: clamp(250px, 33%, 100%); - - /* flex: 0 1 calc((100% - 2 * 2svw) / 3); */ + flex: 1 1 auto; + background-color: var(--card-background-color); + border-radius: var(--card-border-radius); } .tech-cat h3 { - display: flex; - /* flex: 0 1 100%; */ border-bottom: var(--underlineTitle); + border-radius: var(--underlineTitleBorderRadius); margin: 2svh 1svw; padding-left: 2svw; @@ -28,32 +23,32 @@ .tech-row { display: flex; flex-flow: row wrap; - column-gap: 2svw; - row-gap: 4svh; - justify-content: space-between; - align-items: stretch; + justify-content: space-evenly; + /* column-gap: 0.5svw; */ + row-gap: 1svh; } .tech-card { - border: 1px solid whitesmoke; + /* border: 1px solid whitesmoke; */ display: flex; flex-direction: column; - + justify-content: space-around; align-items: center; - padding-bottom: 1svh; - flex: 0 1 calc((100% - 2 * var(--tech-gap)) / 4); + + flex: 0 1 70px; text-decoration: none; color: inherit; - padding: 0px 1svw; + padding: 0px 0svw; padding-top: 2svh; + padding-bottom: 0.5svh; + background-color: var(--card-background-color); + border-radius: var(--card-border-radius); } .tech-card img { - width: calc(100%- 2svw); - max-height: 40svh; - min-height: 50px; - min-width: 50px; + width: 32px; + height: 32px; aspect-ratio: 1; object-fit: contain; } @@ -69,7 +64,9 @@ } .tech-card h4 { - margin: 2svh 0px; + margin: 1svh 0.5svw; + width: 80px; + text-align: center; font-weight: normal; } diff --git a/src/views/contact.rs b/src/views/contact.rs index 578dfbd..f5557f4 100644 --- a/src/views/contact.rs +++ b/src/views/contact.rs @@ -9,76 +9,81 @@ pub fn Contact() -> Element { document::Link { href: CONTACT_CSS, rel: "stylesheet" } h2 { "Contact" } div { id: "contact", - img { - src: PROFESSIONAL_PHOTO_JPG, - alt: "Borck's professional photo", + div { + div { + img { + src: PROFESSIONAL_PHOTO_JPG, + alt: "Borck's professional photo", + } + } } div { - h4 { "Brock Tomlinson" } - ul { - li { "FullStack Webdev and Student Software Engineer" } - li { - a { href: "mailto:darkicewolf50@gmail.com", - img { - src: "https://www.svgrepo.com/show/491226/email.svg", - alt: "Email icon/logo", - } - div { - p { "Email I check:" } - p { "darkicewolf50@gmail.com" } + div { + h4 { "Brock Tomlinson" } + ul { + li { "FullStack Webdev and Student Software Engineer" } + li { + a { href: "mailto:darkicewolf50@gmail.com", + img { + src: "https://www.svgrepo.com/show/491226/email.svg", + alt: "Email icon/logo", + } + div { + p { "Email I check:" } + p { "darkicewolf50@gmail.com" } + } } } - } - li { - a { href: "mailto:brock@eatsleepski.com", - img { - src: "https://www.svgrepo.com/show/491226/email.svg", - alt: "Email icon/logo", - } - div { - p { "Professional Email:" } - p { "brock@eatsleepski.com" } + li { + a { href: "mailto:brock@eatsleepski.com", + img { + src: "https://www.svgrepo.com/show/491226/email.svg", + alt: "Email icon/logo", + } + div { + p { "Professional Email:" } + p { "brock@eatsleepski.com" } + } } } - } - li { - a { - img { - src: "https://www.svgrepo.com/show/512317/github-142.svg", - alt: "Github logo", + li { + a { + img { + src: "https://www.svgrepo.com/show/512317/github-142.svg", + alt: "Github logo", + } + p { "darkicewolf50" } } - p { "darkicewolf50" } } - } - li { - a { - img { - src: "https://www.svgrepo.com/show/521725/linkedin.svg", - alt: "LinkedIn logo", + li { + a { + img { + src: "https://www.svgrepo.com/show/521725/linkedin.svg", + alt: "LinkedIn logo", + } + p { "Brock Tomlinson" } } - p { "Brock Tomlinson" } } - } - li { - a { - img { - src: "https://www.svgrepo.com/show/519925/twitch.svg", - alt: "Twitch logo", + li { + a { + img { + src: "https://www.svgrepo.com/show/519925/twitch.svg", + alt: "Twitch logo", + } + p { "darkicewolf50" } } - p { "darkicewolf50" } } - } - li { - a { - img { - src: "https://www.svgrepo.com/show/521936/youtube.svg", - alt: "Youtube logo", + li { + a { + img { + src: "https://www.svgrepo.com/show/521936/youtube.svg", + alt: "Youtube logo", + } + p { "@darkicewolf50" } } - p { "@darkicewolf50" } } } } - } } } diff --git a/src/views/home.rs b/src/views/home.rs index 2bf2ad9..5ccb9f9 100644 --- a/src/views/home.rs +++ b/src/views/home.rs @@ -45,8 +45,8 @@ pub fn Home() -> Element { TechCat { cat: "Backend", tech_vec: backend } TechCat { cat: "Frontend", tech_vec: frontend } TechCat { cat: "Databases", tech_vec: databases } + TechCat { cat: "Platforms", tech_vec: platforms } TechCat { cat: "Tools", tech_vec: tools } - TechCat { cat: "Platfroms", tech_vec: platforms } } } Contact {}