keyemail/keyemail-dev
1
2
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Fixed styles on home

Browse source
This commit is contained in:
Patrick Hatsune 2024-06-04 11:37:18 -07:00
parent cd7102aa19
commit fafe1e67df
Signed by: keyemail
GPG key ID: 487C4334CE04CE66
1 changed files with 67 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
src/views/HomePage.vue
View file

@ -86,13 +86,35 @@ header {
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
font-family: 'Rubik', sans-serif; font-family: 'Rubik', sans-serif;
h1 {
color: white;
font-size: 3rem;
}
}
.pfp {
height: 130px !important;
width: 130px !important;
border: solid;
border-width: 4px;
border-radius: 50%;
border-color: white;
overflow: hidden;
margin-left: 20px;
user-select: none;
img {
width:100%;
height:100%;
object-fit: cover;
background-color: #afb5c8;
}
} }
#name { #name {
margin-left: 20px; margin-left: 20px;
} div {
#name div {
top: calc(100% + 5px); top: calc(100% + 5px);
left: 50%; left: 50%;
pointer-events: none; pointer-events: none;
@ -106,21 +128,21 @@ header {
color: white; color: white;
font-family: 'Rubik', sans-serif; font-family: 'Rubik', sans-serif;
border-radius: 5px; border-radius: 5px;
} }
header h1 { img {
color: white; pointer-events: none;
font-size: 3rem; }
}
header ul { ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: fit-content; width: fit-content;
gap: 5px; gap: 5px;
} user-select: none;
}
header li { li {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
@ -132,24 +154,7 @@ header li {
box-sizing: border-box; box-sizing: border-box;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
} }
.pfp {
height: 130px !important;
width: 130px !important;
border: solid;
border-width: 4px;
border-radius: 50%;
border-color: white;
overflow: hidden;
margin-left: 20px;
}
.pfp img {
width:100%;
height:100%;
object-fit: cover;
background-color: #afb5c8
} }
.intro { .intro {
@ -165,67 +170,18 @@ header li {
padding: 20px; padding: 20px;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;
}
.intro h1 { h1 {
font-size: 3.5rem; font-size: 3.5rem;
font-weight: 500; font-weight: 500;
} }
.intro p { p {
margin-top: 15px; margin-top: 15px;
font-size: 1.8rem; font-size: 1.8rem;
font-weight: 400; font-weight: 400;
max-width: 800px; max-width: 800px;
} }
article {
background-color: #151d2f;
height: 350px;
width: 700px;
margin-top: 90px;
border-radius: 10px;
padding: 20px;
}
article h1 {
font-size: 1.5rem;
color: white;
font-family: 'Rubik', sans-serif;
width: 100%;
text-align: center;
}
article div {
color: white;
font-family: 'Rubik', sans-serif;
font-weight: 300;
margin-top: 10px;
display: flex;
flex-direction: column-reverse;
overflow: auto;
height: 240px;
background-color: #111826;
padding: 10px;
border-radius: 10px;
}
article span {
margin: 8px 0;
}
article input {
all: unset;
margin-top: 10px;
background-color: #111826;
height: 40px;
color: white;
padding: 5px;
border-radius: 10px;
width: 100%;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
font-weight: 300;
} }
.morearrow { .morearrow {