From 0b654657930c9cd6849efaa332b01a6a17c41456 Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Sat, 11 Sep 2021 15:02:40 +0100 Subject: [PATCH] some additional tweaks to CSS + addressed some accessibility concerns --- .../profile-card-component/css/style.css | 18 ++--- .../newbie/profile-card-component/index.html | 76 ++++++++++--------- index.html | 1 + 3 files changed, 50 insertions(+), 45 deletions(-) diff --git a/FrontendMentor/newbie/profile-card-component/css/style.css b/FrontendMentor/newbie/profile-card-component/css/style.css index 0ba4501..38713ae 100644 --- a/FrontendMentor/newbie/profile-card-component/css/style.css +++ b/FrontendMentor/newbie/profile-card-component/css/style.css @@ -8,20 +8,17 @@ } :root { - --site-color: hsl(185, 75%, 39%); --dark-cyan: hsl(185, 75%, 39%); --dark-grayish-blue: hsl(227, 10%, 46%); --very-dark-desaturated-blue: hsl(229, 23%, 23%); --dark-gray: hsl(0, 0%, 59%); --border-gray: hsla(228, 9%, 92%, 1); - /* default font stuff */ --page-base-font-size: 16px; /* for rem calculations*/ --default-font-size: 18px; --location-font-size: 14px; --label-font-size: 10px; - } html { @@ -30,7 +27,7 @@ html { } body { - background-color: var(--site-color); + background-color: var(--dark-cyan); font-size: var(--default-font-size); font-weight: 700; font-family: 'Kumbh Sans', sans-serif; @@ -78,6 +75,12 @@ body { .nameAndAge { margin-top: 4.5rem; display: inline-flex; + padding-bottom: 0.25rem; +} + +.border { + border: 1px solid var(--border-gray); + margin-top: 1.5rem; } .stats { @@ -98,11 +101,7 @@ body { font-size: var(--location-font-size); margin-top: 0.5rem; -} - -.border { - border: 1px solid var(--border-gray); - margin-top: 1.5rem; + padding-bottom: 0.25rem; } .label { @@ -111,6 +110,7 @@ body { color: var(--dark-grayish-blue); margin-top: 0.5625rem; + padding-bottom: 0.1875rem; } .topCircle, .bottomCircle { diff --git a/FrontendMentor/newbie/profile-card-component/index.html b/FrontendMentor/newbie/profile-card-component/index.html index 5b6ebb4..0b53c90 100644 --- a/FrontendMentor/newbie/profile-card-component/index.html +++ b/FrontendMentor/newbie/profile-card-component/index.html @@ -17,46 +17,50 @@ --> -
-
-
-
-
-
-
-
-
- Victor Crest +
+
+
+
+
+
+
+
+
+
+ Victor Crest +
+
+ 26 +
+
+
+ London
-
- 26 -
-
- London -
-
-
-
-
-
80K
-
Followers
-
- -
-
1.4K
-
Photos
+
+
+
+
80K
+
Followers
+
+ +
+
1.4K
+
Photos
+
+
-
-
-
- Challenge by Frontend Mentor. - Coded by Robert McGovern. -
+
+ \ No newline at end of file diff --git a/index.html b/index.html index 4b44986..5348e8b 100644 --- a/index.html +++ b/index.html @@ -34,6 +34,7 @@
  • Four Card Feature Section page
  • Article Preview Component
  • Stats Preview Card Component
    • +
  • Profile Card Component