From ef590b0f2f549830a2c58faf1585aae1a620b39c Mon Sep 17 00:00:00 2001 From: Violet Date: Fri, 22 Sep 2023 13:57:15 +0000 Subject: [PATCH] Improvements to main page, proper scaling. --- static/index.html | 16 ++++++---------- static/style.css | 28 ++++++++++++++++++++-------- 2 files changed, 26 insertions(+), 18 deletions(-) diff --git a/static/index.html b/static/index.html index 3194519..eb2dc8b 100644 --- a/static/index.html +++ b/static/index.html @@ -5,7 +5,8 @@ - + Violet's Purgatory @@ -13,20 +14,15 @@
-

Violets Purgatory

-

Hi! I'm Violet, a teenage web and game developer.

+

Violets Purgatory

+ +


Hi! I'm Violet, a teenage web and game developer.

My main engine is Godot, and i'm currently bouncing between projects, but I am mainly focusing on a space shooter and a boss rush right now.

If you have any issues with the site, put up an issue on codeberg!

-
-

Keep in mind that, in general, work on everything may be slowed down for now as I enter college and work on robotics.

- -

If you need to reach out to me for any reason, please go check my socials! I prefer Revolt, and it will likely be fastest.

- +
diff --git a/static/style.css b/static/style.css index e07fa6f..6e37661 100644 --- a/static/style.css +++ b/static/style.css @@ -16,7 +16,9 @@ h1 { color: rgb(225, 215, 255); - font-size: 3rem; + font-size: 2.5rem; + margin: 0; + padding: 10px; } h2 { @@ -42,9 +44,11 @@ body { #card { border: rgb(225, 225, 255) 5px solid; border-radius: 25px; - width: 90%; - height: 90%; - padding: 30px; + max-width: 95%; + max-height: 95%; + /* max-width: 1200px; */ + /* max-height: 650px; */ + padding: 5px; background-color: var(--bg-color-2); background-image: linear-gradient(var(--bg-color-1), var(--bg-color-2)); overflow: auto; @@ -54,7 +58,7 @@ body { text-align: center; border: rgb(225, 225, 255) 4px solid; border-radius: 25px; - padding: 20px; + padding: 5px; margin: 20px; background-color: var(--bg-color-2); background-image: linear-gradient(var(--bg-color-1), var(--bg-color-2)); @@ -71,6 +75,11 @@ body { align-items: flex-end !important; } */ +#links { + margin: 0; + padding: 0; +} + a { border: 2px white solid; border-radius: 0px; @@ -86,19 +95,22 @@ a { a:hover { background-color: rgb(60, 50, 75); - transform: scale(1.225); + transform: scale(1.2); color: white; transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1); } p { color: white; - font-size: 1.25rem; + font-size: 1.2rem; + padding: 0; + margin: 5px; } img { - width: 100%; + width: 30%; max-width: 150px; + min-width: 100px; border: rgb(175, 75, 200) 4px solid; border-radius: 50%; transform: scale(0.9);