Fix #139 -- avoid conflict between reST and hyde’s sidebar

Kwpolska · Kwpolska · commit b2dcfc6efefa · 2018-01-02T22:08:45.000+01:00
Signed-off-by: Chris Warrick &lt;kwpolska@gmail.com&gt;
diff --git a/v7/hyde/README.md b/v7/hyde/README.md
@@ -12,6 +12,8 @@ That changes the color scheme, replace 08 with one of 09, 0a, 0b, 0c, 0d, 0e, 0f
 
 You can read a tutorial about how to create/port new theme [at Nikola's site](https://getnikola.com/creating-a-theme.html)
 
+(*Note:* The `.sidebar` class was renamed to `.hsidebar` to avoid conflicts with reST.)
+
 License is MIT
 
 Known Issues:
diff --git a/v7/hyde/assets/css/hyde.css b/v7/hyde/assets/css/hyde.css
@@ -53,7 +53,7 @@ html {
  * out above content in mobile and later moves to the side with wider viewports.
  */
 
-div.sidebar, .sidebar {
+div.hsidebar, .hsidebar {
   padding: 2rem 1rem;
   color: rgba(255,255,255,.5);
   background-color: #202020;
@@ -63,7 +63,7 @@ div.sidebar, .sidebar {
 }
 
 @media (min-width: 48em) {
-div.sidebar, .sidebar {
+div.hsidebar, .hsidebar {
     position: fixed;
     text-align: left;
     top: 0;
@@ -74,7 +74,7 @@ div.sidebar, .sidebar {
 }
 
 /* Sidebar images */
-div.sidebar img, .sidebar img {
+div.hsidebar img, .hsidebar img {
   display: block;
   margin-left: auto;
   margin-right: auto;
@@ -86,7 +86,7 @@ img#logo {
 }
 
 /* Sidebar links */
-div.sidebar a, .sidebar a {
+div.hsidebar a, .hsidebar a {
   color: #fff;
 }
 
@@ -192,7 +192,7 @@ a.sidebar-nav-item:focus {
  */
 
 @media (min-width: 48em) {
-  .layout-reverse .sidebar {
+  .layout-reverse .hsidebar {
     left: auto;
     right: 0;
   }
@@ -221,7 +221,7 @@ a.sidebar-nav-item:focus {
 /* Base16 (http://chriskempson.github.io/base16/#default) */
 
 /* Red */
-.theme-base-08 .sidebar {
+.theme-base-08 .hsidebar {
   background-color: #ac4142;
 }
 .theme-base-08 .content a,
@@ -230,7 +230,7 @@ a.sidebar-nav-item:focus {
 }
 
 /* Orange */
-.theme-base-09 .sidebar {
+.theme-base-09 .hsidebar {
   background-color: #d28445;
 }
 .theme-base-09 .content a,
@@ -239,7 +239,7 @@ a.sidebar-nav-item:focus {
 }
 
 /* Yellow */
-.theme-base-0a .sidebar {
+.theme-base-0a .hsidebar {
   background-color: #f4bf75;
 }
 .theme-base-0a .content a,
@@ -248,7 +248,7 @@ a.sidebar-nav-item:focus {
 }
 
 /* Green */
-.theme-base-0b .sidebar {
+.theme-base-0b .hsidebar {
   background-color: #90a959;
 }
 .theme-base-0b .content a,
@@ -257,7 +257,7 @@ a.sidebar-nav-item:focus {
 }
 
 /* Cyan */
-.theme-base-0c .sidebar {
+.theme-base-0c .hsidebar {
   background-color: #75b5aa;
 }
 .theme-base-0c .content a,
@@ -266,7 +266,7 @@ a.sidebar-nav-item:focus {
 }
 
 /* Blue */
-.theme-base-0d .sidebar {
+.theme-base-0d .hsidebar {
   background-color: #6a9fb5;
 }
 .theme-base-0d .content a,
@@ -275,7 +275,7 @@ a.sidebar-nav-item:focus {
 }
 
 /* Magenta */
-.theme-base-0e .sidebar {
+.theme-base-0e .hsidebar {
   background-color: #aa759f;
 }
 .theme-base-0e .content a,
@@ -284,7 +284,7 @@ a.sidebar-nav-item:focus {
 }
 
 /* Brown */
-.theme-base-0f .sidebar {
+.theme-base-0f .hsidebar {
   background-color: #8f5536;
 }
 .theme-base-0f .content a,
diff --git a/v7/hyde/templates/base.tmpl b/v7/hyde/templates/base.tmpl
@@ -13,7 +13,7 @@
 <body class="{{ hyde_subtheme }}">
     <a href="#content" class="sr-only sr-only-focusable">{{ messages("Skip to main content") }}</a>
 
-    <div class="sidebar">
+    <div class="hsidebar">
         <div class="container sidebar-sticky">
             <div class="sidebar-about">
               <h1>

Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@ html {`
`53`	`53`	`* out above content in mobile and later moves to the side with wider viewports.`
`54`	`54`	`*/`
`55`	`55`
`56`		`-div.sidebar, .sidebar {`
	`56`	`+div.hsidebar, .hsidebar {`
`57`	`57`	`padding: 2rem 1rem;`
`58`	`58`	`color: rgba(255,255,255,.5);`
`59`	`59`	`background-color: #202020;`
`@@ -63,7 +63,7 @@ div.sidebar, .sidebar {`
`63`	`63`	`}`
`64`	`64`
`65`	`65`	`@media (min-width: 48em) {`
`66`		`-div.sidebar, .sidebar {`
	`66`	`+div.hsidebar, .hsidebar {`
`67`	`67`	`position: fixed;`
`68`	`68`	`text-align: left;`
`69`	`69`	`top: 0;`
`@@ -74,7 +74,7 @@ div.sidebar, .sidebar {`
`74`	`74`	`}`
`75`	`75`
`76`	`76`	`/* Sidebar images */`
`77`		`-div.sidebar img, .sidebar img {`
	`77`	`+div.hsidebar img, .hsidebar img {`
`78`	`78`	`display: block;`
`79`	`79`	`margin-left: auto;`
`80`	`80`	`margin-right: auto;`
`@@ -86,7 +86,7 @@ img#logo {`
`86`	`86`	`}`
`87`	`87`
`88`	`88`	`/* Sidebar links */`
`89`		`-div.sidebar a, .sidebar a {`
	`89`	`+div.hsidebar a, .hsidebar a {`
`90`	`90`	`color: #fff;`
`91`	`91`	`}`
`92`	`92`
`@@ -192,7 +192,7 @@ a.sidebar-nav-item:focus {`
`192`	`192`	`*/`
`193`	`193`
`194`	`194`	`@media (min-width: 48em) {`
`195`		`- .layout-reverse .sidebar {`
	`195`	`+ .layout-reverse .hsidebar {`
`196`	`196`	`left: auto;`
`197`	`197`	`right: 0;`
`198`	`198`	`}`
`@@ -221,7 +221,7 @@ a.sidebar-nav-item:focus {`
`221`	`221`	`/* Base16 (http://chriskempson.github.io/base16/#default) */`
`222`	`222`
`223`	`223`	`/* Red */`
`224`		`-.theme-base-08 .sidebar {`
	`224`	`+.theme-base-08 .hsidebar {`
`225`	`225`	`background-color: #ac4142;`
`226`	`226`	`}`
`227`	`227`	`.theme-base-08 .content a,`
`@@ -230,7 +230,7 @@ a.sidebar-nav-item:focus {`
`230`	`230`	`}`
`231`	`231`
`232`	`232`	`/* Orange */`
`233`		`-.theme-base-09 .sidebar {`
	`233`	`+.theme-base-09 .hsidebar {`
`234`	`234`	`background-color: #d28445;`
`235`	`235`	`}`
`236`	`236`	`.theme-base-09 .content a,`
`@@ -239,7 +239,7 @@ a.sidebar-nav-item:focus {`
`239`	`239`	`}`
`240`	`240`
`241`	`241`	`/* Yellow */`
`242`		`-.theme-base-0a .sidebar {`
	`242`	`+.theme-base-0a .hsidebar {`
`243`	`243`	`background-color: #f4bf75;`
`244`	`244`	`}`
`245`	`245`	`.theme-base-0a .content a,`
`@@ -248,7 +248,7 @@ a.sidebar-nav-item:focus {`
`248`	`248`	`}`
`249`	`249`
`250`	`250`	`/* Green */`
`251`		`-.theme-base-0b .sidebar {`
	`251`	`+.theme-base-0b .hsidebar {`
`252`	`252`	`background-color: #90a959;`
`253`	`253`	`}`
`254`	`254`	`.theme-base-0b .content a,`
`@@ -257,7 +257,7 @@ a.sidebar-nav-item:focus {`
`257`	`257`	`}`
`258`	`258`
`259`	`259`	`/* Cyan */`
`260`		`-.theme-base-0c .sidebar {`
	`260`	`+.theme-base-0c .hsidebar {`
`261`	`261`	`background-color: #75b5aa;`
`262`	`262`	`}`
`263`	`263`	`.theme-base-0c .content a,`
`@@ -266,7 +266,7 @@ a.sidebar-nav-item:focus {`
`266`	`266`	`}`
`267`	`267`
`268`	`268`	`/* Blue */`
`269`		`-.theme-base-0d .sidebar {`
	`269`	`+.theme-base-0d .hsidebar {`
`270`	`270`	`background-color: #6a9fb5;`
`271`	`271`	`}`
`272`	`272`	`.theme-base-0d .content a,`
`@@ -275,7 +275,7 @@ a.sidebar-nav-item:focus {`
`275`	`275`	`}`
`276`	`276`
`277`	`277`	`/* Magenta */`
`278`		`-.theme-base-0e .sidebar {`
	`278`	`+.theme-base-0e .hsidebar {`
`279`	`279`	`background-color: #aa759f;`
`280`	`280`	`}`
`281`	`281`	`.theme-base-0e .content a,`
`@@ -284,7 +284,7 @@ a.sidebar-nav-item:focus {`
`284`	`284`	`}`
`285`	`285`
`286`	`286`	`/* Brown */`
`287`		`-.theme-base-0f .sidebar {`
	`287`	`+.theme-base-0f .hsidebar {`
`288`	`288`	`background-color: #8f5536;`
`289`	`289`	`}`
`290`	`290`	`.theme-base-0f .content a,`