diff options
| author | Elizabeth Hunt <elizabeth.hunt@simponic.xyz> | 2024-04-23 17:26:31 -0700 |
|---|---|---|
| committer | Elizabeth Hunt <elizabeth.hunt@simponic.xyz> | 2024-04-23 17:26:31 -0700 |
| commit | 4d3936dbe06e626e6fd2193085341ae917d79514 (patch) | |
| tree | 0a6c82a6ec42f013e5626c67c5f0c60bc38a4ba6 | |
| parent | 1b45ca73704c47bf2db8086692a3933347867061 (diff) | |
| download | simponic.xyz-4d3936dbe06e626e6fd2193085341ae917d79514.tar.gz simponic.xyz-4d3936dbe06e626e6fd2193085341ae917d79514.zip | |
make styles better
| -rw-r--r-- | css/styles.css | 61 | ||||
| -rw-r--r-- | index.html | 44 |
2 files changed, 80 insertions, 25 deletions
diff --git a/css/styles.css b/css/styles.css index df5462b..7957112 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,12 +1,12 @@ body { margin: 0; background-color: #ab6f94; - font-family: 'Trebuchet MS', sans-serif; + font-family: "Trebuchet MS", sans-serif; } .top-container { text-align: center; - height: 100vh; + height: 100vh; padding: 24px; } @@ -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; + } +} @@ -18,25 +18,31 @@ </head> <body> <div class="top-container animate__animated animate__fadeIn"> - <img src="images/profile.png" class="profile-picture" /> - <h3> - 👋 hello, im simponic! - <br /> - ❤️ i like math, cooking, running, and penguins. - <br /> - ⛓️ <a href="https://www.linkedin.com/in/simponic/">linkedin</a>. - <br /> - 📷 <a href="https://www.instagram.com/simponic03/">instagram</a>. - <br /> - 🔥 <a href="https://hatecomputers.club">hatecomputers.club</a>. - <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 - <br /> - 🐙 my gitea is at - <a href="https://git.simponic.xyz/simponic">/simponic</a>. - </h3> + <div class="about"> + <div class="avatar"> + <img src="images/profile.png" class="profile-picture" /> + </div> + <div class="about-text"> + <p> + 👋 hello, im simponic! + <br /> + ❤️ i like math, cooking, running, and penguins. + <br /> + ⛓️ <a href="https://www.linkedin.com/in/simponic/">linkedin</a>. + <br /> + 📷 <a href="https://www.instagram.com/simponic03/">instagram</a>. + <br /> + 🔥 <a href="https://hatecomputers.club">hatecomputers.club</a>. + <br /> + ✉️ <a href="mailto:elizabeth@simponic.xyz">elizabeth@simponic.xyz</a>. + <br /> + 📖 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>. + </p> + </div> + </div> <div class="projects-grid"> <a class="project" href="/euler-golf/"> <div class="project-logo-container"> |