add modal UI - unused

Author: bishabosha

_plugins/modal-details-lib/modal-details.rb

@@ -0,0 +1,38 @@
+require 'erb'
+
+module Jekyll
+    module ModalDetails
+        class ModalDetailsBlock < Liquid::Block
+            SYNTAX = /^\s*(#{Liquid::QuotedFragment})/o
+            Syntax = SYNTAX
+
+            alias_method :render_block, :render
+
+            def unquote(string)
+                string.gsub(/^['"]|['"]$/, '')
+            end
+
+            def initialize(block_name, markup, tokens)
+                super
+
+                if markup =~ SYNTAX
+                    @name = unquote($1)
+                else
+                    raise SyntaxError.new("Block #{block_name} requires an id")
+                end
+            end
+
+            def render(context)
+                site = context.registers[:site]
+                converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
+                modalDetailsContent = converter.convert(render_block(context))
+                currentDirectory = File.dirname(__FILE__)
+                templateFile = File.read(currentDirectory + '/template.erb')
+                template = ERB.new(templateFile)
+                template.result(binding)
+            end
+        end
+    end
+end
+
+Liquid::Template.register_tag('modal', Jekyll::ModalDetails::ModalDetailsBlock)

_plugins/modal-details-lib/modal-details/version.rb

@@ -0,0 +1,5 @@
+module Jekyll
+    module ModalDetails
+      VERSION = "1.1.1"
+    end
+end

_plugins/modal-details-lib/template.erb

@@ -0,0 +1,14 @@
+<div id="<%= @name %>" class="modal-window">
+  <div class="modal-content">
+    <div class="wrap">
+      <div class="content-modal documentation">
+        <div class="inner-box">
+          <a href="#!" title="Close" class="modal-close">Close</a>
+          <div class="modal-inner">
+            <%= modalDetailsContent %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

_plugins/modal_details.rb

@@ -0,0 +1 @@
+require_relative "modal-details-lib/modal-details"

_sass/base/helper.scss

@@ -18,8 +18,8 @@
     top: 15px;
     margin-bottom: 25px;
     background: #fff;
-    -webkit-box-shadow: 0 0 18px 20px #fff;
-    -moz-box-shadow: 0 0 18px 20px #fff;
+    -webkit-box-shadow: 0 7px 15px 5px #fff;
+    -moz-box-shadow: 0 7px 15px 5px #fff;
     box-shadow: 0 7px 15px 5px #fff;
     z-index: 5;
 }

_sass/components/alt-details.scss

@@ -2,6 +2,66 @@
 //------------------------------------------------
 //------------------------------------------------
 
+.modal-window {
+    // derived from https://codepen.io/timothylong/pen/AJxrPR
+    position: fixed;
+    background-color: rgba(255, 255, 255, 0.35);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.5s;
+
+    &:target {
+        opacity: 1;
+        visibility: visible;
+        pointer-events: auto;
+    }
+
+    &>.modal-content {
+        .content-modal {
+            .modal-inner {
+                max-height: calc(60vh);
+                overflow-y: auto;
+            }
+            top: 20vh;
+            transform: translate(0%, 20vh);
+            -webkit-box-shadow: 0 7px 15px 5px #ccc;
+            -moz-box-shadow: 0 7px 15px 5px #ccc;
+            box-shadow: 0 7px 15px 5px #ccc;
+        }
+    }
+
+    header {
+        font-weight: bold;
+    }
+
+    h1 {
+        font-size: 150%;
+        margin: 0 0 15px;
+    }
+}
+
+.modal-close {
+    color: #aaa;
+    line-height: 50px;
+    font-size: 80%;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 0;
+    width: 70px;
+    text-decoration: none;
+
+    &:hover {
+        color: black;
+    }
+}
+
 .alt-details.help-info {
     .alt-details-toggle {
         background-color: $brand-primary;
@@ -54,14 +114,14 @@
         margin: 0;
     }
 
-    .alt-details-control+.alt-details-toggle+.alt-details-detail {
+    .alt-details-control+label+.alt-details-detail {
         // by default, hide the details
         position: absolute;
         top: -999em;
         left: -999em;
     }
 
-    .alt-details-control:checked+.alt-details-toggle+.alt-details-detail {
+    .alt-details-control:checked+label+.alt-details-detail {
         // show the details when the control is checked
         position: static;
     }
@@ -71,7 +131,8 @@
         content: "\f13a"; // <i class="fa-solid fa-circle-chevron-down"></i>
     }
 
-    .alt-details-detail {
+    // theme for details of expanded "alt-details-toggle" button
+    .alt-details-control+.alt-details-toggle+.alt-details-detail {
         // The detail box appears to be underneath the toggle button
         // so we add a padding to the top and push it up.
         border-bottom: $base-border-gray;

_sass/layout/inner-main.scss

@@ -35,6 +35,17 @@
       }
     }
 
+    .content-modal {
+      @include span-columns(7);
+      margin-left: 50px;
+      @include bp(large) {
+        @include fill-parent;
+        order: 2;
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
+
     .content-nav,
     .content-nav-blog {
       @include span-columns(4);
@@ -51,6 +62,7 @@
       }
     }
 
+    .content-modal,
     .content-primary {
       .documentation,
       .tools {