V1 with some books already

2025-07-17 22:35:56 +02:00 · 2025-06-15 00:59:22 +02:00
commit 7c484acff8
44 changed files with 1637 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,17 @@
+# OS
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Compilation
+.sass-cache/
+_site/
+
+# Logs and db's
+*.log
+*.sql
+*.sqlite
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -0,0 +1,9 @@
+# The MIT License
+
+Copyright (c) 2019 Arnolds Kozlovskis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -0,0 +1,55 @@
+# Pineapple
+
+Pineapple is a minimalistic [Jekyll](https://jekyllrb.com) portfolio theme that focuses on putting your projects in the spotlight.
+
+![Pineapple screenshot](https://user-images.githubusercontent.com/9528895/38713105-6dda8a74-3ec7-11e8-8062-8aa6cf24c795.jpg)
+
+See Pineapple in action on the [demo site](https://arnolds.io/pineapple/).
+
+## Contents
+
+- [Setup](#setup)
+- [Deploy to Github Pages](#deploy-to-github-pages)
+- [Creating projects](#creating-projects)
+- [Resources](#resources)
+- [License](#license)
+
+## Setup
+
+Install dependencies:
+
+```
+$ gem install jekyll bundler
+```
+
+Pulldown the project:
+
+```
+$ git clone git@github.com:arnolds/pineapple.git
+$ cd pineapple
+```
+
+Start Jekyll:
+
+```
+$ jekyll serve
+```
+
+Browse to http://127.0.0.1:4000/pineapple/ for some Pineapple goodness.
+
+## Deploy to Github Pages
+
+1. Fork this repository, then rename the repository to yourgithubusername.github.io.
+2. Update user configuration values in `_config.yml`, and also set `baseurl: ""`.
+
+## Creating projects
+
+Projects are created as `.md` documents within the `_posts/projects` directory. They follow the same naming conventions as regular [Jekyll posts](https://jekyllrb.com/docs/posts/). Pineapple comes with four example projects, which you should use as a guide for creating your own e.g. [Red Pineapple](_posts/projects/2017-04-01-redpineapple.md).
+
+## Resources
+
+- [Apple Devices PSD Mockup Templates](https://www.graphicsfuel.com/2016/04/apple-devices-psd-mockup-templates/)
+
+## License
+
+Open sourced under the [MIT license](LICENSE.md).
--- a/_config.yml
+++ b/_config.yml
@@ -0,0 +1,30 @@
+name: "TomoStash"
+tagline: "Pineapple-Certfied Online Digital Tomes Library"
+description: "Pineapple-Certfied Online Digital Tomes Library"
+#keywords: "Pineapple, Pineapple Pizza, Pineapple House"
+#email: "pineapple@example.com"
+#linkedin: "https://www.linkedin.com/"
+#twitter: "https://twitter.com/"
+github: "https://github.com/GamingShitposting/TomoStash"
+
+baseurl: "/pineapple"
+highlighter: rouge
+layout: project
+sass:
+  sass_dir: assets/scss
+  style: compressed
+
+collections:
+  tomes:
+    output: true
+    permalink: /:path/
+
+defaults:
+  - scope:
+      path: ""
+      type: tomes
+    values:
+      layout: tome
+
+extra:
+  store: "https://gamingshitposting.github.io/docs-bin-1"
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -0,0 +1,18 @@
+<footer class="footer">
+	<div class="container">
+		<!-- <section class="contact">
+			<h2>Contact</h2>
+			<a title="{{ site.email }}" href="mailto:{{ site.email }}">{{ site.email }}</a>
+		</section> -->
+		<section class="follow">
+			<!-- <h2>Follow</h2> -->
+			<h2>Links</h2>
+			<ul>
+				<!-- <li><a title="LinkedIn" href="{{ site.linkedin }}" target="_blank">LinkedIn</a></li>
+				<li><a title="Twitter" href="{{ site.twitter }}" target="_blank">Twitter</a></li> -->
+				<li><a title="Github" href="{{ site.github }}" target="_blank">Contribute on Github</a></li>
+				<li><a title="Theme" href="https://github.com/arnolds/pineapple" target="_blank">Pineapple theme by arnolds</a></li>
+			</ul>
+		</section>
+	</div>
+</footer>
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -0,0 +1,11 @@
+<meta charset="UTF-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="robots" content="index,follow">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
+<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
+<link rel="manifest" href="/manifest.json">
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+<meta name="theme-color" content="#ffffff">
+<link rel="stylesheet" href="{{ "/assets/css/style.css" | prepend: site.baseurl }}">
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -0,0 +1,7 @@
+<header class="header">
+	<div class="container">
+		<h1 class="logo">
+			<a title="{{ site.name }}" href="{{ site.baseurl | append: "/" }}">{{ site.name }}</a>
+		</h1>
+	</div>
+</header>
--- a/_layouts/tome.html
+++ b/_layouts/tome.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>{{ page.title }} | {{ site.name }}</title>
+	<meta name="author" content="{{ site.name }}">
+	<meta name="description" content="{{ page.content | strip_html | strip_newlines }}">
+	<meta name="keywords" content="{{ page.keywords }}">
+	{% include head.html %}
+	<!-- {% capture cover %}{{ site.baseurl }}/assets/tomes/{{ page.slug }}/{{ page.cover }}{% endcapture %} -->
+	{% capture cover %}{{ site.extra.store }}/tomes/{{ page.slug }}/{{ page.cover }}{% endcapture %}
+	<!-- {% capture embed %}{ "page": {{ page.data | jsonify }}, "extra": {{ site.extra | jsonify }} }{% endcapture %} -->
+	{% capture embed %}{
+		"page": {
+			"slug": {{ page.slug | jsonify }},
+			"file": {{ page.file | jsonify }}
+		},
+		"extra": {{ site.extra | jsonify }}
+	}{% endcapture %}
+</head>
+<body>
+	{% include header.html %}
+	<main class="content">
+		<section class="project">
+			<div class="container">
+				<article>
+					<span class="h2">Title</span>
+					<h1>{{ page.title }}</h1>
+					<span class="h2">Cover</span>
+					<!-- <img src="{{ page.cover | prepend: site.baseurl }}" alt="Cover" style="max-height: 40vh; width: auto;" /> -->
+					<img src="{{ cover }}" alt="Cover" style="max-height: 40vh; width: auto;" />
+					<span class="h2">About</span>
+					{{ page.content }}
+					<span class="h2">Authors</span>
+					<p>{{ page.authors }}</p>
+					<span class="h2">Year</span>
+					<p>{{ page.year }}</p>
+					<span class="h2">Webpage</span>
+					<a href="{{ page.webpage }}" target="_blank">{{ page.webpage }}</a>
+				</article>
+				<aside>
+					<ul>
+						<li>
+							<iframe src="{{ '/reader/' | prepend: site.baseurl }}#{{ embed | uri_escape | xml_escape }}"
+									style="width: 100%; height: 90vh; border: none;"
+									allow="fullscreen" allowfullscreen="allowfullscreen"></iframe>
+						</li>
+						<li>
+							<!-- <img src="{{ page.cover | prepend: site.baseurl }}" alt="Cover" /> -->
+							<img src="{{ cover }}" alt="Cover" />
+						</li>
+					</ul>
+				</aside>
+			</div>
+		</section>
+	</main>
+	{% include footer.html %}
+	<script src="{{ "/assets/scripts/vendor/jquery-1.12.4.min.js" | prepend: site.baseurl }}"></script>
+	<script src="{{ "/assets/scripts/vendor/scrollreveal.min.js" | prepend: site.baseurl }}"></script>
+	<script src="{{ "/assets/scripts/vendor/sticky-kit.min.js" | prepend: site.baseurl }}"></script>
+	<script src="{{ "/assets/scripts/project.js" | prepend: site.baseurl }}"></script>
+	<script>
+		document.querySelector('article').innerHTML += '<span class="h2">Download</span><button>{{ page.file }}</button>';
+		document.querySelector('article button').addEventListener('click', function(){
+			location.href = '{{ site.extra.store }}/tomes/{{ page.slug }}/{{ page.file }}';
+		});
+	</script>
+</body>
+</html>
--- a/_tomes/en/moby-dick.md
+++ b/_tomes/en/moby-dick.md
@@ -0,0 +1,11 @@
+---
+date: 2025-06-13
+year: 1851
+title: "Moby-Dick; or, The Whale"
+authors: "Herman Melville"
+cover: "pg2701.cover.medium.jpg"
+file: "pg2701-images-kf8.mobi"
+webpage: "https://www.gutenberg.org/ebooks/2701"
+---
+
+"Moby Dick; Or, The Whale" by Herman Melville is a novel written in the mid-19th century. The story follows Ishmael, a sailor on a whaling voyage, who seeks adventure and escape from his gloomy life on land. As he embarks on this journey, he becomes drawn into the complex world of whaling and is introduced to the ominous figure of Captain Ahab, whose obsession with a legendary white whale ultimately drives the narrative. At the start of the novel, Ishmael introduces himself and shares his philosophy about the sea as a remedy for his melancholic disposition. He muses on the magnetic pull of the ocean, describing not only his own urge to set sail but also the collective longing of city dwellers for the water. Ishmael's journey takes him to New Bedford, where he experiences a series of humorous and strange encounters while seeking lodging before joining a whaling ship. As he navigates his way through the town, he is introduced to Queequeg, a tattooed harpooner with a mysterious past, setting the stage for a unique friendship that unfolds amidst the backdrop of whaling adventures. (This is an automatically generated summary.)
--- a/_tomes/en/taiga-no-pants.md
+++ b/_tomes/en/taiga-no-pants.md
@@ -0,0 +1,9 @@
+---
+date: 2025-06-12
+year: 2007
+title: "Toradora! dj - Taiga no Pants (Taiga no Pantsu)"
+authors: Hiroyama Hiroshi
+cover: "00000000_001001.jpeg"
+file: "Toradora_-_TIGER_NO_PANTS_Doujinshi_.cbz"
+webpage: "https://taptaptaptaptap.net/tiger-no-pants/"
+---
--- a/_tomes/it/dieci-cose-che-ho-imparato.md
+++ b/_tomes/it/dieci-cose-che-ho-imparato.md
@@ -0,0 +1,21 @@
+---
+date: 2025-06-11
+year: 2022
+title: "Dieci cose che ho imparato"
+authors: "Piero Angela"
+cover: "978880478297HIG-313x480.webp"
+file: "Dieci Cose che Ho Imparato - Piero Angela.mobi"
+webpage: "https://www.mondadori.it/libri/dieci-cose-che-ho-imparato-piero-angela/"
+---
+
+«Questo libro raccoglie alcune cose che ho imparato in tanti anni di professione, di incontri, di esperienze, di libri letti e scritti, di speranze e delusioni…» Così Piero Angela riassume e spiega la sua ultima fatica, un testo scritto di getto e nato dall’urgenza del momento, e dalle enormi sfide che ci attendono.
+
+Un lascito morale, dopo una lunghissima carriera al servizio dell’informazione e della formazione di generazioni di italiani.
+
+Com’è possibile, si chiede in queste pagine, che un paese come l’Italia, che ha marcato profondamente per secoli il cammino della civiltà, oggi sia così in difficoltà, e abbia perso le sue luci?
+
+La risposta è in dieci semplici capitoli, dieci aree critiche su cui occorre agire.
+
+Per oltre cinquant’anni Piero Angela si è occupato a tempo pieno di scienza, tecnologia, ambiente, informazione, energia, televisione, comportamenti, e ha scritto Dieci cose che ho imparato per condividere con i lettori alcune proposte, frutto della sua lunga esperienza sul campo.
+
+Con questo libro, a cui ha lavorato fino all’ultimo, colui che è stato per tutti il volto rassicurante della scienza ha voluto dirci come usarla per migliorare le cose. Per rilanciare l’Italia con una nuova visione. 
--- a/_tomes/it/divina-commedia.md
+++ b/_tomes/it/divina-commedia.md
@@ -0,0 +1,11 @@
+---
+date: 2025-06-14
+year: 1321
+title: "La Divina Commedia"
+authors: "Dante Alighieri"
+cover: "pg1012.cover.medium.jpg"
+file: "pg1012-images-kf8.mobi"
+webpage: "https://www.gutenberg.org/ebooks/1012"
+---
+
+"La Divina Commedia di Dante" by Dante Alighieri is an epic poem written in the 14th century. The work presents a profound allegorical journey through the realms of the afterlife, specifically exploring themes of sin, redemption, and divine justice. The protagonist, Dante himself, embarks on a journey through Hell (Inferno), guided by the ancient Roman poet Virgil, as they confront various torments and encounters that symbolically reflect human moral conditions. The beginning of the poem introduces Dante as he finds himself lost in a dark wood, symbolizing confusion and moral despair, as he strays from the right path in life. He faces various beasts that impede his progress: a leopard, a lion, and a she-wolf, representing different sins. Eventually, he encounters Virgil, who offers his guidance, revealing that Dante must descend into Hell before he can hope to reach salvation. This powerful opening sets the stage for the exploration of sin and the complexity of the human soul, establishing a tone of urgency and the quest for understanding within the chaos of moral failure. (This is an automatically generated summary.)
--- a/_tomes/it/italian-crackdown.md
+++ b/_tomes/it/italian-crackdown.md
@@ -0,0 +1,14 @@
+---
+date: 2025-06-15
+year: 1999
+title: "Italian crackdown"
+authors: "Carlo Gubitosa"
+cover: "italian-crackdown-cover.jpg"
+file: "Italian-crackdown.mobi"
+webpage: "https://www.apogeonline.com/libri/italian-crackdown-carlo-gubitosa/"
+---
+
+Crackdown è una intraducibile parola inglese che racchiude in un unico vocabolo il significato di crollo, attacco, disfatta, distruzione, smantellamento, colpo di grazia.
+Questo libro racconta la storia di una serie interminabile di sequestri, censure, perquisizioni, intimidazioni e violazioni dei diritti costituzionali, avvenuta nel più totale disinteresse dei media e della politica, che nel maggio 1994 ha messo in ginocchio le reti autogestite e autofinanziate che ancora oggi costituiscono una alternativa libera e gratuita ai servizi offerti dai grandi operatori commerciali.
+A questa operazione si aggiunge un mese più tardi anche il sequestro del nodo centrale di PeaceLink, associazione pacifista di volontariato dell’informazione; negli anni successivi la storia della lotta per la libertà di espressione sulla 'frontiera elettronica' è segnata da altre ondate repressive, dietro pretesti come reati d’opinione, pedofilia, satanismo, diffamazione.
+E non è ancora finita, perché nuove iniziative di questo genere sembrano sempre in agguato.
--- a/android-chrome-192x192.png
+++ b/android-chrome-192x192.png
--- a/android-chrome-256x256.png
+++ b/android-chrome-256x256.png
--- a/apple-touch-icon.png
+++ b/apple-touch-icon.png
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -0,0 +1,12 @@
+---
+---
+
+@charset "UTF-8";
+
+@import "variables";
+@import "mixins";
+@import "normalize";
+@import "fonts";
+@import "core";
+@import "layout";
+@import "syntax";
--- a/assets/fonts/SZc43FDmLaWmWpBuVh3pv0Db6AtO.woff2
+++ b/assets/fonts/SZc43FDmLaWmWpBuVh3pv0Db6AtO.woff2
--- a/assets/fonts/SZc43FDmLaWmWpBuWB3pv0Db6A.woff2
+++ b/assets/fonts/SZc43FDmLaWmWpBuWB3pv0Db6A.woff2
--- a/assets/fonts/pxiByp8kv8JHgFVrLEj6Z11lFd2JQEl8qw.woff2
+++ b/assets/fonts/pxiByp8kv8JHgFVrLEj6Z11lFd2JQEl8qw.woff2
--- a/assets/fonts/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff2
+++ b/assets/fonts/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff2
--- a/assets/fonts/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2
+++ b/assets/fonts/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2
--- a/assets/scripts/home.js
+++ b/assets/scripts/home.js
@@ -0,0 +1,10 @@
+var sr = ScrollReveal({
+	origin   : "bottom",
+	distance : "64px",
+	duration : 800,
+	delay    : 0,
+	scale    : 1
+});
+
+sr.reveal('.projects-list a');
+sr.reveal('.posts-list a');
--- a/assets/scripts/project.js
+++ b/assets/scripts/project.js
@@ -0,0 +1,29 @@
+(function($) {
+	$(function() {
+		$(window).on('load resize', function() {
+			sticky();
+		});
+
+		function sticky() {
+			var w = $(window).width();
+
+			if (w < 750) {
+				$('.project article').trigger('sticky_kit:detach');
+			} else {
+				$('.project article').stick_in_parent({
+					offset_top: $('.header').outerHeight()
+				});
+			}
+		}
+	});
+
+	var sr = ScrollReveal({
+		origin   : "bottom",
+		distance : "64px",
+		duration : 900,
+		delay    : 0,
+		scale    : 1
+	});
+
+	sr.reveal('.project li');
+}(jQuery));
--- a/assets/scripts/vendor/jquery-1.12.4.min.js
+++ b/assets/scripts/vendor/jquery-1.12.4.min.js
--- a/assets/scripts/vendor/scrollreveal.min.js
+++ b/assets/scripts/vendor/scrollreveal.min.js
--- a/assets/scripts/vendor/sticky-kit.min.js
+++ b/assets/scripts/vendor/sticky-kit.min.js
@@ -0,0 +1,10 @@
+/*
+ Sticky-kit v1.1.3 | MIT | Leaf Corcoran 2015 | http://leafo.net
+*/
+(function(){var c,f;c=window.jQuery;f=c(window);c.fn.stick_in_parent=function(b){var A,w,J,n,B,K,p,q,L,k,E,t;null==b&&(b={});t=b.sticky_class;B=b.inner_scrolling;E=b.recalc_every;k=b.parent;q=b.offset_top;p=b.spacer;w=b.bottoming;null==q&&(q=0);null==k&&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=c(document);null==w&&(w=!0);L=function(a){var b;return window.getComputedStyle?(a=window.getComputedStyle(a[0]),b=parseFloat(a.getPropertyValue("width"))+parseFloat(a.getPropertyValue("margin-left"))+
+parseFloat(a.getPropertyValue("margin-right")),"border-box"!==a.getPropertyValue("box-sizing")&&(b+=parseFloat(a.getPropertyValue("border-left-width"))+parseFloat(a.getPropertyValue("border-right-width"))+parseFloat(a.getPropertyValue("padding-left"))+parseFloat(a.getPropertyValue("padding-right"))),b):a.outerWidth(!0)};J=function(a,b,n,C,F,u,r,G){var v,H,m,D,I,d,g,x,y,z,h,l;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!=k&&(g=g.closest(k));if(!g.length)throw"failed to find stick parent";
+v=m=!1;(h=null!=p?p&&a.closest(p):c("<div />"))&&h.css("position",a.css("position"));x=function(){var d,f,e;if(!G&&(I=A.height(),d=parseInt(g.css("border-top-width"),10),f=parseInt(g.css("padding-top"),10),b=parseInt(g.css("padding-bottom"),10),n=g.offset().top+d+f,C=g.height(),m&&(v=m=!1,null==p&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),10)||0)-q,u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:L(a),
+height:u,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":r}),e))return l()};x();if(u!==C)return D=void 0,d=q,z=E,l=function(){var c,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?(w&&(k=e+u+d>C+n,v&&!k&&(v=!1,a.css({position:"fixed",bottom:"",top:d}).trigger("sticky_kit:unbottom"))),e<F&&(m=!1,d=q,null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.detach()),c={position:"",width:"",top:""},a.css(c).removeClass(t).trigger("sticky_kit:unstick")),
+B&&(c=f.height(),u+q>c&&!v&&(d-=l,d=Math.max(c-u,d),d=Math.min(q,d),m&&a.css({top:d+"px"})))):e>F&&(m=!0,c={position:"fixed",top:d},c.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(c).addClass(t),null==p&&(a.after(h),"left"!==r&&"right"!==r||h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+d>C+n),!v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}),a.css({position:"absolute",bottom:b,top:"auto"}).trigger("sticky_kit:bottom")},
+y=function(){x();return l()},H=function(){G=!0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);c(document.body).off("sticky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l),f.on("resize",y),c(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeout(l,
+0)}};n=0;for(K=this.length;n<K;n++)b=this[n],J(c(b));return this}}).call(this);
--- a/assets/scss/_core.scss
+++ b/assets/scss/_core.scss
@@ -0,0 +1,170 @@
+html {
+	font-size: 62.5%;
+}
+
+body {
+	background: $color-white;
+	color: $color-black;
+	font-family: $font-poppins;
+	font-size: 1.8em;
+	line-height: 1.6;
+	font-weight: 600;
+	-webkit-font-smoothing: antialiased;
+}
+
+h1,
+.h1 {
+	color: $color-black;
+	font-size: 2.7rem;
+	font-weight: 600;
+	line-height: 1;
+	margin: 0;
+}
+
+h2,
+.h2 {	
+	color: $color-silver-chalice;
+	display: block;
+	font-family: $font-lekton;
+    font-size: 1rem;
+    font-weight: 400;
+    letter-spacing: .2rem;
+    line-height: 1;
+    margin: 0 0 1rem;
+    text-transform: uppercase;
+}
+
+h3,
+.h3 {
+	color: $color-black;
+	font-family: $font-poppins;
+    font-size: 1.8rem;
+    font-weight: 600;
+    line-height: 1;
+    margin: 0;
+}
+
+p {
+	margin: 0;
+}
+
+a {
+	color: $color-black;
+	text-decoration: none;
+}
+
+ul {
+	margin: 0;
+	padding: 0;
+	list-style-type: none;	
+}
+
+img {
+	display: block;
+	max-width: 100%;
+}
+
+hr {
+	background: $color-silver-chalice;
+	border: 0;
+	display: block;
+	height: 1px;
+	margin: 3rem 0;
+
+	@media (min-width: $breakpoint-medium) {
+		margin: 4.5rem 0;
+	}
+}
+
+abbr[title] {
+	border-bottom: 1px dotted $color-black;
+	text-decoration: none;
+}
+
+code {
+	background: $color-white;
+	border: 1px solid $color-silver-chalice;
+	border-radius: 3px;
+	font-family: $font-lekton;
+	font-size: 1.5rem;	
+	padding: .1rem .4rem;
+
+	var {
+		font-style: italic;
+	}
+}
+
+dl {
+	margin: 0 0 3rem;
+
+	dt,
+	dd {
+		font-family: $font-lekton;		
+	}
+
+	dt {
+		font-weight: 600;
+	}
+
+	dd {
+		font-weight: 400;
+	}
+}
+
+.responsive-table {
+	margin-bottom: 3rem;
+	
+	@media (max-width: $breakpoint-xsmall) {
+		display: block;	
+		overflow-x: scroll;
+		max-width: $breakpoint-xsmall;
+
+		th,
+		td {
+			min-width: 10rem;
+		}
+	}
+}
+
+table {
+	border-collapse: collapse;	
+	width: 100%;
+
+	thead {
+		td,
+		th {
+			font-weight: 600;
+		}
+	}
+
+	tbody > tr:nth-child(odd) > td, 
+	tbody > tr:nth-child(odd) > th {
+		background: $color-white-sand;
+	}
+
+	th,
+	td {
+		font-family: $font-lekton;
+		font-weight: 400;
+		text-align: left;
+		padding: .5rem 1rem;
+	}
+}
+
+blockquote {
+	border-left: .6rem solid $color-black;
+	padding-left: 2rem;
+	margin: 0 0 3rem;
+
+	p {
+		font-style: italic;
+	}
+
+	@media (min-width: $breakpoint-medium) {
+		padding-left: 3rem;
+	}
+}
+
+pre {
+	margin: 0 0 3rem;
+}
--- a/assets/scss/_fonts.scss
+++ b/assets/scss/_fonts.scss
@@ -0,0 +1,40 @@
+/* latin-ext */
+@font-face {
+	font-family: 'Lekton';
+	font-style: normal;
+	font-weight: 400;
+	src: local('Lekton'), local('Lekton-Regular'), url(/assets/fonts/SZc43FDmLaWmWpBuVh3pv0Db6AtO.woff2) format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Lekton';
+	font-style: normal;
+	font-weight: 400;
+	src: local('Lekton'), local('Lekton-Regular'), url(/assets/fonts/SZc43FDmLaWmWpBuWB3pv0Db6A.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+	font-family: 'Poppins';
+	font-style: normal;
+	font-weight: 600;
+	src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(/assets/fonts/pxiByp8kv8JHgFVrLEj6Z11lFd2JQEl8qw.woff2) format('woff2');
+	unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+	font-family: 'Poppins';
+	font-style: normal;
+	font-weight: 600;
+	src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(/assets/fonts/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff2) format('woff2');
+	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+	font-family: 'Poppins';
+	font-style: normal;
+	font-weight: 600;
+	src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url(/assets/fonts/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format('woff2');
+	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
--- a/assets/scss/_layout.scss
+++ b/assets/scss/_layout.scss
@@ -0,0 +1,369 @@
+.container {
+	display: block;
+	margin: 0 auto;
+	max-width: 70em;
+	padding: 0 3rem;
+	@include clearfix;
+}
+
+.header {
+	background: $color-white;
+	padding: 3rem 0;
+}
+
+.logo {
+	float: left;
+	font-size: 1.8rem;
+	font-weight: 600;
+	margin: 0;
+	line-height: 1;
+}
+
+.nav {
+	float: right;
+
+	a {
+		@extend .logo;
+	}
+}
+
+.content {
+	background: $color-white;
+	padding: 7rem 0 0;
+	margin-bottom: 31.24rem;
+	position: relative;
+	top: 0;
+	left: 0;
+	z-index: 1;
+
+	@media (min-width: $breakpoint-medium) {
+		padding: 21rem 0 0;
+		margin-bottom: 23.42rem;
+	}
+}
+
+.intro,
+.projects {
+	padding: 0 0 5rem;
+}
+
+.intro {
+	@media (min-width: $breakpoint-medium) {
+		p {
+			font-size: 2.7rem;
+			max-width: 66.66666%;
+		}
+	}
+}
+
+.projects-list {
+	@media (min-width: $breakpoint-small) {
+		margin-left: -1.5rem;
+		margin-right: -1.5rem;
+		@include clearfix;
+
+		li {
+			float: left;
+			width: 50%;
+		}
+
+		a {
+			padding: 0 1.5rem;
+		}
+	}
+
+	@media (min-width: $breakpoint-medium) {
+		li {
+			width: 33.33333%;
+		}
+	}
+
+	li {
+		margin-bottom: 3rem;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	a {
+		display: block;
+
+		&:hover {
+			.img-wrapper {
+				&:before {
+					opacity: 1;
+				}
+				&:after {
+					opacity: .45;
+				}
+			}
+		}
+	}
+
+	.img-wrapper {
+		position: relative;
+
+		&:before {
+			content: "View Tome";
+			color: $color-white;
+			@extend .h2;
+			font-weight: 800;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			margin-top: -.5rem;
+			margin-left: -4.4rem;
+			opacity: 0;
+			-webkit-transition: all .5s ease-in-out;
+    		transition: all .5s ease-in-out;
+    		-webkit-transition-delay: .25s;
+    		transition-delay: .25s;
+    		z-index: 2;
+		}
+
+		&:after {
+			background: #000;
+			content: "";
+			display: block;
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			opacity: 0;
+			-webkit-transition: all .5s ease-in-out;
+    		transition: all .5s ease-in-out;
+    		z-index: 1;
+		}
+	}
+
+	img {
+		width: 100%;
+	}
+
+	span {
+		margin: 1rem 0 .5rem;
+	}
+}
+
+.project {
+	left: 0;
+	position: relative;
+	top: 0;
+
+	@media (min-width: $breakpoint-medium) {
+		margin-top: -21rem;
+
+		.article-wrapper {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+		}
+	}
+
+	.container {
+		max-width: 100%;
+	}
+
+	article {
+		margin-bottom: 3rem;
+
+		@media (min-width: $breakpoint-medium) {
+			float: right;
+			right: 0;
+			width: 40%;
+			position: absolute;
+			right: 5%;
+		}
+	}
+
+	aside {
+		margin-left: -3rem;
+		margin-right: -3rem;
+
+		@media (min-width: $breakpoint-small) {
+			@include clearfix;
+		}
+
+		@media (min-width: $breakpoint-medium) {
+			float: left;
+			width: 55%;
+		}
+	}
+
+	.project-meta {
+		margin: 3rem 0 0;
+
+		@media (min-width: $breakpoint-medium) {
+			margin: 5rem 0 0;
+			max-width: 70%;
+		}
+	}
+
+	.h2 {
+		margin: 3rem 0 .5rem;
+
+		&:first-of-type {
+			margin-top: 0;
+		}
+	}
+
+	h1 {
+		a {
+			text-decoration: underline;
+		}
+	}
+
+	li {
+		margin-bottom: 0rem;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	img {
+		width: 100%;
+	}
+}
+
+.project-navigation {
+	background: $color-black;
+	padding: 5rem 0;
+
+	a {
+		color: $color-white;
+		display: inline-block;
+
+		&:hover {
+			h2:after {
+				visibility: visible;
+				-webkit-transform: scaleX(1);
+				transform: scaleX(1);
+			}
+
+			&.prev {
+				span {
+					left: 7px;
+				}
+			}
+
+			span {
+				&:after {
+					left: 7px;
+				}
+
+				&:before {
+					left: -7px;
+				}
+			}
+		}
+
+		&:nth-of-type(1),
+		&:nth-of-type(2) {
+			display: table;
+			margin: 0 auto;
+			text-align: center;
+
+			@media (min-width: $breakpoint-xsmall) {
+				display: inline-block;
+				margin: 0;
+				text-align: left;
+			}
+		}
+
+		&:nth-of-type(1) {
+			@media (min-width: $breakpoint-xsmall) {
+				float: left;
+			}
+		}
+
+		&:nth-of-type(2) {
+			margin-top: 3rem;
+
+			@media (min-width: $breakpoint-xsmall) {
+				float: right;
+				margin-top: 0;
+			}
+		}
+
+		&.next {
+			span {
+				&:after {
+					content: "\02192";
+				}
+			}
+		}
+
+		&.prev {
+			span {
+				position: relative;
+				left: 0;
+				-webkit-transition: all .3s ease-in-out 0s;
+				transition: all .3s ease-in-out 0s;
+
+				&:before {
+					content: "\02190";
+				}
+			}
+		}
+	}
+
+	span {
+		&:after,
+		&:before {
+			position: relative;
+			left: 0;
+			-webkit-transition: all .3s ease-in-out 0s;
+			transition: all .3s ease-in-out 0s;
+		}
+	}
+
+	h2 {
+		display: inline-block;
+		font-size: 1.8rem;
+		position: relative;
+
+		&:after {
+			content: "";
+			position: absolute;
+			width: 100%;
+			height: 1px;
+			bottom: -4px;
+			left: 0;
+			background-color: $color-white;
+			visibility: hidden;
+			-webkit-transform: scaleX(0);
+			transform: scaleX(0);
+			-webkit-transition: all .3s ease-in-out 0s;
+			transition: all .3s ease-in-out 0s;
+		}
+	}
+}
+
+.footer {
+	background: $color-alabaster;
+	bottom: 0;
+	left: 0;
+	padding: 5rem 0;
+	position: fixed;
+	right: 0;
+	z-index: -1;
+}
+
+.contact,
+.follow {
+	@media (min-width: $breakpoint-medium) {
+		float: left;
+		margin-bottom: 0;
+		width: 33.33333%;
+	}
+}
+
+.contact,
+.follow {
+	margin-bottom: 3rem;
+}
--- a/assets/scss/_mixins.scss
+++ b/assets/scss/_mixins.scss
@@ -0,0 +1,7 @@
+@mixin clearfix {
+	&:after {
+		content: "";
+		clear: both;
+		display: block;
+	}
+}
--- a/assets/scss/_normalize.scss
+++ b/assets/scss/_normalize.scss
@@ -0,0 +1,461 @@
+/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+/* Document
+   ========================================================================== */
+
+html {
+  font-family: sans-serif; /* 1 */
+  line-height: 1.15; /* 2 */
+  -ms-text-size-adjust: 100%; /* 3 */
+  -webkit-text-size-adjust: 100%; /* 3 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}
--- a/assets/scss/_syntax.scss
+++ b/assets/scss/_syntax.scss
@@ -0,0 +1,65 @@
+.highlight { padding: 3rem; }
+.highlight, .highlight code { background-color: #282923; border: 0; border-radius: .3rem; color: #fff; }
+.highlight .c { color: #75715e } /* Comment */
+.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
+.highlight .k { color: #66d9ef } /* Keyword */
+.highlight .l { color: #ae81ff } /* Literal */
+.highlight .n { color: #f8f8f2 } /* Name */
+.highlight .o { color: #f92672 } /* Operator */
+.highlight .p { color: #f8f8f2 } /* Punctuation */
+.highlight .cm { color: #75715e } /* Comment.Multiline */
+.highlight .cp { color: #75715e } /* Comment.Preproc */
+.highlight .c1 { color: #75715e } /* Comment.Single */
+.highlight .cs { color: #75715e } /* Comment.Special */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .kc { color: #66d9ef } /* Keyword.Constant */
+.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
+.highlight .kn { color: #f92672 } /* Keyword.Namespace */
+.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
+.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
+.highlight .kt { color: #66d9ef } /* Keyword.Type */
+.highlight .ld { color: #e6db74 } /* Literal.Date */
+.highlight .m { color: #ae81ff } /* Literal.Number */
+.highlight .s { color: #e6db74 } /* Literal.String */
+.highlight .na { color: #a6e22e } /* Name.Attribute */
+.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
+.highlight .nc { color: #a6e22e } /* Name.Class */
+.highlight .no { color: #66d9ef } /* Name.Constant */
+.highlight .nd { color: #a6e22e } /* Name.Decorator */
+.highlight .ni { color: #f8f8f2 } /* Name.Entity */
+.highlight .ne { color: #a6e22e } /* Name.Exception */
+.highlight .nf { color: #a6e22e } /* Name.Function */
+.highlight .nl { color: #f8f8f2 } /* Name.Label */
+.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
+.highlight .nx { color: #a6e22e } /* Name.Other */
+.highlight .py { color: #f8f8f2 } /* Name.Property */
+.highlight .nt { color: #f92672 } /* Name.Tag */
+.highlight .nv { color: #f8f8f2 } /* Name.Variable */
+.highlight .ow { color: #f92672 } /* Operator.Word */
+.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
+.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
+.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
+.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
+.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
+.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
+.highlight .sc { color: #e6db74 } /* Literal.String.Char */
+.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
+.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
+.highlight .se { color: #ae81ff } /* Literal.String.Escape */
+.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
+.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
+.highlight .sx { color: #e6db74 } /* Literal.String.Other */
+.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
+.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
+.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
+.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
+.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
+.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
+.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
+
+.highlight .gh { } /* Generic Heading & Diff Header */
+.highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
+.highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
+.highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -0,0 +1,25 @@
+/* Fonts
+ ****************************************************************/
+
+$font-default: Helvetica, Arial, sans-serif;
+$font-poppins: 'Poppins', $font-default;
+$font-lekton: 'Lekton', $font-default;
+
+/* Colors
+ ****************************************************************/
+
+$color-white: #fff;
+$color-black: #000;
+$color-silver-chalice: #aaa;
+$color-alabaster: #fafafa;
+$color-tango: #f46f25;
+$color-white-sand: #f6f6f6;
+
+/* Breakpoint
+ ****************************************************************/
+
+$breakpoint-xsmall: 400px;
+$breakpoint-small: 550px;
+$breakpoint-medium: 750px;
+$breakpoint-large: 1000px;
+$breakpoint-xlarge: 1200px;
--- a/browserconfig.xml
+++ b/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#ffffff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
--- a/favicon-16x16.png
+++ b/favicon-16x16.png
--- a/favicon-32x32.png
+++ b/favicon-32x32.png
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.html
+++ b/index.html
@@ -0,0 +1,48 @@
+---
+---
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>{{ site.name }} | {{ site.tagline }}</title>
+	<meta name="author" content="{{ site.name }}">
+	<meta name="description" content="{{ site.description }}">
+	<meta name="keywords" content="{{ site.keywords }}">
+	{% include head.html %}
+</head>
+<body>
+	{% include header.html %}
+	<main class="content">
+		<section class="intro">
+			<div class="container">
+				<h2>About site</h2>
+				<p>{{ site.description }}</p>
+			</div>
+		</section>
+		<section class="projects">
+			<div class="container">
+				<h2>Available tomes</h2>
+				<ul class="projects-list">
+					{% assign doclist = site.tomes | sort: 'date' | reverse %}
+					{% for item in doclist %}
+						<li>
+							<a href="{{ item.url | prepend: site.baseurl }}">
+								<div class="img-wrapper">
+									<!-- <img src="{{ item.cover | prepend: site.baseurl }}" alt="{{ item.title }}" /> -->
+									<!-- <img src="{{ item.url | prepend: site.baseurl }}/../{{ item.cover }}" alt="{{ item.title }}" /> -->
+									<!-- <img src="{{ site.baseurl }}/assets/tomes/{{ item.slug }}/{{ item.cover }}" alt="{{ item.title }}" /> -->
+									<img src="{{ site.extra.store }}/tomes/{{ item.slug }}/{{ item.cover }}" alt="{{ item.title }}" />
+								</div>
+								<span class="h2">{{ item.type }}</span>
+								<h3>{{ item.title }}</h3>
+							</a>
+						</li>
+					{% endfor %}
+				</ul>
+			</div>
+		</section>
+	</main>
+	{% include footer.html %}
+	<script src="{{ "/assets/scripts/vendor/scrollreveal.min.js" | prepend: site.baseurl }}"></script>
+	<script src="{{ "/assets/scripts/home.js" | prepend: site.baseurl }}"></script>
+</body>
+</html>
--- a/manifest.json
+++ b/manifest.json
@@ -0,0 +1,17 @@
+{
+	"name": "",
+	"icons": [
+		{
+			"src": "\/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image\/png"
+		},
+		{
+			"src": "\/android-chrome-256x256.png",
+			"sizes": "256x256",
+			"type": "image\/png"
+		}
+	],
+	"theme_color": "#ffffff",
+	"display": "standalone"
+}
--- a/mstile-150x150.png
+++ b/mstile-150x150.png
--- a/reader/index.html
+++ b/reader/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+html, body, iframe { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; border: none; background-color: white; }
+</style>
+</head>
+<body>
+<noscript>This application requires JavaScript.</noscript>
+<script>
+(function(data){
+    var page = data.page, extra = data.extra;
+    var ext = page.file.split('.').slice(-1)[0];
+    var readers = {
+        villain: extra.store + "/Villain-gh-pages/#/reader?src=",
+        // villain: "../Villain-gh-pages/#/reader?src=",
+        // villain: "https://villain.js.org/#/reader?src=",
+        foliate: extra.store + "/foliate-js-main/reader.html?url=",
+        // foliate: "../foliate-js-main/reader.html?url=",
+        // foliate: "https://johnfactotum.github.io/foliate-js/reader.html?url=",
+    };
+    var runtime = {
+        cbz: readers.villain,
+    }[ext] || readers.foliate;
+    document.body.innerHTML = '<iframe src="' + runtime + extra.store + '/tomes/' + page.slug + '/' + page.file + '" allow="fullscreen" allowfullscreen="allowfullscreen"></iframe>';
+    // if (runtime === readers.foliate) {
+    //     document.body.innerHTML += '<button style="position: absolute; top: 8px; right: 48px; font-size: large;" onclick="document.body.requestFullscreen();">↔</button>';
+    // }
+})(JSON.parse(decodeURIComponent(location.hash.slice(1))));
+</script>
+</body>
+</html>
--- a/safari-pinned-tab.svg
+++ b/safari-pinned-tab.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M948 2189 c-10 -7 -10 -9 2 -9 34 -1 123 -52 165 -96 40 -41 95 -136
+95 -165 0 -6 -14 1 -31 16 -63 52 -113 72 -215 84 -85 10 -96 2 -35 -24 64
+-26 131 -81 169 -138 27 -39 56 -106 49 -113 -2 -2 -20 8 -40 22 -21 14 -57
+32 -80 40 -42 15 -177 27 -177 15 0 -4 22 -14 48 -23 27 -10 58 -26 70 -35 11
+-10 29 -25 40 -33 10 -8 31 -32 46 -52 l28 -37 -55 -35 c-73 -47 -122 -99
+-156 -166 -46 -89 -51 -138 -48 -465 l3 -300 33 -70 c44 -89 116 -161 206
+-206 69 -34 70 -34 210 -34 157 1 158 1 238 37 106 50 201 169 226 286 16 77
+14 595 -3 660 -29 107 -102 205 -193 259 -24 14 -43 29 -43 33 0 25 108 123
+166 150 35 17 64 32 64 34 0 2 -30 2 -67 1 -71 -2 -134 -22 -192 -61 -19 -13
+-37 -21 -39 -19 -11 11 62 135 101 172 45 42 115 83 142 83 8 0 15 5 15 11 0
+8 -22 10 -72 7 -82 -5 -152 -32 -212 -80 -37 -30 -38 -30 -31 -7 14 46 48 107
+79 142 36 41 140 107 168 107 10 0 18 4 18 9 0 11 -106 6 -161 -9 -55 -15
+-103 -43 -152 -89 l-38 -36 -30 32 c-34 37 -97 76 -149 92 -47 14 -145 20
+-162 10z"/>
+</g>
+</svg>
--- a/site.webmanifest
+++ b/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}