simponic/simponic.xyz
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make styles better

Browse Source
This commit is contained in:
Elizabeth Hunt 2024-04-23 17:26:31 -07:00
parent 1b45ca7370
commit 4d3936dbe0
Signed by: simponic
GPG Key ID: 2909B9A7FF6213EE
2 changed files with 80 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
css/styles.css
View File

@ -1,7 +1,7 @@
body {
margin: 0;
background-color: #ab6f94;
font-family: 'Trebuchet MS', sans-serif;
font-family: "Trebuchet MS", sans-serif;
}
.top-container {
@ -14,7 +14,10 @@ body {
width: 100%;
border-radius: 50%;
max-width: 40vh;
box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
max-height: 40vh;
box-shadow:
0 10px 16px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.projects-grid {
@ -31,9 +34,11 @@ body {
color: black;
border-radius: 8px;
flex: 1;
background-color: #74b05a;
background-color: #7ac2aa;
display: flex;
box-shadow:0 8px 12px 0 rgba(0,0,0,0.2),0 6px 12px 0 rgba(0,0,0,0.17);
box-shadow:
0 8px 12px 0 rgba(0, 0, 0, 0.2),
0 6px 12px 0 rgba(0, 0, 0, 0.17);
min-width: 300px;
transition: transform 250ms;
padding: 12px;
@ -41,7 +46,7 @@ body {
}
.project:hover {
background-color: #609c46;
background-color: #6dad98;
transform: translateY(-8px);
cursor: pointer;
}
@ -62,3 +67,47 @@ body {
flex-direction: column;
text-align: left;
}
.about {
margin-left: auto;
margin-right: auto;
flex: 1;
background-color: var(--background-color-2);
border: 1px solid var(--border-color);
padding: 10px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
gap: 20px;
max-width: 600px;
line-break: anywhere;
}
.about-text {
flex: 4;
text-align: left;
}
.avatar {
flex: 2;
}
@media (max-width: 500px) {
.projects-grid {
padding: 12px;
}
.project {
min-width: 200px;
}
.project-logo-container {
font-size: 3rem;
}
.about {
flex-direction: column;
gap: 12px;
}
}

12
index.html
View File

@ -18,8 +18,12 @@
</head>
<body>
<div class="top-container animate__animated animate__fadeIn">
<div class="about">
<div class="avatar">
<img src="images/profile.png" class="profile-picture" />
<h3>
</div>
<div class="about-text">
<p>
👋 hello, im simponic!
<br />
❤️ i like math, cooking, running, and penguins.
@ -32,11 +36,13 @@
<br />
✉️ <a href="mailto:elizabeth@simponic.xyz">elizabeth@simponic.xyz</a>.
<br />
📖 this page hosts strictly static content! play around if you'd like :D
📖 this page hosts fun stuff! play around if you'd like
<br />
🐙 my gitea is at
<a href="https://git.simponic.xyz/simponic">/simponic</a>.
</h3>
</p>
</div>
</div>
<div class="projects-grid">
<a class="project" href="/euler-golf/">
<div class="project-logo-container">