Merge pull request #7 from igor-starostenko/feature/v1.2.1/old-posts

Feature/v1.2.1/old posts

content/posts/2014-05-09-legacy-introduction.md

@@ -1,6 +1,6 @@
 ---
 title: Legacy Introduction
-date: 2014-05-09T23:46:37
+date: 2014-05-09T10:00:00
 layout: post
 draft: false
 category: random

content/posts/2014-05-29-dtla-long-exposure.md

@@ -1,6 +1,6 @@
 ---
 title: DTLA Long Exposure
-date: 2014-05-29T20:00:00
+date: 2014-05-29T23:44:00
 layout: post
 draft: false
 category: photo

content/posts/2014-11-01-weho-halloween-carnaval.md

@@ -0,0 +1,18 @@
+---
+title: West Hollywood Halloween Carnaval
+date: 2014-11-01T10:11:00
+layout: post
+draft: false
+category: travel
+tags:
+  - photo
+  - travel
+  - city
+description: A short story about our fight with evil and filth on the biggest annual costume party in the world.
+---
+For two days the clouds were gathering. Few believed that the rain will come to LA, and perhaps it would not come if not the interference of dark forces who organized the world's largest procession in honor of All Hallows day.
+
+Traditionally Halloween Carnival in West Holywood raises about 500 thousand living dead along Santa Monica boulevard.
+
+Of course, me and my wife, as keepers of the light force could not stand aside and took the fight with the evil. We overpassed the entire route to record our courage on camera 😨.
+Unfortunately the end of the story was not like in a typical fairy tale. The Dark Lord triumphed, having washed us with pouring rain 😄.

content/posts/2015-03-30-the-bloom-of-desert.md

@@ -0,0 +1,34 @@
+---
+title: The Bloom of Desert
+date: 2015-03-30T08:25:00
+layout: post
+draft: false
+category: travel
+tags:
+  - photo
+  - travel
+  - landscape
+description: One day trip, exploring the wonders of nature in one of the most deadliest places of California.
+---
+So happened that I have not filled up my blog with new reports for a long time being in constant struggle with laziness :) But I simply can’t miss the review of this trip while my impressions are still fresh.
+
+Every year spring brings life even to the desert of California and in March, right after winter rains, in Death Valley you can see a mass flowering of different kinds of cacti and thorns. Together with my friends, we went to this not so hospitable place in search of this phenomenon. Previously having charged the batteries and filled a full tank.
+
+After seeing the first blooming valley, we decided that further there were going to be more beautiful locations and we continued our trip without hesitation. The next place to visit on our way was Cinder Mountain. This is a volcano of red rocks standing apart from mountains among desert cracks. An incredible place that creates a feeling of being on another planet. I'm pretty sure, many Hollywood movies about other planets were filmed near this place.
+
+We raced farther eastward on Highway 190. Our goal was to get to Badwater basin before sunset. Surrounding landscape was changing very fast: mountains and canyons were replacing valleys and deserts. Every next twist on a mountain streamer was intrigueing. One such affair made us stop and run six hundred feet to a canyon with a magnificent view over tens of miles of desert. We stayed there for about fifteen minutes and were taking pictures and hanging by the cliff edge trying to come closer to take a better shot. If we stayed there for few more minutes we would get the best seats for the show that was about to happen. When we got back to the car and prepared to continue the trip we heard a loud rumble. It was a jet fighter that was in a maneuver, diving right into the canyon near which we had been photographing a couple of minutes before.
+
+Although we were in a hurry to reach the destination before sunset we could not miss the Mesquite Flat Sand Dunes, moreover they were right on the way and we did not have to change our route significantly, unlike most of other points of interest of Death Valley. Also there is always a large number of tourists and photographers so it was rather difficult to make a photo without any casual passers in the frame. It is worth noting that in March the temperature in the Valley rarely exceeds 82 degrees, which, combined with soft sand and a light breeze makes the walk on the dunes very pleasant.
+
+There was less and less time remaining till the sunset. After passing through almost the entire Death Valley we were approaching our goal - the Badwater Basin. This is a unique place in the lowest point of North America, with an elevation of 282 feet below sea level. Water in Badwater is presented in very small quantity and is undrinkable due to excessive salt content, which makes the pool more similar to the salt desert rather than a water basin.
+The sun was rapidly approaching the tops of the mountains, so as soon as we arrived to the place we immediately went deep into the basin and I managed to memorialize the last rays of the sun over the valley in a 10-second timelapse.
+
+<div class="youtube-container">
+<iframe class="youtube-video" src="https://www.youtube-nocookie.com/embed/rxYW3qyfy8s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+Most of the tourists who were at that moment in Badwater already headed back to their cars so I could enjoy an absolute silence for about half an hour, which was only occasionally interrupted from time to time by the sound of shutter release of my camera. I was one on one with nature. It is so an unusual feeling for a resident of Los Angeles.
+
+After last shots were made I could finally breathe a sigh of relief: our trip to Death Valley seemed to be successful. But I wish to come back one day for a more thorough expedition.
+That was not the end of our adventure because we were more than three hundred miles away from our homes so we had to find a lodging for the night in the city of sins — Las Vegas. But, as they say, what happens in Vegas - stays in Vegas ...
+

content/posts/2015-05-22-about-golden-gate.md

@@ -0,0 +1,27 @@
+---
+title: About Golden Gate
+date: 2015-05-30T18:55:00
+layout: post
+draft: false
+category: travel
+tags:
+  - video
+  - travel
+  - city
+description: From the good old times when I lived in Bay Area. There is something magical about this place.
+---
+<i>"If you're going to San Francisco..."</i>
+
+Singing these words from the well-known song of the previous century we went to San Francisco.
+
+"Cloud Factory” — that's how my friends described this city to me. Clouds were replacing the sun and flowing inland at high speed. Constant unfriendly wind forced us, as well as local residents, to quickly move through checkpoints, without having a lot of time to properly enjoy the beauty of the city.
+
+Luckily, my friend brought his new GoPro 4 with him. The entire video was shot handheld from the rooftop of our car. Despite the fact that it was almost fully discharged, we were able to shoot a 30-minutes ride from Battery Spencer, through the GG bridge and GG Park right to the top of Twin Peaks.
+Compared to GoPro 3 that I had, the dynamic range was much better and also had more natural color balance.
+Check it out! Sounds great with Moby music as well!
+
+<div class="youtube-container">
+<iframe class="youtube-video" src="https://www.youtube-nocookie.com/embed/kBYu6vnnLLc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+<i>"If you're going to San Francisco..."</i>

src/components/card/card.js

@@ -4,11 +4,15 @@ import { Link } from 'gatsby';
 import { SLink, Row, Title, Description, Tags, Tag, Date } from './card.css.js';
 import Image from 'components/image';
 
-const Card = ({ slug, title, image, date, description, tags }) => (
+const Card = ({ index, slug, title, image, date, description, tags }) => (
   <Fragment>
     {image && (
       <SLink to={slug}>
-        <Image style={{ maxWidth: 700 }} fluid={image.fluid} alt={title} />
+        <Image
+          style={{ margin: `${index === 0 ? 0 : 5.5}rem -3.9rem 0rem` }}
+          fluid={image.fluid}
+          alt={title}
+        />
       </SLink>
     )}
     <Row>
@@ -32,6 +36,7 @@ const Card = ({ slug, title, image, date, description, tags }) => (
 );
 
 Card.propTypes = {
+  index: PropTypes.number.isRequired,
   slug: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,

src/components/gallery/gallery.js

@@ -73,7 +73,7 @@ const Gallery = ({ photos, ...rest }) => {
           onClick={imageClick}
           renderImage={GalleryImage}
           targetRowHeight={250}
-          margin={5}
+          margin={1}
           {...rest}
         />
       )}

src/global.css.js

@@ -90,6 +90,21 @@ export default createGlobalStyle`
     font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
   }
 
+  .youtube-container {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 56.25%;
+  }
+  
+  .youtube-video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
   video {
     max-width: 100%;
   }

src/pages/index.js

@@ -25,9 +25,10 @@ const Index = ({ data }) => (
         <h4>{data.allMarkdownRemark.totalCount} Posts</h4>
       </div>
       <div>
-        {data.allMarkdownRemark.edges.map(({ node }) => (
+        {data.allMarkdownRemark.edges.map(({ node }, index) => (
           <Article
             key={node.id}
+            index={index}
             image={get(
               data.images.edges.find(edge =>
                 `/${edge.node.Key}`.includes(node.fields.slug)

src/templates/post.js

@@ -5,6 +5,15 @@ import Gallery from 'components/gallery';
 import Layout from 'components/layout';
 import Box from 'components/box';
 
+const calculateRowHeight = imageCount => {
+  let multiplier = 3;
+  if (typeof window !== 'undefined') {
+    multiplier = window.innerWidth > 450 ? 4 : 8;
+  }
+  const height = 300 * (1 - (multiplier * imageCount) / 100);
+  return height > 100 ? height : 100;
+};
+
 const Post = ({ data, pageContext }) => {
   const post = data.markdownRemark;
   const images = data.images.edges.filter(({ image }) =>
@@ -14,16 +23,10 @@ const Post = ({ data, pageContext }) => {
     <Layout>
       <Box>
         <div style={{ margin: '0 -4rem' }}>
-          {images.length && (
+          {images.length > 0 && (
             <Gallery
               photos={images}
-              targetRowHeight={
-                typeof window !== 'undefined'
-                  ? window.innerWidth >= 450
-                    ? 250
-                    : 200
-                  : 450
-              }
+              targetRowHeight={calculateRowHeight(images.length)}
             />
           )}
         </div>