Change example, style, NEXT_SECTION behavior

NEXT_SECTION paragraph will be deleted and replaced by a <nav> which contains the expected <ul> with links to the various sections to jump to. The next section block has been themed. Change style and typography (css).
kawa-kokosowa · Mar 27, 2016 · 77b8e42 · 77b8e42
1 parent 93a5fe4
commit 77b8e42
Show file tree

Hide file tree

Showing 10 changed files with 253 additions and 82 deletions.
diff --git a/adocs.py b/adocs.py
@@ -111,16 +111,38 @@ def add_special_seasoning(cls, soup):
             # on what the user set said variable to, e.g.,
             # platform is osx.
 
-            if (previous_paragraph is not None) and (previous_paragraph.text == cls.SECTION_CHOICE_KEYWORD):
+            if ((previous_paragraph is not None) and
+                (previous_paragraph.text == cls.SECTION_CHOICE_KEYWORD)):
+
+
+                # Create a <nav> container and put a paragraph
+                # "Jump to..." inside it.
+                jump_to_nav = soup.new_tag("nav", **{'class': "jumpto"})
+                paragraph = soup.new_tag("p")
+                paragraph.string = "Jump to..."
+                jump_to_nav.append(paragraph)
+
+                list_of_options = soup.new_tag("ul")
 
                 # We're going to make each LI's contents a link
                 # to the markdown file it specifies!
                 for li in ul.find_all("li"):
                     section_name = section_id(li.string)
                     link = soup.new_tag("a", href="#%s" % section_name)
                     link.string = section_name
-                    li.string = ''
-                    li.append(link)
+
+                    new_list_item = soup.new_tag("li")
+                    new_list_item.append(link)
+
+                    list_of_options.append(new_list_item)
+
+                # we created a new list, remove the old one!
+                ul.replaceWith('')
+
+                # put everything in our nice jumpto nav
+                # container
+                jump_to_nav.append(list_of_options)
+                previous_paragraph.replaceWith(jump_to_nav)
 
     @staticmethod
     def prepend_progress_bar(soup, actual_value, maximum_value):

diff --git a/example.html b/example.html
@@ -0,0 +1,166 @@
+<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js">
+</script>
+<link href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css" rel="stylesheet"/>
+<style>
+ /* COLORS
+ *
+ * Slate Blue: #52656B
+ * Pink: #FF3B77
+ * Green: #CDFF00
+ * White: #fff
+ * Khaki: #B8B89F
+ */
+
+@import url(https://fonts.googleapis.com/css?family=Yeseva+One);
+@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans);
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  position: relative;
+}
+
+body {
+  color: #000;
+  background-color: #fff;
+  font: 400 32px/1.5 'Merriweather Sans', sans-serif;  /* total row height is 48px */
+  height: 100vh;
+  width: 100vw;
+  perspective: 600;
+}
+
+a:link,
+a:visited {
+  color: #ff3b77;
+}
+
+.next:visited,
+.next {
+  display: inline-block;
+  background-color: #cdff00;
+  color: #000;
+  text-align: center;
+  padding: 0.75rem 20px 0.75rem;
+  border-radius: 4px;
+  box-shadow: 0 5px 0 #000;
+  margin: 3rem 0 1.5rem 0;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 1.5rem 60px;
+  background-color: #b8b89f;
+}
+
+section {
+  background: #fff;
+  padding: 3rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  overflow-y: scroll;
+}
+
+section h1 {
+  color: #52656B;
+  font-size: 6rem;
+  font-family: "Yevesa One", cursive;
+  font-weight: bold;
+  line-height: 1;
+  margin-bottom: 1.5rem;
+}
+
+section p {
+  margin-top: 1.5rem;
+}
+
+section ul {
+  margin: 1.5rem 0 1.5rem 3rem;
+}
+
+section + section {
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.5s;
+}
+
+section:target {
+  visibility: visible;
+  opacity: 1;
+  transform-style: preserve-3d;
+  animation: flip 0.5s;
+}
+
+@keyframes flip {
+  from { transform: rotateY(180deg); }
+  to { transform: rotateY(0deg); }
+}
+
+pre code {
+  margin: 1.5rem 0;
+}
+</style>
+<section id="introduction">
+<progress max="3" value="1">
+</progress>
+<h1>
+ It was a dark and rainy night...
+</h1>
+<p>
+ It is dark, you're walking the streets...
+</p>
+<p>
+ NEXT_SECTION:
+</p>
+<ul>
+ <li>
+  <a href="#walk_down_alleyway">
+   walk_down_alleyway
+  </a>
+ </li>
+ <li>
+  <a href="#head_to_coffee_shop">
+   head_to_coffee_shop
+  </a>
+ </li>
+</ul>
+<a class="next" href="#walk_down_alleyway">
+ Next Section
+</a>
+</section>
+<section id="walk_down_alleyway">
+<progress max="3" value="2">
+</progress>
+<h1>
+ Walk down alleyway
+</h1>
+<p>
+ Just an alleyway... guess I'll go to the coffee shop!
+</p>
+<a class="next" href="#head_to_coffee_shop">
+ Next Section
+</a>
+</section>
+<section id="head_to_coffee_shop">
+<progress max="3" value="3">
+</progress>
+<h1>
+ Coffee Shop
+</h1>
+<p>
+ Ah, relaxing cup o' joe!
+</p>
+<p>
+ La fin!
+</p>
+</section>
+<script>
+ hljs.initHighlightingOnLoad();
+</script>
diff --git a/style.css b/style.css
@@ -1,14 +1,5 @@
-/* COLORS
- *
- * Slate Blue: #52656B
- * Pink: #FF3B77
- * Green: #CDFF00
- * White: #fff
- * Khaki: #B8B89F
- */
-
-@import url(https://fonts.googleapis.com/css?family=Yeseva+One);
 @import url(https://fonts.googleapis.com/css?family=Merriweather+Sans);
+@import url(https://fonts.googleapis.com/css?family=Merriweather:700);
 
 * {
   margin: 0;
@@ -18,7 +9,7 @@
 }
 
 body {
-  color: #000;
+  color: #333;
   background-color: #fff;
   font: 400 32px/1.5 'Merriweather Sans', sans-serif;  /* total row height is 48px */
   height: 100vh;
@@ -28,48 +19,74 @@ body {
 
 a:link,
 a:visited {
-  color: #ff3b77;
+  color: #01B0F0;
+}
+
+.jumpto {
+  margin: 3rem 20px;
+  padding: 0 20px;
+  border: 2px dotted #AEEE00;
+  display: block;
+}
+
+.jumpto p {
+  font-weight: bold;
+}
+
+.jumpto ul {
+  list-style: none;
+  margin-left: 20px;
+}
+
+.jumpto li:before {
+  content: "\0021AA ";
+  color: #FF358B;
 }
 
 .next:visited,
 .next {
   display: inline-block;
-  background-color: #cdff00;
-  color: #000;
+  background-color: #AEEE00;
   text-align: center;
   padding: 0.75rem 20px 0.75rem;
   border-radius: 4px;
-  box-shadow: 0 5px 0 #000;
+  color: #333 !important;
   margin: 3rem 0 1.5rem 0;
   font-weight: bold;
   text-decoration: none;
 }
 
-.progress {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 1.5rem 60px;
-  background-color: #b8b89f;
+progress {
+  width: 100%;
+  margin-bottom: 1.5rem;
+  opacity: 0.5;
 }
 
 section {
   background: #fff;
   padding: 3rem;
   position: absolute;
   top: 0;
-  left: 0;
   height: 100vh;
   width: 100vw;
+  margin: 0 auto;
   overflow-y: scroll;
 }
 
+section h1,
+section h2,
+section h3,
+section h4 {
+  font-family: "Merriweather", serif;
+  font-weight: 700;
+  color: #FF358B;
+  margin: 1.5rem 0;
+}
+
 section h1 {
-  color: #52656B;
   font-size: 6rem;
-  font-family: "Yevesa One", cursive;
-  font-weight: bold;
   line-height: 1;
+  margin-top: 0;
   margin-bottom: 1.5rem;
 }
 
@@ -102,3 +119,4 @@ section:target {
 pre code {
   margin: 1.5rem 0;
 }
+
diff --git a/testdocs/ORDER b/testdocs/ORDER
@@ -1,3 +1,3 @@
-getting-started.md
-notes.md
-demo.md
+introduction.md
+walk_down_alleyway.md
+head_to_coffee_shop.md
diff --git a/testdocs/demo.md b/testdocs/demo.md
diff --git a/testdocs/getting-started.md b/testdocs/getting-started.md
diff --git a/testdocs/head_to_coffee_shop.md b/testdocs/head_to_coffee_shop.md
@@ -0,0 +1,5 @@
+# Coffee Shop
+
+Ah, relaxing cup o' joe!
+
+La fin!
diff --git a/testdocs/introduction.md b/testdocs/introduction.md
@@ -0,0 +1,8 @@
+# It was a dark and rainy night...
+
+It is dark, you're walking the streets...
+
+NEXT_SECTION:
+
+  * walk_down_alleyway.md
+  * head_to_coffee_shop.md