Skip to content
Browse files

sidebar, code highlighting, js working

  • Loading branch information...
panphora committed Sep 21, 2019
1 parent bf40f19 commit cbe94bef1d48b4efe4478867d1ff2ced484cd2b1
@@ -1,6 +1,7 @@
module.exports = function(eleventyConfig) {

return {
dir: {
@@ -0,0 +1 @@
@@ -4,9 +4,80 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Rad Markdown Blog Post</title>
<link href=",400,500,600" rel="stylesheet">
<link rel="stylesheet" href="/static/normalize-min.css">
<link rel="stylesheet" href="/static/prism.css">
<link rel="stylesheet" href="/static/style.css">
<!-- favicon: -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="apple-mobile-web-app-title" content="Remake.js">
<meta name="application-name" content="Remake.js">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="theme-color" content="#ffffff">

<div class="page">
<div class="sidebar">
<div class="sidebar__list-container">
<div class="sidebar__list-heading">INTRO</div>
<div class="sidebar__list"><a class="sidebar__list-item sidebar__list-item--selected" href="#">Intro &amp; Quick Start</a></div>
<div class="sidebar__list-container">
<div class="sidebar__list-heading">GETTING STARTED</div>
<div class="sidebar__list"><a class="sidebar__list-item" href="#">Turning things on &amp; off</a><a class="sidebar__list-item" href="#">Attaching Data to HTML</a><a class="sidebar__list-item" href="#">Modifying Data</a><a class="sidebar__list-item" href="#">Saving Data</a><a class="sidebar__list-item" href="#">Positioning Elements</a><a class="sidebar__list-item" href="#">Reacting to Changes</a><a class="sidebar__list-item" href="#">What Can We Build?</a><a class="sidebar__list-item" href="#">Best Practices</a></div>
<div class="sidebar__list-container">
<div class="sidebar__list-heading">API</div>
<div class="sidebar__list"><a class="sidebar__list-item" href="#">API Reference</a></div>
<div class="sidebar__list-container">
<div class="sidebar__list-heading">ABOUT</div>
<div class="sidebar__list"><a class="sidebar__list-item" href="#">About this Project</a><a class="sidebar__list-item" href="#">About the Author</a></div>
<div class="main">
<div class="section">
<h1 class="main__logo"> <img class="main__logo-image" src="/static/logo.svg" alt="Remake.js"></h1>
<h2 class="main__page-subheading">Powerful web app utility libraries for adding dynamic features to any webpage.</h2>
<div class="main__list-container">
<div class="main__list-heading">For developers:</div>
<ul class="main__list">
<li class="main__list-item">Work directly with the DOM </li>
<li class="main__list-item">Build new features quickly</li>
<li class="main__list-item">It’s easy to get started</li>
<div class="main__list-container">
<div class="main__list-heading">For users:</div>
<ul class="main__list">
<li class="main__list-item">Fast initial load times</li>
<li class="main__list-item">Smooth interactions</li>
<li class="main__list-item">Feels like using a Single Page App</li>
<div class="section">
<div class="section__heading">How to install</div>
<p>Get it from npm:</p>
<pre class="code">npm install remakejs --save</pre>
<p>Initialize it:</p>
<pre class="code"><code class="language-javascript">import Remake from "remakejs";
<p>// respond to changes to the data
<p>// respond to changes to the data that require a save
<p><b>Tip: </b><span>Although it’s recommended to go through the whole tutorial, you can </span><a href="#">skip ahead </a><span>to working code if you want.</span></p>
<div class="section">
<div class="section__heading">A High Level Overview</div>
<script src="/static/prism.js"></script>
<script src="/static/main.js"></script>
File renamed without changes.
@@ -0,0 +1 @@
@@ -0,0 +1,126 @@
/* PrismJS 1.16.0 */
* okaidia theme for JavaScript, CSS and HTML
* Loosely based on Monokai textmate theme by
* @author ocodia

pre[class*="language-"] {
color: #f8f8f2;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;

-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;

-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;

/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #272822;

/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;

.token.cdata {
color: slategray;

.token.punctuation {
color: #f8f8f2;

.namespace {
opacity: .7;
.token.deleted {
color: #f92672;

.token.number {
color: #ae81ff;

.token.inserted {
color: #a6e22e;

.language-css .token.string,
.style .token.string,
.token.variable {
color: #f8f8f2;

.token.class-name {
color: #e6db74;

.token.keyword {
color: #66d9ef;

.token.important {
color: #fd971f;

.token.bold {
font-weight: bold;
.token.italic {
font-style: italic;

.token.entity {
cursor: help;

Some generated files are not rendered by default. Learn more.

@@ -0,0 +1 @@

0 comments on commit cbe94be

Please sign in to comment.
You can’t perform that action at this time.