From 568fd64a8dc915a801d71ddaaacc3c382496df4e Mon Sep 17 00:00:00 2001 From: Henry-Hiles Date: Sat, 25 Jan 2025 16:57:26 +0000 Subject: [PATCH] Fix responsiveness --- src/pages/index.astro | 8 +++----- src/styles/global.css | 6 ++++++ src/styles/index.css | 41 +++++++++++++++++++++-------------------- 3 files changed, 30 insertions(+), 25 deletions(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 22d8da0..306cec1 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -13,11 +13,9 @@ import metaFrontEnd from "../images/certificates/metaFrontEnd.png" --- -
-
- Henry Hiles - Full Stack Web Developer and Discord Bot Developer -
+
+ Henry Hiles + Full Stack Web Developer and Discord Bot Developer
diff --git a/src/styles/global.css b/src/styles/global.css index a9a84c0..6fe3f6c 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,3 +1,7 @@ +* { + box-sizing: border-box; +} + :root { --primary: 78, 148, 228; background-image: url(background.svg); @@ -41,6 +45,8 @@ main { display: flex; align-items: center; gap: 2em; + + padding: 1em; } mdui-divider { diff --git a/src/styles/index.css b/src/styles/index.css index c3b3e79..fe7898f 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -1,3 +1,22 @@ +header { + display: flex; + flex-direction: column; + font-size: 2em; + justify-content: center; + align-items: center; + + & img { + max-width: 35rem; + height: min-content; + } + + & span { + display: flex; + text-align: center; + padding: 0 0.5rem; + } +} + section { max-width: 1000px; display: flex; @@ -6,7 +25,7 @@ section { & div { display: flex; justify-content: center; - gap: 1.5em; + gap: 1em; flex-wrap: wrap; } @@ -21,28 +40,10 @@ section { font-size: 1.3em; } - &#home { - font-size: 2em; - justify-content: center; - align-items: center; - padding-bottom: 1em; - - & img { - max-width: 35rem; - height: min-content; - } - - & span { - display: flex; - text-align: center; - padding: 0 0.5rem; - } - } - &#about { & #stats img { width: 45%; - min-width: 400px; + min-width: 300px; } & #certificates {