added reveal spoilers on click

_posts/2018-01-11-quick-start-guide.md

@@ -1,27 +1,27 @@
 ---
 layout: post
-title:  "Quick Start Guide"
+title:  "Let's test spoilers"
 author: sal
 categories: [ Jekyll, tutorial ]
 image: assets/images/12.jpg
 featured: true
 hidden: true
 ---
 
-If you already have a full Ruby development environment with all headers and RubyGems installed (see Jekyll’s requirements), you can create a new Jekyll site by doing the following:
+Director Roland Suso Richter's enigmatic psychological thriller (direct to video/DVD) was based upon screenwriter Michael Cooney's own play "Point of Death" - a title that gave away the film's entire plot twist premise.
 
-```ruby
-# Install Jekyll and Bundler gems through RubyGems
-gem install jekyll bundler
+As in many similar films, such as Jacob's Ladder (1990), Soul Survivors (2001), and The Butterfly Effect (2004), events and people were thoroughly distorted and confused because the protagonist was at the point of death. The tagline was misleading:
 
-# Create a new Jekyll site at ./myblog
-jekyll new myblog
+"When You Don't Have a Memory, How Can You Remember Who to Trust?"
 
-# Change into your new directory
-cd myblog
+The mind-warping film opened with a hospital patient Simon Cable (Ryan Phillippe) awakening in a <span class="spoiler"> hospital with little knowledge (amnesia perhaps?) of what had happened, and why he was there, etc. He was told by attending Dr. Jeremy Newman (Stephen Rea) that it was July 29, 2002 (Simon thought it was the year 2000 - he was confused - he heard a doctor say 20:00 hours!) and that he had died for two minutes from cardiac arrest following the near-fatal accident -- but he had been revived ("You're as good as new").</span> Dr. Newman: "Simon, this is the 29th of July. The year is 2002. And your wife, whose name is Anna, is waiting outside." 
 
-# Build the site on the preview server
-bundle exec jekyll serve
+(The doctor left off four crucial additional words, revealed in the film's ending.) (Spoiler: Simon had died and was not resuscitated!).
 
-# Now browse to http://localhost:4000
-```
+A major clue to everything that truly happened was the scene that played next under the credits - hospital staff failed to bring a patient back to life with a defibrillator after a car accident. Chest compressions failed and there was no pulse. A second major clue was provided by hospital orderly Travis (Stephen Graham): <span class="spoiler">Everybody dies. No mystery there. But why and how everyone dies. Now, there's a mystery worth solving. Probably the biggest mystery there is.</span>
+
+#### So how do we do spoilers?
+
+```html
+<span class="spoiler">My hidden paragraph here.</span>
+```

_sass/_syntax.scss

@@ -1,6 +1,9 @@
 
 .highlight {
-	background: #F7FAFB;
+	background: #fff;
+    border: 0;
+    padding: 0;
+    margin-bottom:1.7rem;
 	.c { color: #999988; font-style: italic } /* Comment */
 	.err { color: #a61717; background-color: #e3d2d2 } /* Error */
 	.k { font-weight: bold } /* Keyword */

assets/css/screen.css

@@ -17,18 +17,18 @@ License: https://www.wowthemes.net/freebies-license/
  pre {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    margin: 0 0 1.75em 0;
     border: #E3EDF3 1px solid;
     width: 100%;
-    padding: 10px;
+    padding: 7px;
     font-family: monospace, sans-serif;
     font-size: 14px;
     white-space: pre;
     overflow: auto;
-    background: #F7FAFB;
-    border-radius: 3px;
+    background: #fff;
+    border-radius: 0px;
     line-height: 1.6;
     color:#333;
+     margin-bottom:-rem;
 }
  .mediumnavigation {
      background:rgba(255,255,255,.97);
@@ -668,3 +668,15 @@ License: https://www.wowthemes.net/freebies-license/
 .star-rating {
     font-size:20px;
 }
+
+a.reveal {
+	font-size: 65%;
+    padding: 4px;
+    border-radius:2px;
+    line-height:1;
+	background: #333;
+	color: #fff !important;
+	font-style: italic;
+	cursor: pointer;
+    display:inline-block;
+}

assets/js/mediumish.js

@@ -87,4 +87,12 @@ jQuery(document).ready(function($){
 
     $('.site-content').css('margin-top', $('header').outerHeight() + 'px');  
 
- });   
+    // spoilers
+    $("span.spoiler").hide();	
+    $('<a class="reveal">Reveal Spoiler &gt;&gt;</a> ').insertBefore('.spoiler');
+	$("a.reveal").click(function(){
+		$(this).parents("p").children("span.spoiler").fadeIn(1500);
+		$(this).parents("p").children("a.reveal").fadeOut(0);
+	});
+
+ });   

changelog.md

@@ -1,9 +1,15 @@
 # Mediumish Jekyll Theme - Change Log
 
+## 2019-03-01, v1.0.27
+
+### Added
+- Reveal hidden spoilers on click
+
 ## 2019-03-01, v1.0.26
 
 ### Added
 - Syntax line numbers
+- Post rating stars
 
 ### Fixed
 - Category links with more than 1 word