Dimitrie GitLab Digital Nomad Blogpost

As promised, I will create a blogpost which describes my incentive, experience and what I have learned on my trip sponsored by GitLab in order to visit colleagues in India, Cambodia and Taiwan.

link to google spreadsheet that I used

Todo

• add photos
• link every city name to its google map
• link every team member name to their profiles on the team page
• "working abroad" handbook page
• make google spreadsheet plan template available
• Ping every team member mentioned checking if they're okay with your text/photo ;)
• Let the theme be mobile optimised
• look into converting image links to carousel
• check all gitlab mentions to be with a capital G and L
• Compress images with tinypng
• finalise blogpost content after reviews
• check if blogpost date is correct

Review app links:

• https://dimitrie-travel-blog-post.about.gitlab.com/2017/06/20/there-and-back-again-in-one-release/
• https://dimitrie-travel-blog-post.about.gitlab.com/handbook/working-remotely#tips-on-working-remotely-while-abroad
• https://dimitrie-travel-blog-post.about.gitlab.com/handbook/incentives/#work-remotely-travel-grant

source/stylesheets/there-and-back-again-in-one-release.css.scss

@@ -8,20 +8,40 @@ body {
 .blog.article {
   .cover {
-    height: 70vh;
-    background-repeat: no-repeat;
-    background-position-y: 50px;
-    background-size: initial;
-    background-attachment: fixed;
-    background-color: $color-dark;
+    @media (min-width: $screen-md-min) {
+      height: 70vh;
+      background-repeat: no-repeat;
+      background-position-y: 50px;
+      background-size: initial;
+      background-attachment: fixed;
+      background-color: $color-dark;
+    }
   }
   .wrapper {
     box-shadow: none;
+    @media (max-width: $screen-sm-max) {
+      padding: 10px 16px;
+    }
+
+    &.header {
+      @media (max-width: $screen-sm-max) {
+        position: absolute;
+        bottom: 0;
+      }
+    }
+
     &.signup {
       max-width: 800px;
-      padding: 0 75px;
+
+      @media (max-width: $screen-sm-max) {
+        padding: 0;
+      }
+
+      @media (min-width: $screen-md-min) {
+        padding: 0 75px;
+      }
     }
     &.comments {
@@ -34,26 +54,40 @@ body {
     background-color: $body-bg;
     border-top: 1px solid $border-color;
     border-bottom: 1px solid $border-color;
+
+    @media (max-width: $screen-sm-max) {
+      padding: 0;
+    }
   }
   .overlay {
     background: linear-gradient(to top, $color-dark 10%, $color-transparent 90%);
     text-align: center;
+
+    @media (max-width: $screen-sm-max) {
+      height: 450px;
+    }
   }
   h1 {
     font-weight: 300;
-    font-size: 7vh;
     line-height: 1.25;
-    max-width: 1300px;
     margin-bottom: 25px;
+
+    @media (min-width: $screen-md-min) {
+      font-size: 7vh;
+      max-width: 1300px;
+    }
   }
   h2 {
-    font-size: 44px;
     font-weight: normal;
     margin-top: 30px;
     line-height: 1.2;
+
+    @media (min-width: $screen-md-min) {
+      font-size: 44px;
+    }
   }
   h3 {
@@ -63,40 +97,47 @@ body {
   }
   .description {
-    margin: 0 auto;
-    margin-bottom: 30px;
-    font-size: 30px;
     font-weight: 300;
-    max-width: 800px;
+
+    @media (min-width: $screen-md-min) {
+      margin: 0 auto;
+      margin-bottom: 30px;
+      font-size: 30px;
+      max-width: 800px;
+    }
   }
   .body {
-    max-width: 800px;
-    padding: 50px 0;
+    @media (min-width: $screen-md-min) {
+      max-width: 800px;
+    }
     .content {
-      > * {
-        padding: 0 75px;
+      ul {
+        @media (max-width: $screen-sm-max) {
+          padding-left: 30px;
+        }
       }
       img {
-        margin: 25px 0;
-        max-width: calc(100% + 150px);
-        margin-left: -75px;
+        max-width: calc(100% + 32px);
+        margin-left: -16px;
+
+        @media (min-width: $screen-md-min) {
+          margin: 25px 0;
+          max-width: calc(100% + 150px);
+          margin-left: -75px;
+        }
       }
-      @media (min-width: $screen-md-min) {
-        .vista {
+      .vista {
+        @media (min-width: $screen-md-min) {
           min-width: 100vw;
           max-width: 100vw;
           margin-left: calc(325px - 50vw);
         }
       }
     }
-
-    .pager {
-      padding: 0 75px;
-    }
   }
 }