Reformate css with html's work li heading

alizainaslam · Mar 13, 2024 · 600da1e · 600da1e
1 parent cf7b0cf
commit 600da1e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -113,14 +113,21 @@ <h2>Motion Design</h2>
       <!-- Work Page -->
       <div id="work" class="section">
         <ul class="work-heading">
-          <li>Work</li>
-          <li>Work</li>
-          <li>Work</li>
-          <li>Work</li>
-          <li>Work</li>
-          <li>Work</li>
-          <li>Work</li>
-          <li>Work</li>
+          <li>
+            <h2>Work</h2>
+          </li>
+          <li>
+            <h2>Work</h2>
+          </li>
+          <li>
+            <h2>Work</h2>
+          </li>
+          <li>
+            <h2>Work</h2>
+          </li>
+          <li>
+            <h2>Work</h2>
+          </li>
         </ul>
       </div>
 

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -3,14 +3,23 @@
   padding: 0;
   box-sizing: border-box;
 }
+
+:root {
+  --primary-color: #f5f3ef;
+  --secondary-color: #1e1e21;
+  --font-size: calc(18px + 0.390625vw);
+  --border: 1.7px solid var(--secondary-color);
+}
+
 html,
 body {
   width: 100%;
   height: 100%;
-  background-color: #f5f3ef;
+  background-color: var(--primary-color);
   font-family: Arial, Helvetica, sans-serif;
-  font-size: 18px;
+  font-size: var(--font-size);
 }
+
 li {
   list-style: none;
 }
@@ -23,13 +32,13 @@ header {
 }
 
 nav > h2 {
-  color: #f5f3ef;
+  color: var(--primary-color);
   text-align: center;
   cursor: pointer;
-  background-color: #1e1e21;
+  background-color: var(--secondary-color);
   border-radius: 500px;
-  padding: 0.9rem 1.4rem;
-  font-size: 1rem;
+  padding: 0.6rem 1rem;
+  font-size: var(--font-size);
   line-height: 110%;
 }
 
@@ -54,7 +63,7 @@ nav > h2 {
 }
 .location > h2 {
   font-weight: 600;
-  font-size: 1.1rem;
+  font-size: var(--font-size);
 }
 .arrow {
   display: inline-block;
@@ -81,7 +90,7 @@ nav > h2 {
 .skill-container {
   display: flex;
   padding-bottom: 30px;
-  border-bottom: 2.3px solid #1e1e21;
+  border-bottom: var(--border);
 }
 .about-heading {
   font-size: 5.7vw;
@@ -90,11 +99,10 @@ nav > h2 {
   letter-spacing: -4.5px;
   margin-right: 30px;
   padding-right: 10px;
-  border-right: 2px solid #1e1e21;
+  border-right: var(--border);
 }
 
 .about-me {
-  font-size: 3vw;
   flex-basis: 40%;
   position: relative;
 }
@@ -115,7 +123,7 @@ nav > h2 {
 .skill-heading {
   flex: 1;
   margin-right: 30px;
-  border-right: 2px solid #1e1e21;
+  border-right: var(--border);
 }
 .skills {
   flex: 2.5;
@@ -124,13 +132,13 @@ nav > h2 {
 .skill-top-container {
   display: flex;
   gap: 30px;
-  border-bottom: 1.5px solid #1e1e21;
+  border-bottom: var(--border);
   margin-bottom: 25px;
   padding-bottom: 25px;
 }
 .digital-design,
 .interaction-design {
-  border-right: 1.5px solid #1e1e21;
+  border-right: var(--border);
   padding-right: 25px;
   flex: 1;
 }
@@ -152,7 +160,6 @@ nav > h2 {
 /* Work */
 .work-heading {
   display: flex;
-  font-size: 3.5vw;
   justify-content: space-between;
   font-weight: bolder;
   overflow: hidden;
@@ -176,14 +183,14 @@ nav > h2 {
   justify-content: flex-end;
   gap: 20px;
 }
-.work-info p {
+p {
   padding: 8px 0px 15px 0px;
-  font-size: 2vw;
+  font-size: var(--font-size);
 }
 .design-tag,
 .design-year-tag {
-  background-color: #1e1e21;
-  color: #f5f3ef;
+  background-color: var(--secondary-color);
+  color: var(--primary-color);
   border-radius: 500px;
   padding: 12px 17px;
 }
@@ -207,7 +214,6 @@ nav > h2 {
     height: 400px;
   }
   .about-container {
-    display: flex;
     flex-direction: column-reverse;
   }
   .about-heading {
@@ -230,7 +236,6 @@ nav > h2 {
     width: 40px;
   }
   .skill-container {
-    display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     gap: 20px;
@@ -243,20 +248,18 @@ nav > h2 {
   }
   .skill-top-container,
   .skill-bottom-container {
-    display: flex;
     flex-direction: column;
   }
   .digital-design,
   .interaction-design {
     border-right: none;
-    border-bottom: 1.5px solid #1e1e21;
+    border-bottom: var(--border);
     padding-bottom: 25px;
   }
 
   /* Work */
   .work-heading {
     align-items: center;
-    display: flex;
     font-size: 5vw;
     gap: 10px;
     overflow: hidden;
@@ -266,13 +269,10 @@ nav > h2 {
     flex-direction: column;
     align-items: flex-start;
   }
-  .work-info p {
-    padding: 8px 0px 15px 0px;
-    font-size: 3.5vw;
-  }
+
   .design-tag,
   .design-year-tag {
-    font-size: 3vw;
+    font-size: var(--font-size);
   }
 }