- improve page heading space

- add rex project

data/work.yml

@@ -37,6 +37,12 @@ studies:
     image_position: 'center bottom'
 
 creations:
+  - slug: 'rex'
+    image_format: 'png'
+    image_position: 'center 50%'
+    title: 'REX Blog'
+    types:
+      - 'Illustration'
   - slug: 'quarter-theme'
     image_format: 'jpg'
     image_position: 'center 0%'

source/assets/stylesheets/base/_size.scss

@@ -47,5 +47,6 @@
 /* Height
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 .h200px { height: 200px; }
+.h300px { height: 300px; }
 
 .h100   { height: 100%; }

source/assets/stylesheets/base/_spacing.scss

@@ -24,7 +24,7 @@ small {
 
 /* Spacings Helper
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-@for $i from 0 through 20 {
+@for $i from 0 through 35 {
   // Padding
   @include r(p#{$i})  { padding: #{$i / 2}rem; }
   @include r(py#{$i}) { padding-top: #{$i / 2}rem; padding-bottom: #{$i / 2}rem; }

source/assets/stylesheets/module/_article.scss

@@ -2,7 +2,7 @@
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
 // header
 .article-header {
-  @extend .h200px;
+  @extend .h300px;
   @extend .flex;
   @extend .flex-column;
   @extend .u-relative;

source/layouts/scroll.haml

@@ -15,7 +15,7 @@
 %body.flex.flex-column.min-h100vh.relative.sm-flex-column
   = partial 'partials/header'
 
-  .pt20.animation-slide-up
+  .pt30.animation-slide-up
     = yield
 
   = partial 'partials/footer'

source/work/quarter-theme.html.haml

@@ -33,12 +33,6 @@ title: Work - Quarterly @ NetEngine | Lennon Cheng - UI/UX Designer, Front-end D
         %p
           There are certainly a lot of room for refinement and polishing. However, I am really excited to have the opportunity to work on more and more illustrations and do some wild experiments with them.
 
-    .article-paragraph-h2
-      .flex.justify-center
-        = external_link_to "Dribbble Shot",
-          'https://dribbble.com/shots/4493157-Q4-Theme-NE-Games',
-          class: 'button'
-
     .article-paragraph-h2
       %h2 Quarter 3
       %p
@@ -68,4 +62,10 @@ title: Work - Quarterly @ NetEngine | Lennon Cheng - UI/UX Designer, Front-end D
         = image_link '/assets/images/projects/quarter-theme/2018-q3-poster.jpg',
         class: 'frame-dotted'
 
+    .article-paragraph-h2
+      .flex.justify-center
+        = external_link_to "Dribbble Shot",
+          'https://dribbble.com/lennonzf/projects/706848-Quarterly-NetEngine',
+          class: 'button'
+
     = partial 'partials/back_to_work'

source/work/rex.html.haml

@@ -0,0 +1,56 @@
+---
+title: Work - REX Blog | Lennon Cheng - UI/UX Designer, Front-end Developer
+---
+.flex-auto
+  .container.max-w600px
+    %h1.center-align REX Blog
+
+    .article-paragraph-h2
+      %h2 Intro
+      %p
+        This April (2018), I decided to lift my illustration game a little by stepping outside my comfort zone and doing some freelance. Luckily, I got REX as my first client via a friend I met at a meetup.
+
+      %p
+        = external_link_to 'REX',
+        'https://www.rexsoftware.com/',
+        class: ''
+        is a product house who develops Real estate CRM software. I was asked to create some featured illustration for their
+        = external_link_to 'blog',
+        'https://www.rexsoftware.com/blog',
+        class: ''
+        %span .
+
+
+    .article-paragraph-h2
+      %h2 Work
+
+      .article-paragraph-h3
+        %h3 Office in London
+        = image_link '/assets/images/projects/rex/REX-moves-in-to-the-UK.png',
+          class: 'frame-dotted'
+
+      .article-paragraph-h3
+        %h3 Conference
+        = image_link '/assets/images/projects/rex/REX-tech-conference-calendar.png',
+          class: 'frame-dotted'
+
+      .article-paragraph-h3
+        %h3 VR & AR
+        = image_link '/assets/images/projects/rex/Rex-get-on-board-with-virtual-tours.png',
+          class: 'frame-dotted'
+
+        = image_link '/assets/images/projects/rex/Rex-get-on-board-with-virtual-tours-v2.png',
+          class: 'frame-dotted'
+
+      .article-paragraph-h3
+        %h3 Bitcoin
+        = image_link '/assets/images/projects/rex/REX-buying-with-Bitcoin.png',
+          class: 'frame-dotted'
+
+    .article-paragraph-h2
+      .flex.justify-center
+        = external_link_to "Dribbble Project",
+          'https://dribbble.com/lennonzf/projects/703560-REX-Blog',
+          class: 'button'
+
+    = partial 'partials/back_to_work'