Restyling of the story page

Author: melledijkstra

README.md

@@ -3,6 +3,36 @@
 This repository contains the official source code used for my personal website
 Copyright © 2016 - 2018 Melle Dijkstra, All rights reserved
 
+## Installation
+
+### Unix based systems
+
+reference: https://help.github.com/en/enterprise/2.14/user/articles/setting-up-your-github-pages-site-locally-with-jekyll
+
+Open the terminal.
+
+Check whether you have Ruby 2.1.0 or higher installed:
+
+```
+$ ruby --version
+> ruby 2.X.X
+```
+
+If you don't have Ruby installed, install Ruby 2.1.0 or higher.
+
+Install Bundler:
+
+```
+# Installs the Bundler gem
+$ gem install bundler
+```
+
+Install dependencies (gems):
+```
+# install all needed gems
+$ bundle install
+```
+
 ## Impression
 
 Stories overview page where I display my latest written stories/articles.

_includes/sidebar.html

@@ -29,6 +29,10 @@ <h1 class="text-center"><a class="no-link" href="/">Dijkstra<span class="brand-d
            href="https://stackoverflow.com/users/3298540/melle-dijkstra"><span
                 class="mdi mdi-stackoverflow"></span><span
                 class="hidden">My stackoverflow account</span></a>
+        <a class="spotify" target="_blank"
+           href="https://open.spotify.com/user/1187898094?si=54znvX5hRvaQjFeh5M3cvQ"><span
+                class="mdi mdi-spotify"></span><span
+                class="hidden">My spotify account</span></a>
     </div>
     <div class="text-center">
         <small>

_layouts/default.html

@@ -21,10 +21,20 @@
     <meta name="msapplication-TileImage" content="/favicons/ms-icon-144x144.png">
     <meta name="theme-color" content="#ac9c80">
 
+    <!-- Pinterest Tag -->
+    <meta name="p:domain_verify" content="528f8d5e26a7c45be1eacbef1d62ca2f"/>
+
     <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 %}
+    {% endif %}
+
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-61555186-3"></script>
     <script>

_layouts/story.html

@@ -1,9 +1,7 @@
 ---
 layout: default
-head_js:
-- 'https://apis.google.com/js/platform.js'
-meta:
--
+head_css:
+  - '/assets/css/story.css'
 ---
 {% if site.url contains "localhost" %}
 {% assign disqusId = "dev-melledijkstra" %}
@@ -39,20 +37,19 @@
     js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
     fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
-
 <div id="story-view">
     <div class="jumbotron">
 
         <h1 class="story-title">{{ page.title }}</h1>
+        <hr style="width: 10%" />
         <div>
-            <small class="story-date">{{ page.date | date: '%e %b %Y %R' }}</small>
+            <small class="story-date">{{ page.date | date: '%e %B %Y' }}</small>
         </div>
 
-        <div class="margin-10 story-share-bar">
+        <div class="share-buttons">
             <!-- Twitter share button -->
-            <a class="twitter-share-button" data-size="large"
+            <a class="twitter-share-button" data-size="small"
                href="https://twitter.com/intent/tweet?url={{ site.url | append: page.url | url_encode }}&text={{ page.title }}&via=dijkstrascience">Tweet</a>
-            <div data-action="share" data-height="20" class="g-plus"></div>
             <!-- Facebook share button -->
             <div class="fb-share-button"
                  data-href="{{ site.url | append: page.url }}"
@@ -62,10 +59,9 @@ <h1 class="story-title">{{ page.title }}</h1>
             <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
             <script type="IN/Share" data-url="{{ site.url | append: page.url }}"></script>
         </div>
-
-        <div class="post-image" style="background-image: url('{{ page.image }}');"></div>
     </div>
-    <div id="story-container" class="container-fluid">
+    <div class="post-image" style="background-image: url('{{ page.image }}');"></div>
+    <div id="story" class="container-fluid">
         {{ content }}
 
         <div class="clearfix"></div>

assets/css/main.css

@@ -9,6 +9,7 @@
 /* Google Fonts */
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');
 @import url('https://fonts.googleapis.com/css?family=Raleway');
+@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&display=swap');
 /* Material Design Icons */
 @import url('//cdn.materialdesignicons.com/1.8.36/css/materialdesignicons.min.css');
 
@@ -184,6 +185,13 @@ pre code {
     /*background-color: #b2a38a !important;*/
 }
 
+table.table td, table.table th {
+    font-size: 4vw;
+    font-size: 18px;
+
+    word-break: break-all;
+}
+
 /**********************************************************************************
  *
  *    Helpers
@@ -434,10 +442,10 @@ pre {
 
 .slanted-down {
     clip-path: polygon(
-            0 0%, /* top left */
-            100% 6%, /* top right */
-            100% 100%, /* bottom right */
-            0 94% /* bottom left */
+        0 0%, /* top left */
+        100% 6%, /* top right */
+        100% 100%, /* bottom right */
+        0 94% /* bottom left */
     );
 }
 
@@ -523,6 +531,10 @@ pre {
         position: relative;
         padding-left: 250px;
     }
+
+    .social-buttons {
+        font-size: 2em;
+    }
 }
 
 @media (min-width: 950px) {
@@ -600,88 +612,10 @@ pre {
     color: #F48024;
 }
 
-/**********************************************************************************
- *
- *   Story Styling
- *
- **********************************************************************************/
-
-/*----------------------------------------------------------------------------------*
- *  Story View Page
- *----------------------------------------------------------------------------------*/
-#story-view {
-    max-width: 100%;
-    font-size: 20px;
-}
-
-#story-view .jumbotron {
-    background-color: #202020;
-    color: #fff;
-    margin: 0 auto 50px auto;
-    padding-bottom: 0;
-}
-
-#story-view .jumbotron .post-image {
-    height: 100px;
-    width: 100%;
-
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-
-    border-top: 2px solid white;
-    border-bottom: 2px solid black;
-
-    margin-top: 30px;
-}
-
-#story-view .story-title {
-    font-size: 2.5em;
+.social-buttons .spotify:hover {
+    color: #1DB954;
 }
 
-#story-view .jumbotron .story-date {
-    font-size: 25px;
-}
-
-/* Everything in the container is parsed from the markdown */
-#story-container {
-    max-width: 1000px;
-    word-wrap: break-word;
-}
-
-#story-container .highlight pre {
-    padding: 10px;
-}
-
-#story-container img {
-    width: 100%;
-    height: auto;
-}
-
-#story-container iframe {
-    width: 100%;
-    margin: 10px 0;
-}
-
-.story-header {
-    margin-bottom: 20px;
-}
-
-#disqus_thread {
-    margin-top: 50px;
-}
-
-.story-share-bar {
-    display: inline-block;
-}
-
-/* this class can be used to use the full width of the  */
-/*.fat {*/
-/*    width: 100vw;*/
-/*    position: relative;*/
-/*    left: calc(-50vw + 50%);*/
-/*}*/
-
 /*----------------------------------------------------------------------------------*
  * Guides page & Guide items
  *----------------------------------------------------------------------------------*/
@@ -876,6 +810,7 @@ pre {
     z-index: 3;
     border: 2px solid white;
 }
+
 @media(max-width: 800px) {
     #photo-of-myself {
         height: 100px;

assets/css/story.css

@@ -0,0 +1,125 @@
+/**********************************************************************************
+ *
+ *   Story Styling
+ *
+ **********************************************************************************/
+
+/*----------------------------------------------------------------------------------*
+ *  Story View Page
+ *----------------------------------------------------------------------------------*/
+#story-view {
+    max-width: 100%;
+}
+
+#story-view .jumbotron {
+    padding: 40px 48px;
+    text-align: left;
+}
+
+#story-view .jumbotron hr {
+    margin-left: 0;
+    padding-left: 0;
+}
+
+#story-view .post-image {
+    height: 300px;
+    width: 100%;
+
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    filter: drop-shadow(0 0 10px gray);
+    -webkit-filter: drop-shadow(0 0 10px gray);
+
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+
+#story-view .story-title {
+    font-family: 'Petit Formal Script', cursive;
+    font-size: 70px;
+    margin-top: 0;
+}
+
+#story-view .jumbotron .story-date {
+    font-size: 30px;
+    text-transform: uppercase;
+}
+
+/* Everything in the container is parsed from the markdown */
+#story {
+    max-width: 1000px;
+    word-wrap: break-word;
+}
+
+#story {
+    font-size: 21px;
+}
+
+#story > p:nth-child(1):first-letter {
+    font-size: 35px;
+}
+
+#story > p {
+    padding: 0 40px;
+}
+
+#story > p, #story > blockquote {
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+#story .highlight pre {
+    padding: 10px;
+}
+
+#story img {
+    width: 100%;
+    height: auto;
+}
+
+#story iframe {
+    width: 100%;
+    margin: 10px 0;
+}
+
+.story-header {
+    margin-bottom: 20px;
+}
+
+#disqus_thread {
+    margin-top: 50px;
+}
+
+.share-buttons {
+    margin-top: 15px;
+}
+
+.share-buttons > * {
+    vertical-align: bottom;
+}
+
+@media (max-width: 658px) {
+    #story-view .story-title {
+        font-size: 50px;
+    }
+
+    #story-view .jumbotron {
+        padding: 30px 48px;
+    }
+}
+
+@media (max-width: 950px) {
+    #story-view .story-title {
+        font-size: 40px;
+    }
+
+    #story-view .jumbotron .story-date {
+        font-size: 20px;
+    }
+
+    #story-view .jumbotron {
+        padding: 75px 20px 20px 20px;
+    }
+}