Added desktop stylings for content, sidebar navigation, and breadcrumbs

assets/style/bioconductor-v2.css

@@ -9,3 +9,58 @@ body {
   width: calc(100% - 3rem);
   max-width: 1400px;
 }
+
+main > .container {
+  display: grid;
+  gap: 2rem;
+  grid-template-areas:
+    "left-col .";
+}
+
+.left-col {
+  grid-area: left-col;
+}
+
+nav.subnav {
+  border-radius: 0.5rem;
+  border: 1px solid var(--primary-p75);
+  padding: 0.5rem;
+}
+
+nav.subnav a {
+  text-decoration: underline;
+  display: block;
+  padding: 0.5rem;
+  padding-bottom: 0.75rem;
+  color: black;
+}
+
+nav.subnav a::after {
+  content: " >";
+  padding-left: 0.75rem;
+  float: right;
+}
+
+.breadcrumbs {
+  list-style-type: none;
+  display: flex;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  line-height: 1.3rem;
+}
+
+.breadcrumbs li:not(:first-of-type) {
+  background-image: url("/images/chevron_right.svg");
+  background-repeat: no-repeat;
+  padding-left: 1.625rem; /* make space for the background image */
+}
+
+.breadcrumbs li:last-of-type {
+  font-weight: bold;
+}
+
+.breadcrumbs a {
+  color: var(--neutral-n400);
+  text-decoration: none;
+}

assets/style/bioconductor.css

@@ -180,39 +180,6 @@ div#PageContent.WithRightRail {
   padding-left: 12px;
 }
 
-/* PageBreadcrumbs contains the page's breadcrumb trail. it lives
-   nested within PageContent in order to flow correctly when
-   breadcrumbs wrap to a second line. we use a background image
-   in order to create the little arrows between elements. */
-#PageBreadcrumbs {
-  padding: 0 0 2em 0; /*border:1px orange solid;*/
-}
-.PageBreadcrumbs {
-  font-family: Helvetica, Arial, Verdana, Sans-serif;
-  font-size: 110%;
-}
-.PageBreadcrumbs ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-.PageBreadcrumbs ul li {
-  display: inline;
-  padding-left: 0.3em;
-  background-image: none;
-}
-.PageBreadcrumbs a,
-.PageBreadcrumbs a:visited {
-  color: #000000;
-  padding-right: 1em;
-  background-image: url(../images/breadcrumb_arrow.gif);
-  background-position: center right;
-  background-repeat: no-repeat;
-}
-.PageBreadcrumbs a:hover {
-  color: #888888;
-}
-
 /* PageInternalLinksMenu contains any links to intra-page anchors
    (i.e., jumps down this page)  */
 .PageInternalLinksMenu ul {
@@ -232,77 +199,6 @@ div#PageContent.WithRightRail {
   white-space: nowrap;
 }
 
-/* RightRail is the right-hand column on some pages. it is a sibling
-   to PageContent. when used, you must add WithRightRail class to the
-   PageContent div in order to save space for RightRail. */
-#RightRail {
-  /* width is 280px or 27%. adjust in concert with width of
-     PageContent.WithRightRail */
-  width: 280px;
-  padding: 140px 20px 0 10px;
-  float: right;
-  background-image: url(../images/rightrail_fade.jpg);
-  background-position: top left;
-  background-repeat: no-repeat;
-  /* fade ends at just under 560px, so make column at least that high
-     to avoid an edge */
-  min-height: 560px;
-  /*border:1px purple solid;*/
-}
-.RightRail {
-  font-family: Verdana, Arial, Helvetica, Sans-serif;
-  font-size: 70%;
-  line-height: 1.3em;
-} /* line-height matches that of .PageContent */
-.RightRail a {
-  color: #1a81c2;
-}
-.RightRail a:visited {
-  color: #1a81c2;
-}
-.RightRail a:hover {
-  color: #4c94c2;
-}
-p.rightrail_header {
-  font-size: 130%;
-  color: #87b13f;
-  font-weight: bold;
-  padding: 0;
-  margin-bottom: 1em;
-}
-
-/* ul lists in right rail are generally pleasing using the
-   background-image trick */
-.RightRail ul {
-  list-style-type: none;
-  padding: 0;
-  margin-top: 0em;
-  margin-bottom: 1em;
-}
-.RightRail ul li {
-  background-image: url(../images/list_bullet_bare.gif);
-  background-position: 0 0.5em;
-  background-repeat: no-repeat;
-  padding-left: 12px;
-}
-
-/* "interior" navigation menu, usually within the RightRail,
-   a simple ul-listing */
-ul.section_nav {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  padding-left: 1em;
-}
-ul.section_nav li {
-  padding-bottom: 1em;
-  font-size: 120%;
-  background-image: url(../images/list_bullet_bare.gif);
-  background-position: 0 0.5em;
-  background-repeat: no-repeat;
-  padding-left: 12px;
-}
-
 /* SiteGlobalFooter is the olive box at page bottom which
    contains global site navigation elements, copyright and logos */
 #SiteGlobalFooter {

layouts/components/breadcrumbs.html

@@ -0,0 +1,16 @@
+<ul class="breadcrumbs">
+    <% crumbs = get_updated_breadcrumbs(breadcrumbs_trail, item) %>
+    <% crumbs.each_with_index do |crumb, i| %>
+    <% next unless crumb %>
+      <% if (i + 1 < crumbs.length) %>
+	  	<% 
+			crumb_id = crumb.identifier.to_s.dup
+			crumb_id = "/packages/release/BiocViews.html" if crumb_id == "/packages/"
+			crumb_id.sub!(/BiocViews\.html\/$/, "BiocViews.html")
+		%>
+        <li><a href="<%= crumb_id %>"><%= crumb.attributes[:title] %></a></li>
+      <% else %>
+        <li><%= crumb.attributes[:title] %></li>
+      <% end %>
+    <% end %>
+</ul>

layouts/components/subnav.html

@@ -0,0 +1,13 @@
+<% if @item.attributes.include? :suppress_subnav and @item[:suppress_subnav] == true %>
+<% elsif @pages.length > 0 %>
+    <nav class="subnav">
+      <% @pages.sort{|a, b| a[:title] <=> b[:title]}.select do |p| %>
+        <a href="<%= p.identifier %>"><%= p[:title] %></a>
+      <% end %>
+    </nav>
+<% end %>
+<% if (@item[:subnav].kind_of? Array) %>
+  <% @item[:subnav].each do |s| %>
+    <%= render(s[:include].to_s) %>
+  <% end %>
+<% end %>

layouts/default.html

@@ -9,14 +9,10 @@
     <main>
       <div class='container'>
         <% if @item[:hero] %>
-          <%= render(@item[:hero]) %>
+          <section class='hero'><%= render(@item[:hero]) %></section>
         <%end%>
-
-      	<% if (@item.identifier != '/') %>
-      	  <%= render("/_crumbs/") %>
-      	<% end %>
 
-       <% if @item.attributes.has_key?(:package_index_page) %>
+        <% if @item.attributes.has_key?(:package_index_page) %>
           <%= render("/_pkg_idx/", :info => @item.attributes) %>
         <% end %>
 
@@ -25,10 +21,16 @@
         <% end %>
 
        	<% if has_subnav?(@item) %>
-          <nav id="subnav"><%= render("/_subnav/", :pages => subnav_items(@item)) %></nav>
+        <section class='left-col'><%= render("/components/subnav/", :pages => subnav_items(@item)) %></section>
       	<% end %>
 
-        <%= yield if block_given? %>
+        <section class='content'>
+      	  <% if (@item.identifier != '/') %>
+      	    <%= render("/components/breadcrumbs/") %>
+        	<% end %>
+
+          <%= yield if block_given? %>
+        </section>
       </main>
 
       <%= render("/_footer/") %>