Decreased spacing

webdevsk · Sep 7, 2023 · 638ce08 · 638ce08
1 parent fde691f
commit 638ce08
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 23 deletions.
diff --git a/src/index.css b/src/index.css
@@ -65,12 +65,9 @@
   h2,
   h3,
   h4,
-  h5 {
-    @apply font-bold text-theme;
-  }
-
+  h5,
   h6 {
-    @apply font-semibold text-accent;
+    @apply font-bold text-theme;
   }
 
   p,

diff --git a/src/resume.js b/src/resume.js
@@ -60,7 +60,7 @@ const resume = {
     experiences: [
       {
         position:
-          "E-commerce Operations Associate, Inventory Management Associate.",
+          "E-commerce Operations Associate, Inventory Management Associate",
         company: "Wadi Groceries, Carrefour",
         location: "Riyadh, Saudiarabia",
         dateFrom: "APR 2018",

diff --git a/src/templates/Template1.css b/src/templates/Template1.css
@@ -6,9 +6,9 @@
 
 #template {
   --theme: #2a014f;
-  --accent: #242b52;
+  --accent: #340ce4;
   --body: #23192b;
-  --template-gap: 0.75rem;
+  --template-gap: 0.5rem;
   @apply flex flex-col text-body;
 }
 
@@ -24,7 +24,7 @@
   #contact-info {
     @apply overflow-hidden pb-template;
     .row {
-      @apply -mx-2 flex flex-wrap divide-x divide-accent;
+      @apply -mx-2 flex flex-wrap divide-x divide-theme;
     }
     .col {
       @apply flex gap-1 px-2;
@@ -36,17 +36,17 @@
   }
 
   #about-me {
-    @apply border-t border-accent py-template;
+    @apply border-t border-theme py-template;
   }
 
   #skills {
     @apply overflow-hidden;
     & > .row {
-      @apply -mx-4 flex flex-wrap divide-x divide-accent border-accent;
+      @apply -mx-4 flex flex-wrap divide-x divide-theme border-theme;
     }
 
     .col {
-      @apply grow border-t border-accent px-4 py-template;
+      @apply grow border-t border-theme px-4 py-template;
     }
 
     .skillset {
@@ -57,56 +57,62 @@
   #projects {
     @apply mb-template;
     .content {
-      @apply flex flex-col gap-y-6;
+      @apply flex flex-col gap-y-4;
     }
     .sections {
-      @apply flex flex-col gap-y-3;
+      @apply flex flex-col gap-y-2;
     }
     .title-section {
       @apply flex flex-wrap justify-between gap-x-2;
+      & h5 {
+        @apply before:me-1 before:text-accent before:content-["▢"];
+      }
     }
     .builders {
       @apply flex flex-wrap items-center gap-1;
       & > *:not(:first-child) {
-        @apply rounded-md border border-current px-2 transition-colors hover:border-theme hover:bg-theme hover:text-white hover:no-underline;
+        @apply rounded-md border border-current px-1 transition-colors hover:border-theme hover:bg-theme hover:text-white hover:no-underline;
       }
     }
     .row > h6 {
       @apply mb-1;
     }
     .features {
-      @apply flex flex-col gap-y-1;
+      /* @apply flex flex-col gap-y-1; */
     }
   }
 
   #experiences {
     @apply mb-template;
 
     .content {
-      @apply mt-template flex flex-col gap-y-6;
+      @apply mt-template flex flex-col gap-y-4;
     }
     .sections {
-      @apply flex flex-col gap-y-3;
+      @apply flex flex-col gap-y-2;
     }
     .row {
       grid-template-columns: minmax(0, 1fr) max-content;
       @apply grid gap-x-2;
     }
+    .position > * {
+      @apply before:me-1 before:text-accent before:content-["◎"];
+    }
     .details {
-      @apply text-end;
+      @apply -mb-8 text-end;
     }
 
     .soft-skills,
     .responsibilities {
-      @apply mb-1 mt-1 flex flex-col gap-y-1;
+      /* @apply mb-1 mt-1 flex flex-col gap-y-1; */
     }
   }
 
   #education {
     @apply mb-template;
 
     .content {
-      @apply flex flex-col gap-y-1;
+      /* @apply flex flex-col gap-y-1; */
     }
 
     .row {

diff --git a/src/templates/Template1.jsx b/src/templates/Template1.jsx
@@ -128,7 +128,7 @@ const Template1 = ({ printMode }) => {
               <li key={project.title} className="sections">
                 <div className="title-section">
                   <a href={project.link}>
-                    <h5 className="inline">{project.title}</h5>
+                    <h5>{project.title}</h5>
                   </a>
                   {project.repo && (
                     <p>
@@ -186,7 +186,9 @@ const Template1 = ({ printMode }) => {
               <li key={job.position} className="sections">
                 <div className="row">
                   <div className="position">
-                    <h5>{job.position}</h5>
+                    {job.position.split(",").map((title) => (
+                      <h5 key={title}>{title.trim()}</h5>
+                    ))}
                   </div>
                   <div className="details">
                     <div className="company">