diff --git a/src/partials/position.hbs b/src/partials/position.hbs index baf21aa..6afe172 100644 --- a/src/partials/position.hbs +++ b/src/partials/position.hbs @@ -1,31 +1,32 @@ {{#if position}} -
-
-
-
-

{{position}}

-
+
+
+
+

{{position}}

-
- {{#if startDate}} -
- - {{formatDate startDate}} - {{#if endDate}} - - {{formatDate endDate}} - {{else}} - - Present - {{/if}} -
- {{/if}} +
+
+
+ {{#if startDate}} +
+ + {{formatDate startDate}} + {{#if endDate}} + - {{formatDate endDate}} + {{else}} + - Present + {{/if}} +
+ {{/if}} - {{#if duration}} -
- - {{duration}} -
- {{/if}} + {{#if duration}} +
+ + {{duration}} +
+ {{/if}} +
{{#if summary}} {{#each (split summary) }} diff --git a/src/style.css b/src/style.css index 1ef4adb..48161dc 100644 --- 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; }