folder structure created

6 months ago · 082de78d8f
commit 082de78d8f
36 changed files with 32093 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,10 @@
 Do websites have readmes? What about catalogues?
 # This is a collection of xpub projects
 Each folder contains html documents which display on the internet and other places. The other files in the folder like images and audio are linked to in that html. The folders sometimes include css files to style the html pages.
 # This is a book
 The folder /print/ contains an index.html file where paged.js magics it into a book. The index.html file is generated by running generate-print.py, created from all the md files in the project.
 # This is a website
 Each folder is a section on the website. A post hook links it to lowkeysexshow.xpub.nl (working title), so everything in the git is published to the internet. The html files are generated by running generate-web.py, created from all the md files in the project.
--- a/ada/index.html
+++ b/ada/index.html
@ -0,0 +1,24 @@
 <DOCTYPE html>
 <html>
 <head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../style.css">
    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
 <!-- Nav bar -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Graduates</a></li>
            <li><a href="">Special Issues</a></li>
        </ul>
    </nav>
 <div id="content"><h1 id="title">Title</h1>
 <h3 id="grad-project-description">Grad project Description</h3>
 <p>This is where your grad project goes</p>
 </div>
 </body>
 </html>
--- a/ada/index.md
+++ b/ada/index.md
@ -0,0 +1,10 @@
 ---
 title: Project
 author: Stephen
 ---
 # Title
 ### Grad project Description
 This is where your grad project goes
--- a/ada/thesis.html
+++ b/ada/thesis.html
@ -0,0 +1,24 @@
 <DOCTYPE html>
 <html>
 <head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../style.css">
    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
 <!-- Nav bar -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Graduates</a></li>
            <li><a href="">Special Issues</a></li>
        </ul>
    </nav>
 <div id="content"><h1 id="title">Title</h1>
 <h3 id="thesis-description">Thesis Description</h3>
 <p>This is where your thesis goes</p>
 </div>
 </body>
 </html>
--- a/ada/thesis.md
+++ b/ada/thesis.md
@ -0,0 +1,10 @@
 ---
 title: Thesis
 author: Stephen
 ---
 # Title
 ### Thesis Description
 This is where your thesis goes
--- a/aglaia/index.html
+++ b/aglaia/index.html
@ -0,0 +1,24 @@
 <DOCTYPE html>
 <html>
 <head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../style.css">
    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
 <!-- Nav bar -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Graduates</a></li>
            <li><a href="">Special Issues</a></li>
        </ul>
    </nav>
 <div id="content"><h1 id="title">Title</h1>
 <h3 id="grad-project-description">Grad project Description</h3>
 <p>This is where your grad project goes</p>
 </div>
 </body>
 </html>
--- a/aglaia/index.md
+++ b/aglaia/index.md
@ -0,0 +1,10 @@
 ---
 title: Project
 author: Aglaia
 ---
 # Title
 ### Grad project Description
 This is where your grad project goes
--- a/aglaia/thesis.html
+++ b/aglaia/thesis.html
@ -0,0 +1,24 @@
 <DOCTYPE html>
 <html>
 <head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../style.css">
    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
 <!-- Nav bar -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Graduates</a></li>
            <li><a href="">Special Issues</a></li>
        </ul>
    </nav>
 <div id="content"><h1 id="title">Title</h1>
 <h3 id="thesis-description">Thesis Description</h3>
 <p>This is where your thesis goes</p>
 </div>
 </body>
 </html>
--- a/aglaia/thesis.md
+++ b/aglaia/thesis.md
@ -0,0 +1,10 @@
 ---
 title: Thesis
 author: Aglaia
 ---
 # Title
 ### Thesis Description
 This is where your thesis goes
--- a/colophon/index.html
+++ b/colophon/index.html
@ -0,0 +1,42 @@
 <DOCTYPE html>
 <html>
 <head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../style.css">
    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
 <!-- Nav bar -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Graduates</a></li>
            <li><a href="">Special Issues</a></li>
        </ul>
    </nav>
 <div id="content"><h1 id="colophon">Colophon</h1>
 <h3 id="photography-and-illustration">Photography and Illustration</h3>
 <p>Unless otherwise stated, all photography, illustrations and other
 types of visualisations in this publication are created by the same
 authors as the text. That which is below is like that which is above,
 and that which is above is like that which is below, to do the miracle
 of one only thing.</p>
 <h3 id="digital-tools">Digital Tools</h3>
 <p>This book was created with the help of a collection of<br />
 not-so-small and extremely sharp open source tools, to name a few:
 paged.js, pandoc, pdfimpose, pdftk, and our darling demon Inkscape. So
 was the world created. From this are and do come admirable adaptations
 where the means is here in this.</p>
 <h3 id="printing-and-binding">Printing and Binding</h3>
 <p>Just lil’ old us.</p>
 <h3 id="typeface">Typeface</h3>
 <p>Consolation by us (available under the SIXX licence).<br />
 Immajer Simlish by inkandchaos (licence information unknown).<br />
 Work Sans by Wei Huang (available under SIL OFL).</p>
 <p>That which I have said of the operation of the Sun is accomplished
 and ended.</p>
 </div>
 </body>
 </html>
--- a/colophon/index.md
+++ b/colophon/index.md
@ -0,0 +1,24 @@
 ---
 title: Colophon
 author: Stephen
 ---
 # Colophon
 ### Photography and Illustration
 Unless otherwise stated, all photography, illustrations and other types of visualisations in this publication are created by the same authors as the text. That which is below is like that which is above, and that which is above is like that which is below, to do the miracle of one only thing.
 ### Digital Tools
 This book was created with the help of a collection of\
 not-so-small and extremely sharp open source tools, to name a few: paged.js, pandoc, pdfimpose, pdftk, and our darling demon Inkscape. So was the world created. From this are and do come admirable adaptations where the means is here in this.
 ### Printing and Binding
 Just lil' old us.
 ### Typeface
 Consolation by us (available under the SIXX licence).  
 Immajer Simlish by inkandchaos (licence information unknown).  
 Work Sans by Wei Huang (available under SIL OFL).    
 That which I have said of the operation of the Sun is accomplished and ended.
--- a/generate-print.py
+++ b/generate-print.py
@ -0,0 +1,81 @@
 from glob import glob
 import os
 import subprocess
 import jinja2
 import json
 # https://devdocs.io/python~3.9/library/glob#glob.glob
 # files = glob("content/**", recursive=True)
 # print(files)
 print("---------")
 all_html = []
 # new way using folder list
 folders = open('./print/section-order.txt').read().splitlines()
 stoplist = ["print", "spin-wheel"]
 # print(folders)
 titles = []
 for folder in folders:
 	if folder in stoplist:
 		continue
 	print("...............")
 	print("current folder!",folder)
 	files = glob(folder + "/*")
 	print(files)
 	print("************")
 	for file in files:
 		#print(file)
 		if file.endswith(".md"):
 			print("===========")
 			file = file.replace(" ", "\ ")
 			print(file)
 			md_data = open(file, encoding='utf-8').read()
 			#grab metadatas
 			metapandoc = f"pandoc {file} --template=./print/pandoc-metadata.template"
 			file_metadata = subprocess.check_output(metapandoc, shell=True, text=True,encoding="utf-8")
 			print("You did it! You fount the metadata, good job. Its:", file_metadata)
 			try:
 				file_dictionary = json.loads(file_metadata)
 				titles.append(file_dictionary["title"])
 			except KeyError as err:
 				print(err)
 			# use pandoc to turn file into html
 			pandoc_command = "pandoc -f markdown -t html " + file
 			html_data = subprocess.check_output(pandoc_command, shell=True, text=True,encoding="utf-8")
 			print("html has been generated!")
 			all_html.append(html_data)
 			#Images no longer copying, that time has passed.
 			# elif file.endswith((".jpg",".png",".jpeg",".jfif",".bmp")):
 			# 	print("image found yay",file)
 			# 	output_file=file.replace(folder,"./print")
 			# 	copy_command=f"cp {file} {output_file}"
 			# 	os.system(copy_command)
 			# 	print("copied to booklet!",copy_command)
 #html to template environment
 print("Los titlos: ", titles)
 env = jinja2.Environment(loader=jinja2.FileSystemLoader("print"))
 template = env.get_template("booklet.template.html")
 booklet_html = template.render(content=all_html,titles=titles)
 #print("this is the html: ", booklet_html)
 output = open("print/index.html", "w",encoding="utf-8")
 output.write(booklet_html)
 output.close()
 print("booklet html files saved!")
 #take all the css files and write to main css
 # Now open this page in the browser, remember: paged.js needs to be accessed through a webserver.
 # To run a webserver locally, you can use:
 # cd SI20/booklet/
 # python3 -m http.server
 # localhost:8000/index.html
--- a/generate-web.py
+++ b/generate-web.py
@ -0,0 +1,47 @@
 from glob import glob
 import os
 import subprocess
 import jinja2
 # https://devdocs.io/python~3.9/library/glob#glob.glob
 # files = glob("content/**", recursive=True)
 # print(files)
 print("---------")
 stoplist = ["print", "colophon"]
 folders = glob("*")
 for folder in folders:
 	if folder in stoplist:
 		continue
 	files = glob(folder + "/*")
 	for file in files:
 		#print(file)
 		if file.endswith(".md"):
 			print("===========")
 			file = file.replace(" ", "\ ")
 			print(file)
 			pandoc2 = "pandoc -f markdown -t html " + file 
 			html_data = subprocess.check_output(pandoc2, shell=True, text=True, encoding="utf-8")
 			# print(type(html_data))
 			# print("html_data: ", html_data)
 			env = jinja2.Environment(loader=jinja2.FileSystemLoader("."))
 			template = env.get_template("webpage.template.html")
 			html_data = template.render(content=html_data)
 			# print("this is the html for ",file,": ", html_data)
 			output = open(file[:-3] + ".html", "w", encoding="utf-8")
 			output.write(html_data)
 			output.close()
 			print("standalone index.html file saved!")
 #take all the css files and write to main css
 # Now open this page in the browser, remember: paged.js needs to be accessed through a webserver.
 # To run a webserver locally, you can use:
 # cd SI20/booklet/
 # python3 -m http.server
 # localhost:8000/index.html
--- a/index.html
+++ b/index.html
@ -0,0 +1,7 @@
 <head>
 </head>
 <body>
    Experimental Publishing 2024
    The index for the website
 </body>
--- a/irmak/index.html
+++ b/irmak/index.html
@ -0,0 +1,24 @@
 <DOCTYPE html>
 <html>
 <head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../style.css">
    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
 <!-- Nav bar -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Graduates</a></li>
            <li><a href="">Special Issues</a></li>
        </ul>
    </nav>
 <div id="content"><h1 id="title">Title</h1>
 <h3 id="grad-project-description">Grad project Description</h3>
 <p>This is where your grad project goes</p>
 </div>
 </body>
 </html>
--- a/irmak/index.md
+++ b/irmak/index.md
@ -0,0 +1,10 @@
 ---
 title: Project
 author: Stephen
 ---
 # Title
 ### Grad project Description
 This is where your grad project goes
--- a/irmak/thesis.html
+++ b/irmak/thesis.html
@ -0,0 +1,24 @@
 <DOCTYPE html>
 <html>
 <head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../style.css">
    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
 <!-- Nav bar -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Graduates</a></li>
            <li><a href="">Special Issues</a></li>
        </ul>
    </nav>
 <div id="content"><h1 id="title">Title</h1>
 <h3 id="thesis-description">Thesis Description</h3>
 <p>This is where your thesis goes</p>
 </div>
 </body>
 </html>
--- a/irmak/thesis.md
+++ b/irmak/thesis.md
@ -0,0 +1,10 @@
 ---
 title: Thesis
 author: Stephen
 ---
 # Title
 ### Thesis Description
 This is where your thesis goes
--- a/print/booklet.template.html
+++ b/print/booklet.template.html
@ -0,0 +1,41 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <meta charset="utf-8">
    <script src="paged.js/paged.polyfill.js"></script>
    <link href="paged.js/pagedjs.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="print_style.css">
 </head>
 <body>
    <div id="contenteo">
        <section class="section" id="start-matter"></section>
        {{ content[0] }}
    </section>
    <section class="toc">
        <h3>Contents</h3>
        <ul>
            {% for title in titles %}
            {% if loop.index > 1 %}
            <li class="toc-title"><a href="#section-{{ loop.index + 1 }}">{{ title }}</a></li>
            {% if (loop.index == 2) or (loop.index == 18) or (loop.index == 22) %}
            <br>
            {% endif %}
            {% endif %}
            {% endfor %}
        </ul>
    </section>
    {% for section in content %}
    {% if loop.index > 1 %}
    <!-- <section class="header-page" id="{{ titles[loop.index] }}">
        <h1>{{ titles[loop.index - 1] }}</h1>
    </section> -->
    <section id="section-{{ loop.index + 1 }}" class="section">
        {{ section }}
    </section>
    {% endif %}
    {% endfor %}
 </div>
 </div>
 </body>
 </html>
--- a/print/index.html
+++ b/print/index.html
@ -0,0 +1,25 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <meta charset="utf-8">
    <script src="paged.js/paged.polyfill.js"></script>
    <link href="paged.js/pagedjs.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="print_style.css">
 </head>
 <body>
    <div id="contenteo">
        <section class="section" id="start-matter"></section>
    </section>
    <section class="toc">
        <h3>Contents</h3>
        <ul>
        </ul>
    </section>
 </div>
 </div>
 </body>
 </html>
--- a/print/paged.js/paged.polyfill.js
+++ b/print/paged.js/paged.polyfill.js
--- a/print/paged.js/pagedjs.css
+++ b/print/paged.js/pagedjs.css
@ -0,0 +1,214 @@
 /* CSS for Paged.js interface – v0.2 */
 /* Change the look */
 :root {
    --color-background: whitesmoke;
    --color-pageSheet: #cfcfcf;
    --color-pageBox: violet;
    --color-paper: white;
    --color-marginBox: transparent;
    --pagedjs-crop-color: black;
    --pagedjs-crop-shadow: white;
    --pagedjs-crop-stroke: 1px;
 }
 /* To define how the book look on the screen: */
@media screen {
    /* adding this here from main.css to style the div#nav */
    div#nav{
        position: fixed;
        width: calc(100% - 2em);
        margin: 1em;
        text-align: right;
        left: 0;
        top: 0;
        z-index: 999;
    }
        div#nav a#home,
        div#nav a#notes{
                float: left;
                padding: 0.25em 0.125em;
        }
        div#nav div#loading{
                display: none;
                margin: 0.35em 0;
                color: black;
                clear: both;
                float: right;
                background-color: white;
                padding: 0.5em 1em;
                border-radius: 5px;
                opacity: 0;
                animation: fade 2s infinite linear;
        }
        @keyframes fade {
                0%,100% { opacity: 0 }
                50% { opacity: 1 }
        }
    body {
        background-color: var(--color-background);
    }
    .pagedjs_pages {
        display: flex;
        width: calc(var(--pagedjs-width) * 2);
        flex: 0;
        flex-wrap: wrap;
        margin: 0 auto;
    }
    .pagedjs_page {
        background-color: var(--color-paper);
        box-shadow: 0 0 0 1px var(--color-pageSheet);
        margin: 0;
        flex-shrink: 0;
        flex-grow: 0;
        margin-top: 10mm;
    }
    .pagedjs_first_page {
        margin-left: var(--pagedjs-width);
    }
    .pagedjs_page:last-of-type {
        margin-bottom: 10mm;
    }
    .pagedjs_pagebox{
        box-shadow: 0 0 0 1px var(--color-pageBox);
    }
    .pagedjs_left_page{
        z-index: 20;
        width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important;
    }
    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
        border-color: transparent;
    }
    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
        width: 0;
    } 
    .pagedjs_right_page{
        z-index: 10;
        position: relative;
        left: calc(var(--pagedjs-bleed-left)*-1);
    }
    /* show the margin-box */
    .pagedjs_margin-top-left-corner-holder,
    .pagedjs_margin-top,
    .pagedjs_margin-top-left,
    .pagedjs_margin-top-center,
    .pagedjs_margin-top-right,
    .pagedjs_margin-top-right-corner-holder,
    .pagedjs_margin-bottom-left-corner-holder,
    .pagedjs_margin-bottom,
    .pagedjs_margin-bottom-left,
    .pagedjs_margin-bottom-center,
    .pagedjs_margin-bottom-right,
    .pagedjs_margin-bottom-right-corner-holder,
    .pagedjs_margin-right,
    .pagedjs_margin-right-top,
    .pagedjs_margin-right-middle,
    .pagedjs_margin-right-bottom,
    .pagedjs_margin-left,
    .pagedjs_margin-left-top,
    .pagedjs_margin-left-middle,
    .pagedjs_margin-left-bottom {
        box-shadow: 0 0 0 1px inset var(--color-marginBox);
    }
    /* uncomment this part for recto/verso book : ------------------------------------ */
 /*
    .pagedjs_pages {
        flex-direction: column;
        width: 100%;
    }
    .pagedjs_first_page {
        margin-left: 0;
    }
    .pagedjs_page {
        margin: 0 auto;
        margin-top: 10mm;
    } 
    .pagedjs_left_page{
        width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important;
    }
    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{
        border-color: var(--pagedjs-crop-color);
    }
    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
        width: var(--pagedjs-cross-size)!important;
    } 
    .pagedjs_right_page{
        left: 0; 
    } 
    */
    /*--------------------------------------------------------------------------------------*/
    /* uncomment this par to see the baseline : -------------------------------------------*/
    /*
     .pagedjs_pagebox {
        --pagedjs-baseline: 22px;
        --pagedjs-baseline-position: 5px;
        --pagedjs-baseline-color: cyan;
        background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent;
        background-size: 100% var(--pagedjs-baseline);
        background-repeat: repeat-y;
        background-position-y: var(--pagedjs-baseline-position);
    }  */
    /*--------------------------------------------------------------------------------------*/
 }
 /* Marks (to delete when merge in paged.js) */
 .pagedjs_marks-crop{
    z-index: 999999999999;
 }
 .pagedjs_bleed-top .pagedjs_marks-crop, 
 .pagedjs_bleed-bottom .pagedjs_marks-crop{
    box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow);
 }  
 .pagedjs_bleed-top .pagedjs_marks-crop:last-child,
 .pagedjs_bleed-bottom .pagedjs_marks-crop:last-child{
    box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow);
 }  
 .pagedjs_bleed-left .pagedjs_marks-crop,
 .pagedjs_bleed-right .pagedjs_marks-crop{
    box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow);
 }
 .pagedjs_bleed-left .pagedjs_marks-crop:last-child,
 .pagedjs_bleed-right .pagedjs_marks-crop:last-child{
    box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow);
 }
--- a/print/pandoc-metadata.template
+++ b/print/pandoc-metadata.template
@ -0,0 +1 @@
 $meta-json$
--- a/print/print_style.css
+++ b/print/print_style.css
--- a/print/section-order.txt
+++ b/print/section-order.txt
@ -0,0 +1,12 @@
 start-matter
 introduction
 leslie
 ada
 aglaia
 irmak
 stephen
 specialissue19
 specialissue20
 specialissue21
 license
 colophon
--- a/specialissue19/index.html
+++ b/specialissue19/index.html
@ -0,0 +1,41 @@
 <DOCTYPE html>
 <html>
 <head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../style.css">
    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
 <!-- Nav bar -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Graduates</a></li>
            <li><a href="">Special Issues</a></li>
        </ul>
    </nav>
 <div id="content"><h1 id="special-issue-19">Special Issue 19</h1>
 <h3 id="what-was-the-special-issue">What was the special issue</h3>
 <p>Description about si19 goes here</p>
 <figure>
 <img src="imagename.png" alt="Image Caption" />
 <figcaption aria-hidden="true">Image Caption</figcaption>
 </figure>
 <div class="full-image">
 <figure>
 <img src="imagename2.png" alt="Image Caption 2" />
 <figcaption aria-hidden="true">Image Caption 2</figcaption>
 </figure>
 </div>
 <p>Another thing that came out of our first two sessions was the <em>One
 Sentence Ritual</em>. Each week for six weeks in a row, we wrote down a
 ritual of our own and took turns performing the ritual from the list.
 Coffee fortune-telling, hard drive purifications, collective eating,
 sound meditations, and talking to worry dolls made us reflect on the
 content of the week and our lives.</p>
 <p>:::::</p>
 </div>
 </body>
 </html>
--- a/specialissue19/index.md
+++ b/specialissue19/index.md
@ -0,0 +1,22 @@
 ---
 title: Colophon
 author: Stephen
 ---
 # Special Issue 19
 ### What was the special issue
 Description about si19 goes here
 ![Image Caption](imagename.png)
 :::::{.full-image}
 ![Image Caption 2](imagename2.png)
 :::::
 Another thing that came out of our first two sessions was the *One Sentence Ritual*. Each week for six weeks in a row, we wrote down a ritual of our own and took turns performing the ritual from the list. Coffee fortune-telling, hard drive purifications, collective eating, sound meditations, and talking to worry dolls made us reflect on the content of the week and our lives. 
 :::::
--- a/specialissue20/index.html
+++ b/specialissue20/index.html
@ -0,0 +1,41 @@
 <DOCTYPE html>
 <html>
 <head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../style.css">
    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
 <!-- Nav bar -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Graduates</a></li>
            <li><a href="">Special Issues</a></li>
        </ul>
    </nav>
 <div id="content"><h1 id="special-issue-19">Special Issue 19</h1>
 <h3 id="what-was-the-special-issue">What was the special issue</h3>
 <p>Description about si19 goes here</p>
 <figure>
 <img src="imagename.png" alt="Image Caption" />
 <figcaption aria-hidden="true">Image Caption</figcaption>
 </figure>
 <div class="full-image">
 <figure>
 <img src="imagename2.png" alt="Image Caption 2" />
 <figcaption aria-hidden="true">Image Caption 2</figcaption>
 </figure>
 </div>
 <p>Another thing that came out of our first two sessions was the <em>One
 Sentence Ritual</em>. Each week for six weeks in a row, we wrote down a
 ritual of our own and took turns performing the ritual from the list.
 Coffee fortune-telling, hard drive purifications, collective eating,
 sound meditations, and talking to worry dolls made us reflect on the
 content of the week and our lives.</p>
 <p>:::::</p>
 </div>
 </body>
 </html>
--- a/specialissue20/index.md
+++ b/specialissue20/index.md
@ -0,0 +1,22 @@
 ---
 title: Colophon
 author: Stephen
 ---
 # Special Issue 19
 ### What was the special issue
 Description about si19 goes here
 ![Image Caption](imagename.png)
 :::::{.full-image}
 ![Image Caption 2](imagename2.png)
 :::::
 Another thing that came out of our first two sessions was the *One Sentence Ritual*. Each week for six weeks in a row, we wrote down a ritual of our own and took turns performing the ritual from the list. Coffee fortune-telling, hard drive purifications, collective eating, sound meditations, and talking to worry dolls made us reflect on the content of the week and our lives. 
 :::::
--- a/specialissue21/index.html
+++ b/specialissue21/index.html
@ -0,0 +1,41 @@
 <DOCTYPE html>
 <html>
 <head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../style.css">
    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
 <!-- Nav bar -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Graduates</a></li>
            <li><a href="">Special Issues</a></li>
        </ul>
    </nav>
 <div id="content"><h1 id="special-issue-19">Special Issue 19</h1>
 <h3 id="what-was-the-special-issue">What was the special issue</h3>
 <p>Description about si19 goes here</p>
 <figure>
 <img src="imagename.png" alt="Image Caption" />
 <figcaption aria-hidden="true">Image Caption</figcaption>
 </figure>
 <div class="full-image">
 <figure>
 <img src="imagename2.png" alt="Image Caption 2" />
 <figcaption aria-hidden="true">Image Caption 2</figcaption>
 </figure>
 </div>
 <p>Another thing that came out of our first two sessions was the <em>One
 Sentence Ritual</em>. Each week for six weeks in a row, we wrote down a
 ritual of our own and took turns performing the ritual from the list.
 Coffee fortune-telling, hard drive purifications, collective eating,
 sound meditations, and talking to worry dolls made us reflect on the
 content of the week and our lives.</p>
 <p>:::::</p>
 </div>
 </body>
 </html>
--- a/specialissue21/index.md
+++ b/specialissue21/index.md
@ -0,0 +1,22 @@
 ---
 title: Colophon
 author: Stephen
 ---
 # Special Issue 19
 ### What was the special issue
 Description about si19 goes here
 ![Image Caption](imagename.png)
 :::::{.full-image}
 ![Image Caption 2](imagename2.png)
 :::::
 Another thing that came out of our first two sessions was the *One Sentence Ritual*. Each week for six weeks in a row, we wrote down a ritual of our own and took turns performing the ritual from the list. Coffee fortune-telling, hard drive purifications, collective eating, sound meditations, and talking to worry dolls made us reflect on the content of the week and our lives. 
 :::::
--- a/stephen/index.html
+++ b/stephen/index.html
@ -0,0 +1,24 @@
 <DOCTYPE html>
 <html>
 <head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../style.css">
    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
 <!-- Nav bar -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Graduates</a></li>
            <li><a href="">Special Issues</a></li>
        </ul>
    </nav>
 <div id="content"><h1 id="title">Title</h1>
 <h3 id="grad-project-description">Grad project Description</h3>
 <p>This is where your grad project goes</p>
 </div>
 </body>
 </html>
--- a/stephen/index.md
+++ b/stephen/index.md
@ -0,0 +1,10 @@
 ---
 title: Project
 author: Stephen
 ---
 # Title
 ### Grad project Description
 This is where your grad project goes
--- a/stephen/thesis.html
+++ b/stephen/thesis.html
@ -0,0 +1,24 @@
 <DOCTYPE html>
 <html>
 <head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../style.css">
    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
 <!-- Nav bar -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Graduates</a></li>
            <li><a href="">Special Issues</a></li>
        </ul>
    </nav>
 <div id="content"><h1 id="title">Title</h1>
 <h3 id="thesis-description">Thesis Description</h3>
 <p>This is where your thesis goes</p>
 </div>
 </body>
 </html>
--- a/stephen/thesis.md
+++ b/stephen/thesis.md
@ -0,0 +1,10 @@
 ---
 title: Thesis
 author: Stephen
 ---
 # Title
 ### Thesis Description
 This is where your thesis goes
--- a/webpage.template.html
+++ b/webpage.template.html
@ -0,0 +1,21 @@
 <DOCTYPE html>
 <html>
 <head>
    <title>{{ title }}</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../style.css">
    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
 <!-- Nav bar -->
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Graduates</a></li>
            <li><a href="">Special Issues</a></li>
        </ul>
    </nav>
 <div id="content">{{ content }}</div>
 </body>
 </html>