PageSummary

about.html

<div class="about-container" >
    <div class="about-container-header" data-toggle="tooltip" data-toggle="collapse"  data-target="#aboutcontent"  title="Display a summary about this page.">
        <p class = "about-container-heading about-font-default">
            <i class="fa fa-paperclip about-font-out" aria-hidden="true"></i>
            <span class="about-prompt">
                ~>
            </span>
            <span class="about-font-cmd">
                Get-Help
            </span>
            -Name
            <span class="about-font-string">
                    'About_{{ page.title | remove: " "}}'
            </span>
        </p>
    </div>
    <div class="about-container-content  collapse" id="aboutcontent">
        <p class="about-font-out">
            {{ include.content -}}
            <span class="blinking-cursor">|</span>
        </p>
    </div>
</div>

example-post.md

layout	title	subtitle	googlefonts
page	Some Example	Swesome Subtitle	Share+Tech+Mono

{% include about.html content="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." %}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

main.css

/* ----- About Container ----- */

.about-container {
  margin: 0px;
  position: relative;
}

.about-container p {
  margin: 0px;
}

.about-container-header {
  opacity: 0.95;
  background-color: #394034;
  border-color: #7c7c7c;
  border-style: solid;
  border-width: 1px;
  border-radius: 8px 8px 0px 0px;
  padding: 2px 8px 2px 8px;
}

.about-container-header:hover {
  cursor: pointer;
}

.about-container-heading {
  font-family: 'Share Tech Mono', Consolas, monospace;
  font-size: 16px;
}

.about-prompt {
  color:#c7254e;
  font-weight: 800;
}

.about-container-content {
  opacity: 0.95;
  position: absolute;
  background-color: #394034;
  font-family: 'Share Tech Mono', Consolas, monospace;
  font-size: 16px;
  border-color: #7c7c7c;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-radius: 0px 0px 8px 8px;
  padding: 5px 8px 5px 8px;
  margin-top: -1px;
}

.about-font-default {
  color: #7c7c7c;
}

.about-font-cmd {
  color: #b6b649;
}

.about-font-string {
  color:#1a83a6;
}

.about-font-out {
  color: #ffffff;
}

.blinking-cursor {
  /*
  font-weight: 100;
  font-size: 30px; */
  color: #ffffff;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}

@keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: white;
  }
}

@-moz-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: white;
  }
}

@-webkit-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: white;
  }
}

@-ms-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: white;
  }
}

@-o-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: white;
  }
}