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

174
src/views/HomePage.vue
View file

@ -86,52 +86,11 @@ header {
width: 100%; width: 100%;
border-radius: 10px; border-radius: 10px;
font-family: 'Rubik', sans-serif; font-family: 'Rubik', sans-serif;
}
#name { h1 {
margin-left: 20px; color: white;
} font-size: 3rem;
}
#name div {
top: calc(100% + 5px);
left: 50%;
pointer-events: none;
position: absolute;
translate: -50%;
z-index: 1;
white-space: nowrap;
padding: 5px;
height: 20px;
background-color: #151d2f;
color: white;
font-family: 'Rubik', sans-serif;
border-radius: 5px;
}
header h1 {
color: white;
font-size: 3rem;
}
header ul {
display: flex;
flex-direction: row;
width: fit-content;
gap: 5px;
}
header li {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
background-color: #151d2f;
height: 30px;
width: 30px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
} }
.pfp { .pfp {
@ -143,13 +102,59 @@ header li {
border-color: white; border-color: white;
overflow: hidden; overflow: hidden;
margin-left: 20px; margin-left: 20px;
user-select: none;
img {
width:100%;
height:100%;
object-fit: cover;
background-color: #afb5c8;
}
} }
.pfp img { #name {
width:100%; margin-left: 20px;
height:100%; div {
object-fit: cover; top: calc(100% + 5px);
background-color: #afb5c8 left: 50%;
pointer-events: none;
position: absolute;
translate: -50%;
z-index: 1;
white-space: nowrap;
padding: 5px;
height: 20px;
background-color: #151d2f;
color: white;
font-family: 'Rubik', sans-serif;
border-radius: 5px;
}
img {
pointer-events: none;
}
ul {
display: flex;
flex-direction: row;
width: fit-content;
gap: 5px;
user-select: none;
}
li {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
background-color: #151d2f;
height: 30px;
width: 30px;
box-sizing: border-box;
border-radius: 5px;
cursor: pointer;
}
} }
.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 {