Merge pull request #27 from melledijkstra/develop

New article, styling is now done with Sass + redesign of story page!!!

Author: melledijkstra

Gemfile

@@ -11,6 +11,7 @@ source "https://rubygems.org"
 # Happy Jekylling!
 
 gem 'jekyll', '~> 3.5'
+gem 'kramdown', '>= 2.3.0'
 
 # This is the default theme for new Jekyll sites. You may change this to anything you like.
 

Gemfile.lock

@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (6.0.3.1)
+    activesupport (6.0.3.2)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 0.7, < 2)
       minitest (~> 5.1)
@@ -16,24 +16,26 @@ GEM
     colorator (1.1.0)
     commonmarker (0.17.13)
       ruby-enum (~> 0.5)
-    concurrent-ruby (1.1.6)
-    dnsruby (1.61.3)
-      addressable (~> 2.5)
+    concurrent-ruby (1.1.7)
+    dnsruby (1.61.4)
+      simpleidn (~> 0.1)
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
     ethon (0.12.0)
       ffi (>= 1.3.0)
     eventmachine (1.2.7)
+    eventmachine (1.2.7-x64-mingw32)
     execjs (2.7.0)
     faraday (1.0.1)
       multipart-post (>= 1.2, < 3)
-    ffi (1.13.0)
+    ffi (1.13.1)
+    ffi (1.13.1-x64-mingw32)
     forwardable-extended (2.6.0)
     gemoji (3.0.1)
-    github-pages (206)
+    github-pages (207)
       github-pages-health-check (= 1.16.1)
-      jekyll (= 3.8.7)
+      jekyll (= 3.9.0)
       jekyll-avatar (= 0.7.0)
       jekyll-coffeescript (= 1.1.1)
       jekyll-commonmark-ghpages (= 0.1.6)
@@ -67,7 +69,8 @@ GEM
       jekyll-theme-time-machine (= 0.1.1)
       jekyll-titles-from-headings (= 0.5.3)
       jemoji (= 0.11.1)
-      kramdown (= 1.17.0)
+      kramdown (= 2.3.0)
+      kramdown-parser-gfm (= 1.1.0)
       liquid (= 4.0.3)
       mercenary (~> 0.3)
       minima (= 2.5.1)
@@ -86,14 +89,14 @@ GEM
     http_parser.rb (0.6.0)
     i18n (0.9.5)
       concurrent-ruby (~> 1.0)
-    jekyll (3.8.7)
+    jekyll (3.9.0)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
       i18n (~> 0.7)
       jekyll-sass-converter (~> 1.0)
       jekyll-watch (~> 2.0)
-      kramdown (~> 1.14)
+      kramdown (>= 1.17, < 3)
       liquid (~> 4.0)
       mercenary (~> 0.3.3)
       pathutil (~> 0.9)
@@ -191,7 +194,10 @@ GEM
       gemoji (~> 3.0)
       html-pipeline (~> 2.2)
       jekyll (>= 3.0, < 5.0)
-    kramdown (1.17.0)
+    kramdown (2.3.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
     liquid (4.0.3)
     listen (3.2.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
@@ -204,7 +210,9 @@ GEM
       jekyll-seo-tag (~> 2.1)
     minitest (5.14.1)
     multipart-post (2.1.1)
-    nokogiri (1.10.9)
+    nokogiri (1.10.10)
+      mini_portile2 (~> 2.4.0)
+    nokogiri (1.10.10-x64-mingw32)
       mini_portile2 (~> 2.4.0)
     octokit (4.18.0)
       faraday (>= 0.9)
@@ -215,6 +223,7 @@ GEM
     rb-fsevent (0.10.4)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
+    rexml (3.2.4)
     rouge (3.19.0)
     ruby-enum (0.8.0)
       i18n
@@ -228,25 +237,33 @@ GEM
     sawyer (0.8.2)
       addressable (>= 2.3.5)
       faraday (> 0.8, < 2.0)
+    simpleidn (0.1.1)
+      unf (~> 0.1.4)
     terminal-table (1.8.0)
       unicode-display_width (~> 1.1, >= 1.1.1)
     thread_safe (0.3.6)
     typhoeus (1.4.0)
       ethon (>= 0.9.0)
     tzinfo (1.2.7)
       thread_safe (~> 0.1)
+    unf (0.1.4)
+      unf_ext
+    unf_ext (0.0.7.7)
+    unf_ext (0.0.7.7-x64-mingw32)
     unicode-display_width (1.7.0)
-    zeitwerk (2.3.0)
+    zeitwerk (2.4.0)
 
 PLATFORMS
   ruby
+  x64-mingw32
 
 DEPENDENCIES
   github-pages
   jekyll (~> 3.5)
   jekyll-feed
   jekyll-seo-tag
   jekyll-sitemap
+  kramdown (>= 2.3.0)
 
 BUNDLED WITH
    2.1.4

_config.yml

@@ -38,9 +38,9 @@ collections:
     science:
         output: true
         permalink: /:collection/:title
-#    travel:
-#        output: true
-#        permalink: /:collection/:title
+    lifestyle:
+        output: true
+        permalink: /:collection/:title
 #    thoughts:
 #        output: true
 #        permalink: /:collection/:title
@@ -53,12 +53,7 @@ defaults:
             layout: "story"
     -   scope:
             path: ""
-            type: "thoughts"
-        values:
-            layout: "story"
-    -   scope:
-            path: ""
-            type: "travel"
+            type: "lifestyle"
         values:
             layout: "story"
     -   scope:
@@ -121,6 +116,7 @@ social:
 #
 exclude:
     - project-files/
+    - .idea/
 #   - .sass-cache/
 #   - .jekyll-cache/
 #   - gemfiles/
@@ -131,3 +127,41 @@ exclude:
 #   - vendor/cache/
 #   - vendor/gems/
 #   - vendor/ruby/
+
+# KramdownPermalink
+    #Kramdown is the default Markdown renderer for Jekyll. Below is a list of the currently supported options:
+    #
+kramdown:
+    # Prefix used for automatically generated header IDs
+    # auto_id_prefix: ''
+    # auto_id_stripping - Strip all formatting from header text for automatic ID generation
+    # auto_ids - Use automatic header ID generation
+    # coderay_bold_every - Defines how often a line number should be made bold
+    # coderay_css - Defines how the highlighted code gets styled
+    # coderay_default_lang - Sets the default language for highlighting code blocks
+    # coderay_line_number_start - The start value for the line numbers
+    # coderay_line_numbers - Defines how and if line numbers should be shown
+    # coderay_tab_width - The tab width used in highlighted code
+    # coderay_wrap - Defines how the highlighted code should be wrapped
+    # enable_coderay - Use coderay for syntax highlighting
+    # entity_output - Defines how entities are output
+    # footnote_backlink - Defines the text that should be used for the footnote backlinks
+    # footnote_backlink_inline - Specifies whether the footnote backlink should always be inline
+    # footnote_nr - The number of the first footnote
+    # gfm_quirks - Enables a set of GFM specific quirks
+    # hard_wrap - Interprets line breaks literally
+    # header_offset - Sets the output offset for headers
+    # html_to_native - Convert HTML elements to native elements
+    # line_width - Defines the line width to be used when outputting a document
+    # link_defs - Pre-defines link definitions
+    # math_engine - Set the math engine
+    # math_engine_opts - Set the math engine options
+    # parse_block_html: true # - Process kramdown syntax in block HTML tags
+    # parse_span_html - Process kramdown syntax in span HTML tags
+    # smart_quotes - Defines the HTML entity names or code points for smart quote output
+    # syntax_highlighter - Set the syntax highlighter
+    # syntax_highlighter_opts - Set the syntax highlighter options
+    # toc_levels - Defines the levels that are used for the table of contents
+    # transliterated_header_ids - Transliterate the header text before generating the ID
+    # typographic_symbols - Defines a mapping from typographical symbol to output characters
+

_data/images.yml

@@ -0,0 +1,12 @@
+morgan-housel-unsplash.jpg:
+  owner: Morgan Housel
+  url: https://unsplash.com/@morganhousel?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+joshua-hoehne-1UDjq8s8cy0-unsplash.jpg:
+  owner: Joshua Hoehne
+  url: https://unsplash.com/@mrthetrain?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+martin-brechtl-sEkTsMYTqY0-unsplash.jpg:
+  owner: Martin Brechtl
+  url: https://unsplash.com/@majc0?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
+daniel-ruyter-JFA2vSpEUMY-unsplash.jpg:
+  owner: Danier Ruyter
+  url: https://unsplash.com/@dbruyter?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText

_drafts/money-time-energy.md

@@ -0,0 +1,34 @@
+---
+title: "The effective utilization of Money, Time, and Energy"
+date: 2020-07-31 20:10:19 +0200
+tags: 
+image: /assets/images/stories/morgan-housel-unsplash.jpg
+---
+
+What is the most important thing in life? Is it the money, or the idea that you can buy anything with that money? Or is it spending holidays with your family? Maybe the most important thing is to have the time to do whatever you want yourself. What about traveling to all those places you wanted to go.
+<!--more-->
+
+Its all of these things. All of these things make us happy in some way. And that is what we all want in the end right? Just to be happy.
+
+I am still young, but when I was even younger I started to think about my first travel trip that I wanted to realize. The best time to do it was during summer vacation, because, that is when I had the most time. The accommodation and way of transportation had to be cheap, because as a student you don't have a big budget.
+
+The triangle of **money**, **time**, and **energy** actually governs among all of us in life. The *rich*, the *poor*, the *intelligent*, the *dumb*, everyone is included and every individual has his own triangle.
+
+The impact of this triangle in our life is large on a long-term scale and so important that I needed to write about it. Because I want people to understand how it works and more importantly on how to make your triangle work more effectively for you.
+
+Every single person on earth probably asked themselves the question of "How do I get rich?" at one point in their life.
+Did you find the answer? If yes, good for you, you are probably richer now. However I wanted to dive a bit deeper into the idea of "rich". After a while I got to the conclusion does not mean to "have a lot of money". Rich for me is to make the triangle work in the most effective way for you.
+
+> "There are two ways to become rich, work hard or take enough with less"
+
+And I think the majority of people like the second answer more than the first. So why are we working more than we have to? Don't get me wrong, working is important in life. But when I read in the news that there are more adults of 25 years old that have a burnout then ever before [source], I really start to question if we are actually "improving" our status of wealth.
+
+In this example these 25 year old adults probably have a lack in energy and time, but probably (and hopefully) are earning a lot of money. The question is what are they earning this money for? For this amazing car, clothes, phone? Are they really going to enjoy it when they don't have any time to even enjoy it?
+
+If I would was them, I would have **bought time!** You are thinking, buying time? What do I mean with buying time.
+
+Once you worked hard and you have spend a lot of work into receiving a bunch of money, you should also make sure that you buy time to regenerate that energy that you "spend". Isn't it funny that we use the same verb in English for spending "money" and "energy". It indicates that it is closely related.
+
+How can you buy time? 
+
+

_includes/sidebar.html

@@ -1,19 +1,19 @@
 <div id="sidebar-wrapper">
-    <h1 class="text-center"><a class="no-link petit-formal-script" href="/">Dijkstra<span class="brand-dot">.</span></a><br/>
-        <small>{{ site.tagline }}</small>
+    <h1 class="text-center"><a class="no-link petit" href="/">Dijkstra<span class="brand-dot">.</span></a><br/>
+        <small id="subtitle">{{ site.tagline }}</small>
     </h1>
     <ul class="sidebar-nav">
         <li>
-            <a href="/writing/science"><i class="mdi mdi-pencil"></i> <span
-                    class="text-right">Writing</span></a>
+            <a href="/writing/science"><i class="mdi mdi-atom"></i> <span
+                    class="text-right">Science</span></a>
         </li>
         <li>
-            <a href="/projects"><i class="mdi mdi-book-open-page-variant"></i> <span
-                    class="text-right">Projects</span></a>
+            <a href="/writing/lifestyle"><i class="mdi mdi-yin-yang"></i> <span
+                    class="text-right">Lifestyle</span></a>
         </li>
         <li>
             <a href="/"><i class="mdi mdi-account-card-details"></i> <span
-                    class="text-right">Resume</span></a>
+                    class="text-right">About</span></a>
         </li>
     </ul>
 

_includes/story_item.html

@@ -18,12 +18,12 @@
                    style="background-color: #ad9977;"
             >{{ include.story.language.name }}</small>
             {% endif %}
-            <h2 class="title">
+            <h2 class="title sans">
                 <a href="{{ include.story.url }}">{{ include.story.title }}</a>
             </h2>
             <div class="info">
                 <div class="time">
-                    <span class="mdi mdi-clock"></span> {{ include.story.date | date: '%e %b %Y %R' }}
+                    <span class="mdi mdi-clock"></span> {{ include.story.date | date: '%e %b %Y' }}
                 </div>
                 {% if include.story.tags %}
                 <div class="categories">
@@ -34,7 +34,9 @@ <h2 class="title">
                 </div>
                 {% endif %}
             </div>
-            <p class="sneak-peek">{{ include.story.excerpt }}</p>
+            <p class="sneak-peek serif softcolor">
+                {{ include.story.excerpt | strip_html }}
+            </p>
         </div>
     </div>
 </div>

_layouts/default.html

@@ -32,15 +32,18 @@
     })(window,document,'script','dataLayer','GTM-KPKS5SL');</script>
     <!-- End Google Tag Manager -->
 
-    <link rel="stylesheet" href="/assets/css/bootstrap.min.css"/>
-    <link rel="stylesheet" href="/assets/css/site.css"/>
     <link rel="stylesheet" href="/assets/css/main.css"/>
     <link rel="stylesheet" href="/assets/css/materialdesignicons.min.css"/>
 
     {% if layout.head_css %}
-    {% for css_file in layout.head_css %}
-    <link rel="stylesheet" href="{{ css_file }}" />
-    {% endfor %}
+        {% for css_file in layout.head_css %}
+        <link rel="stylesheet" href="{{ css_file }}" />
+        {% endfor %}
+    {% endif %}
+    {% if page.head_css %}
+        {% for css_file in page.head_css %}
+        <link rel="stylesheet" href="{{ css_file }}" />
+        {% endfor %}
     {% endif %}
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -60,14 +63,14 @@
             crossorigin="anonymous"></script>
     <!-- todo: mix this together -->
     {% if layout.head_js %}
-    {% for js in layout.head_js %}
-    <script src="{{ js }}"></script>
-    {% endfor %}
+        {% for js in layout.head_js %}
+        <script src="{{ js }}"></script>
+        {% endfor %}
     {% endif %}
     {% if page.head_js %}
-    {% for js in page.head_js %}
-    <script src="{{ js }}"></script>
-    {% endfor %}
+        {% for js in page.head_js %}
+        <script src="{{ js }}"></script>
+        {% endfor %}
     {% endif %}
 
     <!-- !Plugins! -->