Migrate to bootstrap4

Signed-off-by: Chris Warrick <kwpolska@gmail.com>
getnikola · Apr 22, 2018 · 1d592dc · 1d592dc
1 parent 84e34af
commit 1d592dc
Show file tree

Hide file tree

Showing 8 changed files with 8,671 additions and 6,091 deletions.
diff --git a/site/files/assets/css/custom.css b/site/files/assets/css/custom.css
@@ -1,3 +1,7 @@
+body {
+    color: #212529;
+}
+
 ul.bricks {
     text-align: justify;
 }
@@ -19,8 +23,8 @@ blockquote p, blockquote, p {
 
 .previous a,.next a{border-radius:4px}
 
-.navbar-inverse .navbar-nav > li > a {
-    color: #cccfd5;
+.navbar-brand {
+    padding: 0;
 }
 
 .navbar-brand #logo {
@@ -74,13 +78,16 @@ a.feature-link:hover {
 
 pre.gs-console {
     background: #272822;
-    color: #f8f8f2
+    color: #f8f8f2;
+    font-size: 12px;
 }
 
 code.gs-code {
     background: #272822;
     color: #f8f8f2;
     white-space: nowrap;
+    padding: 2px 4px;
+    border-radius: 4px;
 }
 
 .gs-command, code.gs-command {
@@ -95,6 +102,32 @@ code.gs-code {
     color: #a6e22e;
 }
 
+.gs-right-col .gs-console {
+    -webkit-position: sticky;
+    position: sticky;
+    top: 10px;
+}
+
+@media (max-width: 767px) {
+    .gs-left-col {
+        padding-left: 0;
+        padding-right: 0;
+    }
+    .gs-right-col {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
+@media (min-width: 768px) {
+    .gs-left-col {
+        padding-left: 0;
+    }
+    .gs-right-col {
+        padding-right: 0;
+    }
+}
+
 /* from bootstrap docs.css*/
 @media (min-width: 992px) {
   /* Widen the fixed sidebar */
@@ -125,3 +158,33 @@ code.gs-code {
     max-height: 80vh;
     width: auto;
 }
+
+/* Header permalinks */
+h1:hover .headerlink, h2:hover .headerlink,
+h3:hover .headerlink, h4:hover .headerlink,
+h5:hover .headerlink, h6:hover .headerlink {
+    display: inline;
+}
+
+.headerlink {
+    display: none;
+    color: #ddd;
+    margin-left: 0.2em;
+    padding: 0 0.2em;
+}
+
+.headerlink:hover {
+    opacity: 1;
+    background: #ddd;
+    color: #000;
+    text-decoration: none;
+}
+
+.forkme {
+    position: absolute;
+    top: 66px;
+    right: 0;
+    border: 0;
+    z-index: 9999;
+}
+
diff --git a/site/templates/base.tmpl b/site/templates/base.tmpl
diff --git a/site/templates/theme.tmpl b/site/templates/theme.tmpl
@@ -39,9 +39,9 @@
     </header>
     <div class="e-content entry-content" itemprop="articleBody text">
     % if post.meta('is_special_entry'):
-    <div class="well well-sm">This theme is built-in (Nikola v${post.meta('dirver')})</div>
+    <div class="card bg-light border-primary mb-2"><div class="card-body">This theme is built-in (Nikola v${post.meta('dirver')})</div></div>
     % else:
-    <div class="well well-sm">To install, run <code>nikola theme -i ${post.meta('slug')}</code></div>
+    <div class="card bg-light border-primary mb-2"><div class="card-body">To install, run <kbd>nikola theme -i ${post.meta('slug')}</kbd></div></div>
     % endif
     <div class="thumbnail demo-thumbnail">
       <a href="${post.meta('demo_link')}"><img src="${post.meta('previewimage')}" alt="Screenshot of ${post.meta('title')}" title="See demo of theme ${post.meta('title')}"><p class="demo-thumbnail-link">See demo</p></a>
@@ -75,11 +75,11 @@
         % endif
     % endif
     <h3>Theme inheritance chain</h3>
-    <ul class="breadcrumb">
+    <ol class="breadcrumb">
         % for i in post.meta('chain'):
-        <li><a href="../${i}/">${i}</a></li>
+        <li class="breadcrumb-item"><a href="../${i}/">${i}</a></li>
         % endfor
-    </ul>
+    </ol>
     </div>
     ${helper.mathjax_script(post)}
 </article>

diff --git a/site/templates/theme_list.tmpl b/site/templates/theme_list.tmpl
@@ -6,15 +6,19 @@
         % for post in posts:
         % if post.meta('family_head'):
             <div class="col-sm-6 col-md-4">
-                <div class="thumbnail post-list-item">
+                <div class="card post-list-item" style="margin-bottom: 30px;">
+                <a href="${post.permalink(lang)}">
+                    <img class="card-img-top" src="${post.meta('previewimage_thumbnail')}" style="max-width: 100%;">
+                </a>
+                <div class="card-body">
+                <h2>
                 <a href="${post.permalink(lang)}">
-                    <img src="${post.meta('previewimage_thumbnail')}">
                     % if post.meta('multiver'):
-                    <h2><span class="text-muted">v${post.meta('dirver')}/</span>${post.title(lang)|h}</h2>
-                    % else:
-                    <h2>${post.title(lang)|h}</h2>
+                    <span class="text-muted">v${post.meta('dirver')}/</span>
                     % endif
+                    ${post.title(lang)|h}
                 </a>
+                </h2>
                 <div class="theme-versions-index metadata">
                 % if post.meta('family_mako_version'):
                 <p class="makoversionline"><a href="${_link('slug', post.meta('family_mako_version'), lang)}">Mako</a></p>
@@ -27,6 +31,7 @@
                 % endif
                 </div>
                 </div>
+                </div>
             </div>
         % endif
         % endfor

diff --git a/site/themes/bootstrap3 b/site/themes/bootstrap3
@@ -1 +1 @@
-../../v8/bootstrap3
+../v8/bootstrap3