Skip to content

Commit 2db9a0a

Browse files
melledijkstramelledijkstra
committed
New article, styling is now done with Sass + redesign of stories!!!
1 parent 1d74692 commit 2db9a0a

28 files changed

+1514
-1350
lines changed

‎_config.yml

+43-9
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,9 @@ collections:
3838
science:
3939
output: true
4040
permalink: /:collection/:title
41-
# travel:
42-
# output: true
43-
# permalink: /:collection/:title
41+
lifestyle:
42+
output: true
43+
permalink: /:collection/:title
4444
# thoughts:
4545
# output: true
4646
# permalink: /:collection/:title
@@ -53,12 +53,7 @@ defaults:
5353
layout: "story"
5454
- scope:
5555
path: ""
56-
type: "thoughts"
57-
values:
58-
layout: "story"
59-
- scope:
60-
path: ""
61-
type: "travel"
56+
type: "lifestyle"
6257
values:
6358
layout: "story"
6459
- scope:
@@ -121,6 +116,7 @@ social:
121116
#
122117
exclude:
123118
- project-files/
119+
- .idea/
124120
# - .sass-cache/
125121
# - .jekyll-cache/
126122
# - gemfiles/
@@ -131,3 +127,41 @@ exclude:
131127
# - vendor/cache/
132128
# - vendor/gems/
133129
# - vendor/ruby/
130+
131+
# KramdownPermalink
132+
#Kramdown is the default Markdown renderer for Jekyll. Below is a list of the currently supported options:
133+
#
134+
kramdown:
135+
# Prefix used for automatically generated header IDs
136+
# auto_id_prefix: ''
137+
# auto_id_stripping - Strip all formatting from header text for automatic ID generation
138+
# auto_ids - Use automatic header ID generation
139+
# coderay_bold_every - Defines how often a line number should be made bold
140+
# coderay_css - Defines how the highlighted code gets styled
141+
# coderay_default_lang - Sets the default language for highlighting code blocks
142+
# coderay_line_number_start - The start value for the line numbers
143+
# coderay_line_numbers - Defines how and if line numbers should be shown
144+
# coderay_tab_width - The tab width used in highlighted code
145+
# coderay_wrap - Defines how the highlighted code should be wrapped
146+
# enable_coderay - Use coderay for syntax highlighting
147+
# entity_output - Defines how entities are output
148+
# footnote_backlink - Defines the text that should be used for the footnote backlinks
149+
# footnote_backlink_inline - Specifies whether the footnote backlink should always be inline
150+
# footnote_nr - The number of the first footnote
151+
# gfm_quirks - Enables a set of GFM specific quirks
152+
# hard_wrap - Interprets line breaks literally
153+
# header_offset - Sets the output offset for headers
154+
# html_to_native - Convert HTML elements to native elements
155+
# line_width - Defines the line width to be used when outputting a document
156+
# link_defs - Pre-defines link definitions
157+
# math_engine - Set the math engine
158+
# math_engine_opts - Set the math engine options
159+
# parse_block_html: true # - Process kramdown syntax in block HTML tags
160+
# parse_span_html - Process kramdown syntax in span HTML tags
161+
# smart_quotes - Defines the HTML entity names or code points for smart quote output
162+
# syntax_highlighter - Set the syntax highlighter
163+
# syntax_highlighter_opts - Set the syntax highlighter options
164+
# toc_levels - Defines the levels that are used for the table of contents
165+
# transliterated_header_ids - Transliterate the header text before generating the ID
166+
# typographic_symbols - Defines a mapping from typographical symbol to output characters
167+

‎_data/images.yml

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
morgan-housel-unsplash.jpg:
2+
owner: Morgan Housel
3+
url: https://unsplash.com/@morganhousel?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
4+
joshua-hoehne-1UDjq8s8cy0-unsplash.jpg:
5+
owner: Joshua Hoehne
6+
url: https://unsplash.com/@mrthetrain?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
7+
martin-brechtl-sEkTsMYTqY0-unsplash.jpg:
8+
owner: Martin Brechtl
9+
url: https://unsplash.com/@majc0?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
10+
daniel-ruyter-JFA2vSpEUMY-unsplash.jpg:
11+
owner: Danier Ruyter
12+
url: https://unsplash.com/@dbruyter?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText

‎_drafts/money-time-energy.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: "The effective utilization of Money, Time, and Energy"
3+
date: 2020-07-31 20:10:19 +0200
4+
tags:
5+
image: /assets/images/stories/morgan-housel-unsplash.jpg
6+
---
7+
8+
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.
9+
<!--more-->
10+
11+
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.
12+
13+
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.
14+
15+
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.
16+
17+
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.
18+
19+
Every single person on earth probably asked themselves the question of "How do I get rich?" at one point in their life.
20+
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.
21+
22+
> "There are two ways to become rich, work hard or take enough with less"
23+
24+
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.
25+
26+
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?
27+
28+
If I would was them, I would have **bought time!** You are thinking, buying time? What do I mean with buying time.
29+
30+
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.
31+
32+
How can you buy time?
33+
34+

‎_includes/sidebar.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<div id="sidebar-wrapper">
2-
<h1 class="text-center"><a class="no-link petit-formal-script" href="/">Dijkstra<span class="brand-dot">.</span></a><br/>
3-
<small>{{ site.tagline }}</small>
2+
<h1 class="text-center"><a class="no-link petit" href="/">Dijkstra<span class="brand-dot">.</span></a><br/>
3+
<small id="subtitle">{{ site.tagline }}</small>
44
</h1>
55
<ul class="sidebar-nav">
66
<li>
7-
<a href="/writing/science"><i class="mdi mdi-pencil"></i> <span
8-
class="text-right">Writing</span></a>
7+
<a href="/writing/science"><i class="mdi mdi-atom"></i> <span
8+
class="text-right">Science</span></a>
99
</li>
1010
<li>
11-
<a href="/projects"><i class="mdi mdi-book-open-page-variant"></i> <span
12-
class="text-right">Projects</span></a>
11+
<a href="/writing/lifestyle"><i class="mdi mdi-yin-yang"></i> <span
12+
class="text-right">Lifestyle</span></a>
1313
</li>
1414
<li>
1515
<a href="/"><i class="mdi mdi-account-card-details"></i> <span
16-
class="text-right">Resume</span></a>
16+
class="text-right">About</span></a>
1717
</li>
1818
</ul>
1919

‎_includes/story_item.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@
1818
style="background-color: #ad9977;"
1919
>{{ include.story.language.name }}</small>
2020
{% endif %}
21-
<h2 class="title">
21+
<h2 class="title sans">
2222
<a href="{{ include.story.url }}">{{ include.story.title }}</a>
2323
</h2>
2424
<div class="info">
2525
<div class="time">
26-
<span class="mdi mdi-clock"></span> {{ include.story.date | date: '%e %b %Y %R' }}
26+
<span class="mdi mdi-clock"></span> {{ include.story.date | date: '%e %b %Y' }}
2727
</div>
2828
{% if include.story.tags %}
2929
<div class="categories">
@@ -34,7 +34,9 @@ <h2 class="title">
3434
</div>
3535
{% endif %}
3636
</div>
37-
<p class="sneak-peek">{{ include.story.excerpt }}</p>
37+
<p class="sneak-peek serif softcolor">
38+
{{ include.story.excerpt | strip_html }}
39+
</p>
3840
</div>
3941
</div>
4042
</div>

‎_layouts/default.html

+14-11
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,18 @@
3232
})(window,document,'script','dataLayer','GTM-KPKS5SL');</script>
3333
<!-- End Google Tag Manager -->
3434

35-
<link rel="stylesheet" href="/assets/css/bootstrap.min.css"/>
36-
<link rel="stylesheet" href="/assets/css/site.css"/>
3735
<link rel="stylesheet" href="/assets/css/main.css"/>
3836
<link rel="stylesheet" href="/assets/css/materialdesignicons.min.css"/>
3937

4038
{% if layout.head_css %}
41-
{% for css_file in layout.head_css %}
42-
<link rel="stylesheet" href="{{ css_file }}" />
43-
{% endfor %}
39+
{% for css_file in layout.head_css %}
40+
<link rel="stylesheet" href="{{ css_file }}" />
41+
{% endfor %}
42+
{% endif %}
43+
{% if page.head_css %}
44+
{% for css_file in page.head_css %}
45+
<link rel="stylesheet" href="{{ css_file }}" />
46+
{% endfor %}
4447
{% endif %}
4548

4649
<!-- Global site tag (gtag.js) - Google Analytics -->
@@ -60,14 +63,14 @@
6063
crossorigin="anonymous"></script>
6164
<!-- todo: mix this together -->
6265
{% if layout.head_js %}
63-
{% for js in layout.head_js %}
64-
<script src="{{ js }}"></script>
65-
{% endfor %}
66+
{% for js in layout.head_js %}
67+
<script src="{{ js }}"></script>
68+
{% endfor %}
6669
{% endif %}
6770
{% if page.head_js %}
68-
{% for js in page.head_js %}
69-
<script src="{{ js }}"></script>
70-
{% endfor %}
71+
{% for js in page.head_js %}
72+
<script src="{{ js }}"></script>
73+
{% endfor %}
7174
{% endif %}
7275

7376
<!-- !Plugins! -->

‎_layouts/story.html

+34-29
Original file line numberDiff line numberDiff line change
@@ -37,38 +37,43 @@
3737
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
3838
fjs.parentNode.insertBefore(js, fjs);
3939
}(document, 'script', 'facebook-jssdk'));</script>
40-
<div id="story-view">
41-
<div class="jumbotron">
42-
43-
<h1 class="story-title">{{ page.title }}</h1>
44-
<hr style="width: 10%" />
45-
<div>
46-
<small class="story-date">{{ page.date | date: '%e %B %Y' }}</small>
47-
</div>
40+
<main id="story-view">
41+
<article>
42+
<img class="story-image" alt="Story Image" src="{{ page.image }}" />
43+
<div class="jumbotron">
44+
<h1 class="story-title">{{ page.title }}</h1>
45+
<hr style="width: 10%" />
46+
<div>
47+
<small class="story-date serif">{{ page.date | date: '%e %B %Y' }}</small>
48+
</div>
49+
{% assign img = page.image | remove: '/assets/images/stories/' %}
50+
{% if site.data.images contains img %}
51+
<p class="serif softcolor">Photo by <a target="_blank" href="{{site.data.images[img].url}}">{{site.data.images[img].owner}}</a></p>
52+
{% endif %}
4853

49-
<div class="share-buttons">
50-
<!-- Twitter share button -->
51-
<a class="twitter-share-button" data-size="small"
52-
href="https://twitter.com/intent/tweet?url={{ site.url | append: page.url | url_encode }}&text={{ page.title }}&via=dijkstrascience">Tweet</a>
53-
<!-- Facebook share button -->
54-
<div class="fb-share-button"
55-
data-href="{{ site.url | append: page.url }}"
56-
data-layout="button_count">
54+
<div class="share-buttons">
55+
<!-- Twitter share button -->
56+
<a class="twitter-share-button" data-size="small"
57+
href="https://twitter.com/intent/tweet?url={{ site.url | append: page.url | url_encode }}&text={{ page.title }}&via=dijkstrascience">Tweet</a>
58+
<!-- Facebook share button -->
59+
<div class="fb-share-button"
60+
data-href="{{ site.url | append: page.url }}"
61+
data-layout="button_count">
62+
</div>
63+
<!-- LinkedIn share button -->
64+
<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
65+
<script type="IN/Share" data-url="{{ site.url | append: page.url }}"></script>
5766
</div>
58-
<!-- LinkedIn share button -->
59-
<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
60-
<script type="IN/Share" data-url="{{ site.url | append: page.url }}"></script>
6167
</div>
62-
</div>
63-
<div class="post-image" style="background-image: url('{{ page.image }}');"></div>
64-
<div id="story" class="container-fluid">
65-
{{ content }}
68+
<div id="story" class="container-fluid">
69+
{{ content }}
6670

67-
<div class="clearfix"></div>
68-
<div id="disqus_thread"></div>
69-
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by
70-
Disqus.</a></noscript>
71-
</div>
71+
<div class="clearfix"></div>
72+
<div id="disqus_thread"></div>
73+
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by
74+
Disqus.</a></noscript>
75+
</div>
76+
</article>
7277
<script>
7378
/**
7479
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
@@ -85,4 +90,4 @@ <h1 class="story-title">{{ page.title }}</h1>
8590
(d.head || d.body).appendChild(s);
8691
})();
8792
</script>
88-
</div>
93+
</main>

0 commit comments

Comments
 (0)