tweaking html and css

renderedghost · Jul 16, 2023 · d64f95f · d64f95f
1 parent 4c08dfc
commit d64f95f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -53,7 +53,7 @@ <h2>Don't leave success to chance!</h2>
         <div class="tooltip"><img src="avatar.jpg" data-tooltip="Hello There! 👋" class="avatar"></img></div>
         <div class="card-content">
           <p class="name">Barry Prendergast</p>
-          <p class="context">Product Designer &VerticalSeparator; Berlin, Germany</p>
+          <p class="meta">Product Designer &VerticalSeparator; Berlin, Germany</p>
         </div>
         <div class="button-group">
           <button class="bp--button" id="contact">Contact <span class="fa-sharp fa-regular fa-envelope"></span></button>
@@ -63,7 +63,7 @@ <h2>Don't leave success to chance!</h2>
         </div>
       </div>
       <!-- <hr class="bp--divider"> -->
-      <div class="context">Copyright © 2023 — Barry Prendergast</div>
+      <div class="meta context">Copyright © 2023 — Barry Prendergast</div>
       <!-- <div class="button-group">
         <button class="bp--button" id="contact">Contact <span class="fa-sharp fa-regular fa-envelope"></span></button>
         <a href="https://barryprendergast.webflow.io/" target="_blank" class="bp-link">Portfolio <span class="fa-sharp fa-regular fa-arrow-up-right-from-square"></span></a>

diff --git a/style/style.css b/style/style.css
@@ -145,6 +145,7 @@ a:active {
     font-size: var(--font-size);
     line-height: var(--line-height-compact);
     font-family: var(--font-sans);
+    color: var(--c-text-secondary);
     font-weight: 500;
     text-transform: uppercase;
 }
@@ -185,7 +186,7 @@ a:active {
 }
 
 .context {
-    font-size: var(--font-size);
+    font-size: var(--font-size-s);
 }
 
 .avatar {
@@ -230,4 +231,8 @@ a:active {
 .name {
     line-height: var(--line-height-none);
     font-weight: 600;
+}
+
+.meta {
+    color: var(--c-text-secondary);
 }
diff --git a/style/tokens.css b/style/tokens.css
@@ -2,9 +2,11 @@
 :root {
     /* Core */
     --s-mono-100: hsl(236, 0%, 100%);
-    --s-mono-95: hsl(236, 16%, 98%);
-    --s-mono-70: hsl(236, 16%, 70%);
-    --s-mono-40: hsl(236, 16%, 40%);
+    --s-mono-98: hsl(236, 16%, 98%);
+    --s-mono-96: hsl(236, 16%, 96%);
+    --s-mono-76: hsl(236, 16%, 76%);
+    --s-mono-38: hsl(236, 16%, 38%);
+    --s-mono-24: hsl(236, 16%, 24%);
     --s-mono-0: hsl(236, 16%, 0%);
     --s-blue-dark-2: hsl(236, 100%, 17%);
     --s-blue-dark-1: hsl(236, 100%, 35%);
@@ -14,7 +16,7 @@
     --s-yellow: #fbb800;
     /* Applied */
     --c-bg: var(--s-mono-100);
-    --c-bg-secondary: var(--s-mono-95);
+    --c-bg-secondary: var(--s-mono-98);
     --c-link-primary: var(--s-blue-dark-1);
     --c-link-primary-hover: var(--s-blue);
     --c-link-primary-active: var(--s-blue-dark-2);
@@ -24,8 +26,8 @@
     --c-shadow: #f4f4f4;
     --c-text: var(--s-mono-0);
     --c-text-inverted: var(--s-mono-100);
-    --c-text-secondary: var(--s-mono-40);
-    --c-border:var(--s-mono-70);
+    --c-text-secondary: var(--s-mono-38);
+    --c-border:var(--s-mono-76);
     --c-highlight: var(--s-yellow);
     --box-shadow: 2px 2px 10px;
 }