refactor: update positions to use grid for layout

NuclearRedeye · Jun 12, 2024 · b5086d0 · b5086d0
1 parent 5feda3d
commit b5086d0
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 37 deletions.
diff --git a/src/partials/position.hbs b/src/partials/position.hbs
@@ -1,31 +1,32 @@
 
 {{#if position}}
-<section class="narrow">
-  <div class="column"></div>
-    <div class="row align-center">
-        <div class="bullet"></div>
-        <h3 class="bold">{{position}}</h3>
-    </div>
+<section class="position">
+  <div class="grid">
+    <div class="bullet"></div>
+    <h3 class="bold">{{position}}</h3>
 
-    <div class="column line">
-      {{#if startDate}}
-        <h6 class="space">
-          <i class="fa fa-calendar"></i>
-          <span>{{formatDate startDate}}</span>
-          {{#if endDate}}
-            <span> - {{formatDate endDate}}</span>
-          {{else}}
-            <span> - Present</span>
-          {{/if}}
-        </h6>
-      {{/if}}
+    <div class="line"></div>
+    <div class="column">
+      <div class="row end">
+        {{#if startDate}}
+          <h6 class="space">
+            <i class="fa fa-calendar"></i>
+            <span>{{formatDate startDate}}</span>
+            {{#if endDate}}
+              <span> - {{formatDate endDate}}</span>
+            {{else}}
+              <span> - Present</span>
+            {{/if}}
+          </h6>
+        {{/if}}
 
-      {{#if duration}}
-        <h6>
-          <i class="fa fa-clock-o"></i>
-          <span>{{duration}}</span>
-        </h6>
-      {{/if}}
+        {{#if duration}}
+          <h6>
+            <i class="fa fa-clock-o"></i>
+            <span>{{duration}}</span>
+          </h6>
+        {{/if}}
+      </div>
 
       {{#if summary}}
         {{#each (split summary) }}

diff --git a/src/style.css b/src/style.css
@@ -246,7 +246,6 @@ section {
 }
 
 .chip {
-  margin: var(--gap-tiny);
   padding: var(--gap-small);
   background: var(--color-bg-tertiary);
   border-radius: 5px;
@@ -258,7 +257,16 @@ section {
   height: var(--gap-medium);
   border-radius: 50%;
   background: var(--color-bg-secondary);
-  margin-right: var(--gap-small);
+  align-self: center;
+  justify-self: center;
+}
+
+.line {
+  width: var(--gap-micro);
+  height: 100%;
+  background: var(--color-bg-secondary);
+  align-self: center;
+  justify-self: center;
 }
 
 /* Common */
@@ -276,6 +284,13 @@ section {
   gap: var(--gap-small);
 }
 
+.grid {
+  display: grid;
+  grid-template-columns: var(--gap-medium) auto;
+  grid-template-rows: auto;
+  column-gap: var(--gap-medium);
+}
+
 .top {
   align-items: first baseline;
 }
@@ -304,10 +319,14 @@ section {
   margin-top: var(--gap-small);
 }
 
-.spread {
+.wide {
   gap: var(--gap-large);
 }
 
+.between {
+  justify-content: space-between;
+}
+
 .wrap {
   flex-wrap: wrap;
 }
@@ -316,11 +335,24 @@ section {
   font-size: 12px;
 }
 
+.inherit-height {
+  min-height: inherit;
+}
+
 /* Sections */
 .profiles + section {
   margin-top: 0;
 }
 
+.company + .position {
+  margin-top: var(--gap-large);
+}
+
+.position {
+  margin-top: var(--gap-medium);
+  margin-left: calc(2.0em - calc(var(--gap-medium) / 2));
+}
+
 /* Header Section */
 .profile-pic {
   margin-top: -5px;
@@ -340,13 +372,17 @@ section {
   margin-right: var(--gap-medium);
 }
 
-/* Work Section */
-.line {
-  margin-left: var(--gap-tiny);
-  padding-left: calc(var(--gap-xlarge) - var(--gap-small));
-  border-left: solid var(--color-bg-secondary) var(--gap-micro);
+/* Company Section */
+.company {
+  min-height: 4em;
 }
 
+.logo {
+  width: 4em;
+  border: 1px solid var(--color-bg-secondary);
+}
+
+/* Position Section */
 .space {
   margin-top: var(--gap-medium);
 }
@@ -360,10 +396,6 @@ section {
   align-self: flex-end;
 }
 
-.logo {
-  max-width: 10%;
-}
-
 /* Layouts */
 .page {
   background: var(--color-bg-primary);
@@ -390,7 +422,7 @@ section {
     box-shadow: none;
   }
 
-  section {
+  section :not(.work) {
     page-break-inside: avoid;
   }