tweaking html and css

renderedghost · Jul 16, 2023 · 8aad8e7 · 8aad8e7
1 parent ead5c2e
commit 8aad8e7
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -53,11 +53,11 @@ <h2>Don't leave success to chance.</h2>
       </p>
       <div class="card">
         <div class="tooltip"><img src="avatar.jpg" data-tooltip="Hello There! 👋" class="avatar"></img></div>
-        <h2>Barry Prendergast</h2>
-        <p class="context">Product Designer &VerticalSeparator; Berlin, Germany</p>
-        <div class="button-group">
-          <button class="bp--button" id="contact">Contact <span class="fa-sharp fa-regular fa-envelope"></span></button>
+        <div class="card-content">
+          <h2 class="name">Barry Prendergast</h2>
+          <p class="context">Product Designer &VerticalSeparator; Berlin, Germany</p>
         </div>
+        <button class="bp--button" id="contact">Contact <span class="fa-sharp fa-regular fa-envelope"></span></button>
       </div>
       <!-- <hr class="bp--divider"> -->
       <div class="context">Copyright © 2023 — Barry Prendergast</div>

diff --git a/style/reset.css b/style/reset.css
@@ -179,26 +179,30 @@ h6 {
     margin: 0;
     padding: 0;
     font-weight: 600;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
 }
 
 h1{
     font-size: var(--font-size-lx);
-    line-height: var(--line-height-lx);
+    line-height: var(--line-height-compact);
 }
 
 h2 {
     font-size: var(--font-size-l);
-    line-height: var(--line-height-l);
+    line-height: var(--line-height-compact);
 }
 
 h3 {
     font-size: var(--font-size-m);
-    line-height: var(--line-height-m);
+    line-height: var(--line-height-compact);
 }
 
 h4 {
     font-size: var(--font-size);
-    line-height: var(--line-height);
+    line-height: var(--line-height-compact);
 }
 
 mark {

diff --git a/style/style.css b/style/style.css
@@ -4,7 +4,7 @@ html {
 
 body {
     font-size: var(--font-size);
-    line-height: var(--line-height-open);
+    line-height: var(--line-height-spacious);
     font-family: var(--font-sans);
     font-weight: 400;
     color: var(--color-text);
@@ -25,6 +25,12 @@ body {
     background-color: #fbb800;
 }
 
+*:focus-visible {
+    outline-offset: 2px;
+    border-radius: var(--border-radius);
+    outline: 3px solid #fbb800
+}
+
 footer,
 header,
 main,
@@ -76,11 +82,11 @@ a:hover {
     text-decoration: underline
 }
 
-a:focus-visible {
+/* a:focus-visible {
     outline-offset: 4px;
     border-radius: var(--border-radius);
     outline: 4px solid #fbb800
-}
+} */
 
 .bp--button {
     color: #fff;
@@ -89,7 +95,9 @@ a:focus-visible {
     border-radius: var(--border-radius);
     border: none;
     padding: .5rem .75rem;
+    margin:0;
     font-size: var(--font-size);
+    line-height: var(--line-height-comfortable);
     font-weight: 400;
     transition: box-shadow 80ms ease-in, color 80ms linear, transform 80ms ease-in-out, background-color 80ms linear;
     box-shadow: 0 0 rgba(54, 51, 102, .5)
@@ -109,13 +117,13 @@ a:focus-visible {
     box-shadow: 0 2px 1px rgba(54, 51, 102, .5)
 }
 
-.bp--button:focus-visible {
+/* .bp--button:focus-visible {
     outline-offset: 2px;
     background-color: #01f;
     border-radius: var(--border-radius);
     outline: 3px solid #fbb800;
     transform: scale(1.05)
-}
+} */
 
 .bp--button.emphasis-low {
     color: #000cb3;
@@ -156,15 +164,15 @@ a:focus-visible {
 
 #display {
     font-size: var(--font-size-lxxxxx);
-    line-height: var(--line-height-base);
+    line-height: var(--line-height-comfortable);
     font-weight: 300;
 }
 
 .overline {
     margin: 0;
     padding: 0;
     font-size: var(--font-size);
-    line-height: var(--line-height);
+    line-height: var(--line-height-compact);
     font-family: var(--font-sans);
     font-weight: 500;
     text-transform: uppercase;
@@ -176,7 +184,7 @@ a:focus-visible {
     flex-wrap: wrap;
     flex-direction: row;
     font-size: var(--font-size-s);
-    line-height: var(--line-height-snug);
+    line-height: var(--line-height-compact);
 }
 
 .bp--divider {
@@ -196,18 +204,25 @@ a:focus-visible {
     flex-wrap: nowrap;
     align-items: flex-start;
     margin: 0;
-    padding: var(--gap-l);
+    padding: var(--gap);
     gap: var(--gap-s);
     border: 1px solid var(--color-border);
     border-radius: var(--border-radius);
 }
 
+.card-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-sx);
+    margin-bottom: var(--gap-s);
+}
+
 .context {
     font-size: var(--font-size);
 }
 
 .avatar {
-    height: 4rem;
+    height: 3rem;
     width: auto;
     aspect-ratio: auto;
     border-radius: var(--border-radius-circle);
@@ -221,7 +236,7 @@ a:focus-visible {
 .tooltip-container {
     position: absolute;
     font-size: var(--font-size-s);
-    line-height: var(--line-height-snug);
+    line-height: var(--line-height-none);
     background-color: var(--color-text);
     color: var(--color-bg);
     padding: var(--gap-s);
@@ -243,4 +258,9 @@ a:focus-visible {
     flex-direction: row;
     align-items: center;
     gap: var(--gap);
+}
+
+.name {
+    line-height: var(--line-height-none);
+    font-weight: 500;
 }
diff --git a/style/tokens.css b/style/tokens.css
@@ -28,6 +28,7 @@
     --width-content: 1044px;
     --width-max: 100%;
     /* Spaces */
+    --gap-sx: 0.25rem;
     --gap-s: 0.5rem;
     --gap: 1rem;
     --gap-l: 1.5rem;
@@ -53,7 +54,8 @@
     --font-size-lxxxx: 2.75rem;
     --font-size-lxxxxx: 3rem;
     /* Line Height */
-    --line-height-snug: 1.2;
-    --line-height-base: 1.4;
-    --line-height-open: 1.6;
+    --line-height-none: 1;
+    --line-height-compact: 1.2;
+    --line-height-comfortable: 1.4;
+    --line-height-spacious: 1.6;
 }