~rjpcasalino/bss

36ebb93060e66be6cbe48caace97220a7c048db5 — rjpcasalino 1 year, 29 days ago f95cd80
add example
A example/_site/www/canvas/index.html => example/_site/www/canvas/index.html +212 -0
@@ 0,0 1,212 @@


<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Canvas</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-coy.min.css" rel="stylesheet" />
<style>
body {
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 40px);
  max-width: 600px;
  font-family: sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

 /* horizontal rule 
  */
hr {
  overflow: visible; /* For IE */
  padding: 0;
  border: none;
  border-top: medium double #333;
  color: #333;
  text-align: center;
}

hr:after {
  content: "\00A7";
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: white;
}

a {
  color: black;
  text-decoration: underline;
}

a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  color: black;
  text-decoration: underline;
}

ol {
 list-style: japanese-formal;
 margin: 15px;
 line-height: 1.5;
}

pre {
   background-color: #d3d3d3;
   white-space: pre-wrap;
}

code {
   background-color: #ffe300;
}
 
img {
  max-width: 100%; 
  height: auto;
}
.masthead-wrap {
 filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
}
#masthead {
  max-width: 50vw;
  clip-path: polygon(0% 0%, 87% 5%, 98% 87%, 3% 93%);
  -webkit-clip-path: polygon(0% 0%, 87% 5%, 98% 87%, 3% 93%);
}

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
</style>
</head>



 <body>
    <div>
    
	<h1>CANVAS</h1>

<p>Some SVG shit goes here</p>

<p><a href="https://google.com">this is a link to some place</a></p>

    

    <ul>
    
	<li>2018-07-11-first.md</li>
    
    </ul>
    </div>

<p>
    <a href="https://validator.w3.org/check/referer">
	<img style="border:0;width:88px;height:31px;" 
	     src="https://jigsaw.w3.org/css-validator/images/vh40" 
	     alt="Valid XHTML 4.0!"/>
    </a>
</p>
<p>
    <a href="https://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="https://jigsaw.w3.org/css-validator/images/vcss-blue"
            alt="Valid CSS!" />
    </a>
</p>
<p>
     <a href="//www.w3.org/QA/" title="W3C's Quality Assurance Activity, bringing you free Web quality tools and more">
	 <img src="https://jigsaw.w3.org/css-validator/images/woolly-icon" 
	      alt="Learn CSS">
     </a>
</p>

<small>site last modified: Sat Aug 29 08:48:22 2020</small>    
</body>
</html>


A example/_site/www/index.html => example/_site/www/index.html +210 -0
@@ 0,0 1,210 @@


<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Hello, Perl</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-coy.min.css" rel="stylesheet" />
<style>
body {
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 40px);
  max-width: 600px;
  font-family: sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

 /* horizontal rule 
  */
hr {
  overflow: visible; /* For IE */
  padding: 0;
  border: none;
  border-top: medium double #333;
  color: #333;
  text-align: center;
}

hr:after {
  content: "\00A7";
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: white;
}

a {
  color: black;
  text-decoration: underline;
}

a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  color: black;
  text-decoration: underline;
}

ol {
 list-style: japanese-formal;
 margin: 15px;
 line-height: 1.5;
}

pre {
   background-color: #d3d3d3;
   white-space: pre-wrap;
}

code {
   background-color: #ffe300;
}
 
img {
  max-width: 100%; 
  height: auto;
}
.masthead-wrap {
 filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
}
#masthead {
  max-width: 50vw;
  clip-path: polygon(0% 0%, 87% 5%, 98% 87%, 3% 93%);
  -webkit-clip-path: polygon(0% 0%, 87% 5%, 98% 87%, 3% 93%);
}

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
</style>
</head>



 <body>
    <div>
    
	<p>Hello, world!</p>

<p>From, Perl.</p>

    

    <ul>
    
	<li>2018-07-11-first.md</li>
    
    </ul>
    </div>

<p>
    <a href="https://validator.w3.org/check/referer">
	<img style="border:0;width:88px;height:31px;" 
	     src="https://jigsaw.w3.org/css-validator/images/vh40" 
	     alt="Valid XHTML 4.0!"/>
    </a>
</p>
<p>
    <a href="https://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="https://jigsaw.w3.org/css-validator/images/vcss-blue"
            alt="Valid CSS!" />
    </a>
</p>
<p>
     <a href="//www.w3.org/QA/" title="W3C's Quality Assurance Activity, bringing you free Web quality tools and more">
	 <img src="https://jigsaw.w3.org/css-validator/images/woolly-icon" 
	      alt="Learn CSS">
     </a>
</p>

<small>site last modified: Sat Aug 29 08:48:22 2020</small>    
</body>
</html>


A example/_site/www/posts/2018-07-11-first.html => example/_site/www/posts/2018-07-11-first.html +204 -0
@@ 0,0 1,204 @@


<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> first</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-coy.min.css" rel="stylesheet" />
<style>
body {
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 40px);
  max-width: 600px;
  font-family: sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

 /* horizontal rule 
  */
hr {
  overflow: visible; /* For IE */
  padding: 0;
  border: none;
  border-top: medium double #333;
  color: #333;
  text-align: center;
}

hr:after {
  content: "\00A7";
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: white;
}

a {
  color: black;
  text-decoration: underline;
}

a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  color: black;
  text-decoration: underline;
}

ol {
 list-style: japanese-formal;
 margin: 15px;
 line-height: 1.5;
}

pre {
   background-color: #d3d3d3;
   white-space: pre-wrap;
}

code {
   background-color: #ffe300;
}
 
img {
  max-width: 100%; 
  height: auto;
}
.masthead-wrap {
 filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
}
#masthead {
  max-width: 50vw;
  clip-path: polygon(0% 0%, 87% 5%, 98% 87%, 3% 93%);
  -webkit-clip-path: polygon(0% 0%, 87% 5%, 98% 87%, 3% 93%);
}

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
</style>
</head>


  <body>
<a href="/"><img src="https://www.w3.org/Icons/back.gif"/></a>

    <h1> first</h1>
    
	<p>Commit early, commit often. Think this over but never soften / Come spring / Come a coffin / Commit early, commit often.</p>

    

<a href="/"><img src="https://www.w3.org/Icons/prev.gif"/></a>

<p>
    <a href="https://validator.w3.org/check/referer">
	<img style="border:0;width:88px;height:31px;" 
	     src="https://jigsaw.w3.org/css-validator/images/vh40" 
	     alt="Valid XHTML 4.0!"/>
    </a>
</p>
<p>
    <a href="https://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="https://jigsaw.w3.org/css-validator/images/vcss-blue"
            alt="Valid CSS!" />
    </a>
</p>
<p>
     <a href="//www.w3.org/QA/" title="W3C's Quality Assurance Activity, bringing you free Web quality tools and more">
	 <img src="https://jigsaw.w3.org/css-validator/images/woolly-icon" 
	      alt="Learn CSS">
     </a>
</p>

<small>site last modified: Sat Aug 29 08:48:22 2020</small>    
</body>
</html>


A example/manifest.ini => example/manifest.ini +12 -0
@@ 0,0 1,12 @@
[build]
src=src/
dest=_site/
templates_dir=src/templates
watch=false
collections=posts
exclude=*.md
encoding=UTF-8
[server]
port=8090
host=127.0.0.1


A example/src/canvas/index.md => example/src/canvas/index.md +10 -0
@@ 0,0 1,10 @@
---
title: Canvas
layout: default
---

# CANVAS

Some SVG shit goes here

[this is a link to some place](https://google.com)

A example/src/index.md => example/src/index.md +10 -0
@@ 0,0 1,10 @@
---
title: Hello, Perl
layout: default
---

Hello, world!

From, Perl.



A example/src/posts/2018-07-11-first.md => example/src/posts/2018-07-11-first.md +6 -0
@@ 0,0 1,6 @@
---
title: first
layout: post
---

Commit early, commit often. Think this over but never soften / Come spring / Come a coffin / Commit early, commit often.

A example/src/templates/default.tmpl => example/src/templates/default.tmpl +18 -0
@@ 0,0 1,18 @@
[% header = "partials/header.tmpl" %]
[% footer = "partials/footer.tmpl" %]
[% INCLUDE $header %]

 <body>
    <div>
    [% FOREACH part IN body %]
	[% part %]
    [% END %]

    <ul>
    [% FOREACH item IN collections %]
	<li>[% item %]</li>
    [% END %]
    </ul>
    </div>

[% INCLUDE $footer %]

A example/src/templates/partials/footer.tmpl => example/src/templates/partials/footer.tmpl +24 -0
@@ 0,0 1,24 @@
<p>
    <a href="https://validator.w3.org/check/referer">
	<img style="border:0;width:88px;height:31px;" 
	     src="https://jigsaw.w3.org/css-validator/images/vh40" 
	     alt="Valid XHTML 4.0!"/>
    </a>
</p>
<p>
    <a href="https://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="https://jigsaw.w3.org/css-validator/images/vcss-blue"
            alt="Valid CSS!" />
    </a>
</p>
<p>
     <a href="//www.w3.org/QA/" title="W3C's Quality Assurance Activity, bringing you free Web quality tools and more">
	 <img src="https://jigsaw.w3.org/css-validator/images/woolly-icon" 
	      alt="Learn CSS">
     </a>
</p>

<small>site last modified: [% site_modified %]</small>    
</body>
</html>

A example/src/templates/partials/header.tmpl => example/src/templates/partials/header.tmpl +165 -0
@@ 0,0 1,165 @@
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>[% title %]</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-coy.min.css" rel="stylesheet" />
<style>
body {
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 40px);
  max-width: 600px;
  font-family: sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}

 /* horizontal rule 
  */
hr {
  overflow: visible; /* For IE */
  padding: 0;
  border: none;
  border-top: medium double #333;
  color: #333;
  text-align: center;
}

hr:after {
  content: "\00A7";
  display: inline-block;
  position: relative;
  top: -0.7em;
  font-size: 1.5em;
  padding: 0 0.25em;
  background: white;
}

a {
  color: black;
  text-decoration: underline;
}

a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  color: black;
  text-decoration: underline;
}

ol {
 list-style: japanese-formal;
 margin: 15px;
 line-height: 1.5;
}

pre {
   background-color: #d3d3d3;
   white-space: pre-wrap;
}

code {
   background-color: #ffe300;
}
 
img {
  max-width: 100%; 
  height: auto;
}
.masthead-wrap {
 filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
}
#masthead {
  max-width: 50vw;
  clip-path: polygon(0% 0%, 87% 5%, 98% 87%, 3% 93%);
  -webkit-clip-path: polygon(0% 0%, 87% 5%, 98% 87%, 3% 93%);
}

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3) {
 body {
   margin-left: auto;
   margin-right: auto;
   width: 75vw;
   font-family: sans-serif;
   line-height: 1.5;
   overflow-x: hidden;
 }
}
</style>
</head>


A example/src/templates/post.tmpl => example/src/templates/post.tmpl +14 -0
@@ 0,0 1,14 @@
[% header = "partials/header.tmpl" %]
[% footer = "partials/footer.tmpl" %]
[% INCLUDE $header %]
  <body>
<a href="/"><img src="https://www.w3.org/Icons/back.gif"/></a>

    <h1>[% title %]</h1>
    [% FOREACH part IN body %]
	[% part %]
    [% END %]

<a href="/"><img src="https://www.w3.org/Icons/prev.gif"/></a>

[% INCLUDE $footer %]