Website Redesign (#344)

* Desktop version

* Mobile adjustments

book/style.css

@@ -6,12 +6,15 @@
   --fw-bold: 800;
   --f-lh: 28px;
   --c-black: #282828;
+  --c-black-background: #1c1819;
   --fs-xxxl: 32px;
   --fs-xxl: 26px;
   --fs-xl: 24px;
   --fs-l: 22px;
   --fs-m: 16px;
   --padding-hamburger: 5px;
+  --c-beige: #F3EDE6;
+  --border-radius: 7px;
 }
 
 @media (min-width: 1200px){
@@ -38,6 +41,7 @@ body{
   font-family: var(--ff-sans);
   font-weight: var(--fw-regular);
   font-size: var(--fs-m);
+  color: var(--c-black);
 }
 
 @media screen and (min-width: 57rem) {
@@ -60,7 +64,6 @@ body{
 /* ****************** */
 
 main.main-content,main.titlepage,div.footnotes{
-  padding:1rem;
 }
 
 .permalink {
@@ -144,7 +147,7 @@ nav.TOC a, nav.TOC a:visited{
 
 
 body{
-  background-color: var(--c-black);
+  background-color: var(--c-beige);
 }
 
 a {
@@ -174,6 +177,7 @@ figure.texsource, figure.shellcommand, figure.htmlsource, figure.luasource, figu
 
 .main-content {
   line-height: var(--f-lh);
+  margin-left: 30px;
 }
 
 div.footnotes {
@@ -229,6 +233,7 @@ figcaption.caption {
   list-style: none;
   margin: 0;
   padding: 0;
+  width: 300px;
 }
 
 .menu-items .chapterToc, .menu-items .likechapterToc {
@@ -331,7 +336,7 @@ div.center {
   margin-right: 0 !important;
 }
 
-main.titlepage h2.chapterHead {
+main.main-content h2.chapterHead, main.main-content h2.likechapterHead {
   margin-top: 0px;
 }
 
@@ -379,3 +384,205 @@ h4 {
   max-width: 100%;
   margin-top: 1em;
 }
+
+img[alt~="PIC"], iframe, a img {
+  border-radius: var(--border-radius);
+  border: 2px solid var(--c-black);
+}
+
+main.main-content, div.footnotes, main.titlepage {
+  background-color: var(--c-beige);
+}
+
+.main-content {
+  flex: 1;
+}
+
+.wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.header {
+  background-color: var(--c-black-background);
+  width: 100%;
+  height: 340px;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 40px;
+}
+
+.header img {
+  border-radius: 0px;
+  border: none;
+  width: 710px;
+}
+
+body {
+  display: block;
+}
+
+.book-content {
+  display: flex;
+  padding: 0px 40px;
+  max-width: 1200px;
+}
+
+.TOC.menu {
+  width: 330px;
+}
+
+.main-content {
+  width: 100%;
+  margin-bottom: 40px;
+}
+
+nav.TOC, nav.TOC a, nav.TOC a:visited {
+  background-color: transparent;
+  color: var(--c-black);
+}
+
+.menu-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.menu-inner {
+  border: 2px solid var(--c-black);
+  border-radius: var(--border-radius);
+  width: 100%;
+}
+
+.menu-entry {
+  padding: 1px;
+  border-radius: var(--border-radius);
+}
+
+.menu-arrow {
+  width: 14px;
+  border: none;
+  border-radius: 0px;
+}
+
+nav.TOC span:hover, nav.TOC span:hover *, nav.TOC span.chapterToc.selected, nav.TOC span.chapterToc.selected a {
+  background-color: transparent;
+}
+
+.menu-entry:hover {
+  background-color: #c8c8c8;
+}
+
+p.flowchart-image-wrapper {
+  background: white;
+  padding: 20px;
+}
+
+.menu-items .menu-group:last-of-type .menu-arrow {
+  display: none;
+}
+
+blockquote {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
+.crosslinks-bottom {
+  margin-top: 1em;
+}
+
+.crosslinks-bottom a {
+  display: inline-block;
+  border-radius: var(--border-radius);
+  border: 2px solid var(--c-black);
+  color: var(--c-black);
+  padding: 4px;
+  font-weight: bold;
+  text-decoration: none;
+}
+.crosslinks-bottom a.prev {
+  margin-right: 7px;
+}
+
+.crosslinks-bottom a:hover {
+  color: #444;
+}
+
+.menu-group.selected .menu-inner {
+  background-color: #c8c8c8;
+}
+
+.TOC.menu {
+  margin-bottom: 40px;
+}
+
+.mobile-banner {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .header {
+    display: none;
+  }
+
+  .book-content {
+    padding: 0px;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .main-content {
+    width: 100%;
+    margin-left: 0px;
+    box-sizing: border-box;
+    padding: 0px 14px;
+    margin-top: 20px;
+    max-width: 100%;
+  }
+
+  .TOC.menu {
+    width: 100%;
+    max-width: 100%;
+    background: var(--c-black-background);
+    box-sizing: border-box;
+  }
+
+  nav.TOC, nav.TOC a, nav.TOC a:visited {
+    color: #fff;
+  }
+  .menu-arrow {
+    display: none;
+  }
+
+  .menu-inner {
+    border: none;
+    border-radius: 0px;
+  }
+
+  .menu-group.selected .menu-inner {
+    background: var(--c-black-background);
+  }
+
+  p.flowchart-image-wrapper {
+    padding: 0px;
+  }
+
+  .menu-entry:hover {
+    background-color: transparent;
+  }
+
+  .TOC.menu {
+    margin-bottom: 0px;
+  }
+
+  .mobile-banner {
+    display: block;
+    background-color: var(--c-black-background);
+    padding: 5px;
+  }
+}

website/modify_build.rb

@@ -52,20 +52,26 @@ class ModifyBuild
     text = fix_titles(text)
     text = fix_menu(text)
     text = fix_cover_page(text) if is_cover_page?(filename)
+    text = add_header_banner(text)
     text = add_home_link_to_menu(text)
     text = fix_anchor_hyperlinks_menu(text)
     text = add_favicon(text)
     text = add_meta_tags(text, filename)
     text = remove_section_table_of_contents(text)
-    text = mark_menu_as_selected_if_on_page(text, extract_file_from_path(filename))
     text = add_canonical_for_duplicates(text, extract_file_from_path(filename))
     text = include_javascript(text)
     text = add_text_to_coverpage(text, extract_file_from_path(filename))
     text = fix_js_dependency_link(text)
     text = fix_list_of_tables_figures_duplicates(text)
     text = add_anchors_to_headers(text)
-    text = fix_https_links(text)
+    text = create_menu_groups(text)
+    text = fix_top_links(text)
+    text = fix_flowchart_background(text)
+    text = remove_empty_menu_links(text)
+    text = fix_bottom_cross_links(text)
+    text = insert_mobile_header_graphic(text)
     text = add_anchors_to_glossary_items(text) if is_glossary_page?(filename)
+    text = mark_menu_as_selected_if_on_page(text, extract_file_from_path(filename))
     text = fix_menus_list_figures_tables(text) if is_list_figures_tables?(filename)
     text = fix_list_of_figures_tables_display(text) if is_list_figures_tables?(filename)
     File.open(filename, "w:UTF-8") {|file| file.puts text }
@@ -152,6 +158,45 @@ class ModifyBuild
     doc.to_html
   end
 
+  def create_menu_groups(text)
+    doc = build_doc(text)
+    groups = build_groups(doc.css(".menu-items > span"))
+    menu_el = doc.css(".menu-items")[0]
+    html = ""
+    groups.each do |group|
+      out = ""
+      group.each do |g|
+        if g.to_html.length > 0
+          out += %Q{<div class="menu-entry">#{g.to_html}</div>}
+        end
+      end
+      html += %Q{<div class="menu-group">
+        <div class="menu-inner">
+          #{out}
+        </div>
+        <img class="menu-arrow" src="arrow.png" />
+      </div>}
+    end
+    menu_el.inner_html = html
+    doc.to_html
+  end
+
+  def build_groups(menu_items)
+    final_groups = []
+    tmp_groups = []
+    menu_items.each_with_index do |el, index|
+      # Get next item and check if it is a lower entry level in the menu.
+      next_item = menu_items[index + 1]
+      if next_item && next_item["class"].include?("chapterToc") || next_item.nil?
+        final_groups.push(tmp_groups.push(el))
+        tmp_groups = []
+      else
+        tmp_groups.push(el)
+      end
+    end
+    final_groups
+  end
+
   # By default the titles look boring. This changes the titles of all the
   # pages and adds the book name as appendix
   def fix_titles(text)
@@ -237,7 +282,7 @@ class ModifyBuild
     content = doc.css("body > .main-content")[0]
     menu = doc.css("body > nav")[0]
     content = %Q{
-      <main class="titlepage">
+      <main class="titlepage main-content">
         <a href="Thehistoryofsourdough.html">
           <img src="cover-page.jpg" />
           <div class="version"><p>#{version}</p></div>
@@ -257,7 +302,7 @@ class ModifyBuild
     menu = doc.css(".menu-items")[0]
     return text if menu.nil?
 
-    home_html = %Q{<span class="chapterToc home-link"><a href="/">The Sourdough Framework</a></span>}
+    home_html = %Q{<span class="chapterToc home-link"><a href="/">🍞 The Sourdough Framework</a></span>}
     # Normally the flowcharts link should be automatically added, but there
     # seems to be a problem in the generation. See:
     # https://github.com/hendricius/the-sourdough-framework/pull/188 for more
@@ -268,12 +313,12 @@ class ModifyBuild
           <span class="link_text">List of Flowcharts</span>
         </a>
       </span>
-      <span class="chapterToc">
+      <span class="chapterToc listtables-menu">
         <a href="listtablename.html">
           <span class="link_text">List of Tables</span>
         </a>
       </span>
-      <span class="chapterToc">
+      <span class="chapterToc listfigures-menu">
         <a href="listfigurename.html">
           <span class="link_text">List of Figures</span>
         </a>
@@ -310,7 +355,7 @@ class ModifyBuild
       <span class="chapterToc">
         <a href="https://breadco.de/kofi">
           <span class="chapter_number">⭐️</span>
-          <span class="link_text">Donate</span>
+          <span class="link_text">Support me</span>
         </a>
       </span>
     }
@@ -318,6 +363,38 @@ class ModifyBuild
     doc.to_html
   end
 
+  # Adds a header banner to each page
+  def add_header_banner(text)
+    doc = build_doc(text)
+    body = doc.css("body")[0]
+    footnotes = doc.css(".footnotes")[0]
+    main = doc.css(".main-content")[0]
+    menu = doc.css(".menu")[0]
+    if main.nil? || menu.nil?
+      #raise ArgumentError.new("Don't know how to handle")
+      return doc.to_html
+    end
+    body.inner_html = %Q{
+      <div class='wrapper'>
+        #{build_header_html}
+        <div class='book-content'>
+          #{menu.to_html}
+          <main class='main-content'>
+            #{main.inner_html}
+            #{footnotes ? footnotes.to_html : ''}
+          </main>
+        </div>
+      </div>
+    }
+    return doc.to_html
+  end
+
+  def build_header_html
+    %Q{
+      <div class="header"><img src="banner.png"></div>
+    }
+  end
+
   # Some of the menu links are added in the wrong order. Remove them since we
   # later on add them in the structure that we want.
   def remove_duplicate_entries_menu(text)
@@ -441,7 +518,6 @@ class ModifyBuild
 
   def mark_menu_as_selected_if_on_page(text, filename)
     doc = build_doc(text)
-    return doc.to_html
 
     selected = doc.css(".menu-items .chapterToc > a").find do |el|
       el["href"] == ""
@@ -456,7 +532,17 @@ class ModifyBuild
     # Special case for the flowcharts page which is added by us to the menu.
     # This needs to be done for future manually added pages too
     if "listoflocname.html" == filename
-      doc.css(".menu-items .chapterToc.flowcharts-menu")[0].add_class("selected")
+      doc.css(".menu-items .chapterToc.flowcharts-menu")[0].ancestors(".menu-group")[0].add_class("selected")
+      return doc.to_html
+    end
+
+    if "listtablename.html" == filename
+      doc.css(".menu-items .chapterToc.listtables-menu")[0].ancestors(".menu-group")[0].add_class("selected")
+      return doc.to_html
+    end
+
+    if "listfigurename.html" == filename
+      doc.css(".menu-items .chapterToc.listfigures-menu")[0].ancestors(".menu-group")[0].add_class("selected")
       return doc.to_html
     end
 
@@ -465,7 +551,7 @@ class ModifyBuild
     # Fix that when the menu is selected the href is empty. This way users can
     # click the menu and the page will reload.
     selected["href"] = filename
-    selected.parent.add_class("selected")
+    selected.ancestors(".menu-group")[0].add_class("selected")
     doc.to_html
   end
 
@@ -496,10 +582,7 @@ class ModifyBuild
   def add_text_to_coverpage(text, filename)
     return text unless is_cover_page?(filename)
     doc = build_doc(text)
-    content = doc.css(".titlepage")[0]
+    content = doc.css(".main-content")[0]
-    raise ArgumentError.new(".titlepage not found in HTML") if content.nil?
-
-    content.add_class("main-content")
     content.inner_html = "#{build_cover_page_content} #{content.inner_html}"
     doc.to_html
   end
@@ -627,13 +710,10 @@ class ModifyBuild
   # this.
   def fix_menus_list_figures_tables(text)
     doc = build_doc(text)
-    content = doc.css(".menu-items > .subsectionToc, .menu-items > .sectionToc")
+    content = doc.css(".menu-group .subsectionToc, .menu-group .sectionToc")
     content.each do |node|
-      node.remove
+      node.ancestors(".menu-entry")[0].remove
     end
-    doc.css(".menu-items > .lotToc").each(&:remove)
-    doc.css(".menu-items > .lofToc").each(&:remove)
-    doc.css(".menu-items > br").each(&:remove)
     doc.to_html
   end
 
@@ -673,6 +753,63 @@ class ModifyBuild
   def fix_https_links(text)
     text.gsub(/https:\/(?!\/)/, 'https://')
   end
+
+  def fix_top_links(text)
+    doc = build_doc(text)
+    el = doc.css(".crosslinks-top")[0]
+    el.remove if el
+    doc.to_html
+  end
+
+  def remove_empty_menu_links(text)
+    doc = build_doc(text)
+    menus = doc.css(".menu-group")
+    menus.each do |m|
+      element = m.css("span.chapterToc")[0]
+      next unless element
+      if element.inner_html == "" || element.inner_html == " "
+        m.remove
+      end
+    end
+    doc.to_html
+  end
+
+  def insert_mobile_header_graphic(text)
+    doc = build_doc(text)
+    content = doc.css(".TOC.menu")[0]
+    content.after('<div class="mobile-banner"><img src="banner.png" /></div>')
+    doc.to_html
+  end
+
+  def fix_flowchart_background(text)
+    doc = build_doc(text)
+    images = doc.css("img")
+    images.each do |img|
+      src = img.attr("src")
+      is_flowchart = src.include?(".svg")
+      next unless is_flowchart
+      img.parent.add_class("flowchart-image-wrapper")
+
+    end
+    doc.to_html
+  end
+
+  def fix_bottom_cross_links(text)
+    doc = build_doc(text)
+    link_cont = doc.css(".crosslinks-bottom")[0]
+    return doc.to_html unless link_cont
+
+    links = doc.css(".crosslinks-bottom a")
+    prev_link = links.find {|l| l.inner_html == "prev" }
+    next_link = links.find {|l| l.inner_html == "next" }
+    prev_html = prev_link ? "<a class='prev' href='#{prev_link.attr('href')}'>Previous page</a>" : ''
+    next_html = next_link ? "<a class='next' href='#{next_link.attr('href')}'>Next page</a>" : ''
+    link_cont.inner_html = %Q{
+      #{prev_html}
+      #{next_html}
+    }
+    doc.to_html
+  end
 end
 
 ModifyBuild.build