darkicewolf50/personal_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(CSS): cards, colouration and placement finished for all 3 different supported sizes, phone, 1920p and ultrawide

Browse Source
This commit is contained in:
darkicewolf50 2025-04-24 11:48:21 -06:00
parent 33c933d455
commit 4d1e45359c
9 changed files with 155 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
assets/styling/contact.css
View File

@ -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;
}
}

4
assets/styling/ender.css
View File

@ -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 {

2
assets/styling/home.css
View File

@ -15,6 +15,6 @@
display: flex;
flex-flow: row wrap;
justify-content: space-between;
column-gap: 2svw;
column-gap: 1svw;
row-gap: 1svh;
}

1
assets/styling/main.css
View File

@ -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;

49
assets/styling/projectCards.css
View File

@ -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%; */
}

5
assets/styling/standardColoursandFonts.css
View File

@ -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;
}

47
assets/styling/techs.css
View File

@ -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;
}

7
src/views/contact.rs
View File

@ -9,10 +9,15 @@ pub fn Contact() -> Element {
document::Link { href: CONTACT_CSS, rel: "stylesheet" }
h2 { "Contact" }
div { id: "contact",
div {
div {
img {
src: PROFESSIONAL_PHOTO_JPG,
alt: "Borck's professional photo",
}
}
}
div {
div {
h4 { "Brock Tomlinson" }
ul {
@ -78,7 +83,7 @@ pub fn Contact() -> Element {
}
}
}
}
}
}
}

2
src/views/home.rs
View File

@ -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 {}